[sparkle] - feature: enhance Table component with filter state manage…

…ment - Integrate `useState` for `columnFilters` and `setColumnFilters` to manage column filter states - Remove `onSort` prop from `TableProps` and directly use `setSorting` in `useReactTable` for sorting logic simplification - Change Table stories to use `row.original` for cell values, ensuring consistency with new filter logic - Default the width of the first column to "normal" unless specified otherwise in `TableProps`
dust-tt · Jul 30, 2024 · 77e62b9 · 77e62b9
1 parent bc811c9
commit 77e62b9
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 22 deletions.
diff --git a/sparkle/src/components/Table.tsx b/sparkle/src/components/Table.tsx
@@ -1,48 +1,51 @@
 import {
   type ColumnDef,
+  ColumnFiltersState,
   flexRender,
   getCoreRowModel,
+  getFilteredRowModel,
   getSortedRowModel,
   type SortingState,
   useReactTable,
 } from "@tanstack/react-table";
-import React, { ReactNode } from "react";
+import React, { ReactNode, useState } from "react";
 
 import { Avatar, MoreIcon } from "@sparkle/index";
 import { ArrowDownIcon, ArrowUpIcon } from "@sparkle/index";
 import { classNames } from "@sparkle/lib/utils";
 
 import { Icon } from "./Icon";
 
+type FirstColumnWidth = "expanded" | "normal";
+
 interface TableProps<TData, TValue> {
   data: TData[];
   columns: ColumnDef<TData, TValue>[];
-  onSort?: (sorting: SortingState) => void;
   className?: string;
-  width?: "expanded" | "normal";
+  width?: FirstColumnWidth;
 }
 
 export function Table<TData, TValue>({
   data,
   columns,
-  onSort,
   className,
-  width,
+  width = "normal",
 }: TableProps<TData, TValue>) {
-  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
 
   const table = useReactTable({
     data,
     columns,
-    state: { sorting },
-    onSortingChange: (updater) => {
-      const newSorting =
-        typeof updater === "function" ? updater(sorting) : updater;
-      setSorting(newSorting);
-      onSort?.(newSorting);
-    },
+    onSortingChange: setSorting,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnFiltersChange: setColumnFilters,
+    state: {
+      columnFilters,
+      sorting,
+    },
   });
 
   return (
@@ -53,7 +56,7 @@ export function Table<TData, TValue>({
             {headerGroup.headers.map((header) => (
               <TableData.Head
                 key={header.id}
-                width={width ?? "normal"}
+                width={width}
                 onClick={header.column.getToggleSortingHandler()}
                 className={header.column.getCanSort() ? "s-cursor-pointer" : ""}
               >
@@ -114,7 +117,7 @@ interface HeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {
 
 interface HeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
   children?: ReactNode;
-  width?: "normal" | "expanded";
+  width?: FirstColumnWidth;
 }
 
 interface CellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {

diff --git a/sparkle/src/stories/Table.stories.tsx b/sparkle/src/stories/Table.stories.tsx
@@ -2,9 +2,10 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { ColumnDef } from "@tanstack/react-table";
 import React from 'react';
 
-import { FolderIcon, Table } from "../index_with_tw_base";
 import { TableData } from "@sparkle/components/Table";
 
+import { FolderIcon, Table } from "../index_with_tw_base";
+
 const meta = {
   title: "Components/Table",
   component: Table
@@ -55,31 +56,31 @@ const TableExample = () => {
           icon={info.row.original.icon}
           description={info.row.original.description}
         >
-          {info.getValue()}
+          {info.row.original.name}
         </TableData.Cell>
       ),
       meta: { width: "expanded" }
     },
     {
       accessorKey: "usedBy",
       header: "Used by",
-      cell: info => <TableData.Cell>{info.getValue()}</TableData.Cell>
+      cell: info => <TableData.Cell>{info.row.original.usedBy}</TableData.Cell>
     },
     {
       accessorKey: "addedBy",
       header: "Added by",
-      cell: info => <TableData.Cell>{info.getValue()}</TableData.Cell>
+      cell: info => <TableData.Cell>{info.row.original.addedBy}</TableData.Cell>
     },
     {
       accessorKey: "lastUpdated",
       header: "Last updated",
-      cell: info => <TableData.Cell>{info.getValue()}</TableData.Cell>,
+      cell: info => <TableData.Cell>{info.row.original.lastUpdated}</TableData.Cell>,
       enableSorting: false
     },
     {
       accessorKey: "size",
       header: "Size",
-      cell: info => <TableData.Cell>{info.getValue()}</TableData.Cell>
+      cell: info => <TableData.Cell>{info.row.original.size}</TableData.Cell>
     }
   ];
 
@@ -88,7 +89,6 @@ const TableExample = () => {
       <Table
         data={data}
         columns={columns}
-        onSort={(sorting) => console.log("New sorting:", sorting)}
       />
     </div>
   );