react-glide-table 1.1.2 → 1.1.3

package/README.md

@@ -2,7 +2,7 @@
 
 Headless React table built on [@tanstack/react-table](https://tanstack.com/table) and [@tanstack/react-virtual](https://tanstack.com/virtual).
 
-Primary DX is a **compound API** (`createTable` / `Table.Column`) with an unstyled semantic HTML shell. Customize with `className` hooks, `slots`, and column `render`. `useGlideTable` remains the lower-level escape hatch when you need full control of markup.
+Primary DX is a **compound API** (`createTable` / `Table.Column`) with an unstyled semantic HTML shell. Customize with `className`, **`classNames` (Tailwind-friendly part map)**, `slots`, and column `render`. `useGlideTable` remains the lower-level escape hatch when you need full control of markup.
 
 The package ships **no CSS** — class names like `DataTableJSX` / `data-table` are opt-in hooks for your own styles.
 
@@ -41,9 +41,15 @@ export function Products({ data }: { data: Product[] }) {
     <ProductTable
       data={data}
       getRowId={(row) => row.id}
-      className="my-table"
-      // Optional: replace Toolbar / Row / Pending / Empty
-      // slots={{ Toolbar: MyToolbar, Row: MyRow, Empty: MyEmpty }}
+      className="rounded-lg border"
+      classNames={{
+        scroll: "max-h-[480px] overflow-auto",
+        head: "sticky top-0 z-10 bg-neutral-50",
+        headCell: "px-3 text-xs font-semibold text-neutral-500",
+        row: "hover:bg-neutral-100 data-[selected]:bg-blue-600 data-[selected]:text-white",
+        cell: "border-b border-neutral-200 px-3 text-sm",
+        toolbar: "flex items-center justify-between gap-2 p-2",
+      }}
     >
       <ProductTable.Header>
         <ProductTable.Column field="name">Name</ProductTable.Column>
@@ -61,13 +67,21 @@ export function Products({ data }: { data: Product[] }) {
 
 | Slot / prop | Role |
 | --- | --- |
+| `classNames` | Per-part Tailwind/utility classes (`root`, `scroll`, `row`, `cell`, `toolbar`, …) |
 | `slots.Toolbar` | Top summary / actions region |
 | `slots.Row` | Full row replacement (cells, selection, edit UI) |
 | `slots.Pending` / `slots.Empty` | Loading and empty states |
-| `className` / column `className` / `headerClassName` | Class hooks (style yourself) |
+| `className` / column `className` / `headerClassName` | Extra class hooks |
 | `labels` / `summary` / `toolbar` | Copy and slot nodes |
 | `Column.render` | Cell content custom render |
 
+Row/cell **state** is exposed as `data-*` attributes for Tailwind variants:
+
+- row: `data-selected`, `data-hovered`, `data-expandable`, `data-expanded`
+- cell: `data-merged`, `data-selection-fill`, `data-editable`, `data-editing`, …
+
+Example: `row: "data-[selected]:bg-blue-600"`.
+
 Row-level UI → `slots.Row`. Cell content → `Column.render`. Header/Cell are not separate slots.
 
 ## Escape hatch (`useGlideTable`)

package/dist/compound.cjs

@@ -28,6 +28,7 @@ module.exports = __toCommonJS(compound_exports);
 
 // src/components/ui/table/components/DataTable/DataTable.tsx
 var import_react_table3 = require("@tanstack/react-table");
+var import_react7 = require("react");
 
 // src/components/ui/table/components/DataTable/DataTableRow.tsx
 var import_react_table = require("@tanstack/react-table");
@@ -736,7 +737,7 @@ function DataTableRow({
   virtualIndex,
   measureElement
 }) {
-  const { rowSpan, selection, cellSelection, cellEdit, expand } = useDataTableRowContext();
+  const { classNames, rowSpan, selection, cellSelection, cellEdit, expand } = useDataTableRowContext();
   const {
     enableRowSpan,
     primaryRowSpanKey,
@@ -814,12 +815,17 @@ function DataTableRow({
     {
       ref: measureElement,
       "data-index": virtualIndex,
+      "data-selected": isRowSelected ? "" : void 0,
+      "data-hovered": isRowHovered || isGroupHovered ? "" : void 0,
+      "data-expandable": enableExpand && canExpand ? "" : void 0,
+      "data-expanded": isExpanded ? "" : void 0,
       className: cn(
         "DataTableRowJSX",
         !enableRowSpan && ROW_HOVER_CLASS,
         enableRowSpan && isRowHovered && !isRowSelected && ROW_HOVERED_BG_CLASS,
         isRowSelected && "is-selected",
         enableExpand && canExpand && "is-expandable",
+        classNames?.row,
         getRowClassName?.(rowData, rowIndex)
       ),
       onMouseEnter: () => onRowHover(rowIndex, rowData),
@@ -870,10 +876,19 @@ function DataTableRow({
           isVisuallySelectedAt
         );
         const resolveCellRowIndex = (clientY, element) => getRowIndexInMergedCell(clientY, element, rowIndex, cellRowSpan);
+        const hasSelectionEdges = hasCellSelectionEdges(selectionEdgeStyle);
         return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
           "td",
           {
             rowSpan: rowSpanInfo && rowSpanInfo.rowSpan > 1 ? rowSpanInfo.rowSpan : void 0,
+            "data-merged": isMerged && cellIndex > 0 ? "" : void 0,
+            "data-merged-edge-right": showMergedRightEdge ? "" : void 0,
+            "data-group-selected": enableRowSpan && showCellSelected ? "" : void 0,
+            "data-group-hovered": enableRowSpan && showCellHover && !showCellSelected ? "" : void 0,
+            "data-selection-fill": isCellDragSelected ? "" : void 0,
+            "data-selection-edges": hasSelectionEdges ? "" : void 0,
+            "data-editable": editable ? "" : void 0,
+            "data-editing": isEditing ? "" : void 0,
             onMouseDown: (event) => {
               if (isEditing) {
                 event.stopPropagation();
@@ -917,8 +932,9 @@ function DataTableRow({
               enableRowSpan && showCellSelected && "is-group-selected",
               enableRowSpan && showCellHover && !showCellSelected && "is-group-hovered",
               isCellDragSelected && CELL_SELECTION_FILL_CLASS,
-              hasCellSelectionEdges(selectionEdgeStyle) && CELL_SELECTION_EDGES_CLASS,
-              editable && "is-editable"
+              hasSelectionEdges && CELL_SELECTION_EDGES_CLASS,
+              editable && "is-editable",
+              classNames?.cell
             ),
             children: [
               isEditing ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -927,7 +943,11 @@ function DataTableRow({
                   ref: editInputRef,
                   type: editType === "number" ? "number" : "text",
                   defaultValue: draftValue,
-                  className: cn("cell-edit-input", CELL_ALIGN_CLASS[align]),
+                  className: cn(
+                    "cell-edit-input",
+                    CELL_ALIGN_CLASS[align],
+                    classNames?.cellEditInput
+                  ),
                   onChange: (event) => onDraftValueChange(event.target.value),
                   onMouseDown: (event) => event.stopPropagation(),
                   onClick: (event) => event.stopPropagation(),
@@ -945,23 +965,69 @@ function DataTableRow({
                     onCommitEdit(event.currentTarget.value);
                   }
                 }
-              ) : isExpandCell && enableExpand ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "expand-cell", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "expand-cell-content", children: [
-                  rowLevel > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "expand-cell-indent", children: "\xB7" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "expand-cell-value", children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) })
-                ] }),
+              ) : isExpandCell && enableExpand ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn("expand-cell", classNames?.expandCell), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "div",
+                  {
+                    className: cn(
+                      "expand-cell-content",
+                      classNames?.expandCellContent
+                    ),
+                    children: [
+                      rowLevel > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "span",
+                        {
+                          className: cn(
+                            "expand-cell-indent",
+                            classNames?.expandCellIndent
+                          ),
+                          children: "\xB7"
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "div",
+                        {
+                          className: cn(
+                            "expand-cell-value",
+                            classNames?.expandCellValue
+                          ),
+                          children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
+                        }
+                      )
+                    ]
+                  }
+                ),
                 canExpand && expandKey && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "button",
                   {
                     type: "button",
                     "aria-label": isExpanded ? collapseRowLabel : expandRowLabel,
-                    className: "expand-toggle-button",
+                    className: cn(
+                      "expand-toggle-button",
+                      classNames?.expandToggle
+                    ),
                     onClick: (event) => {
                       event.stopPropagation();
                       onToggleExpand?.(expandKey);
                     },
                     onMouseDown: (event) => event.stopPropagation(),
-                    children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChevronUp, { className: "expand-toggle-icon" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChevronDown, { className: "expand-toggle-icon" })
+                    children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      ChevronUp,
+                      {
+                        className: cn(
+                          "expand-toggle-icon",
+                          classNames?.expandToggleIcon
+                        )
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      ChevronDown,
+                      {
+                        className: cn(
+                          "expand-toggle-icon",
+                          classNames?.expandToggleIcon
+                        )
+                      }
+                    )
                   }
                 )
               ] }) : (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()),
@@ -969,7 +1035,7 @@ function DataTableRow({
                 "div",
                 {
                   role: "presentation",
-                  className: "fill-handle",
+                  className: cn("fill-handle", classNames?.fillHandle),
                   onMouseDown: (event) => {
                     event.stopPropagation();
                     event.preventDefault();
@@ -995,7 +1061,8 @@ function DataTableToolbar({
   selectedCount,
   selectionLabel,
   toolbar,
-  className
+  className,
+  classNames
 }) {
   const displayFiltered = filteredCount ?? totalCount;
   const hasCount = displayFiltered !== void 0 || totalCount !== void 0;
@@ -1004,9 +1071,9 @@ function DataTableToolbar({
   const selectionContent = selectionLabel?.(selectedCount) ?? null;
   const hasSelectionContent = selectionContent !== null && selectionContent !== false && selectionContent !== void 0 && typeof selectionContent !== "boolean";
   if (!hasLeftContent && !hasToolbar && !hasSelectionContent) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn("DataTableToolbarJSX", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "toolbar-left", children: [
-      hasCount && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "toolbar-count", children: displayFiltered !== void 0 && totalCount !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn("DataTableToolbarJSX", classNames?.toolbar, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn("toolbar-left", classNames?.toolbarLeft), children: [
+      hasCount && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: cn("toolbar-count", classNames?.toolbarCount), children: displayFiltered !== void 0 && totalCount !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "toolbar-count-primary", children: displayFiltered }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "toolbar-count-placeholder", children: [
           " / ",
@@ -1015,9 +1082,9 @@ function DataTableToolbar({
       ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "toolbar-count-primary", children: displayFiltered ?? totalCount }) }),
       summary
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "toolbar-right", children: [
-      hasSelectionContent && (typeof selectionContent === "string" || typeof selectionContent === "number" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "toolbar-selection", children: selectionContent }) : selectionContent),
-      hasToolbar && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "toolbar-actions", children: toolbar })
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn("toolbar-right", classNames?.toolbarRight), children: [
+      hasSelectionContent && (typeof selectionContent === "string" || typeof selectionContent === "number" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: cn("toolbar-selection", classNames?.toolbarSelection), children: selectionContent }) : selectionContent),
+      hasToolbar && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn("toolbar-actions", classNames?.toolbarActions), children: toolbar })
     ] })
   ] });
 }
@@ -1629,15 +1696,36 @@ function useGlideTable(options) {
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function DefaultPending({
   loadingText,
-  className
+  className,
+  classNames
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: cn("DataTableJSX", "DataTableJSX--pending", className), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "data-table-loading-text", children: loadingText }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
+    {
+      className: cn(
+        "DataTableJSX",
+        "DataTableJSX--pending",
+        classNames?.root,
+        classNames?.pending,
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: cn("data-table-loading-text", classNames?.loadingText), children: loadingText })
+    }
+  );
 }
 function DefaultEmpty({
   emptyText,
-  columnCount
+  columnCount,
+  classNames
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { colSpan: columnCount, className: "data-table-empty-cell", children: emptyText }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "td",
+    {
+      colSpan: columnCount,
+      className: cn("data-table-empty-cell", classNames?.emptyCell),
+      children: emptyText
+    }
+  ) });
 }
 function DataTable({
   isPending = false,
@@ -1646,6 +1734,7 @@ function DataTable({
   filteredCount,
   totalCount,
   className,
+  classNames,
   slots,
   ...glideOptions
 }) {
@@ -1673,8 +1762,19 @@ function DataTable({
   const RowSlot = slots?.Row ?? DataTableRow;
   const PendingSlot = slots?.Pending ?? DefaultPending;
   const EmptySlot = slots?.Empty ?? DefaultEmpty;
+  const contextValue = (0, import_react7.useMemo)(
+    () => ({ ...rowContextValue, classNames }),
+    [rowContextValue, classNames]
+  );
   if (isPending) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PendingSlot, { loadingText, className });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      PendingSlot,
+      {
+        loadingText,
+        className,
+        classNames
+      }
+    );
   }
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
@@ -1682,6 +1782,7 @@ function DataTable({
       className: cn(
         "DataTableJSX",
         !enableCellSelection && "DataTableJSX--no-cell-selection",
+        classNames?.root,
         className
       ),
       children: [
@@ -1693,71 +1794,120 @@ function DataTable({
             summary,
             selectedCount,
             selectionLabel,
-            toolbar
+            toolbar,
+            classNames
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: scrollRef, className: "data-table-scroll", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: scrollRef, className: cn("data-table-scroll", classNames?.scroll), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
           "table",
           {
-            className: "data-table",
+            className: cn("data-table", classNames?.table),
             onDragStart: enableCellSelection ? (event) => event.preventDefault() : void 0,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("thead", { className: "data-table-head", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { className: "data-table-head-row", children: headerGroup.headers.map((header) => {
-                const align = header.column.columnDef.meta?.align ?? "center";
-                const headerClassName = header.column.columnDef.meta?.headerClassName;
-                return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                  "th",
-                  {
-                    style: { width: header.getSize() !== 150 ? header.getSize() : void 0 },
-                    className: cn(
-                      "data-table-head-cell",
-                      CELL_ALIGN_CLASS[align],
-                      headerClassName
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("thead", { className: cn("data-table-head", classNames?.head), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "tr",
+                {
+                  className: cn("data-table-head-row", classNames?.headRow),
+                  children: headerGroup.headers.map((header) => {
+                    const align = header.column.columnDef.meta?.align ?? "center";
+                    const headerClassName = header.column.columnDef.meta?.headerClassName;
+                    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                      "th",
+                      {
+                        style: { width: header.getSize() !== 150 ? header.getSize() : void 0 },
+                        className: cn(
+                          "data-table-head-cell",
+                          CELL_ALIGN_CLASS[align],
+                          classNames?.headCell,
+                          headerClassName
+                        ),
+                        children: header.isPlaceholder ? null : (0, import_react_table3.flexRender)(header.column.columnDef.header, header.getContext())
+                      },
+                      header.id
+                    );
+                  })
+                },
+                headerGroup.id
+              )) }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DataTableContextProvider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "tbody",
+                {
+                  onMouseLeave: clearHover,
+                  className: cn("data-table-body", classNames?.body),
+                  children: rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    EmptySlot,
+                    {
+                      emptyText,
+                      columnCount,
+                      classNames
+                    }
+                  ) : shouldVirtualize ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+                    paddingTop > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                      "tr",
+                      {
+                        "aria-hidden": true,
+                        className: cn(
+                          "data-table-virtual-spacer",
+                          classNames?.virtualSpacer
+                        ),
+                        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                          "td",
+                          {
+                            colSpan: columnCount,
+                            style: { height: paddingTop },
+                            className: cn(
+                              "data-table-virtual-spacer-cell",
+                              classNames?.virtualSpacerCell
+                            )
+                          }
+                        )
+                      }
                     ),
-                    children: header.isPlaceholder ? null : (0, import_react_table3.flexRender)(header.column.columnDef.header, header.getContext())
-                  },
-                  header.id
-                );
-              }) }, headerGroup.id)) }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DataTableContextProvider, { value: rowContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tbody", { onMouseLeave: clearHover, className: "data-table-body", children: rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(EmptySlot, { emptyText, columnCount }) : shouldVirtualize ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-                paddingTop > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { "aria-hidden": true, className: "data-table-virtual-spacer", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                  "td",
-                  {
-                    colSpan: columnCount,
-                    style: { height: paddingTop },
-                    className: "data-table-virtual-spacer-cell"
-                  }
-                ) }),
-                virtualRows.map((virtualRow) => {
-                  const row = rows[virtualRow.index];
-                  if (!row) return null;
-                  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    virtualRows.map((virtualRow) => {
+                      const row = rows[virtualRow.index];
+                      if (!row) return null;
+                      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                        RowSlot,
+                        {
+                          row,
+                          virtualIndex: virtualRow.index,
+                          measureElement: rowVirtualizer.measureElement,
+                          onToggleSelect: () => handleToggleSelect(row)
+                        },
+                        row.id
+                      );
+                    }),
+                    paddingBottom > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                      "tr",
+                      {
+                        "aria-hidden": true,
+                        className: cn(
+                          "data-table-virtual-spacer",
+                          classNames?.virtualSpacer
+                        ),
+                        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                          "td",
+                          {
+                            colSpan: columnCount,
+                            style: { height: paddingBottom },
+                            className: cn(
+                              "data-table-virtual-spacer-cell",
+                              classNames?.virtualSpacerCell
+                            )
+                          }
+                        )
+                      }
+                    )
+                  ] }) : rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     RowSlot,
                     {
                       row,
-                      virtualIndex: virtualRow.index,
-                      measureElement: rowVirtualizer.measureElement,
                       onToggleSelect: () => handleToggleSelect(row)
                     },
                     row.id
-                  );
-                }),
-                paddingBottom > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { "aria-hidden": true, className: "data-table-virtual-spacer", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                  "td",
-                  {
-                    colSpan: columnCount,
-                    style: { height: paddingBottom },
-                    className: "data-table-virtual-spacer-cell"
-                  }
-                ) })
-              ] }) : rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                RowSlot,
-                {
-                  row,
-                  onToggleSelect: () => handleToggleSelect(row)
-                },
-                row.id
-              )) }) })
+                  ))
+                }
+              ) })
             ]
           }
         ) })
@@ -1767,7 +1917,7 @@ function DataTable({
 }
 
 // src/components/ui/table/components/Table/Table.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/components/ui/table/components/Table/buildColumnDef.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
@@ -1837,10 +1987,10 @@ function buildColumnDef(props, sort, onSort) {
 }
 
 // src/components/ui/table/components/Table/parseTableChildren.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/components/ui/table/components/Table/tableChildTypes.ts
-var import_react7 = require("react");
+var import_react8 = require("react");
 var TABLE_HEADER_DISPLAY_NAME = "Table.Header";
 var TABLE_BODY_DISPLAY_NAME = "Table.Body";
 var TABLE_COLUMN_DISPLAY_NAME = "Table.Column";
@@ -1852,16 +2002,16 @@ function getComponentDisplayName(type) {
   return void 0;
 }
 function isTableHeaderElement(child) {
-  return (0, import_react7.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_HEADER_DISPLAY_NAME;
+  return (0, import_react8.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_HEADER_DISPLAY_NAME;
 }
 function isTableBodyElement(child) {
-  return (0, import_react7.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_BODY_DISPLAY_NAME;
+  return (0, import_react8.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_BODY_DISPLAY_NAME;
 }
 function isTableColumnElement(child) {
-  return (0, import_react7.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_COLUMN_DISPLAY_NAME;
+  return (0, import_react8.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_COLUMN_DISPLAY_NAME;
 }
 function isTablePaginationElement(child) {
-  return (0, import_react7.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_PAGINATION_DISPLAY_NAME;
+  return (0, import_react8.isValidElement)(child) && getComponentDisplayName(child.type) === TABLE_PAGINATION_DISPLAY_NAME;
 }
 
 // src/components/ui/table/components/Table/parseTableChildren.ts
@@ -1871,7 +2021,7 @@ function parseTableChildren(children) {
     body: null,
     pagination: null
   };
-  for (const child of import_react8.Children.toArray(children)) {
+  for (const child of import_react9.Children.toArray(children)) {
     if (isTableHeaderElement(child)) {
       slots.header = child;
       continue;
@@ -1889,7 +2039,7 @@ function parseTableChildren(children) {
 function extractColumnElements(header) {
   if (!header) return [];
   const { children } = header.props;
-  return import_react8.Children.toArray(children).filter(isTableColumnElement);
+  return import_react9.Children.toArray(children).filter(isTableColumnElement);
 }
 
 // src/components/ui/table/components/Table/TableBody.tsx
@@ -1996,12 +2146,12 @@ function TableRoot({
   filteredCount,
   ...dataTableProps
 }) {
-  const { header, pagination: paginationElement } = (0, import_react9.useMemo)(
+  const { header, pagination: paginationElement } = (0, import_react10.useMemo)(
     () => parseTableChildren(children),
     [children]
   );
-  const [sort, setSort] = (0, import_react9.useState)(null);
-  const handleSort = (0, import_react9.useCallback)((field) => {
+  const [sort, setSort] = (0, import_react10.useState)(null);
+  const handleSort = (0, import_react10.useCallback)((field) => {
     setSort((previous) => {
       if (previous?.field !== field) {
         return { field, direction: "asc" };
@@ -2012,7 +2162,7 @@ function TableRoot({
       return null;
     });
   }, []);
-  const columns = (0, import_react9.useMemo)(() => {
+  const columns = (0, import_react10.useMemo)(() => {
     return extractColumnElements(header).map(
       (columnElement) => buildColumnDef(columnElement.props, sort, handleSort)
     );
@@ -2021,7 +2171,7 @@ function TableRoot({
   const pageSize = paginationProps?.pageSize ?? 10;
   const page = paginationProps?.page ?? 1;
   const resolvedTotalCount = paginationProps?.totalCount ?? totalCount ?? data.length;
-  const tableData = (0, import_react9.useMemo)(() => {
+  const tableData = (0, import_react10.useMemo)(() => {
     const sortedData = sortTableData(data, sort);
     if (!paginationProps) return sortedData;
     return paginateTableData(sortedData, page, pageSize);

package/dist/compound.d.cts

@@ -1,16 +1,16 @@
 import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
-import { b as DataTableProps, T as TableColumnProps, d as TableProps } from './types-ByOoRY8x.cjs';
-export { a as DataTableLabels, c as DataTableSlots, R as RowSelectionMode } from './types-ByOoRY8x.cjs';
+import { c as DataTableProps, T as TableColumnProps, e as TableProps } from './types-BfthylVR.cjs';
+export { a as DataTableClassNames, b as DataTableLabels, d as DataTableSlots, R as RowSelectionMode } from './types-BfthylVR.cjs';
 export { ColumnDef, RowSelectionState } from '@tanstack/react-table';
 
 /**
  * Unstyled DataTable shell: semantic HTML + interaction behavior.
  * Class hooks (`DataTableJSX`, `data-table`, …) are opt-in — no CSS is shipped.
- * Customize via `className`, column `className` / `headerClassName`, `labels`,
- * `summary` / `toolbar`, `Column.render`, and `slots`.
+ * Customize via `className`, `classNames` (Tailwind-friendly part map), column
+ * `className` / `headerClassName`, `labels`, `summary` / `toolbar`, `Column.render`, and `slots`.
  */
-declare function DataTable<T extends Record<string, unknown>>({ isPending, summary, toolbar, filteredCount, totalCount, className, slots, ...glideOptions }: DataTableProps<T>): react.JSX.Element;
+declare function DataTable<T extends Record<string, unknown>>({ isPending, summary, toolbar, filteredCount, totalCount, className, classNames, slots, ...glideOptions }: DataTableProps<T>): react.JSX.Element;
 
 /** Body slot marker. DataTable renders the actual tbody. */
 declare function TableBody(): null;

package/dist/compound.d.ts

@@ -1,16 +1,16 @@
 import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
-import { b as DataTableProps, T as TableColumnProps, d as TableProps } from './types-ByOoRY8x.js';
-export { a as DataTableLabels, c as DataTableSlots, R as RowSelectionMode } from './types-ByOoRY8x.js';
+import { c as DataTableProps, T as TableColumnProps, e as TableProps } from './types-BfthylVR.js';
+export { a as DataTableClassNames, b as DataTableLabels, d as DataTableSlots, R as RowSelectionMode } from './types-BfthylVR.js';
 export { ColumnDef, RowSelectionState } from '@tanstack/react-table';
 
 /**
  * Unstyled DataTable shell: semantic HTML + interaction behavior.
  * Class hooks (`DataTableJSX`, `data-table`, …) are opt-in — no CSS is shipped.
- * Customize via `className`, column `className` / `headerClassName`, `labels`,
- * `summary` / `toolbar`, `Column.render`, and `slots`.
+ * Customize via `className`, `classNames` (Tailwind-friendly part map), column
+ * `className` / `headerClassName`, `labels`, `summary` / `toolbar`, `Column.render`, and `slots`.
  */
-declare function DataTable<T extends Record<string, unknown>>({ isPending, summary, toolbar, filteredCount, totalCount, className, slots, ...glideOptions }: DataTableProps<T>): react.JSX.Element;
+declare function DataTable<T extends Record<string, unknown>>({ isPending, summary, toolbar, filteredCount, totalCount, className, classNames, slots, ...glideOptions }: DataTableProps<T>): react.JSX.Element;
 
 /** Body slot marker. DataTable renders the actual tbody. */
 declare function TableBody(): null;