@dust-tt/sparkle 0.2.589-rc-2 → 0.2.590

package/src/components/DataTable.tsx

@@ -327,7 +327,7 @@ export function DataTable<TData extends TBaseData>({
 
 export interface ScrollableDataTableProps<TData extends TBaseData>
   extends DataTableProps<TData> {
-  maxHeight?: string | boolean;
+  maxHeight?: string;
   onLoadMore?: () => void;
   isLoading?: boolean;
 }
@@ -343,7 +343,7 @@ export function ScrollableDataTable<TData extends TBaseData>({
   className,
   widthClassName = "s-w-full",
   columnsBreakpoints = {},
-  maxHeight,
+  maxHeight = "s-h-100",
   onLoadMore,
   isLoading = false,
   rowSelection,
@@ -480,95 +480,24 @@ export function ScrollableDataTable<TData extends TBaseData>({
   }, [onLoadMore, isLoading]);
 
   return (
-    <div
-      className={cn(
-        "s-relative s-overflow-y-auto s-overflow-x-hidden",
-        className,
-        widthClassName,
-        maxHeight === true
-          ? "s-flex-1"
-          : typeof maxHeight === "string"
-            ? maxHeight
-            : "s-max-h-100"
-      )}
-      ref={tableContainerRef}
-    >
-      <div className="s-relative">
-        <DataTable.Root className="s-w-full s-table-fixed">
-          <DataTable.Header className="s-sticky s-top-0 s-z-20 s-bg-white s-shadow-sm dark:s-bg-background-night">
-            {table.getHeaderGroups().map((headerGroup) => (
-              <DataTable.Row
-                key={headerGroup.id}
-                widthClassName={widthClassName}
-              >
-                {headerGroup.headers.map((header) => {
-                  const breakpoint = columnsBreakpoints[header.id];
-                  if (
-                    !windowSize.width ||
-                    !shouldRenderColumn(windowSize.width, breakpoint)
-                  ) {
-                    return null;
-                  }
-
-                  return (
-                    <DataTable.Head
-                      column={header.column}
-                      key={header.id}
-                      className="s-max-w-0"
-                      style={{
-                        width: columnSizing[header.id],
-                        minWidth: columnSizing[header.id],
-                      }}
-                    >
-                      <div className="s-flex s-w-full s-items-center s-space-x-1">
-                        <span className="s-truncate">
-                          {flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          )}
-                        </span>
-                      </div>
-                    </DataTable.Head>
-                  );
-                })}
-              </DataTable.Row>
-            ))}
-          </DataTable.Header>
-          <DataTable.Body
-            className="s-relative s-w-full"
-            style={{
-              height: `${rowVirtualizer.getTotalSize()}px`,
-            }}
-          >
-            {rowVirtualizer.getVirtualItems().map((virtualRow) => {
-              const row = rows[virtualRow.index];
-              const handleRowClick = () => {
-                if (enableRowSelection && row.getCanSelect()) {
-                  row.toggleSelected(
-                    !enableMultiRowSelection ? true : undefined
-                  );
-                }
-                row.original.onClick?.();
-              };
-
-              return (
+    <div className={cn("s-flex s-flex-col s-gap-2", className, widthClassName)}>
+      <div
+        className={cn(
+          "s-relative s-overflow-y-auto s-overflow-x-hidden",
+          maxHeight
+        )}
+        ref={tableContainerRef}
+      >
+        <div className="s-relative">
+          <DataTable.Root className="s-w-full s-table-fixed">
+            <DataTable.Header className="s-sticky s-top-0 s-z-20 s-bg-white s-shadow-sm dark:s-bg-background-night">
+              {table.getHeaderGroups().map((headerGroup) => (
                 <DataTable.Row
-                  key={row.id}
-                  id={row.id}
+                  key={headerGroup.id}
                   widthClassName={widthClassName}
-                  onClick={
-                    enableRowSelection ? handleRowClick : row.original.onClick
-                  }
-                  className="s-absolute s-w-full"
-                  {...(enableRowSelection && {
-                    "data-selected": row.getIsSelected(),
-                  })}
-                  style={{
-                    transform: `translateY(${virtualRow.start}px)`,
-                  }}
                 >
-                  {row.getVisibleCells().map((cell) => {
-                    const breakpoint = columnsBreakpoints[cell.column.id];
+                  {headerGroup.headers.map((header) => {
+                    const breakpoint = columnsBreakpoints[header.id];
                     if (
                       !windowSize.width ||
                       !shouldRenderColumn(windowSize.width, breakpoint)
@@ -577,47 +506,114 @@ export function ScrollableDataTable<TData extends TBaseData>({
                     }
 
                     return (
-                      <DataTable.Cell
-                        column={cell.column}
-                        key={cell.id}
-                        id={cell.id}
+                      <DataTable.Head
+                        column={header.column}
+                        key={header.id}
                         className="s-max-w-0"
                         style={{
-                          width: columnSizing[cell.column.id],
-                          minWidth: columnSizing[cell.column.id],
+                          width: columnSizing[header.id],
+                          minWidth: columnSizing[header.id],
                         }}
                       >
-                        <div className="s-flex s-items-center s-space-x-1">
+                        <div className="s-flex s-w-full s-items-center s-space-x-1">
                           <span className="s-truncate">
                             {flexRender(
-                              cell.column.columnDef.cell,
-                              cell.getContext()
+                              header.column.columnDef.header,
+                              header.getContext()
                             )}
                           </span>
                         </div>
-                      </DataTable.Cell>
+                      </DataTable.Head>
                     );
                   })}
                 </DataTable.Row>
-              );
-            })}
-          </DataTable.Body>
-        </DataTable.Root>
-        {/*sentinel div used for the intersection observer*/}
-        <div
-          ref={loadMoreRef}
-          className="s-absolute s-bottom-0 s-h-1 s-w-full"
-        />
-      </div>
+              ))}
+            </DataTable.Header>
+            <DataTable.Body
+              className="s-relative s-w-full"
+              style={{
+                height: `${rowVirtualizer.getTotalSize()}px`,
+              }}
+            >
+              {rowVirtualizer.getVirtualItems().map((virtualRow) => {
+                const row = rows[virtualRow.index];
+                const handleRowClick = () => {
+                  if (enableRowSelection && row.getCanSelect()) {
+                    row.toggleSelected(
+                      !enableMultiRowSelection ? true : undefined
+                    );
+                  }
+                  row.original.onClick?.();
+                };
 
-      {isLoading && (
-        <div className="s-sticky s-bottom-0 s-left-0 s-right-0 s-flex s-justify-center s-bg-white/80 s-py-2 s-backdrop-blur-sm dark:s-bg-background-night/80">
-          <div className="s-flex s-items-center s-gap-2 s-text-sm s-text-muted-foreground">
-            <Spinner size="xs" />
-            <span>Loading more data...</span>
-          </div>
+                return (
+                  <DataTable.Row
+                    key={row.id}
+                    id={row.id}
+                    widthClassName={widthClassName}
+                    onClick={
+                      enableRowSelection ? handleRowClick : row.original.onClick
+                    }
+                    className="s-absolute s-w-full"
+                    {...(enableRowSelection && {
+                      "data-selected": row.getIsSelected(),
+                    })}
+                    style={{
+                      transform: `translateY(${virtualRow.start}px)`,
+                    }}
+                  >
+                    {row.getVisibleCells().map((cell) => {
+                      const breakpoint = columnsBreakpoints[cell.column.id];
+                      if (
+                        !windowSize.width ||
+                        !shouldRenderColumn(windowSize.width, breakpoint)
+                      ) {
+                        return null;
+                      }
+
+                      return (
+                        <DataTable.Cell
+                          column={cell.column}
+                          key={cell.id}
+                          id={cell.id}
+                          className="s-max-w-0"
+                          style={{
+                            width: columnSizing[cell.column.id],
+                            minWidth: columnSizing[cell.column.id],
+                          }}
+                        >
+                          <div className="s-flex s-items-center s-space-x-1">
+                            <span className="s-truncate">
+                              {flexRender(
+                                cell.column.columnDef.cell,
+                                cell.getContext()
+                              )}
+                            </span>
+                          </div>
+                        </DataTable.Cell>
+                      );
+                    })}
+                  </DataTable.Row>
+                );
+              })}
+            </DataTable.Body>
+          </DataTable.Root>
+          {/*sentinel div used for the intersection observer*/}
+          <div
+            ref={loadMoreRef}
+            className="s-absolute s-bottom-0 s-h-1 s-w-full"
+          />
         </div>
-      )}
+
+        {isLoading && (
+          <div className="s-sticky s-bottom-0 s-left-0 s-right-0 s-flex s-justify-center s-bg-white/80 s-py-2 s-backdrop-blur-sm dark:s-bg-background-night/80">
+            <div className="s-flex s-items-center s-gap-2 s-text-sm s-text-muted-foreground">
+              <Spinner size="xs" />
+              <span>Loading more data...</span>
+            </div>
+          </div>
+        )}
+      </div>
     </div>
   );
 }

package/src/stories/DataTable.stories.tsx

@@ -607,67 +607,6 @@ export const ScrollableDataTableExample = () => {
   );
 };
 
-export const ScrollableDataTableFullHeightExample = () => {
-  const [filter, setFilter] = useState("");
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
-  const [data, setData] = useState(() => createData(0, 50));
-  const [isLoading, setIsLoading] = useState(false);
-
-  // Load more data when user scrolls to bottom
-  const loadMore = useCallback(() => {
-    setIsLoading(true);
-
-    // Simulate API call delay
-    setTimeout(() => {
-      setData((prevData) => [...prevData, ...createData(prevData.length, 50)]);
-      setIsLoading(false);
-    }, 1000);
-  }, []);
-
-  const columnsWithSize = columns.map((column, index) => {
-    return { ...column, meta: { sizeRatio: index % 2 === 0 ? 15 : 10 } };
-  });
-
-  const columnsWithSelection: ColumnDef<Data>[] = useMemo(
-    () => [createSelectionColumn<Data>(), ...columnsWithSize],
-    []
-  );
-  return (
-    <div className="s-flex s-w-full s-max-w-4xl s-flex-col s-gap-6">
-      <h3 className="s-text-lg s-font-medium">
-        Virtualized ScrollableDataTable with Infinite Scrolling based on parent
-        height
-      </h3>
-
-      <div className="s-flex s-h-[400px] s-flex-col s-gap-4">
-        <Input
-          name="filter"
-          placeholder="Filter"
-          value={filter}
-          onChange={(e) => setFilter(e.target.value)}
-        />
-
-        <ScrollableDataTable
-          data={data}
-          filter={filter}
-          filterColumn="name"
-          columns={columnsWithSelection}
-          onLoadMore={loadMore}
-          isLoading={isLoading}
-          maxHeight
-          rowSelection={rowSelection}
-          setRowSelection={setRowSelection}
-          enableRowSelection={true}
-        />
-
-        <div className="s-text-sm s-text-muted-foreground">
-          Loaded {data.length} rows. Scroll to the bottom to load more.
-        </div>
-      </div>
-    </div>
-  );
-};
-
 export const DataTableWithRowSelectionExample = () => {
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
   const [data] = useState<Data[]>(() => createData(0, 10));