boneless-table 0.1.0 → 0.1.1

package/dist/index.d.mts

@@ -24,7 +24,6 @@ type BonelessTableColumnSettings = {
     filtering?: {
         type: FilterType;
         options?: readonly string[];
-        reveal?: RevealMode;
     };
     valueDisplay?: {
         truncateAt: number;
@@ -37,7 +36,6 @@ type BonelessTableSettings = {
         sorting: Required<NonNullable<BonelessTableColumnSettings['sorting']>>;
     };
     interactions: {
-        filterReveal: RevealMode;
         horizontalOverflow: 'auto' | 'scroll';
     };
 };
@@ -67,7 +65,6 @@ declare function resolveColumnSettings(settings: BonelessTableSettings, column:
     filtering: {
         type: FilterType;
         options?: readonly string[];
-        reveal?: RevealMode;
     } | undefined;
     valueDisplay: {
         truncateAt: number;
@@ -137,6 +134,7 @@ type BonelessTableToolbarLayout<TData extends RowData> = (context: {
     actions: ReactNode;
 }) => ReactNode;
 type BonelessTableSlot<TData extends RowData> = boolean | ReactNode | ((table: Table<TData>) => ReactNode);
+type BonelessTableFilterPlacement = 'above' | 'below';
 type BonelessTableRowClickEvent = MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>;
 /**
  * Named hooks for your stylesheet. The renderer applies no default class names or visual styles.
@@ -145,15 +143,22 @@ type BonelessTableClassNames = Partial<{
     root: string;
     toolbar: string;
     toolbarSummary: string;
+    toolbarCount: string;
+    toolbarLabel: string;
     toolbarHint: string;
     toolbarActions: string;
     scroller: string;
+    headerScroller: string;
     table: string;
     headerGroup: string;
     headerRow: string;
     header: string;
     headerButton: string;
+    headerLabel: string;
     sortIndicator: string;
+    filters: string;
+    filterItem: string;
+    filterLabel: string;
     rowGroup: string;
     row: string;
     cell: string;
@@ -203,6 +208,10 @@ type BonelessTablePresentationOptions<TData extends RowData> = {
     toolbar?: BonelessTableSlot<TData>;
     /** Reposition the default summary and action controls without rebuilding their behavior. */
     toolbarLayout?: BonelessTableToolbarLayout<TData>;
+    /** Built-in filters, custom filter content, or a render function receiving the table instance. */
+    filters?: BonelessTableSlot<TData>;
+    /** Places the filter region outside the table scroll area. Defaults to "above". */
+    filterPlacement?: BonelessTableFilterPlacement;
     footer?: BonelessTableSlot<TData>;
     totalCount?: number;
     resultLabel?: string;
@@ -232,7 +241,7 @@ type BonelessTableProps<TData extends RowData> = BonelessTableOptions<TData> & B
     data: TData[];
     columns: BonelessTableColumn<TData>[];
 };
-declare function BonelessTable<TData extends RowData>({ data, columns, settings: settingsOverride, className, classNames, icons, tree: treeOption, isLoading, isFetchingMore, skeletonRows, skeletonLabel, onNearEnd, canLoadMore, nearEndOffset, filterDebounceMs, scroller, toolbar, toolbarLayout, footer, totalCount, resultLabel, resultHint, onReset, onRowClick, scrollToTopOn, rowLink, emptyState, virtualization, ...tableOptions }: BonelessTableProps<TData>): react.JSX.Element;
+declare function BonelessTable<TData extends RowData>({ data, columns, settings: settingsOverride, className, classNames, icons, tree: treeOption, isLoading, isFetchingMore, skeletonRows, skeletonLabel, onNearEnd, canLoadMore, nearEndOffset, filterDebounceMs, scroller, toolbar, toolbarLayout, filters, filterPlacement, footer, totalCount, resultLabel, resultHint, onReset, onRowClick, scrollToTopOn, rowLink, emptyState, virtualization, ...tableOptions }: BonelessTableProps<TData>): react.JSX.Element;
 
 declare function defineColumns<TData extends RowData>(columns: BonelessTableColumn<TData>[]): BonelessTableColumn<TData>[];
 declare function resolveColumns<TData extends RowData>(columns: BonelessTableColumn<TData>[]): ResolvedBonelessTableColumn<TData>[];
@@ -255,4 +264,4 @@ declare function TableSkeleton({ columnCount, rows, label, classNames, }: {
     classNames?: Pick<BonelessTableClassNames, 'row' | 'cell' | 'skeleton'>;
 }): react.JSX.Element;
 
-export { BonelessTable, type BonelessTableClassNames, type BonelessTableColumn, type BonelessTableColumnSettings, type BonelessTableIcons, type BonelessTableOptions, type BonelessTablePresentationOptions, type BonelessTableProps, type BonelessTableRowClickEvent, type BonelessTableRowLink, type BonelessTableRowLinkComponentProps, type BonelessTableSettings, type BonelessTableSlot, type BonelessTableToolbarLayout, type BonelessTableTreeOptions, type ColumnAlignment, type ColumnBorders, ColumnFilter, ColumnMenu, type DeepPartial, type FilterType, type ResolvedBonelessTableColumn, type RevealMode, TableSkeleton, compactValue, defaultBonelessTableSettings, defineColumns, getColumnIds, mergeBonelessTableSettings, resolveColumnSettings, resolveColumns, resolveRowHref, resolveRowLinkLabel, withDefaultCells };
+export { BonelessTable, type BonelessTableClassNames, type BonelessTableColumn, type BonelessTableColumnSettings, type BonelessTableFilterPlacement, type BonelessTableIcons, type BonelessTableOptions, type BonelessTablePresentationOptions, type BonelessTableProps, type BonelessTableRowClickEvent, type BonelessTableRowLink, type BonelessTableRowLinkComponentProps, type BonelessTableSettings, type BonelessTableSlot, type BonelessTableToolbarLayout, type BonelessTableTreeOptions, type ColumnAlignment, type ColumnBorders, ColumnFilter, ColumnMenu, type DeepPartial, type FilterType, type ResolvedBonelessTableColumn, type RevealMode, TableSkeleton, compactValue, defaultBonelessTableSettings, defineColumns, getColumnIds, mergeBonelessTableSettings, resolveColumnSettings, resolveColumns, resolveRowHref, resolveRowLinkLabel, withDefaultCells };

package/dist/index.d.ts

@@ -24,7 +24,6 @@ type BonelessTableColumnSettings = {
     filtering?: {
         type: FilterType;
         options?: readonly string[];
-        reveal?: RevealMode;
     };
     valueDisplay?: {
         truncateAt: number;
@@ -37,7 +36,6 @@ type BonelessTableSettings = {
         sorting: Required<NonNullable<BonelessTableColumnSettings['sorting']>>;
     };
     interactions: {
-        filterReveal: RevealMode;
         horizontalOverflow: 'auto' | 'scroll';
     };
 };
@@ -67,7 +65,6 @@ declare function resolveColumnSettings(settings: BonelessTableSettings, column:
     filtering: {
         type: FilterType;
         options?: readonly string[];
-        reveal?: RevealMode;
     } | undefined;
     valueDisplay: {
         truncateAt: number;
@@ -137,6 +134,7 @@ type BonelessTableToolbarLayout<TData extends RowData> = (context: {
     actions: ReactNode;
 }) => ReactNode;
 type BonelessTableSlot<TData extends RowData> = boolean | ReactNode | ((table: Table<TData>) => ReactNode);
+type BonelessTableFilterPlacement = 'above' | 'below';
 type BonelessTableRowClickEvent = MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>;
 /**
  * Named hooks for your stylesheet. The renderer applies no default class names or visual styles.
@@ -145,15 +143,22 @@ type BonelessTableClassNames = Partial<{
     root: string;
     toolbar: string;
     toolbarSummary: string;
+    toolbarCount: string;
+    toolbarLabel: string;
     toolbarHint: string;
     toolbarActions: string;
     scroller: string;
+    headerScroller: string;
     table: string;
     headerGroup: string;
     headerRow: string;
     header: string;
     headerButton: string;
+    headerLabel: string;
     sortIndicator: string;
+    filters: string;
+    filterItem: string;
+    filterLabel: string;
     rowGroup: string;
     row: string;
     cell: string;
@@ -203,6 +208,10 @@ type BonelessTablePresentationOptions<TData extends RowData> = {
     toolbar?: BonelessTableSlot<TData>;
     /** Reposition the default summary and action controls without rebuilding their behavior. */
     toolbarLayout?: BonelessTableToolbarLayout<TData>;
+    /** Built-in filters, custom filter content, or a render function receiving the table instance. */
+    filters?: BonelessTableSlot<TData>;
+    /** Places the filter region outside the table scroll area. Defaults to "above". */
+    filterPlacement?: BonelessTableFilterPlacement;
     footer?: BonelessTableSlot<TData>;
     totalCount?: number;
     resultLabel?: string;
@@ -232,7 +241,7 @@ type BonelessTableProps<TData extends RowData> = BonelessTableOptions<TData> & B
     data: TData[];
     columns: BonelessTableColumn<TData>[];
 };
-declare function BonelessTable<TData extends RowData>({ data, columns, settings: settingsOverride, className, classNames, icons, tree: treeOption, isLoading, isFetchingMore, skeletonRows, skeletonLabel, onNearEnd, canLoadMore, nearEndOffset, filterDebounceMs, scroller, toolbar, toolbarLayout, footer, totalCount, resultLabel, resultHint, onReset, onRowClick, scrollToTopOn, rowLink, emptyState, virtualization, ...tableOptions }: BonelessTableProps<TData>): react.JSX.Element;
+declare function BonelessTable<TData extends RowData>({ data, columns, settings: settingsOverride, className, classNames, icons, tree: treeOption, isLoading, isFetchingMore, skeletonRows, skeletonLabel, onNearEnd, canLoadMore, nearEndOffset, filterDebounceMs, scroller, toolbar, toolbarLayout, filters, filterPlacement, footer, totalCount, resultLabel, resultHint, onReset, onRowClick, scrollToTopOn, rowLink, emptyState, virtualization, ...tableOptions }: BonelessTableProps<TData>): react.JSX.Element;
 
 declare function defineColumns<TData extends RowData>(columns: BonelessTableColumn<TData>[]): BonelessTableColumn<TData>[];
 declare function resolveColumns<TData extends RowData>(columns: BonelessTableColumn<TData>[]): ResolvedBonelessTableColumn<TData>[];
@@ -255,4 +264,4 @@ declare function TableSkeleton({ columnCount, rows, label, classNames, }: {
     classNames?: Pick<BonelessTableClassNames, 'row' | 'cell' | 'skeleton'>;
 }): react.JSX.Element;
 
-export { BonelessTable, type BonelessTableClassNames, type BonelessTableColumn, type BonelessTableColumnSettings, type BonelessTableIcons, type BonelessTableOptions, type BonelessTablePresentationOptions, type BonelessTableProps, type BonelessTableRowClickEvent, type BonelessTableRowLink, type BonelessTableRowLinkComponentProps, type BonelessTableSettings, type BonelessTableSlot, type BonelessTableToolbarLayout, type BonelessTableTreeOptions, type ColumnAlignment, type ColumnBorders, ColumnFilter, ColumnMenu, type DeepPartial, type FilterType, type ResolvedBonelessTableColumn, type RevealMode, TableSkeleton, compactValue, defaultBonelessTableSettings, defineColumns, getColumnIds, mergeBonelessTableSettings, resolveColumnSettings, resolveColumns, resolveRowHref, resolveRowLinkLabel, withDefaultCells };
+export { BonelessTable, type BonelessTableClassNames, type BonelessTableColumn, type BonelessTableColumnSettings, type BonelessTableFilterPlacement, type BonelessTableIcons, type BonelessTableOptions, type BonelessTablePresentationOptions, type BonelessTableProps, type BonelessTableRowClickEvent, type BonelessTableRowLink, type BonelessTableRowLinkComponentProps, type BonelessTableSettings, type BonelessTableSlot, type BonelessTableToolbarLayout, type BonelessTableTreeOptions, type ColumnAlignment, type ColumnBorders, ColumnFilter, ColumnMenu, type DeepPartial, type FilterType, type ResolvedBonelessTableColumn, type RevealMode, TableSkeleton, compactValue, defaultBonelessTableSettings, defineColumns, getColumnIds, mergeBonelessTableSettings, resolveColumnSettings, resolveColumns, resolveRowHref, resolveRowLinkLabel, withDefaultCells };

package/dist/index.js

@@ -92,10 +92,13 @@ function ColumnFilter({
   var _a, _b;
   const value = String((_a = column.getFilterValue()) != null ? _a : "");
   const [inputValue, setInputValue] = (0, import_react.useState)(value);
+  const lastColumnValueRef = (0, import_react.useRef)(value);
   (0, import_react.useEffect)(() => {
-    setInputValue(value);
-  }, [value]);
-  (0, import_react.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);
@@ -248,7 +251,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;
@@ -402,6 +405,8 @@ function BonelessTable(_a) {
     scroller = "auto",
     toolbar = true,
     toolbarLayout,
+    filters = true,
+    filterPlacement = "above",
     footer = true,
     totalCount,
     resultLabel = "rows",
@@ -431,6 +436,8 @@ function BonelessTable(_a) {
     "scroller",
     "toolbar",
     "toolbarLayout",
+    "filters",
+    "filterPlacement",
     "footer",
     "totalCount",
     "resultLabel",
@@ -448,11 +455,11 @@ function BonelessTable(_a) {
   const defaultOrder = (0, import_react3.useMemo)(() => getColumnIds(resolvedColumns), [resolvedColumns]);
   const scrollerRef = (0, import_react3.useRef)(null);
   const headerScrollerRef = (0, import_react3.useRef)(null);
+  const lastScrollLeftRef = (0, import_react3.useRef)(0);
   const columnsButtonRef = (0, import_react3.useRef)(null);
   const nearEndTriggeredRef = (0, import_react3.useRef)(false);
   const columnMenuId = (0, import_react3.useId)();
   const [showColumns, setShowColumns] = (0, import_react3.useState)(false);
-  const [headerScrollbarGutter, setHeaderScrollbarGutter] = (0, import_react3.useState)(0);
   const [sorting, setSorting] = (0, import_react3.useState)((_b2 = (_a2 = tableOptions.initialState) == null ? void 0 : _a2.sorting) != null ? _b2 : []);
   const [columnFilters, setColumnFilters] = (0, import_react3.useState)(
     (_d = (_c = tableOptions.initialState) == null ? void 0 : _c.columnFilters) != null ? _d : []
@@ -497,18 +504,6 @@ function BonelessTable(_a) {
     var _a3;
     if (scrollToTopOn !== void 0) (_a3 = scrollerRef.current) == null ? void 0 : _a3.scrollTo({ top: 0 });
   }, [scrollToTopOn]);
-  (0, import_react3.useEffect)(() => {
-    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 = (0, import_react_table.useReactTable)(__spreadProps(__spreadValues({}, restTableOptions), {
     data,
     columns: resolvedColumns,
@@ -577,13 +572,17 @@ function BonelessTable(_a) {
   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();
   }
@@ -626,10 +625,13 @@ function BonelessTable(_a) {
     (_a3 = columnsButtonRef.current) == null ? void 0 : _a3.focus();
   }
   const toolbarSummary = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: classNames.toolbarSummary, "data-slot": "toolbar-summary", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: total.toLocaleString() }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { className: classNames.toolbarCount, "data-slot": "toolbar-count", children: total.toLocaleString() }),
     " ",
-    resultLabel,
-    resultHint ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: classNames.toolbarHint, "data-slot": "toolbar-hint", children: resultHint }) : null
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: classNames.toolbarLabel, "data-slot": "toolbar-label", children: resultLabel }),
+    resultHint ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: classNames.toolbarHint, "data-slot": "toolbar-hint", children: resultHint })
+    ] }) : null
   ] });
   const toolbarActions = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: classNames.toolbarActions, "data-slot": "toolbar-actions", children: [
     tree && expandableRows.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
@@ -681,6 +683,43 @@ function BonelessTable(_a) {
     toolbarSummary,
     toolbarActions
   ] });
+  const filterHeaders = table.getLeafHeaders().filter((header) => !header.isPlaceholder && getColumnSettings(header.column).filtering);
+  const defaultFilters = filterHeaders.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "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__ */ (0, import_jsx_runtime4.jsxs)(
+          "div",
+          {
+            className: classNames.filterItem,
+            "data-column-id": header.column.id,
+            "data-slot": "filter-item",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime4.jsx)(
+                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__ */ (0, import_jsx_runtime4.jsxs)("footer", { className: classNames.footer, "data-slot": "footer", children: [
     "Showing ",
     shown.toLocaleString(),
@@ -691,13 +730,21 @@ 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",
+    scrollbarGutter: "stable"
+  };
   const tableStyle = __spreadValues({
     "--boneless-table-grid": grid
   }, scroller === "fill" ? { display: "flex", flexDirection: "column", flex: "1 1 auto", minHeight: 0 } : {});
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn(className, classNames.root), "data-slot": "root", style: rootStyle, children: [
     renderSlot(toolbar, table, defaultToolbar),
+    filterPlacement === "above" ? renderedFilters : null,
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "div",
       {
@@ -710,14 +757,10 @@ function BonelessTable(_a) {
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "div",
             {
+              className: classNames.headerScroller,
               "data-slot": "header-scroller",
               ref: headerScrollerRef,
-              style: {
-                flex: "0 0 auto",
-                minWidth: 0,
-                overflow: "hidden",
-                paddingInlineEnd: headerScrollbarGutter || void 0
-              },
+              style: headerScrollerStyle,
               children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "div",
                 {
@@ -733,11 +776,10 @@ function BonelessTable(_a) {
                       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__ */ (0, import_jsx_runtime4.jsxs)(
+                        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                           "div",
                           {
                             className: classNames.header,
@@ -748,47 +790,28 @@ function BonelessTable(_a) {
                             "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__ */ (0, import_jsx_runtime4.jsxs)(
-                                "button",
-                                {
-                                  className: classNames.headerButton,
-                                  "data-align": columnSettings.align,
-                                  "data-slot": "header-button",
-                                  onClick: header.column.getToggleSortingHandler(),
-                                  children: [
-                                    (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext()),
-                                    (icons == null ? void 0 : icons.sort) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                                      "span",
-                                      {
-                                        className: classNames.sortIndicator,
-                                        "data-align": columnSettings.align,
-                                        "data-slot": "sort-indicator",
-                                        "data-reveal": columnSettings.sorting.reveal,
-                                        children: icons.sort(direction)
-                                      }
-                                    ) : null
-                                  ]
-                                }
-                              ) : (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext()),
-                              !header.isPlaceholder && columnSettings.filtering ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                                "div",
-                                {
-                                  className: classNames.filter,
-                                  "data-slot": "filter",
-                                  "data-reveal": (_a3 = columnSettings.filtering.reveal) != null ? _a3 : settings.interactions.filterReveal,
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                                    ColumnFilter,
+                            children: header.isPlaceholder ? null : isSortable ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                              "button",
+                              {
+                                className: classNames.headerButton,
+                                "data-align": columnSettings.align,
+                                "data-slot": "header-button",
+                                onClick: header.column.getToggleSortingHandler(),
+                                children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: classNames.headerLabel, "data-slot": "header-label", children: (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext()) }),
+                                  (icons == null ? void 0 : icons.sort) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                                    "span",
                                     {
-                                      column: header.column,
-                                      settings: columnSettings.filtering,
-                                      icon: icons == null ? void 0 : icons.search,
-                                      debounceMs: filterDebounceMs
+                                      className: classNames.sortIndicator,
+                                      "data-align": columnSettings.align,
+                                      "data-slot": "sort-indicator",
+                                      "data-reveal": columnSettings.sorting.reveal,
+                                      children: icons.sort(direction)
                                     }
-                                  )
-                                }
-                              ) : null
-                            ]
+                                  ) : null
+                                ]
+                              }
+                            ) : (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext())
                           },
                           header.id
                         );
@@ -803,11 +826,13 @@ function BonelessTable(_a) {
           /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
             "div",
             {
+              "aria-label": "Table rows",
               className: classNames.scroller,
               "data-slot": "scroller",
               ref: scrollerRef,
               onScroll: handleScroll,
               style: scrollerStyle,
+              tabIndex: 0,
               children: [
                 isLoading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   TableSkeleton,
@@ -949,6 +974,7 @@ function BonelessTable(_a) {
         ]
       }
     ),
+    filterPlacement === "below" ? renderedFilters : null,
     renderSlot(footer, table, defaultFooter)
   ] });
 }