[sparkle] - fix: DataTable responsiveness (#6680)

* [sparkle] - feature: add responsive column hiding to DataTable component

 - Introduce `responsiveHiddenColumns` prop to allow specific columns to be hidden on smaller screens
 - Enhance `DataTable` cells with conditional classNames to handle visibility based on `responsiveHiddenColumns` configuration
 - Update `DataTable` stories to demonstrate the new responsive column hiding feature with the `lastUpdated` column

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

 - Update the @dust-tt/sparkle package to new patch version 0.2.202 for next release cycle

* [sparkle] - refactor: rename hidden columns property for clarity

 - Changed the property name from `responsiveHiddenColumns` to `mobileHiddenColumns` to better reflect its purpose
 - Updated all instances of `responsiveHiddenColumns` to the new name, ensuring consistency in the component and story files

* [sparkle] - feature: implement dynamic column breakpoints in DataTable

 - Replaced `mobileHiddenColumns` with `columnsBreakpoints` to allow dynamic breakpoint handling for responsive design
 - Columns can now individually specify their visibility at different screen sizes using the new `ColumnBreakpoint` interface
 - Updated DataTable stories to reflect the new `columnsBreakpoints` property usage

---------

Co-authored-by: Jules <jules@MacBook-Pro.local>

sparkle/package.json

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

sparkle/src/components/DataTable.tsx

@@ -21,13 +21,18 @@ interface TBaseData {
   onMoreClick?: () => void;
 }
 
+interface ColumnBreakpoint {
+  [columnId: string]: "xs" | "sm" | "md" | "lg" | "xl";
+}
+
 interface DataTableProps<TData extends TBaseData, TValue> {
   data: TData[];
   columns: ColumnDef<TData, TValue>[];
   className?: string;
   filter?: string;
   filterColumn?: string;
   initialColumnOrder?: SortingState;
+  columnsBreakpoints?: ColumnBreakpoint;
 }
 
 export function DataTable<TData extends TBaseData, TValue>({
@@ -37,6 +42,7 @@ export function DataTable<TData extends TBaseData, TValue>({
   filter,
   filterColumn,
   initialColumnOrder,
+  columnsBreakpoints = {},
 }: DataTableProps<TData, TValue>) {
   const [sorting, setSorting] = useState<SortingState>(
     initialColumnOrder ?? []
@@ -72,7 +78,12 @@ export function DataTable<TData extends TBaseData, TValue>({
               <DataTable.Head
                 key={header.id}
                 onClick={header.column.getToggleSortingHandler()}
-                className={header.column.getCanSort() ? "s-cursor-pointer" : ""}
+                className={classNames(
+                  header.column.getCanSort() ? "s-cursor-pointer" : "",
+                  columnsBreakpoints[header.id]
+                    ? `s-hidden ${columnsBreakpoints[header.id]}:s-block`
+                    : ""
+                )}
               >
                 <div className="s-flex s-items-center s-space-x-1 s-whitespace-nowrap">
                   {flexRender(
@@ -111,7 +122,14 @@ export function DataTable<TData extends TBaseData, TValue>({
             onMoreClick={row.original.onMoreClick}
           >
             {row.getVisibleCells().map((cell) => (
-              <DataTable.Cell key={cell.id}>
+              <DataTable.Cell
+                key={cell.id}
+                className={classNames(
+                  columnsBreakpoints[cell.column.id]
+                    ? `s-hidden ${columnsBreakpoints[cell.column.id]}:s-block`
+                    : ""
+                )}
+              >
                 {flexRender(cell.column.columnDef.cell, cell.getContext())}
               </DataTable.Cell>
             ))}

sparkle/src/stories/DataTable.stories.tsx

@@ -117,6 +117,7 @@ export const DataTableExample = () => {
         data={data}
         columns={columns}
         initialColumnOrder={[{ id: "name", desc: false }]}
+        columnsBreakpoints={{ lastUpdated: "sm" }}
       />
     </div>
   );