feat: table default sorting prop

ccontrols · Dec 6, 2020 · e5451f3 · e5451f3
1 parent 2962c3c
commit e5451f3
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/ui/components/src/Table/Table.stories.tsx b/ui/components/src/Table/Table.stories.tsx
@@ -74,7 +74,17 @@ export const sortable: Example = () => {
   const data = useMemo(mockData, []);
   return (
     <ThemeProvider>
-      <Table sorting={true} columns={columns} data={data} />
+      <Table
+        sorting={true}
+        columns={columns}
+        data={data}
+        sortBy={[
+          {
+            id: 'age',
+            desc: true,
+          },
+        ]}
+      />
     </ThemeProvider>
   );
 };

diff --git a/ui/components/src/Table/Table.tsx b/ui/components/src/Table/Table.tsx
@@ -25,6 +25,8 @@ import {
   UseGroupByRowProps,
   UseExpandedState,
   UseRowSelectState,
+  UseSortByState,
+  SortingRule,
   UseGroupByState,
   TableState,
 } from 'react-table';
@@ -103,6 +105,11 @@ interface TableOwnProps {
    * callback to render a SubComponent row
    */
   renderRowSubComponent?: (props: { row: Row }) => ReactNode;
+
+  /**
+   * initial sorting
+   */
+  sortBy?: Array<SortingRule<any>>;
 }
 
 export type TableProps = TableOwnProps & BoxProps;
@@ -126,6 +133,7 @@ export const Table: FC<TableProps> = ({
   initialSelected = {},
   onSelectRowsChange,
   rowSelect,
+  sortBy,
   ...rest
 }) => {
   const plugins = [
@@ -143,13 +151,17 @@ export const Table: FC<TableProps> = ({
   const initialState: Partial<TableState<Record<string, unknown>>> &
     Partial<UseExpandedState<Record<string, unknown>>> &
     Partial<UseGroupByState<Record<string, unknown>>> &
+    Partial<UseSortByState<Record<string, unknown>>> &
     Partial<UseRowSelectState<Record<string, unknown>>> = {};
   if (Array.isArray(groupBy)) {
     initialState.groupBy = groupBy;
     initialState.hiddenColumns = hiddenColumns || groupBy;
   } else if (hiddenColumns !== undefined) {
     initialState.hiddenColumns = hiddenColumns;
   }
+  if (Array.isArray(sortBy)) {
+    initialState.sortBy = sortBy;
+  }
   if (typeof expanded === 'object') {
     initialState.expanded = expanded;
   }