[sparkle] - feat(DataTable): pass SortingState to DataTable. (#7414)

* [sparkle] - refactor: streamline sorting state management in DataTable

 - Removed local sorting state in favor of external sorting prop management
 - Added conditional rendering for the sorted row model based on the existence of sorting props
 - Adjusted DataTable stories to handle the new sorting state management
 - Cleaned up unused SortingFn import and initialColumnOrder prop
 - Implemented and utilized an onSortingChange helper for setting sorting state only when applicable

* [sparkle] - fix: correct placeholder text in DataTable stories

 - Fixed a typo in the 'filter' input placeholder within the DataTable stories component to enhance clarity.

* [sparkle] - refactor: streamline client-side sorting in DataTable component

 - Add a conditional check for client-side sorting to decide whether to apply manual sorting logic
 - Include the sorting state and onSortingChange handler conditionally based on client-side sorting
 - Remove duplicated logging statement in DataTable stories file

* [sparkle] - fix: correct flag for server-side sorting in DataTable

 - Changed the flag from `isClientSideSorting` to `isServerSideSorting` to properly reflect server-side handling
 - Updated sorting logic to engage server-side sorting instead of client-side when required
 - Altered conditionals for row model getters to align with the server-side sorting feature

* [sparkle] - feature: enable client-side sorting for DataTable component

- Introduced a flag to allow client-side sorting when server-side sorting and pagination are not in use
- Removed hardcoded server-side sorting from the DataTablePaginatedExample story to rely on client-side behavior
- Cleaned up console logging and unused sorting state in DataTablePaginatedServerSideExample story

* [sparkle] - feature: bump package version to 0.2.241

 - Update the version of the @dust-tt/sparkle package for release

* [sparkle] - feature: enable toggle for server-side sorting in DataTable

 - Introduced `isServerSideSorting` prop to allow switching between server-side and client-side sorting
 - Defaulted `isServerSideSorting` prop to false to preserve client-side sorting unless specified

[sparkle] - test: add story example for DataTable with client-side sorting

 - Created a new DataTable story to demonstrate client-side sorting functionality
 - Provided an interactive example with filter and sorting state management in the story

* [sparkle] - refactor: remove trailing whitespace in DataTable stories

 - Cleaned up formatting in the DataTable.stories.tsx to enhance code readability

* Update sparkle/src/components/DataTable.tsx

Co-authored-by: Thomas Draier <[email protected]>

---------

Co-authored-by: Jules <[email protected]>
Co-authored-by: Thomas Draier <[email protected]>

sparkle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.240",
+  "version": "0.2.241",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

sparkle/src/components/DataTable.tsx

@@ -8,7 +8,6 @@ import {
   getPaginationRowModel,
   getSortedRowModel,
   PaginationState,
-  SortingFn,
   type SortingState,
   Updater,
   useReactTable,
@@ -57,9 +56,10 @@ interface DataTableProps<TData extends TBaseData> {
   filterColumn?: string;
   pagination?: PaginationState;
   setPagination?: (pagination: PaginationState) => void;
-  initialColumnOrder?: SortingState;
   columnsBreakpoints?: ColumnBreakpoint;
-  sortingFn?: SortingFn<TData>;
+  sorting?: SortingState;
+  setSorting?: (sorting: SortingState) => void;
+  isServerSideSorting?: boolean;
 }
 
 function shouldRenderColumn(
@@ -80,18 +80,20 @@ export function DataTable<TData extends TBaseData>({
   widthClassName = "s-w-full s-max-w-4xl",
   filter,
   filterColumn,
-  initialColumnOrder,
   columnsBreakpoints = {},
   pagination,
   setPagination,
+  sorting,
+  setSorting,
+  isServerSideSorting = false,
 }: DataTableProps<TData>) {
   const windowSize = useWindowSize();
-  const [sorting, setSorting] = useState<SortingState>(
-    initialColumnOrder ?? []
-  );
+
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
 
   const isServerSidePagination = !!totalRowCount && totalRowCount > data.length;
+  const isClientSideSortingEnabled = !isServerSideSorting && !isServerSidePagination;
+
   const onPaginationChange =
     pagination && setPagination
       ? (updater: Updater<PaginationState>) => {
@@ -101,26 +103,44 @@ export function DataTable<TData extends TBaseData>({
         }
       : undefined;
 
+  const onSortingChange =
+    sorting && setSorting
+      ? (updater: Updater<SortingState>) => {
+          const newValue =
+            typeof updater === "function" ? updater(sorting) : updater;
+          setSorting(newValue);
+        }
+      : undefined;
+
   const table = useReactTable({
     data,
     columns,
     rowCount: totalRowCount,
     manualPagination: isServerSidePagination,
-    onSortingChange: setSorting,
+    manualSorting: isServerSideSorting,
+    ...(isServerSideSorting && {
+      onSortingChange: onSortingChange,
+    }),
     getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
+    ...(!isServerSideSorting && {
+      getSortedRowModel: getSortedRowModel(),
+      enableSorting: isClientSideSortingEnabled,
+    }),
     getFilteredRowModel: getFilteredRowModel(),
     getPaginationRowModel: pagination ? getPaginationRowModel() : undefined,
     onColumnFiltersChange: setColumnFilters,
     state: {
       columnFilters,
-      sorting: isServerSidePagination ? undefined : sorting,
+      ...(isServerSideSorting && {
+        sorting,
+      }),
       pagination,
     },
     initialState: {
       pagination,
+      sorting,
     },
-    onPaginationChange: onPaginationChange,
+    onPaginationChange,
   });
 
   useEffect(() => {

sparkle/src/stories/DataTable.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta } from "@storybook/react";
-import { ColumnDef, PaginationState } from "@tanstack/react-table";
+import { ColumnDef, PaginationState, SortingState } from "@tanstack/react-table";
 import React, { useMemo } from "react";
 
 import { DropdownItemProps } from "@sparkle/components/DropdownMenu";
@@ -206,6 +206,32 @@ export const DataTableExample = () => {
   );
 };
 
+export const DataTableClientSideSortingExample = () => {
+  const [sorting, setSorting] = React.useState<SortingState>([{ id: "name", desc: true }])
+  const [filter, setFilter] = React.useState<string>("");
+
+  return (
+    <div className="s-w-full s-max-w-4xl s-overflow-x-auto">
+      <Input
+        name="filter"
+        placeholder="Filter"
+        value={filter}
+        onChange={(v) => setFilter(v)}
+      />
+      <DataTable
+        className="s-w-full s-max-w-4xl s-overflow-x-auto"
+        data={data}
+        filter={filter}
+        filterColumn="name"
+        columns={columns}
+        columnsBreakpoints={{ lastUpdated: "sm" }}
+        sorting={sorting}
+        setSorting={setSorting}
+      />
+    </div>
+  );
+};
+
 export const DataTablePaginatedExample = () => {
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -229,7 +255,6 @@ export const DataTablePaginatedExample = () => {
         pagination={pagination}
         setPagination={setPagination}
         columns={columns}
-        initialColumnOrder={[{ id: "name", desc: false }]}
         columnsBreakpoints={{ lastUpdated: "sm" }}
       />
     </div>
@@ -241,14 +266,25 @@ export const DataTablePaginatedServerSideExample = () => {
     pageIndex: 0,
     pageSize: 2,
   });
+  const [sorting, setSorting] = React.useState<SortingState>([{ id: "name", desc: true }])
   const [filter, setFilter] = React.useState<string>("");
   const rows = useMemo(() => {
+    if (sorting.length > 0) {
+      const order = sorting[0].desc ? -1: 1;
+      return data.sort(
+        (a: Data, b: Data) => {
+          return a.name.toLowerCase().localeCompare(b.name.toLowerCase()) * order
+        }
+      ).slice(
+        pagination.pageIndex * pagination.pageSize,
+        (pagination.pageIndex + 1) * pagination.pageSize
+      );
+    }
     return data.slice(
       pagination.pageIndex * pagination.pageSize,
       (pagination.pageIndex + 1) * pagination.pageSize
     );
-  }, [data, pagination]);
-
+  }, [data, pagination, sorting]);
   return (
     <div className="s-w-full s-max-w-4xl s-overflow-x-auto">
       <Input
@@ -266,8 +302,10 @@ export const DataTablePaginatedServerSideExample = () => {
         pagination={pagination}
         setPagination={setPagination}
         columns={columns}
-        initialColumnOrder={[{ id: "name", desc: false }]}
+        sorting={sorting}
+        setSorting={setSorting}
         columnsBreakpoints={{ lastUpdated: "sm" }}
+        isServerSideSorting={true}
       />
     </div>
   );