#182 - Enable Multi-column sorting in DataTable

croz-ltd · Jan 30, 2024 · 966a3df · 966a3df
1 parent 5a0ea26
commit 966a3df
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 1 deletion.
diff --git a/libs/data-display/src/DataTable.tsx b/libs/data-display/src/DataTable.tsx
@@ -126,6 +126,12 @@ export type DataTableProps<T extends object> = {
    * Content to be displayed when the dataset is empty.
    */
   emptyState?: React.ReactNode;
+
+  /**
+   * Enable or disable multi-column sorting.
+   * When set to true, users can sort by multiple columns simultaneously.
+   */
+  enableMultiSort?: boolean;
 } & DataTableTokensProps;
 
 type DataTableTokensProps = {
@@ -463,6 +469,7 @@ function DataTable<T extends object>({
   firstColumnFixed,
   lastColumnFixed,
   className,
+  enableMultiSort = false,
   ...props
 }: DataTableProps<T>) {
   const primaryRow = findChild("DataTablePrimaryRow", children);
@@ -500,7 +507,7 @@ function DataTable<T extends object>({
     [getItemId]
   );
   const tokens = useTokens("DataTable", props.tokens);
-  const { getTableProps, getTableBodyProps, headerGroups, footerGroups, rows, prepareRow, visibleColumns, state } =
+  const { getTableProps, getTableBodyProps, headerGroups, footerGroups, rows, prepareRow, visibleColumns, state, toggleSortBy } =
     useTable(
       {
         columns,
@@ -614,6 +621,9 @@ function DataTable<T extends object>({
                         {...column.getHeaderProps(column.getSortByToggleProps())}
                         className={tableHeaderClassName}
                         title={column.title}
+                        onClick={() => {
+                         toggleSortBy(column.id, undefined, enableMultiSort);
+                        }}
                       >
                         <DataTableHeader alignHeader={alignHeader} {...column}>
                           {column.render("Header")}

diff --git a/storybook/src/data-display/DataTable.mdx b/storybook/src/data-display/DataTable.mdx
@@ -160,6 +160,67 @@ You can use this hook to implement sorting for specific columns according to you
 When using this hook, be aware that it is designed for **client-side sorting**. While it provides flexibility, it may **not be optimal** for handling **larger datasets**. <br/>
 Client-side sorting can lead to performance issues with larger amounts of data. It is recommended to consider server-side sorting for improved performance in such cases.
 
+## Multi-column Sorting in DataTable
+
+The `DataTable` component in `@tiller-ds` empowers you to implement **multi-column sorting**, allowing users to sort data across multiple columns simultaneously.
+This enhanced functionality is achieved through the `toggleSortBy` method provided by the `useTable` hook.
+
+To enable multi-column sorting, follow these steps:
+
+**1.** Ensure that the columns for which you want to implement sorting have the `canSort` prop set to `true`:
+```tsx
+<DataTable.Column header="Name" accessor="name" canSort={true} />
+<DataTable.Column header="Surname" accessor="surname" canSort={true} />
+```
+
+**2.** For multi-column sorting, apply sorting logic based on the priority of columns specified in the sort state:
+```tsx
+  const [dataTableState, dataTableHook] = useDataTable({
+    defaultSortBy: [
+      {
+        column: "name",
+        sortDirection: "ASCENDING",
+      },
+    ],
+  });
+
+  const columnMapping = {
+    name: "name",
+    surname: "surname",
+  };
+
+  const sortedData = React.useMemo(() => {
+    const sortInstructions = dataTableState.sortBy;
+
+    if (!sortInstructions || sortInstructions.length === 0) {
+      return [...allData];
+    }
+
+    return [...allData].sort((a, b) =>
+      sortInstructions.reduce((result, sortInfo) => {
+        const columnKey = columnMapping[sortInfo.column];
+
+        if (result === 0 && a[columnKey] !== undefined && b[columnKey] !== undefined) {
+          const result = a[columnKey].localeCompare(b[columnKey]);
+          return sortInfo.sortDirection === "DESCENDING" ? -result : result;
+        }
+
+        return result;
+      }, 0)
+    );
+  }, [dataTableState.sortBy]);
+```
+
+**3.** Set the `enableMultiSort` prop to `true` in the DataTable component to enable multi-column sorting:
+```tsx
+<DataTable data={sortedData} hook={dataTableHook} defaultSortBy={dataTableState.sortBy} enableMultiSort>
+  <DataTable.Column header="ID" accessor="id" canSort={false} />
+  <DataTable.Column header="Name" accessor="name" canSort={true} />
+  <DataTable.Column header="Surname" accessor="surname" canSort={true} />
+</DataTable>
+
+```
+
 ## Best Practices
 
 Data Tables should:

diff --git a/storybook/src/data-display/DataTable.stories.tsx b/storybook/src/data-display/DataTable.stories.tsx
@@ -1266,6 +1266,55 @@ export const WithDefaultAscendingSortUsingHook = () => {
   )
 };
 
+export const WithDefaultAscendingMultiSort = () => {
+  const [dataTableState, dataTableHook] = useDataTable({
+    defaultSortBy: [
+      {
+        column: "name",
+        sortDirection: "ASCENDING",
+      },
+      {
+        column: "surname",
+        sortDirection: "ASCENDING",
+      },
+    ],
+  });
+
+  const columnMapping = {
+    name: "name",
+    surname: "surname",
+  };
+
+  const sortedData = React.useMemo(() => {
+    const sortInstructions = dataTableState.sortBy;
+
+    if (!sortInstructions || sortInstructions.length === 0) {
+      return [...allData];
+    }
+
+    return [...allData].sort((a, b) =>
+      sortInstructions.reduce((result, sortInfo) => {
+        const columnKey = columnMapping[sortInfo.column];
+
+        if (result === 0 && a[columnKey] !== undefined && b[columnKey] !== undefined) {
+          const result = a[columnKey].localeCompare(b[columnKey]);
+          return sortInfo.sortDirection === "DESCENDING" ? -result : result;
+        }
+
+        return result;
+      }, 0)
+    );
+  }, [dataTableState.sortBy]);
+
+  return (
+    <DataTable data={sortedData} hook={dataTableHook} defaultSortBy={dataTableState.sortBy} multiSort>
+      <DataTable.Column header="ID" accessor="id" canSort={false}/>
+      <DataTable.Column header="Name" accessor="name" canSort={true}/>
+      <DataTable.Column header="Surname" accessor="surname" canSort={true}/>
+    </DataTable>
+  )
+};
+
 export const WithIconButtons = (args) => (
   <DataTable data={smallData}>
     <DataTable.Column header="ID" accessor="id" />
@@ -1472,6 +1521,7 @@ WithHorizontalScrollAndFirstColumnFixed.argTypes = HideControls;
 WithHorizontalScrollAndLastColumnFixed.argTypes = HideControls;
 WithDefaultAscendingSortByName.argTypes = HideControls;
 WithDefaultAscendingSortUsingHook.argTypes = HideControls;
+WithDefaultAscendingMultiSort.argTypes = HideControls;
 WithIconButtons.argTypes = HideControls;
 WithPrimaryAndSecondaryRows.argTypes = HideControls;
 WithPrimaryAndSecondaryRowsAndComplexValues.argTypes = HideControls;