@dust-tt/sparkle 0.2.201 → 0.2.202

package/dist/cjs/components/DataTable.d.ts

@@ -1,14 +1,22 @@
 import { type ColumnDef, type SortingState } from "@tanstack/react-table";
 import React, { ReactNode } from "react";
-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 declare function DataTable<TData, TValue>({ data, columns, className, filter, filterColumn, initialColumnOrder, }: DataTableProps<TData, TValue>): React.JSX.Element;
+export declare function DataTable<TData extends TBaseData, TValue>({ data, columns, className, filter, filterColumn, initialColumnOrder, columnsBreakpoints, }: DataTableProps<TData, TValue>): React.JSX.Element;
 export declare namespace DataTable {
     var Root: ({ children, className, ...props }: DataTableRootProps) => React.JSX.Element;
     var Header: ({ children, className, ...props }: HeaderProps) => React.JSX.Element;

package/dist/cjs/index.js

@@ -128884,9 +128884,9 @@ function useReactTable(options) {
 }
 
 function DataTable(_a) {
-    var data = _a.data, columns = _a.columns, className = _a.className, filter = _a.filter, filterColumn = _a.filterColumn, initialColumnOrder = _a.initialColumnOrder;
-    var _b = __read(React.useState(initialColumnOrder !== null && initialColumnOrder !== void 0 ? initialColumnOrder : []), 2), sorting = _b[0], setSorting = _b[1];
-    var _c = __read(React.useState([]), 2), columnFilters = _c[0], setColumnFilters = _c[1];
+    var data = _a.data, columns = _a.columns, className = _a.className, filter = _a.filter, filterColumn = _a.filterColumn, initialColumnOrder = _a.initialColumnOrder, _b = _a.columnsBreakpoints, columnsBreakpoints = _b === void 0 ? {} : _b;
+    var _c = __read(React.useState(initialColumnOrder !== null && initialColumnOrder !== void 0 ? initialColumnOrder : []), 2), sorting = _c[0], setSorting = _c[1];
+    var _d = __read(React.useState([]), 2), columnFilters = _d[0], setColumnFilters = _d[1];
     var table = useReactTable({
         data: data,
         columns: columns,
@@ -128907,7 +128907,9 @@ function DataTable(_a) {
         }
     }, [filter, filterColumn]);
     return (React.createElement(DataTable.Root, { className: className },
-        React.createElement(DataTable.Header, null, table.getHeaderGroups().map(function (headerGroup) { return (React.createElement(DataTable.Row, { key: headerGroup.id }, headerGroup.headers.map(function (header) { return (React.createElement(DataTable.Head, { key: header.id, onClick: header.column.getToggleSortingHandler(), className: header.column.getCanSort() ? "s-cursor-pointer" : "" },
+        React.createElement(DataTable.Header, null, table.getHeaderGroups().map(function (headerGroup) { return (React.createElement(DataTable.Row, { key: headerGroup.id }, headerGroup.headers.map(function (header) { return (React.createElement(DataTable.Head, { key: header.id, onClick: header.column.getToggleSortingHandler(), className: classNames(header.column.getCanSort() ? "s-cursor-pointer" : "", columnsBreakpoints[header.id]
+                ? "s-hidden ".concat(columnsBreakpoints[header.id], ":s-block")
+                : "") },
             React.createElement("div", { className: "s-flex s-items-center s-space-x-1 s-whitespace-nowrap" },
                 flexRender(header.column.columnDef.header, header.getContext()),
                 header.column.getCanSort() && (React.createElement(Icon, { visual: header.column.getIsSorted() === "asc"
@@ -128917,7 +128919,9 @@ function DataTable(_a) {
                             : SvgArrowDown$1, size: "xs", className: classNames("s-ml-1", header.column.getIsSorted()
                         ? "s-opacity-100"
                         : "s-opacity-0") }))))); }))); })),
-        React.createElement(DataTable.Body, null, table.getRowModel().rows.map(function (row) { return (React.createElement(DataTable.Row, { key: row.id, onClick: row.original.onClick, onMoreClick: row.original.onMoreClick }, row.getVisibleCells().map(function (cell) { return (React.createElement(DataTable.Cell, { key: cell.id }, flexRender(cell.column.columnDef.cell, cell.getContext()))); }))); }))));
+        React.createElement(DataTable.Body, null, table.getRowModel().rows.map(function (row) { return (React.createElement(DataTable.Row, { key: row.id, onClick: row.original.onClick, onMoreClick: row.original.onMoreClick }, row.getVisibleCells().map(function (cell) { return (React.createElement(DataTable.Cell, { key: cell.id, className: classNames(columnsBreakpoints[cell.column.id]
+                ? "s-hidden ".concat(columnsBreakpoints[cell.column.id], ":s-block")
+                : "") }, flexRender(cell.column.columnDef.cell, cell.getContext()))); }))); }))));
 }
 DataTable.Root = function DataTableRoot(_a) {
     var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);