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;
}