From e5451f37c48648600d974f1c3d01a22a508536e0 Mon Sep 17 00:00:00 2001 From: atanasster Date: Sun, 6 Dec 2020 02:19:13 -0500 Subject: [PATCH] feat: table default sorting prop --- ui/components/src/Table/Table.stories.tsx | 12 +++++++++++- ui/components/src/Table/Table.tsx | 12 ++++++++++++ 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/ui/components/src/Table/Table.stories.tsx b/ui/components/src/Table/Table.stories.tsx index 6f3ad95d1..8289cf980 100644 --- 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 ( - +
); }; diff --git a/ui/components/src/Table/Table.tsx b/ui/components/src/Table/Table.tsx index ab0502cfd..c30519868 100644 --- 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>; } export type TableProps = TableOwnProps & BoxProps; @@ -126,6 +133,7 @@ export const Table: FC = ({ initialSelected = {}, onSelectRowsChange, rowSelect, + sortBy, ...rest }) => { const plugins = [ @@ -143,6 +151,7 @@ export const Table: FC = ({ const initialState: Partial>> & Partial>> & Partial>> & + Partial>> & Partial>> = {}; if (Array.isArray(groupBy)) { initialState.groupBy = groupBy; @@ -150,6 +159,9 @@ export const Table: FC = ({ } else if (hiddenColumns !== undefined) { initialState.hiddenColumns = hiddenColumns; } + if (Array.isArray(sortBy)) { + initialState.sortBy = sortBy; + } if (typeof expanded === 'object') { initialState.expanded = expanded; }