Added Manual Sort support to DataTable (#660)

Signed-off-by: Benjamin Perez <[email protected]>
minio · Feb 9, 2024 · 2bcd57f · 2bcd57f
1 parent 0da48bd
commit 2bcd57f
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 21 deletions.
diff --git a/src/components/DataTable/DataTable.stories.tsx b/src/components/DataTable/DataTable.stories.tsx
@@ -372,6 +372,63 @@ SortSomeColumnsOnly.args = {
   sortEnabled: ["field1", "field3"],
 };
 
+export const ManualControlledSort = Template.bind({});
+ManualControlledSort.args = {
+  disabled: false,
+  entityName: "Elements",
+  idField: "field1",
+  customPaperHeight: "250px",
+  records: [
+    { field1: "Value1", field2: "Value2", field3: "Value3" },
+    {
+      field1: "Value1-1",
+      field2: "Value2-1",
+      field3: "Value3-1",
+    },
+    { field1: "An Item", field2: "A Second Item", field3: "A ThirdItem" },
+    {
+      field1: "One Value",
+      field2: "Two Values",
+      field3: "Three Values",
+    },
+    {
+      field1: "Some Other thing",
+      field2: "Some Other thing",
+      field3: "Some Other thing",
+    },
+    {
+      field1: "My Element",
+      field2: "My Second Element",
+      field3: "My Third Element",
+    },
+  ],
+  columns: [
+    {
+      label: "Super Long Column Name to test ellipsis truncate",
+      elementKey: "field1",
+      width: 200,
+    },
+    {
+      label: "Disabled Manual Sort",
+      elementKey: "field2",
+      width: 100,
+      enableSort: false,
+    },
+    {
+      label: "Column3",
+      elementKey: "field3",
+    },
+  ],
+  sortEnabled: {
+    currentSort: "field1",
+    currentDirection: "DESC",
+    onSortClick: (data) => {
+      alert("Sort Header clicked");
+      console.log("DATA FROM SORT TRIGGER", data);
+    },
+  },
+};
+
 export const WithItemActions = Template.bind({});
 WithItemActions.args = {
   disabled: false,
@@ -431,7 +488,7 @@ WithItemActions.args = {
   sortConfig: {
     currentSort: "field1",
     currentDirection: "DESC",
-    triggerSort: () => {
+    onSortClick: () => {
       alert("sort triggered");
     },
   },
@@ -549,7 +606,7 @@ FullItemsActions.args = {
   sortConfig: {
     currentSort: "field1",
     currentDirection: "DESC",
-    triggerSort: () => {
+    onSortClick: () => {
       alert("sort triggered");
     },
   },

diff --git a/src/components/DataTable/DataTable.tsx b/src/components/DataTable/DataTable.tsx
@@ -32,6 +32,7 @@ import {
   DataTableProps,
   DataTableWrapperProps,
   IColumns,
+  ITableSortInfo,
 } from "./DataTable.types";
 import {
   calculateOptionsSize,
@@ -272,6 +273,11 @@ const DataTable: FC<DataTableProps> = ({
     ? itemActions.find((el) => el.type === "view")
     : null;
 
+  const manualSortEnabled =
+    sortEnabled &&
+    typeof sortEnabled === "object" &&
+    !Array.isArray(sortEnabled);
+
   const clickAction = (rowItem: any) => {
     if (findView) {
       const valueClick =
@@ -331,10 +337,11 @@ const DataTable: FC<DataTableProps> = ({
     );
   };
 
-  const triggerSort = (sort: {
-    sortBy: string;
-    sortDirection: SortDirectionType;
-  }) => {
+  let tableSort: ((val: ITableSortInfo) => any) | undefined = undefined;
+  let tableSortBy: string | undefined = undefined;
+  let tableSortDirection: SortDirectionType | undefined = undefined;
+
+  const onSortClick = (sort: ITableSortInfo) => {
     const newSortDirection = get(sort, "sortDirection", "DESC");
     setCurrentSortColumn(sort.sortBy);
     setCurrentSortDirection(newSortDirection);
@@ -344,9 +351,21 @@ const DataTable: FC<DataTableProps> = ({
     }
   };
 
+  if (sortEnabled) {
+    if (manualSortEnabled) {
+      tableSort = sortEnabled.onSortClick;
+      tableSortBy = sortEnabled.currentSort;
+      tableSortDirection = sortEnabled.currentDirection;
+    } else {
+      tableSort = onSortClick;
+      tableSortBy = currentSortColumn;
+      tableSortDirection = currentSortDirection;
+    }
+  }
+
   let sortedRecords = records;
 
-  if (sortEnabled && currentSortColumn) {
+  if (sortEnabled && currentSortColumn && !manualSortEnabled) {
     sortedRecords = sortRecords(
       records,
       currentSortColumn,
@@ -443,11 +462,9 @@ const DataTable: FC<DataTableProps> = ({
                         } ${rowStyle ? rowStyle(r) : ""}`
                       }
                       onRowsRendered={onRowsRendered}
-                      sort={sortEnabled ? triggerSort : undefined}
-                      sortBy={sortEnabled ? currentSortColumn : undefined}
-                      sortDirection={
-                        sortEnabled ? currentSortDirection : undefined
-                      }
+                      sort={tableSort}
+                      sortBy={tableSortBy}
+                      sortDirection={tableSortDirection}
                       scrollToIndex={
                         autoScrollToBottom ? sortedRecords.length - 1 : -1
                       }
@@ -555,8 +572,8 @@ const DataTable: FC<DataTableProps> = ({
                         columnsSelector,
                         columnsShown,
                         sortEnabled,
-                        sortEnabled ? currentSortColumn : "",
-                        sortEnabled ? currentSortDirection : undefined,
+                        tableSortBy || "",
+                        tableSortDirection,
                       )}
                     </Table>
                   );

diff --git a/src/components/DataTable/DataTable.types.ts b/src/components/DataTable/DataTable.types.ts
@@ -53,6 +53,7 @@ export interface IColumns {
   width?: number;
   headerTextAlign?: string;
   contentTextAlign?: string;
+  enableSort?: boolean;
 }
 
 export interface IInfiniteScrollConfig {
@@ -63,6 +64,17 @@ export interface IInfiniteScrollConfig {
   recordsCount: number;
 }
 
+export interface ITableSortInfo {
+  sortBy: string;
+  sortDirection: SortDirectionType;
+}
+
+export interface ISortConfig {
+  onSortClick: (val: ITableSortInfo) => any;
+  currentSort: string;
+  currentDirection: "ASC" | "DESC" | undefined;
+}
+
 export interface DataTableProps {
   itemActions?: ItemActions[] | null;
   columns: IColumns[];
@@ -92,11 +104,8 @@ export interface DataTableProps {
   parentClassName?: string;
   sx?: CSSObject;
   rowHeight?: number;
-  sortEnabled?: boolean | string[];
-  sortCallBack?: (info: {
-    sortBy: string;
-    sortDirection: SortDirectionType;
-  }) => void;
+  sortEnabled?: boolean | string[] | ISortConfig;
+  sortCallBack?: (info: ITableSortInfo) => void;
 }
 
 export interface DataTableWrapperProps extends HTMLAttributes<HTMLDivElement> {

diff --git a/src/components/DataTable/DataTable.utils.tsx b/src/components/DataTable/DataTable.utils.tsx
@@ -19,7 +19,7 @@ import get from "lodash/get";
 import isString from "lodash/isString";
 import isPlainObject from "lodash/isPlainObject";
 import { Column, SortDirectionType } from "react-virtualized";
-import { IColumns, ItemActions } from "./DataTable.types";
+import { IColumns, ISortConfig, ItemActions } from "./DataTable.types";
 import ArrowDropUpIcon from "../Icons/ArrowDropUp";
 import ArrowDropDownIcon from "../Icons/ArrowDropDown";
 import Loader from "../Loader/Loader";
@@ -100,10 +100,15 @@ export const generateColumnsMap = (
   idField: string,
   columnsSelector: boolean,
   columnsShown: string[],
-  sortColumns: boolean | string[],
+  sortColumns: boolean | string[] | ISortConfig,
   currentSortColumn: string | undefined,
   currentSortDirection: "ASC" | "DESC" | undefined,
 ) => {
+  const manualSortEnabled =
+    sortColumns &&
+    typeof sortColumns === "object" &&
+    !Array.isArray(sortColumns);
+
   const commonRestWidth = calculateColumnRest(
     columns,
     containerWidth,
@@ -118,8 +123,13 @@ export const generateColumnsMap = (
       return null;
     }
 
+    // Manual Column Sort state, Enabled by default.
+    const manualColumnSortEnabled =
+      column.enableSort !== undefined ? column.enableSort : true;
+
     const disableSort =
       !sortColumns ||
+      (manualSortEnabled && !manualColumnSortEnabled) ||
       (Array.isArray(sortColumns) &&
         !sortColumns.includes(column?.elementKey || ""));