[front] - feature: update @dust-tt/sparkle to version 0.2.197

- Upgraded @dust-tt/sparkle from a release candidate to a stable version, ensuring the use of the latest features and fixes - Included new dependency @tanstack/react-table to enhance table components within the platform [front] - refactor: migrate Table to DataTable component - Replaced the Table component with the new DataTable component from @dust-tt/sparkle to leverage the latest library updates - Adjusted table cell components to align with the DataTable API changes for consistency and improved maintainability
dust-tt · Aug 1, 2024 · aab23e8 · aab23e8
1 parent d7b1fd2
commit aab23e8
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 16 deletions.
diff --git a/front/package-lock.json b/front/package-lock.json
diff --git a/front/package.json b/front/package.json
@@ -21,7 +21,7 @@
     "@amplitude/analytics-browser": "^2.5.2",
     "@amplitude/analytics-node": "^1.3.5",
     "@auth0/nextjs-auth0": "^3.5.0",
-    "@dust-tt/sparkle": "0.2.194-rc3",
+    "@dust-tt/sparkle": "^0.2.197",
     "@dust-tt/types": "file:../types",
     "@emoji-mart/data": "^1.1.2",
     "@emoji-mart/react": "^1.1.1",

diff --git a/front/pages/w/[wId]/builder/data-sources/static.tsx b/front/pages/w/[wId]/builder/data-sources/static.tsx
@@ -1,14 +1,13 @@
 import {
   Button,
+  DataTable,
   FolderIcon,
   FolderOpenIcon,
   Page,
   PlusIcon,
   Popup,
   RobotIcon,
   Searchbar,
-  Table,
-  TableData,
 } from "@dust-tt/sparkle";
 import type { DataSourceType, WorkspaceType } from "@dust-tt/types";
 import type { PlanType, SubscriptionType } from "@dust-tt/types";
@@ -176,10 +175,9 @@ export default function DataSourcesView({
           />
         )}
         {clickableDataSources.length > 0 && (
-          <Table
+          <DataTable
             data={clickableDataSources}
             columns={columns}
-            width="expanded"
             filter={dataSourceSearch}
             filterColumn={"name"}
           />
@@ -203,24 +201,24 @@ function getTableColumns() {
       header: "Name",
       accessorKey: "name",
       cell: (info: Info) => (
-        <TableData.Cell icon={info.row.original.icon}>
+        <DataTable.Cell icon={info.row.original.icon}>
           {info.row.original.name}
-        </TableData.Cell>
+        </DataTable.Cell>
       ),
     },
     {
       header: "Used by",
       accessorKey: "usage",
       cell: (info: Info) => (
-        <TableData.Cell icon={RobotIcon}>
+        <DataTable.Cell icon={RobotIcon}>
           {info.row.original.usage}
-        </TableData.Cell>
+        </DataTable.Cell>
       ),
     },
     {
       header: "Added by",
       cell: (info: Info) => (
-        <TableData.Cell
+        <DataTable.Cell
           avatarUrl={info.row.original.editedByUser?.imageUrl ?? ""}
         />
       ),
@@ -229,13 +227,13 @@ function getTableColumns() {
       header: "Last updated",
       accessorKey: "editedByUser.editedAt",
       cell: (info: Info) => (
-        <TableData.Cell>
+        <DataTable.Cell>
           {info.row.original.editedByUser?.editedAt
             ? new Date(
                 info.row.original.editedByUser.editedAt
               ).toLocaleDateString()
             : null}
-        </TableData.Cell>
+        </DataTable.Cell>
       ),
     },
   ];