boneless-table 0.1.0 → 0.1.2

package/dist/index.mjs

@@ -45,12 +45,12 @@ import {
   useEffect as useEffect3,
   useId,
   useMemo,
-  useRef as useRef2,
+  useRef as useRef3,
   useState as useState2
 } from "react";
 
 // src/column-filter.tsx
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function ColumnFilter({
   column,
@@ -62,10 +62,13 @@ function ColumnFilter({
   var _a, _b;
   const value = String((_a = column.getFilterValue()) != null ? _a : "");
   const [inputValue, setInputValue] = useState(value);
+  const lastColumnValueRef = useRef(value);
   useEffect(() => {
-    setInputValue(value);
-  }, [value]);
-  useEffect(() => {
+    if (value !== lastColumnValueRef.current) {
+      lastColumnValueRef.current = value;
+      setInputValue(value);
+      return;
+    }
     if (settings.type !== "text" || inputValue === value) return;
     if (debounceMs <= 0) {
       column.setFilterValue(inputValue || void 0);
@@ -109,7 +112,7 @@ function ColumnFilter({
 }
 
 // src/column-menu.tsx
-import { useEffect as useEffect2, useRef } from "react";
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function ColumnMenu({
   table,
@@ -121,8 +124,8 @@ function ColumnMenu({
   triggerRef
 }) {
   var _a;
-  const menuRef = useRef(null);
-  const closeButtonRef = useRef(null);
+  const menuRef = useRef2(null);
+  const closeButtonRef = useRef2(null);
   useEffect2(() => {
     var _a2;
     (_a2 = closeButtonRef.current) == null ? void 0 : _a2.focus();
@@ -218,7 +221,7 @@ var defaultBonelessTableSettings = {
     borders: "none",
     sorting: { enabled: true, reveal: "hover" }
   },
-  interactions: { filterReveal: "hover", horizontalOverflow: "auto" }
+  interactions: { horizontalOverflow: "auto" }
 };
 function mergeBonelessTableSettings(override, base = defaultBonelessTableSettings) {
   var _a, _b, _c, _d, _e, _f;
@@ -238,7 +241,7 @@ function resolveColumnSettings(settings, column) {
   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),
+    sizing: (configuredSizing == null ? void 0 : configuredSizing.widthPx) != null && configuredSizing.minPx == null && configuredSizing.maxPx == null && configuredSizing.flex == null && configuredSizing.resizable == null ? { 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),
@@ -337,7 +340,7 @@ function resolveRowLinkLabel(link, row) {
 }
 
 // src/boneless-table.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function moveItem(order, id, direction) {
   const index = order.indexOf(id);
   const target = index + direction;
@@ -372,6 +375,8 @@ function BonelessTable(_a) {
     scroller = "auto",
     toolbar = true,
     toolbarLayout,
+    filters = true,
+    filterPlacement = "above",
     footer = true,
     totalCount,
     resultLabel = "rows",
@@ -401,6 +406,8 @@ function BonelessTable(_a) {
     "scroller",
     "toolbar",
     "toolbarLayout",
+    "filters",
+    "filterPlacement",
     "footer",
     "totalCount",
     "resultLabel",
@@ -416,13 +423,15 @@ function BonelessTable(_a) {
   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 scrollerRef = useRef3(null);
+  const headerScrollerRef = useRef3(null);
+  const rootRef = useRef3(null);
+  const lastScrollLeftRef = useRef3(0);
+  const columnsButtonRef = useRef3(null);
+  const nearEndTriggeredRef = useRef3(false);
   const columnMenuId = useId();
   const [showColumns, setShowColumns] = useState2(false);
-  const [headerScrollbarGutter, setHeaderScrollbarGutter] = useState2(0);
+  const [headerScrollbarInset, setHeaderScrollbarInset] = 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 : []
@@ -434,6 +443,7 @@ function BonelessTable(_a) {
     (_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 [columnSizing, setColumnSizing] = useState2({});
   const _k = tableOptions, {
     state: controlledState,
     onSortingChange,
@@ -465,19 +475,27 @@ function BonelessTable(_a) {
   ]);
   useEffect3(() => {
     var _a3;
-    if (scrollToTopOn !== void 0) (_a3 = scrollerRef.current) == null ? void 0 : _a3.scrollTo({ top: 0 });
+    if (scrollToTopOn !== void 0) {
+      nearEndTriggeredRef.current = false;
+      (_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));
+    const scrollerElement = scrollerRef.current;
+    if (!scrollerElement) return;
+    const syncHeaderScrollbarInset = () => {
+      setHeaderScrollbarInset(
+        Math.max(0, scrollerElement.offsetWidth - scrollerElement.clientWidth)
+      );
+    };
+    syncHeaderScrollbarInset();
+    const resizeObserver = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(syncHeaderScrollbarInset);
+    resizeObserver == null ? void 0 : resizeObserver.observe(scrollerElement);
+    window.addEventListener("resize", syncHeaderScrollbarInset);
+    return () => {
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+      window.removeEventListener("resize", syncHeaderScrollbarInset);
     };
-    syncHeaderScrollbarGutter();
-    if (typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(syncHeaderScrollbarGutter);
-    observer.observe(scroller2);
-    return () => observer.disconnect();
   }, []);
   const table = useReactTable(__spreadProps(__spreadValues({}, restTableOptions), {
     data,
@@ -513,18 +531,33 @@ function BonelessTable(_a) {
     var _a3;
     return (_a3 = columnSettingsById.get(column.id)) != null ? _a3 : resolveColumnSettings(settings, column);
   };
+  const columnResizeVariables = useMemo(
+    () => new Map(
+      allColumns.map((column, index) => [column.id, `--boneless-table-column-${index}-width`])
+    ),
+    [allColumns]
+  );
+  const getColumnResizeVariable = (columnId) => {
+    var _a3;
+    return (_a3 = columnResizeVariables.get(columnId)) != null ? _a3 : `--boneless-table-column-${columnId}-width`;
+  };
   const grid = visibleColumns.map((column) => {
+    var _a3, _b3, _c2;
     const columnSettings = getColumnSettings(column);
-    if ("widthPx" in columnSettings.sizing) return `${columnSettings.sizing.widthPx}px`;
-    return `minmax(${columnSettings.sizing.minPx}px, ${columnSettings.sizing.flex}fr)`;
+    const { sizing } = columnSettings;
+    const width = (_a3 = columnSizing[column.id]) != null ? _a3 : sizing.widthPx;
+    const track = width != null ? `${width}px` : `minmax(${(_b3 = sizing.minPx) != null ? _b3 : settings.columnDefaults.sizing.minPx}px, ${(_c2 = sizing.flex) != null ? _c2 : settings.columnDefaults.sizing.flex}fr)`;
+    return `var(${getColumnResizeVariable(column.id)}, ${track})`;
   }).join(" ");
   const minWidth = visibleColumns.reduce((width, column) => {
+    var _a3, _b3;
     const { sizing } = getColumnSettings(column);
-    return width + ("widthPx" in sizing ? sizing.widthPx : sizing.minPx);
+    const configuredWidth = (_a3 = columnSizing[column.id]) != null ? _a3 : sizing.widthPx;
+    return width + ((_b3 = configuredWidth != null ? configuredWidth : sizing.minPx) != null ? _b3 : settings.columnDefaults.sizing.minPx);
   }, 0);
   const gridStyle = {
     "--boneless-table-grid": grid,
-    minWidth: `${minWidth}px`
+    minWidth: `var(--boneless-table-min-width, ${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;
@@ -542,28 +575,94 @@ function BonelessTable(_a) {
     [expandableRows, expanded]
   );
   useEffect3(() => {
-    if (!isFetchingMore || !canLoadMore) nearEndTriggeredRef.current = false;
-  }, [canLoadMore, isFetchingMore]);
+    if (!canLoadMore) nearEndTriggeredRef.current = false;
+  }, [canLoadMore]);
   function handleScroll() {
     const element = scrollerRef.current;
     if (!element) return;
-    if (headerScrollerRef.current) headerScrollerRef.current.scrollLeft = element.scrollLeft;
+    if (element.scrollLeft !== lastScrollLeftRef.current) {
+      lastScrollLeftRef.current = element.scrollLeft;
+      if (headerScrollerRef.current) headerScrollerRef.current.scrollLeft = element.scrollLeft;
+    }
+    if (!onNearEnd) return;
     const isNearEnd = element.scrollHeight - element.scrollTop - element.clientHeight < nearEndOffset;
     if (!isNearEnd) {
       nearEndTriggeredRef.current = false;
       return;
     }
-    if (!onNearEnd || !canLoadMore || isFetchingMore || nearEndTriggeredRef.current) return;
+    if (!canLoadMore || isFetchingMore || nearEndTriggeredRef.current) return;
     nearEndTriggeredRef.current = true;
     onNearEnd();
   }
   function resetTable() {
+    var _a3;
     if (onReset) return onReset();
     table.resetSorting();
     table.resetColumnFilters();
     table.resetColumnVisibility();
     table.setColumnOrder(defaultOrder);
     table.resetExpanded();
+    columnResizeVariables.forEach((property) => {
+      var _a4;
+      return (_a4 = rootRef.current) == null ? void 0 : _a4.style.removeProperty(property);
+    });
+    (_a3 = rootRef.current) == null ? void 0 : _a3.style.removeProperty("--boneless-table-min-width");
+    setColumnSizing({});
+  }
+  function resizeColumn(columnId, startWidth, startX, minPx, maxPx) {
+    const property = getColumnResizeVariable(columnId);
+    const startMinWidth = minWidth;
+    let nextWidth = startWidth;
+    let hasMoved = false;
+    const onMove = (event) => {
+      var _a3, _b3;
+      nextWidth = constrainColumnWidth(startWidth + event.clientX - startX, minPx, maxPx);
+      hasMoved || (hasMoved = nextWidth !== startWidth);
+      (_a3 = rootRef.current) == null ? void 0 : _a3.style.setProperty(property, `${nextWidth}px`);
+      (_b3 = rootRef.current) == null ? void 0 : _b3.style.setProperty(
+        "--boneless-table-min-width",
+        `${startMinWidth - startWidth + nextWidth}px`
+      );
+    };
+    const onEnd = () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onEnd);
+      window.removeEventListener("pointercancel", onEnd);
+      if (hasMoved) {
+        setColumnSizing((current) => __spreadProps(__spreadValues({}, current), { [columnId]: nextWidth }));
+      }
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onEnd);
+    window.addEventListener("pointercancel", onEnd);
+  }
+  function constrainColumnWidth(width, minPx, maxPx) {
+    return Math.min(maxPx != null ? maxPx : Number.POSITIVE_INFINITY, Math.max(minPx, Math.round(width)));
+  }
+  function getCurrentColumnWidth(columnId, fallback, element) {
+    var _a3, _b3, _c2, _d2;
+    const column = allColumns.find((item) => item.id === columnId);
+    const configuredWidth = column ? getColumnSettings(column).sizing.widthPx : void 0;
+    return (_d2 = (_c2 = (_a3 = columnSizing[columnId]) != null ? _a3 : configuredWidth) != null ? _c2 : (_b3 = element == null ? void 0 : element.parentElement) == null ? void 0 : _b3.getBoundingClientRect().width) != null ? _d2 : fallback;
+  }
+  function handleResizeStart(event, columnId, minPx, maxPx) {
+    var _a3, _b3;
+    event.preventDefault();
+    event.stopPropagation();
+    const currentWidth = getCurrentColumnWidth(columnId, minPx, event.currentTarget);
+    (_b3 = (_a3 = event.currentTarget).setPointerCapture) == null ? void 0 : _b3.call(_a3, event.pointerId);
+    resizeColumn(columnId, currentWidth, event.clientX, minPx, maxPx);
+  }
+  function handleResizeKeyDown(event, columnId, minPx, maxPx) {
+    if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+    event.preventDefault();
+    event.stopPropagation();
+    const step = event.shiftKey ? 32 : 8;
+    const currentWidth = getCurrentColumnWidth(columnId, minPx, event.currentTarget);
+    const direction = event.key === "ArrowLeft" ? -1 : 1;
+    setColumnSizing((current) => __spreadProps(__spreadValues({}, current), {
+      [columnId]: constrainColumnWidth(currentWidth + direction * step, minPx, maxPx)
+    }));
   }
   function moveColumn(id, direction) {
     const current = table.getState().columnOrder;
@@ -585,6 +684,11 @@ function BonelessTable(_a) {
     initialRect: { width: 0, height: 600 }
   });
   const estimatedRowSize = virtualization === false ? 58 : (_p = virtualization.estimateSize) != null ? _p : 58;
+  const measuredVirtualHeight = rowVirtualizer.getTotalSize();
+  const virtualHeight = isVirtualized ? Math.max(
+    Number.isFinite(measuredVirtualHeight) ? measuredVirtualHeight : 0,
+    rows.length * estimatedRowSize
+  ) : void 0;
   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,
@@ -596,10 +700,13 @@ function BonelessTable(_a) {
     (_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() }),
+    /* @__PURE__ */ jsx4("strong", { className: classNames.toolbarCount, "data-slot": "toolbar-count", children: total.toLocaleString() }),
     " ",
-    resultLabel,
-    resultHint ? /* @__PURE__ */ jsx4("span", { className: classNames.toolbarHint, "data-slot": "toolbar-hint", children: resultHint }) : null
+    /* @__PURE__ */ jsx4("span", { className: classNames.toolbarLabel, "data-slot": "toolbar-label", children: resultLabel }),
+    resultHint ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+      " ",
+      /* @__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(
@@ -651,6 +758,43 @@ function BonelessTable(_a) {
     toolbarSummary,
     toolbarActions
   ] });
+  const filterHeaders = table.getLeafHeaders().filter((header) => !header.isPlaceholder && getColumnSettings(header.column).filtering);
+  const defaultFilters = filterHeaders.length > 0 ? /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "aria-label": "Table filters",
+      className: classNames.filters,
+      "data-slot": "filters",
+      role: "group",
+      children: filterHeaders.map((header) => {
+        var _a3, _b3;
+        const filterSettings = getColumnSettings(header.column).filtering;
+        return /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            className: classNames.filterItem,
+            "data-column-id": header.column.id,
+            "data-slot": "filter-item",
+            children: [
+              /* @__PURE__ */ jsx4("span", { className: classNames.filterLabel, "data-slot": "filter-label", children: (_b3 = (_a3 = header.column.columnDef.meta) == null ? void 0 : _a3.columnLabel) != null ? _b3 : typeof header.column.columnDef.header === "string" || typeof header.column.columnDef.header === "number" ? String(header.column.columnDef.header) : header.column.id }),
+              /* @__PURE__ */ jsx4(
+                ColumnFilter,
+                {
+                  className: classNames.filter,
+                  column: header.column,
+                  settings: filterSettings,
+                  icon: filterSettings.type === "text" ? icons == null ? void 0 : icons.search : void 0,
+                  debounceMs: filterDebounceMs
+                }
+              )
+            ]
+          },
+          header.id
+        );
+      })
+    }
+  ) : null;
+  const renderedFilters = renderSlot(filters, table, defaultFilters);
   const defaultFooter = /* @__PURE__ */ jsxs3("footer", { className: classNames.footer, "data-slot": "footer", children: [
     "Showing ",
     shown.toLocaleString(),
@@ -661,266 +805,322 @@ function BonelessTable(_a) {
   ] });
   const rootStyle = scroller === "fill" ? { display: "flex", flexDirection: "column", minHeight: 0 } : void 0;
   const scrollerStyle = __spreadValues({
-    overflowX: settings.interactions.horizontalOverflow
+    overflowX: settings.interactions.horizontalOverflow,
+    scrollbarGutter: "stable"
   }, scroller === "fill" ? { flex: "1 1 auto", minHeight: 0, overflowY: "auto" } : {});
+  const headerScrollerStyle = {
+    flex: "0 0 auto",
+    minWidth: 0,
+    overflow: "hidden",
+    // The body loses this space to a classic vertical scrollbar on Windows. Reserving the
+    // same width here keeps both horizontal scroll ranges identical at their far edge.
+    marginInlineEnd: `${headerScrollbarInset}px`
+  };
   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(
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: cn(className, classNames.root),
+      "data-slot": "root",
+      ref: rootRef,
+      style: rootStyle,
+      children: [
+        renderSlot(toolbar, table, defaultToolbar),
+        filterPlacement === "above" ? renderedFilters : null,
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            className: classNames.table,
+            "data-slot": "table",
+            style: tableStyle,
+            "aria-busy": isLoading || isFetchingMore,
+            role: "table",
+            children: [
+              /* @__PURE__ */ jsx4(
                 "div",
                 {
-                  className: classNames.headerGroup,
-                  "data-slot": "header-group",
-                  role: "rowgroup",
-                  style: gridStyle,
-                  children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx4(
+                  className: classNames.headerScroller,
+                  "data-slot": "header-scroller",
+                  ref: headerScrollerRef,
+                  style: headerScrollerStyle,
+                  children: /* @__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(
+                      className: classNames.headerGroup,
+                      "data-slot": "header-group",
+                      role: "rowgroup",
+                      style: gridStyle,
+                      children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx4(
                         "div",
                         {
-                          className: classNames.row,
-                          "data-slot": "row",
+                          className: classNames.headerRow,
+                          "data-slot": "header-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());
+                          children: headerGroup.headers.map((header) => {
+                            const columnSettings = getColumnSettings(header.column);
+                            const direction = header.column.getIsSorted();
+                            const isSortable = !header.isPlaceholder && header.column.getCanSort() && columnSettings.sorting.enabled;
                             return /* @__PURE__ */ jsx4(
                               "div",
                               {
-                                className: classNames.cell,
-                                "data-slot": "cell",
+                                className: classNames.header,
+                                "data-slot": "header",
                                 "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
+                                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(Fragment, { children: [
+                                  /* @__PURE__ */ jsxs3(
+                                    "button",
+                                    {
+                                      className: classNames.headerButton,
+                                      "data-align": columnSettings.align,
+                                      "data-slot": "header-button",
+                                      onClick: header.column.getToggleSortingHandler(),
+                                      children: [
+                                        /* @__PURE__ */ jsx4("span", { className: classNames.headerLabel, "data-slot": "header-label", 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
+                                      ]
+                                    }
+                                  ),
+                                  header.colSpan === 1 && columnSettings.sizing.resizable ? /* @__PURE__ */ jsx4(
+                                    "button",
+                                    {
+                                      "aria-label": `Resize ${header.column.id} column`,
+                                      className: classNames.resizeHandle,
+                                      "data-slot": "resize-handle",
+                                      onKeyDown: (event) => {
+                                        var _a3;
+                                        return handleResizeKeyDown(
+                                          event,
+                                          header.column.id,
+                                          (_a3 = columnSettings.sizing.minPx) != null ? _a3 : settings.columnDefaults.sizing.minPx,
+                                          columnSettings.sizing.maxPx
+                                        );
+                                      },
+                                      onPointerDown: (event) => {
+                                        var _a3;
+                                        return handleResizeStart(
+                                          event,
+                                          header.column.id,
+                                          (_a3 = columnSettings.sizing.minPx) != null ? _a3 : settings.columnDefaults.sizing.minPx,
+                                          columnSettings.sizing.maxPx
+                                        );
+                                      },
+                                      type: "button"
+                                    }
+                                  ) : null
+                                ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
+                                  flexRender(header.column.columnDef.header, header.getContext()),
+                                  header.colSpan === 1 && columnSettings.sizing.resizable ? /* @__PURE__ */ jsx4(
+                                    "button",
+                                    {
+                                      "aria-label": `Resize ${header.column.id} column`,
+                                      className: classNames.resizeHandle,
+                                      "data-slot": "resize-handle",
+                                      onKeyDown: (event) => {
+                                        var _a3;
+                                        return handleResizeKeyDown(
+                                          event,
+                                          header.column.id,
+                                          (_a3 = columnSettings.sizing.minPx) != null ? _a3 : settings.columnDefaults.sizing.minPx,
+                                          columnSettings.sizing.maxPx
+                                        );
+                                      },
+                                      onPointerDown: (event) => {
+                                        var _a3;
+                                        return handleResizeStart(
+                                          event,
+                                          header.column.id,
+                                          (_a3 = columnSettings.sizing.minPx) != null ? _a3 : settings.columnDefaults.sizing.minPx,
+                                          columnSettings.sizing.maxPx
+                                        );
+                                      },
+                                      type: "button"
+                                    }
+                                  ) : null
+                                ] })
                               },
-                              cell.id
+                              header.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,
+                        },
+                        headerGroup.id
+                      ))
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs3(
+                "div",
+                {
+                  "aria-label": "Table rows",
+                  className: classNames.scroller,
+                  "data-slot": "scroller",
+                  ref: scrollerRef,
+                  onScroll: handleScroll,
+                  style: scrollerStyle,
+                  tabIndex: 0,
+                  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 ? `${virtualHeight}px` : "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: (_a3 = classNames.rowLink) != null ? _a3 : "",
-                              href,
-                              "aria-label": resolveRowLinkLabel(rowLink, row.original),
-                              target: rowLink.target,
-                              rel: rowLink.rel,
-                              children: rowContent
+                              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
+                                );
+                              })
                             }
-                          )
-                        },
-                        row.id
-                      );
-                    })
-                  }
-                ),
-                isFetchingMore ? /* @__PURE__ */ jsx4(
-                  TableSkeleton,
-                  {
-                    columnCount: visibleColumns.length,
-                    rows: 3,
-                    label: skeletonLabel,
-                    classNames
-                  }
-                ) : null
-              ]
-            }
-          )
-        ]
-      }
-    ),
-    renderSlot(footer, table, defaultFooter)
-  ] });
+                          );
+                          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
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        filterPlacement === "below" ? renderedFilters : null,
+        renderSlot(footer, table, defaultFooter)
+      ]
+    }
+  );
 }
 
 // src/index.ts