@dust-tt/sparkle 0.2.201 → 0.2.202

package/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",

package/src/components/DataTable.tsx

@@ -16,22 +16,33 @@ import { classNames } from "@sparkle/lib/utils";
 
 import { Icon } from "./Icon";
 
-interface DataTableProps<TData, TValue> {
+interface TBaseData {
+  onClick?: () => void;
+  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, TValue>({
+export function DataTable<TData extends TBaseData, TValue>({
   data,
   columns,
   className,
   filter,
   filterColumn,
   initialColumnOrder,
+  columnsBreakpoints = {},
 }: DataTableProps<TData, TValue>) {
   const [sorting, setSorting] = useState<SortingState>(
     initialColumnOrder ?? []
@@ -67,7 +78,12 @@ export function DataTable<TData, 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(
@@ -106,7 +122,14 @@ export function DataTable<TData, 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>
             ))}

package/src/stories/DataTable.stories.tsx

@@ -20,9 +20,7 @@ type Data = {
   size: string;
   avatarUrl?: string;
   icon?: React.ComponentType<{ className?: string }>;
-  clickable?: boolean;
   onClick?: () => void;
-  showMore?: boolean;
   onMoreClick?: () => void;
 };
 
@@ -119,6 +117,7 @@ export const DataTableExample = () => {
         data={data}
         columns={columns}
         initialColumnOrder={[{ id: "name", desc: false }]}
+        columnsBreakpoints={{ lastUpdated: "sm" }}
       />
     </div>
   );