@dust-tt/sparkle 0.2.629 → 0.2.630

package/src/components/DataTable.tsx

@@ -236,9 +236,13 @@ export function DataTable<TData extends TBaseData>({
                   <DataTable.Head
                     column={header.column}
                     key={header.id}
-                    onClick={header.column.getToggleSortingHandler()}
+                    onClick={
+                      header.column.getCanSort()
+                        ? header.column.getToggleSortingHandler()
+                        : undefined
+                    }
                     className={cn(
-                      header.column.getCanSort() ? "s-cursor-pointer" : ""
+                      header.column.getCanSort() && "s-cursor-pointer"
                     )}
                   >
                     <div className="s-flex s-items-center s-space-x-1 s-whitespace-nowrap">
@@ -251,9 +255,7 @@ export function DataTable<TData extends TBaseData>({
                           visual={
                             header.column.getIsSorted() === "asc"
                               ? ArrowUpIcon
-                              : header.column.getIsSorted() === "desc"
-                                ? ArrowDownIcon
-                                : ArrowDownIcon
+                              : ArrowDownIcon
                           }
                           size="xs"
                           className={cn(
@@ -351,6 +353,8 @@ export function ScrollableDataTable<TData extends TBaseData>({
   columnsBreakpoints = {},
   maxHeight,
   onLoadMore,
+  sorting,
+  setSorting,
   isLoading = false,
   rowSelection,
   setRowSelection,
@@ -363,6 +367,8 @@ export function ScrollableDataTable<TData extends TBaseData>({
   const loadMoreRef = useRef<HTMLDivElement>(null);
   const [tableWidth, setTableWidth] = useState(0);
 
+  const isSorting = !!setSorting;
+
   // Monitor table width changes
   useEffect(() => {
     if (!tableContainerRef.current) {
@@ -382,6 +388,15 @@ export function ScrollableDataTable<TData extends TBaseData>({
     };
   }, []);
 
+  const onSortingChange =
+    sorting && setSorting
+      ? (updater: Updater<SortingState>) => {
+          const newValue =
+            typeof updater === "function" ? updater(sorting) : updater;
+          setSorting(newValue);
+        }
+      : undefined;
+
   const onRowSelectionChange =
     rowSelection && setRowSelection
       ? (updater: Updater<RowSelectionState>) => {
@@ -402,7 +417,15 @@ export function ScrollableDataTable<TData extends TBaseData>({
     }),
     state: {
       ...(enableRowSelection && { rowSelection }),
+      ...(isSorting && {
+        sorting,
+      }),
     },
+    manualSorting: isSorting,
+    ...(isSorting && {
+      onSortingChange: onSortingChange,
+    }),
+    enableSortingRemoval: true,
     enableRowSelection,
     enableMultiRowSelection,
     getRowId,
@@ -520,19 +543,45 @@ export function ScrollableDataTable<TData extends TBaseData>({
                     <DataTable.Head
                       column={header.column}
                       key={header.id}
-                      className="s-max-w-0"
+                      onClick={
+                        isSorting && header.column.getCanSort()
+                          ? header.column.getToggleSortingHandler()
+                          : undefined
+                      }
+                      className={cn(
+                        "s-max-w-0",
+                        header.column.getCanSort() &&
+                          isSorting &&
+                          "s-cursor-pointer"
+                      )}
                       style={{
                         width: columnSizing[header.id],
                         minWidth: columnSizing[header.id],
                       }}
                     >
-                      <div className="s-flex s-w-full s-items-center s-space-x-1">
+                      <div className="s-flex s-w-full s-items-center s-space-x-1 s-whitespace-nowrap">
                         <span className="s-truncate">
                           {flexRender(
                             header.column.columnDef.header,
                             header.getContext()
                           )}
                         </span>
+                        {isSorting && header.column.getCanSort() && (
+                          <Icon
+                            visual={
+                              header.column.getIsSorted() === "asc"
+                                ? ArrowUpIcon
+                                : ArrowDownIcon
+                            }
+                            size="xs"
+                            className={cn(
+                              "s-ml-1",
+                              header.column.getIsSorted()
+                                ? "s-opacity-100"
+                                : "s-opacity-0"
+                            )}
+                          />
+                        )}
                       </div>
                     </DataTable.Head>
                   );

package/src/components/Tree.tsx

@@ -68,15 +68,15 @@ export function Tree({
           className
         )}
       >
-        {modifiedChildren}
+        <div>{modifiedChildren}</div>
+        {isLoading && (
+          // add the spinner below modifiedChildren to keep the layout
+          // thus preventing re-render in case of pagination
+          <div className={cn("s-flex s-justify-center s-py-2")}>
+            <Spinner size="xs" />
+          </div>
+        )}
       </div>
-      {isLoading && (
-        // add the spinner below modifiedChildren to keep the layout
-        // thus preventing re-render in case of pagination
-        <div className={cn("s-py-2 s-pl-4", className)}>
-          <Spinner size="xs" variant="dark" />
-        </div>
-      )}
     </>
   );
 }

package/src/stories/Tree.stories.tsx

@@ -587,6 +587,24 @@ export const TreeExample = () => {
                   />
                 </Tree>
               </Tree.Item>
+
+              <Tree.Item
+                label="Item 8 (loading, with existing nodes)"
+                visual={FolderIcon}
+              >
+                <Tree isLoading>
+                  <Tree.Item
+                    type="leaf"
+                    label="Item 1"
+                    checkbox={{
+                      checked: checked["Item 1"],
+                      onCheckedChange: () => {
+                        check("Item 1");
+                      },
+                    }}
+                  />
+                </Tree>
+              </Tree.Item>
             </Tree>
           </div>
         </div>