Merge pull request #119 from M3nin0/dev

table: reviewing themes from thematic tables

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geo-knowledge-hub/geo-components-react",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "main": "dist/cjs/index.js",
   "browser": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

src/lib/components/list/thematic/index.js

@@ -8,4 +8,3 @@
 
 export { LatestEvents } from './LatestEvents';
 export { LatestRecords } from './LatestRecords';
-export { MoreLikeThisRecords } from './MoreLikeThisRecords';

src/lib/components/table/base/BaseTable.js

@@ -23,30 +23,34 @@ export const BaseTable = ({
   getTableProps,
   getTableBodyProps,
   globalFilter,
+  showHeader,
   ...uiProps
 }) => {
   return (
     <Table {...uiProps} {...getTableProps()}>
-      <Table.Header>
-        <Table.Row>
-          {columns.map((column) => (
-            <Table.HeaderCell
-              sorted={
-                column.isSorted
-                  ? column.isSortedDesc
-                    ? 'descending'
-                    : 'ascending'
-                  : null
-              }
-              {...column.getHeaderProps(
-                column.getSortByToggleProps ? column.getSortByToggleProps() : {}
-              )}
-            >
-              {column.render('Header')}
-            </Table.HeaderCell>
-          ))}
-        </Table.Row>
-      </Table.Header>
+
+      {showHeader && (
+        <Table.Header>
+          <Table.Row>
+            {columns.map((column) => (
+              <Table.HeaderCell
+                sorted={
+                  column.isSorted
+                    ? column.isSortedDesc
+                      ? 'descending'
+                      : 'ascending'
+                    : null
+                }
+                {...column.getHeaderProps(
+                  column.getSortByToggleProps ? column.getSortByToggleProps() : {}
+                )}
+              >
+                {column.render('Header')}
+              </Table.HeaderCell>
+            ))}
+          </Table.Row>
+        </Table.Header>
+      )}
 
       {globalFilter && (
         <Table.Row>
@@ -82,5 +86,10 @@ BaseTable.propTypes = {
   prepareRow: PropTypes.func,
   getTableProps: PropTypes.func,
   getTableBodyProps: PropTypes.func,
+  showHeader: PropTypes.bool,
   uiProps: PropTypes.object,
 };
+
+BaseTable.defaultProps = {
+  showHeader: true
+};

src/lib/components/table/moldure/PaginableTable.js

@@ -32,6 +32,10 @@ export const PaginableTable = ({
   initialState,
   ...uiProps
 }) => {
+  const pageSizeSorted = pageSizes.sort((a, b) => {
+    return a - b;
+  });
+
   const {
     getTableProps,
     getTableBodyProps,
@@ -44,23 +48,26 @@ export const PaginableTable = ({
     state: { pageSize, globalFilter },
     preGlobalFilteredRows,
     setGlobalFilter,
-    visibleColumns,
+    visibleColumns
   } = useTable(
     {
       columns: columnsConfiguration,
       data: data,
-      initialState: { pageIndex: 0, pageSize: pageSizes[0], ...initialState },
+      initialState: { pageIndex: 0, pageSize: pageSizeSorted[0], ...initialState },
     },
     useGlobalFilter,
     useSortBy,
     usePagination
   );
 
+  // Number of elements to control what will be rendered (e.g., pagination)
+  const isPaginationRequired = data.length > pageSizeSorted[0];
+
   // Checking for global filters
   let globalFilterComponent = null;
   let { globalFilter: globalFilterFnc } = uiProps;
 
-  if (globalFilterFnc) {
+  if (globalFilterFnc && isPaginationRequired) {
     globalFilterComponent = globalFilterFnc(
       globalFilter,
       preGlobalFilteredRows,
@@ -76,45 +83,49 @@ export const PaginableTable = ({
         prepareRow={prepareRow}
         getTableProps={getTableProps}
         getTableBodyProps={getTableBodyProps}
-        selectable={true}
+        selectable={false}
         sortable={true}
         {...{ ...uiProps, globalFilter: globalFilterComponent }}
       />
-      <Grid>
-        <Grid.Column>
-          <Dropdown
-            item
-            simple
-            text={`Page size: ${pageSize}`}
-            direction={'right'}
-            onChange={(_, data) => {
-              setPageSize(data.value);
-            }}
-            options={pageSizes.map((v) => ({
-              key: v,
-              text: v,
-              value: v,
-            }))}
-          />
-        </Grid.Column>
-      </Grid>
 
-      <Grid centered columns={1}>
-        <Pagination
-          size="mini"
-          siblingRange={1}
-          boundaryRange={1}
-          firstItem={null}
-          lastItem={null}
-          ellipsisItem={null}
-          totalPages={pageOptions.length}
-          onPageChange={(_, data) => {
-            // `-1`: semantic-ui indexes starting in `1` and `react-table`
-            // starts in `0`. So, here, we subtract `-1` to avoid errors.
-            gotoPage(data.activePage - 1);
-          }}
-        />
-      </Grid>
+      {isPaginationRequired && (
+        <>
+          <Grid>
+            <Grid.Column>
+              <Dropdown
+                item
+                simple
+                text={`Page size: ${pageSize}`}
+                direction={'right'}
+                onChange={(_, data) => {
+                  setPageSize(data.value);
+                }}
+                options={pageSizes.map((v) => ({
+                  key: v,
+                  text: v,
+                  value: v,
+                }))}
+              />
+            </Grid.Column>
+          </Grid>
+          <Grid centered columns={1}>
+            <Pagination
+              size="mini"
+              siblingRange={1}
+              boundaryRange={1}
+              firstItem={null}
+              lastItem={null}
+              ellipsisItem={null}
+              totalPages={pageOptions.length}
+              onPageChange={(_, data) => {
+                // `-1`: semantic-ui indexes starting in `1` and `react-table`
+                // starts in `0`. So, here, we subtract `-1` to avoid errors.
+                gotoPage(data.activePage - 1);
+              }}
+            />
+          </Grid>
+        </>
+      )}
     </Container>
   );
 };

src/lib/components/table/thematic/ExternalResourceTable/ExternalResourceTable.js

@@ -263,6 +263,7 @@ export const ExternalResourceTable = ({ tableData, tableConfig }) => {
             preGlobalFilteredRows={preGlobalFilteredRows}
           />
         )}
+        showHeader={false}
         {...tableConfig}
       />
     </div>

src/lib/components/table/thematic/RecordsTable/RecordsTable.css

@@ -0,0 +1,11 @@
+/*
+ * This file is part of GEO-Components-React.
+ * Copyright (C) 2022 GEO Secretariat.
+ *
+ * GEO-Components-React is free software; you can redistribute it and/or modify it
+ * under the terms of the MIT License; see LICENSE file for more details.
+ */
+
+.table-records .ui.container .grid p {
+  overflow-wrap: break-word;
+}