Merge pull request #131 from heetch/table-initial-state

Allow initial state to be passed to Table

packages/react/src/components/Table/index.js

@@ -10,7 +10,15 @@ import RowCell from '../TableRowCell';
 
 const Table = React.forwardRef(
   (
-    { className, columns, data, isSortable, manualSorting, onChangeSort },
+    {
+      className,
+      columns,
+      data,
+      isSortable,
+      manualSorting,
+      onChangeSort,
+      initialState,
+    },
     ref,
   ) => {
     const {
@@ -23,6 +31,7 @@ const Table = React.forwardRef(
         columns,
         data,
         manualSorting,
+        initialState,
       },
       useSortBy,
     );
@@ -99,6 +108,14 @@ Table.propTypes = {
   isSortable: PropTypes.bool,
   manualSorting: PropTypes.bool,
   onChangeSort: PropTypes.func,
+  initialState: PropTypes.shape({
+    sortBy: PropTypes.arrayOf(
+      PropTypes.shape({
+        id: PropTypes.string.isRequired,
+        desc: PropTypes.bool,
+      }),
+    ),
+  }),
 };
 
 Table.defaultProps = {
@@ -108,6 +125,7 @@ Table.defaultProps = {
   isSortable: false,
   onChangeSort: () => {},
   manualSorting: false,
+  initialState: undefined,
 };
 
 Table.HeaderGroup = HeaderGroup;

packages/react/src/components/Table/index.stories.js

@@ -37,7 +37,7 @@ stories.add('Playground', () => (
         },
       ]}
       data={data}
-      isSortable={boolean('Is sortable', false)}
+      isSortable={boolean('Table 1 sortable', false)}
     />
 
     <Heading>Table with manual sorting</Heading>
@@ -59,9 +59,10 @@ stories.add('Playground', () => (
         },
       ]}
       data={data}
-      isSortable={boolean('Is sortable', false)}
+      isSortable={boolean('Table 2 sortable', true)}
       manualSorting
       onChangeSort={action('onChangeSort')}
+      initialState={{ sortBy: [{ id: 'number', desc: true }] }}
     />
   </>
 ));