[sparkle] - enh: DataTable (#6622)

* [sparkle] - feature: allow initial column order configuration for DataTable

 - Added a new `initialColumnOrder` prop to `DataTable` component for setting the initial state of column sorting
 - Updated `DataTable` stories to demonstrate usage with the new `initialColumnOrder` property

* [sparkle] - refactor: update icon size and opacity logic in DataTable

 - Adjust the size of the sorting icon to 'xs' to improve visual appearance
 - Streamline opacity control for better clarity when the column is sorted or not

* [sparkle] - feature: enhance row hover effect in DataTable component

 - Added a hover style to DataTable rows to indicate interactivity when 'onMoreClick' is provided
 - The hover style changes the border bottom color and applies opacity for better visual feedback

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

 - Update the project version in package-lock.json and package.json for new release

* [sparkle] - fix: improve row hover visual feedback in DataTable

 - Added a gray background to rows on hover to enhance the visibility of the currently selected row

* [sparkle] - refactor: streamline DataTable row hover styling

 - Simplify hover state CSS by removing border color change on row clickability indication.

---------

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

sparkle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.199",
+  "version": "0.2.200",
   "scripts": {
     "build": "rm -rf dist && rollup -c",
     "build:with-tw-base": "rollup -c --environment INCLUDE_TW_BASE:true",

sparkle/src/components/DataTable.tsx

@@ -22,6 +22,7 @@ interface DataTableProps<TData, TValue> {
   className?: string;
   filter?: string;
   filterColumn?: string;
+  initialColumnOrder?: SortingState;
 }
 
 export function DataTable<TData, TValue>({
@@ -30,8 +31,11 @@ export function DataTable<TData, TValue>({
   className,
   filter,
   filterColumn,
+  initialColumnOrder,
 }: DataTableProps<TData, TValue>) {
-  const [sorting, setSorting] = useState<SortingState>([]);
+  const [sorting, setSorting] = useState<SortingState>(
+    initialColumnOrder ?? []
+  );
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
 
   const table = useReactTable({
@@ -79,8 +83,9 @@ export function DataTable<TData, TValue>({
                             ? ArrowDownIcon
                             : ArrowDownIcon
                       }
+                      size="xs"
                       className={classNames(
-                        "s-ml-1 s-w-2.5 s-font-extralight",
+                        "s-ml-1",
                         header.column.getIsSorted()
                           ? "s-opacity-100"
                           : "s-opacity-0"
@@ -197,7 +202,7 @@ DataTable.Row = function Row({
     <tr
       className={classNames(
         "s-border-b s-border-structure-200 s-text-sm",
-        onClick ? "s-cursor-pointer" : "",
+        onClick ? "s-cursor-pointer hover:s-bg-gray-50" : "",
         className || ""
       )}
       onClick={onClick ? onClick : undefined}

sparkle/src/stories/DataTable.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta } from "@storybook/react";
 import { ColumnDef } from "@tanstack/react-table";
 import React from "react";
 
@@ -10,7 +10,6 @@ const meta = {
 } satisfies Meta<typeof DataTable>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
 
 type Data = {
   name: string;
@@ -27,7 +26,7 @@ type Data = {
   onMoreClick?: () => void;
 };
 
-const DataTableExample = () => {
+export const DataTableExample = () => {
   const data: Data[] = [
     {
       name: "Marketing",
@@ -116,11 +115,11 @@ const DataTableExample = () => {
 
   return (
     <div className="s-w-full s-max-w-4xl s-overflow-x-auto">
-      <DataTable data={data} columns={columns} />
+      <DataTable
+        data={data}
+        columns={columns}
+        initialColumnOrder={[{ id: "name", desc: false }]}
+      />
     </div>
   );
 };
-
-export const Default: Story = {
-  render: () => <DataTableExample />,
-};