react-glide-table 1.1.1 → 1.1.3

package/dist/index.js

@@ -1132,6 +1132,7 @@ function useGlideTable(options) {
 
 // src/components/ui/table/components/DataTable/DataTable.tsx
 import { flexRender as flexRender2 } from "@tanstack/react-table";
+import { useMemo as useMemo3 } from "react";
 
 // src/components/ui/table/components/DataTable/DataTableRow.tsx
 import { flexRender } from "@tanstack/react-table";
@@ -1322,7 +1323,7 @@ function DataTableRow({
   virtualIndex,
   measureElement
 }) {
-  const { rowSpan, selection, cellSelection, cellEdit, expand } = useDataTableRowContext();
+  const { classNames, rowSpan, selection, cellSelection, cellEdit, expand } = useDataTableRowContext();
   const {
     enableRowSpan,
     primaryRowSpanKey,
@@ -1400,12 +1401,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),
@@ -1456,10 +1462,19 @@ function DataTableRow({
           isVisuallySelectedAt
         );
         const resolveCellRowIndex = (clientY, element) => getRowIndexInMergedCell(clientY, element, rowIndex, cellRowSpan);
+        const hasSelectionEdges = hasCellSelectionEdges(selectionEdgeStyle);
         return /* @__PURE__ */ jsxs2(
           "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();
@@ -1503,8 +1518,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__ */ jsx3(
@@ -1513,7 +1529,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(),
@@ -1531,23 +1551,69 @@ function DataTableRow({
                     onCommitEdit(event.currentTarget.value);
                   }
                 }
-              ) : isExpandCell && enableExpand ? /* @__PURE__ */ jsxs2("div", { className: "expand-cell", children: [
-                /* @__PURE__ */ jsxs2("div", { className: "expand-cell-content", children: [
-                  rowLevel > 0 && /* @__PURE__ */ jsx3("span", { className: "expand-cell-indent", children: "\xB7" }),
-                  /* @__PURE__ */ jsx3("div", { className: "expand-cell-value", children: flexRender(cell.column.columnDef.cell, cell.getContext()) })
-                ] }),
+              ) : isExpandCell && enableExpand ? /* @__PURE__ */ jsxs2("div", { className: cn("expand-cell", classNames?.expandCell), children: [
+                /* @__PURE__ */ jsxs2(
+                  "div",
+                  {
+                    className: cn(
+                      "expand-cell-content",
+                      classNames?.expandCellContent
+                    ),
+                    children: [
+                      rowLevel > 0 && /* @__PURE__ */ jsx3(
+                        "span",
+                        {
+                          className: cn(
+                            "expand-cell-indent",
+                            classNames?.expandCellIndent
+                          ),
+                          children: "\xB7"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx3(
+                        "div",
+                        {
+                          className: cn(
+                            "expand-cell-value",
+                            classNames?.expandCellValue
+                          ),
+                          children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                        }
+                      )
+                    ]
+                  }
+                ),
                 canExpand && expandKey && /* @__PURE__ */ jsx3(
                   "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__ */ jsx3(ChevronUp, { className: "expand-toggle-icon" }) : /* @__PURE__ */ jsx3(ChevronDown, { className: "expand-toggle-icon" })
+                    children: isExpanded ? /* @__PURE__ */ jsx3(
+                      ChevronUp,
+                      {
+                        className: cn(
+                          "expand-toggle-icon",
+                          classNames?.expandToggleIcon
+                        )
+                      }
+                    ) : /* @__PURE__ */ jsx3(
+                      ChevronDown,
+                      {
+                        className: cn(
+                          "expand-toggle-icon",
+                          classNames?.expandToggleIcon
+                        )
+                      }
+                    )
                   }
                 )
               ] }) : flexRender(cell.column.columnDef.cell, cell.getContext()),
@@ -1555,7 +1621,7 @@ function DataTableRow({
                 "div",
                 {
                   role: "presentation",
-                  className: "fill-handle",
+                  className: cn("fill-handle", classNames?.fillHandle),
                   onMouseDown: (event) => {
                     event.stopPropagation();
                     event.preventDefault();
@@ -1581,7 +1647,8 @@ function DataTableToolbar({
   selectedCount,
   selectionLabel,
   toolbar,
-  className
+  className,
+  classNames
 }) {
   const displayFiltered = filteredCount ?? totalCount;
   const hasCount = displayFiltered !== void 0 || totalCount !== void 0;
@@ -1590,9 +1657,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__ */ jsxs3("div", { className: cn("DataTableToolbarJSX", className), children: [
-    /* @__PURE__ */ jsxs3("div", { className: "toolbar-left", children: [
-      hasCount && /* @__PURE__ */ jsx4("span", { className: "toolbar-count", children: displayFiltered !== void 0 && totalCount !== void 0 ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+  return /* @__PURE__ */ jsxs3("div", { className: cn("DataTableToolbarJSX", classNames?.toolbar, className), children: [
+    /* @__PURE__ */ jsxs3("div", { className: cn("toolbar-left", classNames?.toolbarLeft), children: [
+      hasCount && /* @__PURE__ */ jsx4("span", { className: cn("toolbar-count", classNames?.toolbarCount), children: displayFiltered !== void 0 && totalCount !== void 0 ? /* @__PURE__ */ jsxs3(Fragment, { children: [
         /* @__PURE__ */ jsx4("span", { className: "toolbar-count-primary", children: displayFiltered }),
         /* @__PURE__ */ jsxs3("span", { className: "toolbar-count-placeholder", children: [
           " / ",
@@ -1601,9 +1668,9 @@ function DataTableToolbar({
       ] }) : /* @__PURE__ */ jsx4("span", { className: "toolbar-count-primary", children: displayFiltered ?? totalCount }) }),
       summary
     ] }),
-    /* @__PURE__ */ jsxs3("div", { className: "toolbar-right", children: [
-      hasSelectionContent && (typeof selectionContent === "string" || typeof selectionContent === "number" ? /* @__PURE__ */ jsx4("span", { className: "toolbar-selection", children: selectionContent }) : selectionContent),
-      hasToolbar && /* @__PURE__ */ jsx4("div", { className: "toolbar-actions", children: toolbar })
+    /* @__PURE__ */ jsxs3("div", { className: cn("toolbar-right", classNames?.toolbarRight), children: [
+      hasSelectionContent && (typeof selectionContent === "string" || typeof selectionContent === "number" ? /* @__PURE__ */ jsx4("span", { className: cn("toolbar-selection", classNames?.toolbarSelection), children: selectionContent }) : selectionContent),
+      hasToolbar && /* @__PURE__ */ jsx4("div", { className: cn("toolbar-actions", classNames?.toolbarActions), children: toolbar })
     ] })
   ] });
 }
@@ -1612,15 +1679,36 @@ function DataTableToolbar({
 import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function DefaultPending({
   loadingText,
-  className
+  className,
+  classNames
 }) {
-  return /* @__PURE__ */ jsx5("div", { className: cn("DataTableJSX", "DataTableJSX--pending", className), children: /* @__PURE__ */ jsx5("span", { className: "data-table-loading-text", children: loadingText }) });
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      className: cn(
+        "DataTableJSX",
+        "DataTableJSX--pending",
+        classNames?.root,
+        classNames?.pending,
+        className
+      ),
+      children: /* @__PURE__ */ jsx5("span", { className: cn("data-table-loading-text", classNames?.loadingText), children: loadingText })
+    }
+  );
 }
 function DefaultEmpty({
   emptyText,
-  columnCount
+  columnCount,
+  classNames
 }) {
-  return /* @__PURE__ */ jsx5("tr", { children: /* @__PURE__ */ jsx5("td", { colSpan: columnCount, className: "data-table-empty-cell", children: emptyText }) });
+  return /* @__PURE__ */ jsx5("tr", { children: /* @__PURE__ */ jsx5(
+    "td",
+    {
+      colSpan: columnCount,
+      className: cn("data-table-empty-cell", classNames?.emptyCell),
+      children: emptyText
+    }
+  ) });
 }
 function DataTable({
   isPending = false,
@@ -1629,6 +1717,7 @@ function DataTable({
   filteredCount,
   totalCount,
   className,
+  classNames,
   slots,
   ...glideOptions
 }) {
@@ -1656,8 +1745,19 @@ function DataTable({
   const RowSlot = slots?.Row ?? DataTableRow;
   const PendingSlot = slots?.Pending ?? DefaultPending;
   const EmptySlot = slots?.Empty ?? DefaultEmpty;
+  const contextValue = useMemo3(
+    () => ({ ...rowContextValue, classNames }),
+    [rowContextValue, classNames]
+  );
   if (isPending) {
-    return /* @__PURE__ */ jsx5(PendingSlot, { loadingText, className });
+    return /* @__PURE__ */ jsx5(
+      PendingSlot,
+      {
+        loadingText,
+        className,
+        classNames
+      }
+    );
   }
   return /* @__PURE__ */ jsxs4(
     "div",
@@ -1665,6 +1765,7 @@ function DataTable({
       className: cn(
         "DataTableJSX",
         !enableCellSelection && "DataTableJSX--no-cell-selection",
+        classNames?.root,
         className
       ),
       children: [
@@ -1676,71 +1777,120 @@ function DataTable({
             summary,
             selectedCount,
             selectionLabel,
-            toolbar
+            toolbar,
+            classNames
           }
         ),
-        /* @__PURE__ */ jsx5("div", { ref: scrollRef, className: "data-table-scroll", children: /* @__PURE__ */ jsxs4(
+        /* @__PURE__ */ jsx5("div", { ref: scrollRef, className: cn("data-table-scroll", classNames?.scroll), children: /* @__PURE__ */ jsxs4(
           "table",
           {
-            className: "data-table",
+            className: cn("data-table", classNames?.table),
             onDragStart: enableCellSelection ? (event) => event.preventDefault() : void 0,
             children: [
-              /* @__PURE__ */ jsx5("thead", { className: "data-table-head", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx5("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__ */ jsx5(
-                  "th",
-                  {
-                    style: { width: header.getSize() !== 150 ? header.getSize() : void 0 },
-                    className: cn(
-                      "data-table-head-cell",
-                      CELL_ALIGN_CLASS[align],
-                      headerClassName
+              /* @__PURE__ */ jsx5("thead", { className: cn("data-table-head", classNames?.head), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx5(
+                "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__ */ jsx5(
+                      "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 : flexRender2(header.column.columnDef.header, header.getContext())
+                      },
+                      header.id
+                    );
+                  })
+                },
+                headerGroup.id
+              )) }),
+              /* @__PURE__ */ jsx5(DataTableContextProvider, { value: contextValue, children: /* @__PURE__ */ jsx5(
+                "tbody",
+                {
+                  onMouseLeave: clearHover,
+                  className: cn("data-table-body", classNames?.body),
+                  children: rows.length === 0 ? /* @__PURE__ */ jsx5(
+                    EmptySlot,
+                    {
+                      emptyText,
+                      columnCount,
+                      classNames
+                    }
+                  ) : shouldVirtualize ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                    paddingTop > 0 && /* @__PURE__ */ jsx5(
+                      "tr",
+                      {
+                        "aria-hidden": true,
+                        className: cn(
+                          "data-table-virtual-spacer",
+                          classNames?.virtualSpacer
+                        ),
+                        children: /* @__PURE__ */ jsx5(
+                          "td",
+                          {
+                            colSpan: columnCount,
+                            style: { height: paddingTop },
+                            className: cn(
+                              "data-table-virtual-spacer-cell",
+                              classNames?.virtualSpacerCell
+                            )
+                          }
+                        )
+                      }
                     ),
-                    children: header.isPlaceholder ? null : flexRender2(header.column.columnDef.header, header.getContext())
-                  },
-                  header.id
-                );
-              }) }, headerGroup.id)) }),
-              /* @__PURE__ */ jsx5(DataTableContextProvider, { value: rowContextValue, children: /* @__PURE__ */ jsx5("tbody", { onMouseLeave: clearHover, className: "data-table-body", children: rows.length === 0 ? /* @__PURE__ */ jsx5(EmptySlot, { emptyText, columnCount }) : shouldVirtualize ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
-                paddingTop > 0 && /* @__PURE__ */ jsx5("tr", { "aria-hidden": true, className: "data-table-virtual-spacer", children: /* @__PURE__ */ jsx5(
-                  "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__ */ jsx5(
+                    virtualRows.map((virtualRow) => {
+                      const row = rows[virtualRow.index];
+                      if (!row) return null;
+                      return /* @__PURE__ */ jsx5(
+                        RowSlot,
+                        {
+                          row,
+                          virtualIndex: virtualRow.index,
+                          measureElement: rowVirtualizer.measureElement,
+                          onToggleSelect: () => handleToggleSelect(row)
+                        },
+                        row.id
+                      );
+                    }),
+                    paddingBottom > 0 && /* @__PURE__ */ jsx5(
+                      "tr",
+                      {
+                        "aria-hidden": true,
+                        className: cn(
+                          "data-table-virtual-spacer",
+                          classNames?.virtualSpacer
+                        ),
+                        children: /* @__PURE__ */ jsx5(
+                          "td",
+                          {
+                            colSpan: columnCount,
+                            style: { height: paddingBottom },
+                            className: cn(
+                              "data-table-virtual-spacer-cell",
+                              classNames?.virtualSpacerCell
+                            )
+                          }
+                        )
+                      }
+                    )
+                  ] }) : rows.map((row) => /* @__PURE__ */ jsx5(
                     RowSlot,
                     {
                       row,
-                      virtualIndex: virtualRow.index,
-                      measureElement: rowVirtualizer.measureElement,
                       onToggleSelect: () => handleToggleSelect(row)
                     },
                     row.id
-                  );
-                }),
-                paddingBottom > 0 && /* @__PURE__ */ jsx5("tr", { "aria-hidden": true, className: "data-table-virtual-spacer", children: /* @__PURE__ */ jsx5(
-                  "td",
-                  {
-                    colSpan: columnCount,
-                    style: { height: paddingBottom },
-                    className: "data-table-virtual-spacer-cell"
-                  }
-                ) })
-              ] }) : rows.map((row) => /* @__PURE__ */ jsx5(
-                RowSlot,
-                {
-                  row,
-                  onToggleSelect: () => handleToggleSelect(row)
-                },
-                row.id
-              )) }) })
+                  ))
+                }
+              ) })
             ]
           }
         ) })
@@ -1750,7 +1900,7 @@ function DataTable({
 }
 
 // src/components/ui/table/components/Table/Table.tsx
-import { useCallback as useCallback4, useMemo as useMemo3, useState as useState4 } from "react";
+import { useCallback as useCallback4, useMemo as useMemo4, useState as useState4 } from "react";
 
 // src/components/ui/table/components/Table/buildColumnDef.tsx
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
@@ -1979,7 +2129,7 @@ function TableRoot({
   filteredCount,
   ...dataTableProps
 }) {
-  const { header, pagination: paginationElement } = useMemo3(
+  const { header, pagination: paginationElement } = useMemo4(
     () => parseTableChildren(children),
     [children]
   );
@@ -1995,7 +2145,7 @@ function TableRoot({
       return null;
     });
   }, []);
-  const columns = useMemo3(() => {
+  const columns = useMemo4(() => {
     return extractColumnElements(header).map(
       (columnElement) => buildColumnDef(columnElement.props, sort, handleSort)
     );
@@ -2004,7 +2154,7 @@ function TableRoot({
   const pageSize = paginationProps?.pageSize ?? 10;
   const page = paginationProps?.page ?? 1;
   const resolvedTotalCount = paginationProps?.totalCount ?? totalCount ?? data.length;
-  const tableData = useMemo3(() => {
+  const tableData = useMemo4(() => {
     const sortedData = sortTableData(data, sort);
     if (!paginationProps) return sortedData;
     return paginateTableData(sortedData, page, pageSize);