boneless-table 0.1.0

package/dist/index.mjs

@@ -0,0 +1,959 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/boneless-table.tsx
+import {
+  flexRender,
+  getExpandedRowModel,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  useReactTable
+} from "@tanstack/react-table";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import {
+  useEffect as useEffect3,
+  useId,
+  useMemo,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+
+// src/column-filter.tsx
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ColumnFilter({
+  column,
+  settings,
+  className,
+  icon,
+  debounceMs = 0
+}) {
+  var _a, _b;
+  const value = String((_a = column.getFilterValue()) != null ? _a : "");
+  const [inputValue, setInputValue] = useState(value);
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+  useEffect(() => {
+    if (settings.type !== "text" || inputValue === value) return;
+    if (debounceMs <= 0) {
+      column.setFilterValue(inputValue || void 0);
+      return;
+    }
+    const timer = window.setTimeout(
+      () => column.setFilterValue(inputValue || void 0),
+      debounceMs
+    );
+    return () => window.clearTimeout(timer);
+  }, [column, debounceMs, inputValue, settings.type, value]);
+  if (settings.type === "select") {
+    return /* @__PURE__ */ jsxs(
+      "select",
+      {
+        className,
+        "data-slot": "filter-select",
+        "aria-label": `Filter ${column.id}`,
+        value,
+        onChange: (event) => column.setFilterValue(event.target.value || void 0),
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", children: "All" }),
+          (_b = settings.options) == null ? void 0 : _b.map((option) => /* @__PURE__ */ jsx("option", { value: option, children: option }, option))
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("label", { className, "data-slot": "filter-text", children: [
+    icon,
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        "data-slot": "filter-input",
+        "aria-label": `Filter ${column.id}`,
+        value: inputValue,
+        placeholder: "Filter",
+        onChange: (event) => setInputValue(event.target.value)
+      }
+    )
+  ] });
+}
+
+// src/column-menu.tsx
+import { useEffect as useEffect2, useRef } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function ColumnMenu({
+  table,
+  onClose,
+  onMoveColumn,
+  className,
+  icons,
+  id = "boneless-table-column-menu",
+  triggerRef
+}) {
+  var _a;
+  const menuRef = useRef(null);
+  const closeButtonRef = useRef(null);
+  useEffect2(() => {
+    var _a2;
+    (_a2 = closeButtonRef.current) == null ? void 0 : _a2.focus();
+    function dismissOnOutsideClick(event) {
+      var _a3, _b;
+      const target = event.target;
+      if (!((_a3 = menuRef.current) == null ? void 0 : _a3.contains(target)) && !((_b = triggerRef == null ? void 0 : triggerRef.current) == null ? void 0 : _b.contains(target))) onClose();
+    }
+    document.addEventListener("mousedown", dismissOnOutsideClick);
+    return () => document.removeEventListener("mousedown", dismissOnOutsideClick);
+  }, [onClose]);
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className,
+      "data-slot": "column-menu",
+      ref: menuRef,
+      id,
+      role: "dialog",
+      "aria-modal": "false",
+      "aria-labelledby": `${id}-title`,
+      onKeyDown: (event) => {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          onClose();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs2("div", { "data-slot": "column-menu-header", children: [
+          /* @__PURE__ */ jsx2("span", { id: `${id}-title`, children: "Configure columns" }),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              "data-slot": "column-menu-close",
+              onClick: onClose,
+              "aria-label": "Close column settings",
+              ref: closeButtonRef,
+              children: (_a = icons == null ? void 0 : icons.close) != null ? _a : "Close"
+            }
+          )
+        ] }),
+        table.getAllLeafColumns().map((column) => {
+          var _a2, _b, _c, _d;
+          return /* @__PURE__ */ jsxs2("div", { "data-slot": "column-menu-item", children: [
+            /* @__PURE__ */ jsxs2("label", { "data-slot": "column-menu-label", children: [
+              /* @__PURE__ */ jsx2(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: column.getIsVisible(),
+                  onChange: column.getToggleVisibilityHandler()
+                }
+              ),
+              (_b = (_a2 = column.columnDef.meta) == null ? void 0 : _a2.columnLabel) != null ? _b : typeof column.columnDef.header === "string" || typeof column.columnDef.header === "number" ? String(column.columnDef.header) : column.id
+            ] }),
+            /* @__PURE__ */ jsxs2("div", { "data-slot": "column-menu-actions", children: [
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  "data-slot": "column-menu-move-earlier",
+                  onClick: () => onMoveColumn(column.id, -1),
+                  title: "Move column earlier",
+                  children: (_c = icons == null ? void 0 : icons.moveEarlier) != null ? _c : "Earlier"
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  "data-slot": "column-menu-move-later",
+                  onClick: () => onMoveColumn(column.id, 1),
+                  title: "Move column later",
+                  children: (_d = icons == null ? void 0 : icons.moveLater) != null ? _d : "Later"
+                }
+              )
+            ] })
+          ] }, column.id);
+        })
+      ]
+    }
+  );
+}
+
+// src/class-names.ts
+function cn(...classNames) {
+  return classNames.filter(Boolean).join(" ");
+}
+
+// src/settings.ts
+var defaultBonelessTableSettings = {
+  columnDefaults: {
+    sizing: { minPx: 120, flex: 1 },
+    align: "left",
+    borders: "none",
+    sorting: { enabled: true, reveal: "hover" }
+  },
+  interactions: { filterReveal: "hover", horizontalOverflow: "auto" }
+};
+function mergeBonelessTableSettings(override, base = defaultBonelessTableSettings) {
+  var _a, _b, _c, _d, _e, _f;
+  if (!override) return base;
+  return {
+    columnDefaults: {
+      sizing: __spreadValues(__spreadValues({}, base.columnDefaults.sizing), (_a = override.columnDefaults) == null ? void 0 : _a.sizing),
+      align: (_c = (_b = override.columnDefaults) == null ? void 0 : _b.align) != null ? _c : base.columnDefaults.align,
+      borders: (_e = (_d = override.columnDefaults) == null ? void 0 : _d.borders) != null ? _e : base.columnDefaults.borders,
+      sorting: __spreadValues(__spreadValues({}, base.columnDefaults.sorting), (_f = override.columnDefaults) == null ? void 0 : _f.sorting)
+    },
+    interactions: __spreadValues(__spreadValues({}, base.interactions), override.interactions)
+  };
+}
+function resolveColumnSettings(settings, column) {
+  var _a, _b, _c;
+  const configured = (_a = column.columnDef.meta) == null ? void 0 : _a.bonelessTable;
+  const configuredSizing = configured == null ? void 0 : configured.sizing;
+  return {
+    sizing: configuredSizing && "widthPx" in configuredSizing ? { widthPx: configuredSizing.widthPx } : __spreadValues(__spreadValues({}, settings.columnDefaults.sizing), configuredSizing),
+    align: (_b = configured == null ? void 0 : configured.align) != null ? _b : settings.columnDefaults.align,
+    borders: (_c = configured == null ? void 0 : configured.borders) != null ? _c : settings.columnDefaults.borders,
+    sorting: __spreadValues(__spreadValues({}, settings.columnDefaults.sorting), configured == null ? void 0 : configured.sorting),
+    filtering: configured == null ? void 0 : configured.filtering,
+    valueDisplay: configured == null ? void 0 : configured.valueDisplay
+  };
+}
+function compactValue(value, settings) {
+  var _a;
+  const text = value == null ? "" : String(value);
+  const display = settings == null ? void 0 : settings.valueDisplay;
+  if (!display || text.length <= display.truncateAt) return text;
+  return `${text.slice(0, display.truncateAt).trimEnd()}${(_a = display.suffix) != null ? _a : "..."}`;
+}
+
+// src/columns.ts
+function defineColumns(columns) {
+  return columns;
+}
+function resolveColumns(columns) {
+  return columns.map((column) => {
+    if ("key" in column && column.key) {
+      const _a = column, { key } = _a, definition = __objRest(_a, ["key"]);
+      return __spreadProps(__spreadValues({}, definition), { accessorKey: key });
+    }
+    return column;
+  });
+}
+function withDefaultCells(columns) {
+  return columns.map((column) => {
+    if (column.cell) return column;
+    return __spreadProps(__spreadValues({}, column), {
+      cell: ({ getValue, column: tableColumn }) => {
+        var _a;
+        const text = compactValue(getValue(), (_a = tableColumn.columnDef.meta) == null ? void 0 : _a.bonelessTable);
+        return text;
+      }
+    });
+  });
+}
+function getColumnIds(columns) {
+  return columns.map((column, index) => {
+    if ("id" in column && column.id) return column.id;
+    if ("key" in column && column.key != null) return String(column.key);
+    if ("accessorKey" in column && column.accessorKey != null) {
+      return String(column.accessorKey);
+    }
+    return String(index);
+  });
+}
+
+// src/table-skeleton.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function TableSkeleton({
+  columnCount,
+  rows,
+  label = "Loading rows",
+  classNames = {}
+}) {
+  return /* @__PURE__ */ jsx3("div", { "data-slot": "skeleton", className: classNames.skeleton, "aria-busy": "true", children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: classNames.row,
+      "data-slot": "skeleton-row",
+      role: "status",
+      "aria-label": label,
+      style: { display: "grid", gridTemplateColumns: "var(--boneless-table-grid)" },
+      children: Array.from({ length: columnCount }, (_2, columnIndex) => /* @__PURE__ */ jsx3("div", { className: cn(classNames.cell), "data-slot": "skeleton-cell", children: /* @__PURE__ */ jsx3("span", { "data-slot": "skeleton-line" }) }, columnIndex))
+    },
+    rowIndex
+  )) });
+}
+
+// src/row-link.ts
+function readPath(row, path) {
+  return path.split(".").reduce((value, key) => {
+    if (value === null || typeof value !== "object") return void 0;
+    return value[key];
+  }, row);
+}
+function resolveRowHref(link, row) {
+  if (typeof link.href === "function") return link.href(row);
+  let hasMissingValue = false;
+  const href = link.href.replace(/\{(?:row\.)?([\w.]+)\}/g, (token, path) => {
+    const value = readPath(row, path);
+    if (value === void 0 || value === null) {
+      hasMissingValue = true;
+      return token;
+    }
+    return encodeURIComponent(String(value));
+  });
+  return hasMissingValue ? void 0 : href;
+}
+function resolveRowLinkLabel(link, row) {
+  return typeof link.label === "function" ? link.label(row) : link.label;
+}
+
+// src/boneless-table.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function moveItem(order, id, direction) {
+  const index = order.indexOf(id);
+  const target = index + direction;
+  if (index < 0 || target < 0 || target >= order.length) return order;
+  const next = [...order];
+  [next[index], next[target]] = [next[target], next[index]];
+  return next;
+}
+function renderSlot(slot, table, fallback) {
+  if (slot === false) return null;
+  if (typeof slot === "function") return slot(table);
+  if (slot && slot !== true) return slot;
+  return fallback;
+}
+function BonelessTable(_a) {
+  var _b = _a, {
+    data,
+    columns,
+    settings: settingsOverride,
+    className,
+    classNames = {},
+    icons,
+    tree: treeOption,
+    isLoading = false,
+    isFetchingMore = false,
+    skeletonRows = 8,
+    skeletonLabel = "Loading rows",
+    onNearEnd,
+    canLoadMore = true,
+    nearEndOffset = 220,
+    filterDebounceMs = 150,
+    scroller = "auto",
+    toolbar = true,
+    toolbarLayout,
+    footer = true,
+    totalCount,
+    resultLabel = "rows",
+    resultHint,
+    onReset,
+    onRowClick,
+    scrollToTopOn,
+    rowLink,
+    emptyState,
+    virtualization = {}
+  } = _b, tableOptions = __objRest(_b, [
+    "data",
+    "columns",
+    "settings",
+    "className",
+    "classNames",
+    "icons",
+    "tree",
+    "isLoading",
+    "isFetchingMore",
+    "skeletonRows",
+    "skeletonLabel",
+    "onNearEnd",
+    "canLoadMore",
+    "nearEndOffset",
+    "filterDebounceMs",
+    "scroller",
+    "toolbar",
+    "toolbarLayout",
+    "footer",
+    "totalCount",
+    "resultLabel",
+    "resultHint",
+    "onReset",
+    "onRowClick",
+    "scrollToTopOn",
+    "rowLink",
+    "emptyState",
+    "virtualization"
+  ]);
+  var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _l, _m, _n, _o, _p, _q, _r, _s;
+  const settings = useMemo(() => mergeBonelessTableSettings(settingsOverride), [settingsOverride]);
+  const resolvedColumns = useMemo(() => withDefaultCells(resolveColumns(columns)), [columns]);
+  const defaultOrder = useMemo(() => getColumnIds(resolvedColumns), [resolvedColumns]);
+  const scrollerRef = useRef2(null);
+  const headerScrollerRef = useRef2(null);
+  const columnsButtonRef = useRef2(null);
+  const nearEndTriggeredRef = useRef2(false);
+  const columnMenuId = useId();
+  const [showColumns, setShowColumns] = useState2(false);
+  const [headerScrollbarGutter, setHeaderScrollbarGutter] = useState2(0);
+  const [sorting, setSorting] = useState2((_b2 = (_a2 = tableOptions.initialState) == null ? void 0 : _a2.sorting) != null ? _b2 : []);
+  const [columnFilters, setColumnFilters] = useState2(
+    (_d = (_c = tableOptions.initialState) == null ? void 0 : _c.columnFilters) != null ? _d : []
+  );
+  const [columnVisibility, setColumnVisibility] = useState2(
+    (_f = (_e = tableOptions.initialState) == null ? void 0 : _e.columnVisibility) != null ? _f : {}
+  );
+  const [columnOrder, setColumnOrder] = useState2(
+    (_h = (_g = tableOptions.initialState) == null ? void 0 : _g.columnOrder) != null ? _h : defaultOrder
+  );
+  const [expanded, setExpanded] = useState2((_j = (_i = tableOptions.initialState) == null ? void 0 : _i.expanded) != null ? _j : {});
+  const _k = tableOptions, {
+    state: controlledState,
+    onSortingChange,
+    onColumnFiltersChange,
+    onColumnVisibilityChange,
+    onColumnOrderChange,
+    onExpandedChange,
+    getCoreRowModel: getCoreRowModelOption,
+    getSortedRowModel: getSortedRowModelOption,
+    getFilteredRowModel: getFilteredRowModelOption,
+    getSubRows,
+    manualSorting,
+    manualFiltering,
+    initialState
+  } = _k, restTableOptions = __objRest(_k, [
+    "state",
+    "onSortingChange",
+    "onColumnFiltersChange",
+    "onColumnVisibilityChange",
+    "onColumnOrderChange",
+    "onExpandedChange",
+    "getCoreRowModel",
+    "getSortedRowModel",
+    "getFilteredRowModel",
+    "getSubRows",
+    "manualSorting",
+    "manualFiltering",
+    "initialState"
+  ]);
+  useEffect3(() => {
+    var _a3;
+    if (scrollToTopOn !== void 0) (_a3 = scrollerRef.current) == null ? void 0 : _a3.scrollTo({ top: 0 });
+  }, [scrollToTopOn]);
+  useEffect3(() => {
+    const scroller2 = scrollerRef.current;
+    if (!scroller2) return;
+    const syncHeaderScrollbarGutter = () => {
+      setHeaderScrollbarGutter(Math.max(0, scroller2.offsetWidth - scroller2.clientWidth));
+    };
+    syncHeaderScrollbarGutter();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(syncHeaderScrollbarGutter);
+    observer.observe(scroller2);
+    return () => observer.disconnect();
+  }, []);
+  const table = useReactTable(__spreadProps(__spreadValues({}, restTableOptions), {
+    data,
+    columns: resolvedColumns,
+    initialState,
+    state: __spreadValues({
+      sorting,
+      columnFilters,
+      columnVisibility,
+      columnOrder,
+      expanded
+    }, controlledState),
+    onSortingChange: onSortingChange != null ? onSortingChange : setSorting,
+    onColumnFiltersChange: onColumnFiltersChange != null ? onColumnFiltersChange : setColumnFilters,
+    onColumnVisibilityChange: onColumnVisibilityChange != null ? onColumnVisibilityChange : setColumnVisibility,
+    onColumnOrderChange: onColumnOrderChange != null ? onColumnOrderChange : setColumnOrder,
+    onExpandedChange: onExpandedChange != null ? onExpandedChange : setExpanded,
+    getCoreRowModel: getCoreRowModelOption != null ? getCoreRowModelOption : getCoreRowModel(),
+    getSortedRowModel: getSortedRowModelOption != null ? getSortedRowModelOption : manualSorting ? void 0 : getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModelOption != null ? getFilteredRowModelOption : manualFiltering ? void 0 : getFilteredRowModel(),
+    getExpandedRowModel: treeOption ? getExpandedRowModel() : void 0,
+    getSubRows,
+    manualSorting,
+    manualFiltering
+  }));
+  const visibleColumns = table.getVisibleLeafColumns();
+  const allColumns = table.getAllFlatColumns();
+  const columnSettingsById = useMemo(
+    () => new Map(allColumns.map((column) => [column.id, resolveColumnSettings(settings, column)])),
+    [allColumns, settings]
+  );
+  const getColumnSettings = (column) => {
+    var _a3;
+    return (_a3 = columnSettingsById.get(column.id)) != null ? _a3 : resolveColumnSettings(settings, column);
+  };
+  const grid = visibleColumns.map((column) => {
+    const columnSettings = getColumnSettings(column);
+    if ("widthPx" in columnSettings.sizing) return `${columnSettings.sizing.widthPx}px`;
+    return `minmax(${columnSettings.sizing.minPx}px, ${columnSettings.sizing.flex}fr)`;
+  }).join(" ");
+  const minWidth = visibleColumns.reduce((width, column) => {
+    const { sizing } = getColumnSettings(column);
+    return width + ("widthPx" in sizing ? sizing.widthPx : sizing.minPx);
+  }, 0);
+  const gridStyle = {
+    "--boneless-table-grid": grid,
+    minWidth: `${minWidth}px`
+  };
+  const tree = treeOption === true ? {} : treeOption === false ? void 0 : treeOption;
+  const treeColumnId = (_m = tree == null ? void 0 : tree.columnId) != null ? _m : (_l = visibleColumns[0]) == null ? void 0 : _l.id;
+  const treeIndentPx = (_n = tree == null ? void 0 : tree.indentPx) != null ? _n : 16;
+  const preExpandedRowModel = tree ? table.getPreExpandedRowModel() : void 0;
+  const expandableRows = useMemo(
+    () => {
+      var _a3;
+      return (_a3 = preExpandedRowModel == null ? void 0 : preExpandedRowModel.flatRows.filter((row) => row.getCanExpand())) != null ? _a3 : [];
+    },
+    [preExpandedRowModel]
+  );
+  const allTreeRowsExpanded = useMemo(
+    () => expandableRows.length > 0 && expandableRows.every((row) => row.getIsExpanded()),
+    [expandableRows, expanded]
+  );
+  useEffect3(() => {
+    if (!isFetchingMore || !canLoadMore) nearEndTriggeredRef.current = false;
+  }, [canLoadMore, isFetchingMore]);
+  function handleScroll() {
+    const element = scrollerRef.current;
+    if (!element) return;
+    if (headerScrollerRef.current) headerScrollerRef.current.scrollLeft = element.scrollLeft;
+    const isNearEnd = element.scrollHeight - element.scrollTop - element.clientHeight < nearEndOffset;
+    if (!isNearEnd) {
+      nearEndTriggeredRef.current = false;
+      return;
+    }
+    if (!onNearEnd || !canLoadMore || isFetchingMore || nearEndTriggeredRef.current) return;
+    nearEndTriggeredRef.current = true;
+    onNearEnd();
+  }
+  function resetTable() {
+    if (onReset) return onReset();
+    table.resetSorting();
+    table.resetColumnFilters();
+    table.resetColumnVisibility();
+    table.setColumnOrder(defaultOrder);
+    table.resetExpanded();
+  }
+  function moveColumn(id, direction) {
+    const current = table.getState().columnOrder;
+    table.setColumnOrder(moveItem(current.length ? current : defaultOrder, id, direction));
+  }
+  const shown = table.getRowModel().rows.length;
+  const total = totalCount != null ? totalCount : shown;
+  const rows = table.getRowModel().rows;
+  const isVirtualized = scroller === "fill" && virtualization !== false;
+  const rowVirtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => scrollerRef.current,
+    estimateSize: () => {
+      var _a3;
+      return virtualization === false ? 58 : (_a3 = virtualization.estimateSize) != null ? _a3 : 58;
+    },
+    overscan: isVirtualized ? (_o = virtualization.overscan) != null ? _o : 5 : 0,
+    enabled: isVirtualized,
+    initialRect: { width: 0, height: 600 }
+  });
+  const estimatedRowSize = virtualization === false ? 58 : (_p = virtualization.estimateSize) != null ? _p : 58;
+  const virtualRows = !isVirtualized ? rows.map((row, index) => ({ index, start: index * 58, key: row.id })) : rowVirtualizer.getVirtualItems().length > 0 ? rowVirtualizer.getVirtualItems() : rows.slice(0, Math.ceil(600 / estimatedRowSize) + ((_q = virtualization.overscan) != null ? _q : 5)).map((row, index) => ({
+    index,
+    start: index * estimatedRowSize,
+    key: row.id
+  }));
+  function closeColumnMenu() {
+    var _a3;
+    setShowColumns(false);
+    (_a3 = columnsButtonRef.current) == null ? void 0 : _a3.focus();
+  }
+  const toolbarSummary = /* @__PURE__ */ jsxs3("div", { className: classNames.toolbarSummary, "data-slot": "toolbar-summary", children: [
+    /* @__PURE__ */ jsx4("strong", { children: total.toLocaleString() }),
+    " ",
+    resultLabel,
+    resultHint ? /* @__PURE__ */ jsx4("span", { className: classNames.toolbarHint, "data-slot": "toolbar-hint", children: resultHint }) : null
+  ] });
+  const toolbarActions = /* @__PURE__ */ jsxs3("div", { className: classNames.toolbarActions, "data-slot": "toolbar-actions", children: [
+    tree && expandableRows.length > 0 ? /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        "data-slot": "tree-toggle-all",
+        onClick: () => table.toggleAllRowsExpanded(!allTreeRowsExpanded),
+        children: [
+          allTreeRowsExpanded ? icons == null ? void 0 : icons.collapse : icons == null ? void 0 : icons.expand,
+          allTreeRowsExpanded ? (_r = tree.collapseAllLabel) != null ? _r : "Collapse all" : (_s = tree.expandAllLabel) != null ? _s : "Expand all"
+        ]
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs3("button", { "data-slot": "reset", onClick: resetTable, title: "Reset table settings", children: [
+      icons == null ? void 0 : icons.reset,
+      "Reset"
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { "data-slot": "column-settings", children: [
+      /* @__PURE__ */ jsxs3(
+        "button",
+        {
+          "data-slot": "columns-button",
+          onClick: () => setShowColumns((value) => !value),
+          "aria-expanded": showColumns,
+          "aria-haspopup": "dialog",
+          "aria-controls": columnMenuId,
+          ref: columnsButtonRef,
+          children: [
+            icons == null ? void 0 : icons.columns,
+            "Columns"
+          ]
+        }
+      ),
+      showColumns ? /* @__PURE__ */ jsx4(
+        ColumnMenu,
+        {
+          table,
+          onClose: closeColumnMenu,
+          onMoveColumn: moveColumn,
+          className: classNames.columnMenu,
+          icons,
+          id: columnMenuId,
+          triggerRef: columnsButtonRef
+        }
+      ) : null
+    ] })
+  ] });
+  const defaultToolbar = toolbarLayout ? toolbarLayout({ table, summary: toolbarSummary, actions: toolbarActions }) : /* @__PURE__ */ jsxs3("div", { className: classNames.toolbar, "data-slot": "toolbar", children: [
+    toolbarSummary,
+    toolbarActions
+  ] });
+  const defaultFooter = /* @__PURE__ */ jsxs3("footer", { className: classNames.footer, "data-slot": "footer", children: [
+    "Showing ",
+    shown.toLocaleString(),
+    " of ",
+    total.toLocaleString(),
+    " ",
+    resultLabel
+  ] });
+  const rootStyle = scroller === "fill" ? { display: "flex", flexDirection: "column", minHeight: 0 } : void 0;
+  const scrollerStyle = __spreadValues({
+    overflowX: settings.interactions.horizontalOverflow
+  }, scroller === "fill" ? { flex: "1 1 auto", minHeight: 0, overflowY: "auto" } : {});
+  const tableStyle = __spreadValues({
+    "--boneless-table-grid": grid
+  }, scroller === "fill" ? { display: "flex", flexDirection: "column", flex: "1 1 auto", minHeight: 0 } : {});
+  return /* @__PURE__ */ jsxs3("div", { className: cn(className, classNames.root), "data-slot": "root", style: rootStyle, children: [
+    renderSlot(toolbar, table, defaultToolbar),
+    /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: classNames.table,
+        "data-slot": "table",
+        style: tableStyle,
+        "aria-busy": isLoading || isFetchingMore,
+        role: "table",
+        children: [
+          /* @__PURE__ */ jsx4(
+            "div",
+            {
+              "data-slot": "header-scroller",
+              ref: headerScrollerRef,
+              style: {
+                flex: "0 0 auto",
+                minWidth: 0,
+                overflow: "hidden",
+                paddingInlineEnd: headerScrollbarGutter || void 0
+              },
+              children: /* @__PURE__ */ jsx4(
+                "div",
+                {
+                  className: classNames.headerGroup,
+                  "data-slot": "header-group",
+                  role: "rowgroup",
+                  style: gridStyle,
+                  children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx4(
+                    "div",
+                    {
+                      className: classNames.headerRow,
+                      "data-slot": "header-row",
+                      role: "row",
+                      style: { display: "grid", gridTemplateColumns: "var(--boneless-table-grid)" },
+                      children: headerGroup.headers.map((header) => {
+                        var _a3;
+                        const columnSettings = getColumnSettings(header.column);
+                        const direction = header.column.getIsSorted();
+                        const isSortable = !header.isPlaceholder && header.column.getCanSort() && columnSettings.sorting.enabled;
+                        return /* @__PURE__ */ jsxs3(
+                          "div",
+                          {
+                            className: classNames.header,
+                            "data-slot": "header",
+                            "data-align": columnSettings.align,
+                            "data-borders": columnSettings.borders,
+                            role: "columnheader",
+                            "aria-colspan": header.colSpan > 1 ? header.colSpan : void 0,
+                            "aria-sort": direction === "asc" ? "ascending" : direction === "desc" ? "descending" : isSortable ? "none" : void 0,
+                            style: { gridColumn: `span ${header.colSpan}` },
+                            children: [
+                              header.isPlaceholder ? null : isSortable ? /* @__PURE__ */ jsxs3(
+                                "button",
+                                {
+                                  className: classNames.headerButton,
+                                  "data-align": columnSettings.align,
+                                  "data-slot": "header-button",
+                                  onClick: header.column.getToggleSortingHandler(),
+                                  children: [
+                                    flexRender(header.column.columnDef.header, header.getContext()),
+                                    (icons == null ? void 0 : icons.sort) ? /* @__PURE__ */ jsx4(
+                                      "span",
+                                      {
+                                        className: classNames.sortIndicator,
+                                        "data-align": columnSettings.align,
+                                        "data-slot": "sort-indicator",
+                                        "data-reveal": columnSettings.sorting.reveal,
+                                        children: icons.sort(direction)
+                                      }
+                                    ) : null
+                                  ]
+                                }
+                              ) : flexRender(header.column.columnDef.header, header.getContext()),
+                              !header.isPlaceholder && columnSettings.filtering ? /* @__PURE__ */ jsx4(
+                                "div",
+                                {
+                                  className: classNames.filter,
+                                  "data-slot": "filter",
+                                  "data-reveal": (_a3 = columnSettings.filtering.reveal) != null ? _a3 : settings.interactions.filterReveal,
+                                  children: /* @__PURE__ */ jsx4(
+                                    ColumnFilter,
+                                    {
+                                      column: header.column,
+                                      settings: columnSettings.filtering,
+                                      icon: icons == null ? void 0 : icons.search,
+                                      debounceMs: filterDebounceMs
+                                    }
+                                  )
+                                }
+                              ) : null
+                            ]
+                          },
+                          header.id
+                        );
+                      })
+                    },
+                    headerGroup.id
+                  ))
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs3(
+            "div",
+            {
+              className: classNames.scroller,
+              "data-slot": "scroller",
+              ref: scrollerRef,
+              onScroll: handleScroll,
+              style: scrollerStyle,
+              children: [
+                isLoading ? /* @__PURE__ */ jsx4(
+                  TableSkeleton,
+                  {
+                    columnCount: visibleColumns.length,
+                    rows: skeletonRows,
+                    label: skeletonLabel,
+                    classNames
+                  }
+                ) : rows.length === 0 ? /* @__PURE__ */ jsx4("div", { className: classNames.emptyState, "data-slot": "empty-state", role: "status", children: emptyState ? typeof emptyState === "function" ? emptyState(table) : emptyState : table.getState().columnFilters.length > 0 ? "No rows match the current filters." : "No rows to display." }) : /* @__PURE__ */ jsx4(
+                  "div",
+                  {
+                    className: classNames.rowGroup,
+                    "data-slot": "row-group",
+                    style: __spreadProps(__spreadValues({}, gridStyle), {
+                      height: `${isVirtualized ? rowVirtualizer.getTotalSize() : "auto"}`,
+                      position: "relative"
+                    }),
+                    role: "rowgroup",
+                    children: virtualRows.map((virtualRow) => {
+                      var _a3;
+                      const row = rows[virtualRow.index];
+                      const href = rowLink ? resolveRowHref(rowLink, row.original) : void 0;
+                      const RowLink = rowLink == null ? void 0 : rowLink.component;
+                      const rowContent = /* @__PURE__ */ jsx4(
+                        "div",
+                        {
+                          className: classNames.row,
+                          "data-slot": "row",
+                          role: "row",
+                          style: { display: "grid", gridTemplateColumns: "var(--boneless-table-grid)" },
+                          tabIndex: onRowClick && !href ? 0 : void 0,
+                          onClick: (event) => onRowClick == null ? void 0 : onRowClick(row.original, event),
+                          onKeyDown: (event) => {
+                            if (!onRowClick || href || event.key !== "Enter" && event.key !== " ")
+                              return;
+                            event.preventDefault();
+                            onRowClick(row.original, event);
+                          },
+                          children: row.getVisibleCells().map((cell) => {
+                            var _a4, _b3, _c2;
+                            const columnSettings = getColumnSettings(cell.column);
+                            const title = columnSettings.valueDisplay != null ? String((_a4 = cell.getValue()) != null ? _a4 : "") : void 0;
+                            const isTreeCell = Boolean(tree && cell.column.id === treeColumnId);
+                            const canExpand = row.getCanExpand();
+                            const cellContent = flexRender(cell.column.columnDef.cell, cell.getContext());
+                            return /* @__PURE__ */ jsx4(
+                              "div",
+                              {
+                                className: classNames.cell,
+                                "data-slot": "cell",
+                                "data-align": columnSettings.align,
+                                "data-borders": columnSettings.borders,
+                                role: "cell",
+                                title,
+                                children: isTreeCell ? /* @__PURE__ */ jsxs3(
+                                  "div",
+                                  {
+                                    "data-slot": "tree-content",
+                                    style: { paddingInlineStart: `${row.depth * treeIndentPx}px` },
+                                    children: [
+                                      canExpand ? /* @__PURE__ */ jsx4(
+                                        "button",
+                                        {
+                                          "data-slot": "tree-row-toggle",
+                                          type: "button",
+                                          "aria-expanded": row.getIsExpanded(),
+                                          "aria-label": `${row.getIsExpanded() ? "Collapse" : "Expand"} row`,
+                                          onClick: (event) => {
+                                            event.stopPropagation();
+                                            row.toggleExpanded();
+                                          },
+                                          children: row.getIsExpanded() ? (_b3 = icons == null ? void 0 : icons.collapse) != null ? _b3 : "\u2212" : (_c2 = icons == null ? void 0 : icons.expand) != null ? _c2 : "+"
+                                        }
+                                      ) : /* @__PURE__ */ jsx4("span", { "data-slot": "tree-row-toggle-spacer", "aria-hidden": "true" }),
+                                      /* @__PURE__ */ jsx4("span", { "data-slot": "tree-value", children: cellContent })
+                                    ]
+                                  }
+                                ) : cellContent
+                              },
+                              cell.id
+                            );
+                          })
+                        }
+                      );
+                      const rowStyle = !isVirtualized ? void 0 : {
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        width: "100%",
+                        transform: `translateY(${virtualRow.start}px)`
+                      };
+                      if (!href || !rowLink || !RowLink || tree && row.getCanExpand())
+                        return /* @__PURE__ */ jsx4(
+                          "div",
+                          {
+                            "data-index": isVirtualized ? virtualRow.index : void 0,
+                            ref: isVirtualized ? rowVirtualizer.measureElement : void 0,
+                            style: rowStyle,
+                            children: rowContent
+                          },
+                          row.id
+                        );
+                      return /* @__PURE__ */ jsx4(
+                        "div",
+                        {
+                          "data-index": isVirtualized ? virtualRow.index : void 0,
+                          ref: isVirtualized ? rowVirtualizer.measureElement : void 0,
+                          style: rowStyle,
+                          children: /* @__PURE__ */ jsx4(
+                            RowLink,
+                            {
+                              className: (_a3 = classNames.rowLink) != null ? _a3 : "",
+                              href,
+                              "aria-label": resolveRowLinkLabel(rowLink, row.original),
+                              target: rowLink.target,
+                              rel: rowLink.rel,
+                              children: rowContent
+                            }
+                          )
+                        },
+                        row.id
+                      );
+                    })
+                  }
+                ),
+                isFetchingMore ? /* @__PURE__ */ jsx4(
+                  TableSkeleton,
+                  {
+                    columnCount: visibleColumns.length,
+                    rows: 3,
+                    label: skeletonLabel,
+                    classNames
+                  }
+                ) : null
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    renderSlot(footer, table, defaultFooter)
+  ] });
+}
+
+// src/index.ts
+import {
+  createColumnHelper,
+  flexRender as flexRender2,
+  getCoreRowModel as getCoreRowModel2,
+  getExpandedRowModel as getExpandedRowModel2,
+  getFilteredRowModel as getFilteredRowModel2,
+  getSortedRowModel as getSortedRowModel2,
+  useReactTable as useReactTable2
+} from "@tanstack/react-table";
+export {
+  BonelessTable,
+  ColumnFilter,
+  ColumnMenu,
+  TableSkeleton,
+  compactValue,
+  createColumnHelper,
+  defaultBonelessTableSettings,
+  defineColumns,
+  flexRender2 as flexRender,
+  getColumnIds,
+  getCoreRowModel2 as getCoreRowModel,
+  getExpandedRowModel2 as getExpandedRowModel,
+  getFilteredRowModel2 as getFilteredRowModel,
+  getSortedRowModel2 as getSortedRowModel,
+  mergeBonelessTableSettings,
+  resolveColumnSettings,
+  resolveColumns,
+  resolveRowHref,
+  resolveRowLinkLabel,
+  useReactTable2 as useReactTable,
+  withDefaultCells
+};
+//# sourceMappingURL=index.mjs.map