Merge pull request #102 from M3nin0/dev

table: fixing component style
geo-knowledge-hub · Aug 14, 2023 · b4ed729 · b4ed729
2 parents 2648231 + 36a4bcf
commit b4ed729
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 26 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@geo-knowledge-hub/geo-components-react",
-  "version": "0.4.12",
+  "version": "0.5.0",
   "main": "dist/cjs/index.js",
   "browser": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

diff --git a/src/lib/components/table/moldure/PaginableTable.js b/src/lib/components/table/moldure/PaginableTable.js
@@ -20,17 +20,12 @@ import { Pagination, Grid, Container, Dropdown } from 'semantic-ui-react';
 
 import { BaseTable } from '../base';
 
-/**
- * Constants
- */
-const VALID_PAGE_SIZES = [5, 10, 20, 30, 40, 50];
-
 /**
  * Atomic table to be used as basis to create specialized tables.
  *
  * @returns
  */
-export const PaginableTable = ({ columnsConfiguration, data, ...uiProps }) => {
+export const PaginableTable = ({ columnsConfiguration, data, pageSizes, ...uiProps }) => {
   const {
     getTableProps,
     getTableBodyProps,
@@ -48,7 +43,7 @@ export const PaginableTable = ({ columnsConfiguration, data, ...uiProps }) => {
     {
       columns: columnsConfiguration,
       data: data,
-      initialState: { pageIndex: 0, pageSize: VALID_PAGE_SIZES[0] },
+      initialState: { pageIndex: 0, pageSize: pageSizes[0] },
     },
     useGlobalFilter,
     useSortBy,
@@ -90,7 +85,7 @@ export const PaginableTable = ({ columnsConfiguration, data, ...uiProps }) => {
             onChange={(_, data) => {
               setPageSize(data.value);
             }}
-            options={VALID_PAGE_SIZES.map((v) => ({
+            options={pageSizes.map((v) => ({
               key: v,
               text: v,
               value: v,
@@ -124,3 +119,7 @@ PaginableTable.propTypes = {
   data: PropTypes.array.isRequired,
   uiProps: PropTypes.object,
 };
+
+PaginableTable.defaultProps = {
+  pageSizes: [5, 10, 20, 30, 40, 50]
+}
diff --git a/src/lib/components/table/thematic/RelatedResourceTable/search/TypeSelectorCard.js b/src/lib/components/table/thematic/RelatedResourceTable/search/TypeSelectorCard.js
@@ -41,19 +41,18 @@ export const TypeSelectorCard = () => {
           >
             <Card.Content>
               <Card.Header>
-                <Grid relaxed columns={2}>
-                  <Grid.Row only={'tablet computer'}>
-                    <Grid.Column width={10}>{option.name}</Grid.Column>
-                    <Grid.Column floated={'right'} width={6}>
-                      <Icon
-                        name={guessRecordGroupIcon(option.name)}
-                        size={'large'}
-                      />
+                <Grid relaxed>
+                  <Grid.Row>
+                    <Grid.Column
+                      widescreen={10}
+                      largeScreen={10}
+                      computer={10}
+                      tablet={10}
+                      mobile={12}
+                    >
+                      {option.name}
                     </Grid.Column>
-                  </Grid.Row>
-                  <Grid.Row only={'mobile'}>
-                    <Grid.Column width={12}>{option.name}</Grid.Column>
-                    <Grid.Column floated={'left'} width={1}>
+                    <Grid.Column width={2}>
                       <Icon
                         name={guessRecordGroupIcon(option.name)}
                         size={'large'}

diff --git a/src/lib/components/table/thematic/UserStoriesTable/UserStoriesTable.js b/src/lib/components/table/thematic/UserStoriesTable/UserStoriesTable.js
@@ -35,10 +35,10 @@ export const UserStoriesTable = ({ tableData }) => {
           return (
             <Grid>
               <Grid.Row verticalAlign="middle">
-                <Grid.Column width={1}>
+                <Grid.Column widescreen={1} largeScreen={1} computer={1} tablet={1} mobile={3}>
                   <Icon name="user" size="big" />
                 </Grid.Column>
-                <Grid.Column width={12}>
+                <Grid.Column widescreen={12} largeScreen={12} computer={12} tablet={12} mobile={11}>
                   <Grid className={'user-stories-metadata'}>
                     <Grid.Row columns={1}>
                       <Grid.Column>
@@ -50,7 +50,7 @@ export const UserStoriesTable = ({ tableData }) => {
                     </Grid.Row>
                   </Grid>
                 </Grid.Column>
-                <Grid.Column width={3}>
+                <Grid.Column widescreen={3} largeScreen={3} computer={3} tablet={3} mobile={2}>
                   <Button
                     icon={'arrow right'}
                     floated={'right'}
@@ -68,12 +68,16 @@ export const UserStoriesTable = ({ tableData }) => {
   // Memoizing data
   const tableDataMemoized = useMemo(() => tableData);
 
+  // Defining valid page sizes
+  const pageSizes = [3, 5, 10];
+
   return (
     <>
       <PaginableTable
         unstackable
         fixed={false}
         padded={true}
+        pageSizes={pageSizes}
         data={tableDataMemoized}
         columnsConfiguration={tableColumnsDefinition}
         className={'users-stories-table'}