@dashforge/tw 0.7.0-beta → 0.8.0-beta

package/dist/index.esm.js

@@ -8259,28 +8259,99 @@ const DEFAULT_PAGE_SIZE_OPTIONS = [
 }
 
 /**
- * Filters `rows` by the per-column filter model. v1 only supports
- * the `contains` operator (text substring) — additional ops
- * (`equals`, `in`, `gte`, `lte`, `between`, `before`, `after`)
- * land in v1-bis once the filter UI surface for each shape is
- * fleshed out.
- *
- * AND semantics across columns: a row must match EVERY active
- * filter. Within a single filter, the op decides the predicate.
+ * Coerce a value to a number for range comparison. Returns
+ * `null` if not coercible.
+ */ function toNumber(value) {
+    if (value == null) return null;
+    if (typeof value === 'number') return Number.isFinite(value) ? value : null;
+    if (typeof value === 'bigint') return Number(value);
+    if (typeof value === 'string') {
+        const n = Number(value);
+        return Number.isFinite(n) ? n : null;
+    }
+    return null;
+}
+/**
+ * Coerce a value to a Date's epoch ms for date-range comparison.
+ * Accepts `Date` instances + ISO 8601 strings. Returns `null` if
+ * not coercible.
+ */ function toDateMs(value) {
+    if (value == null) return null;
+    if (value instanceof Date) return value.getTime();
+    if (typeof value === 'string') {
+        const d = new Date(value);
+        const t = d.getTime();
+        return Number.isNaN(t) ? null : t;
+    }
+    return null;
+}
+/**
+ * Test one row × one filter. Returns `true` if the row passes the
+ * filter. The operator decides the predicate:
+ *
+ *  - `contains` → substring match on stringified value (text filter)
+ *  - `equals` → strict equality (boolean filter mostly)
+ *  - `between` → `value: [min, max]` tuple. Each end can be `null`
+ *    for an open range. Used by number range + date range filters.
+ *
+ * Empty filter is a no-op (passes every row).
+ */ function passesFilter(rowValue, op, filterValue) {
+    switch(op){
+        case 'contains':
+            {
+                const needle = typeof filterValue === 'string' ? filterValue.trim().toLowerCase() : '';
+                if (!needle) return true;
+                return stringifyForSearch(rowValue).toLowerCase().includes(needle);
+            }
+        case 'equals':
+            {
+                if (filterValue == null) return true;
+                return rowValue === filterValue;
+            }
+        case 'between':
+            {
+                if (!Array.isArray(filterValue) || filterValue.length !== 2) return true;
+                const [min, max] = filterValue;
+                if (min == null && max == null) return true;
+                // Try number range first.
+                const rowNum = toNumber(rowValue);
+                const minNum = min == null ? null : toNumber(min);
+                const maxNum = max == null ? null : toNumber(max);
+                if (rowNum != null && (minNum != null || maxNum != null)) {
+                    if (minNum != null && rowNum < minNum) return false;
+                    if (maxNum != null && rowNum > maxNum) return false;
+                    return true;
+                }
+                // Fall through to date range.
+                const rowMs = toDateMs(rowValue);
+                const minMs = min == null ? null : toDateMs(min);
+                const maxMs = max == null ? null : toDateMs(max);
+                if (rowMs != null && (minMs != null || maxMs != null)) {
+                    if (minMs != null && rowMs < minMs) return false;
+                    if (maxMs != null && rowMs > maxMs) return false;
+                    return true;
+                }
+                // If neither coercion worked, let the row pass (defensive).
+                return true;
+            }
+        default:
+            return true;
+    }
+}
+/**
+ * Filters `rows` by the per-column filter model. AND semantics
+ * across columns — a row must pass EVERY active filter.
+ *
+ * Each filter item specifies an `op` (`'contains'` / `'equals'` /
+ * `'between'`) and a `value` whose shape matches the operator
+ * (string for contains; primitive for equals; `[min, max]` tuple
+ * for between).
  */ function useTableFilter(rows, filterModel) {
     return useMemo(()=>{
         if (!filterModel || filterModel.length === 0) return rows;
         return rows.filter((row)=>filterModel.every((filter)=>{
                 const value = getNestedValue(row, filter.field);
-                const stringValue = stringifyForSearch(value).toLowerCase();
-                const needle = filter.value.trim().toLowerCase();
-                if (!needle) return true; // empty filter == no-op
-                switch(filter.op){
-                    case 'contains':
-                        return stringValue.includes(needle);
-                    default:
-                        return true;
-                }
+                return passesFilter(value, filter.op, filter.value);
             }));
     }, [
         rows,
@@ -8592,10 +8663,23 @@ const DEFAULT_LABELS$1 = {
     filterColumn: 'Filter',
     filterApply: 'Apply',
     filterClear: 'Clear',
+    filterMin: 'Min',
+    filterMax: 'Max',
+    filterFrom: 'From',
+    filterTo: 'To',
+    filterAll: 'All',
+    filterTrue: 'True',
+    filterFalse: 'False',
     density: 'Density',
     densityCompact: 'Compact',
     densityComfortable: 'Comfortable',
-    densitySpacious: 'Spacious'
+    densitySpacious: 'Spacious',
+    columnsButton: 'Columns',
+    columnsTitle: 'Manage columns',
+    columnsDescription: 'Show or hide columns. Required columns cannot be toggled.',
+    columnsShowAll: 'Show all',
+    columnsHideAll: 'Hide all',
+    columnsDone: 'Done'
 };
 const DEFAULT_GET_ROW_ID = (_row, index)=>String(index);
 /**
@@ -9536,7 +9620,7 @@ function RowActionMenuItem(props) {
             'border-t border-neutral-200',
             'bg-neutral-50 shadow-md'
         ],
-        // Sticky left column — uses `position: sticky; left: 0` + z-index
+        // Sticky LEFT column — uses `position: sticky; left: 0` + z-index
         // so the column stays pinned during horizontal scroll. The
         // `bg-neutral-50` ensures the column doesn't bleed when content
         // scrolls underneath.
@@ -9544,6 +9628,12 @@ function RowActionMenuItem(props) {
         // Sticky left × header intersection (top-left corner): higher
         // z-index than both header (`z-10`) and sticky col (`z-[1]`).
         stickyLeftHeaderCell: 'sticky left-0 z-20 bg-neutral-50',
+        // Sticky RIGHT column — mirror of stickyLeftCell. The first
+        // right-sticky column gets a `border-l` to separate it visually
+        // from the scrollable area (the consumer can override via
+        // slotProps if they don't want it).
+        stickyRightCell: 'sticky right-0 z-[1] bg-neutral-50 border-l border-neutral-200',
+        stickyRightHeaderCell: 'sticky right-0 z-20 bg-neutral-50 border-l border-neutral-200',
         paginationFooter: 'flex justify-end mt-3'
     },
     variants: {
@@ -9748,6 +9838,690 @@ function RowActionMenuItem(props) {
     };
 }
 
+/**
+ * Per-column filter UI for DataGrid.
+ *
+ * `<ColumnFilterTrigger>` renders the filter icon button in the
+ * column header — when clicked, opens a Popover with the
+ * appropriate filter UI for the column type:
+ *
+ *  - `text` → `<TextFilter>` with single input (op: `contains`)
+ *  - `number` → `<NumberRangeFilter>` with min/max inputs (op: `between`)
+ *  - `boolean` → `<BooleanFilter>` with true/false/all radio (op: `equals`)
+ *  - `date` → `<DateRangeFilter>` with min/max date inputs (op: `between`)
+ *
+ * Each filter UI has Apply + Clear actions; Apply commits the
+ * filter to the model, Clear removes any existing filter for that
+ * column.
+ */ // ───── Helper: read/write filter model for a single column ─────
+function findFilter(model, field) {
+    return model.find((f)=>f.field === field);
+}
+function setFilter(model, field, next) {
+    const rest = model.filter((f)=>f.field !== field);
+    if (next == null) return rest;
+    return [
+        ...rest,
+        next
+    ];
+}
+const DEFAULT_FILTER_LABELS = {
+    filterColumn: 'Filter',
+    filterApply: 'Apply',
+    filterClear: 'Clear',
+    filterMin: 'Min',
+    filterMax: 'Max',
+    filterFrom: 'From',
+    filterTo: 'To',
+    filterAll: 'All',
+    filterTrue: 'True',
+    filterFalse: 'False'
+};
+function ColumnFilterTrigger(props) {
+    const { field, filterType, filterModel, onFilterChange, disabled, labels: labelsProp } = props;
+    const labels = _extends({}, DEFAULT_FILTER_LABELS, labelsProp);
+    const [open, setOpen] = useState(false);
+    const active = findFilter(filterModel, field) != null;
+    return jsx(Popover, {
+        open: open,
+        onOpenChange: setOpen,
+        side: "bottom",
+        align: "end",
+        content: jsx(FilterPanel, {
+            field: field,
+            filterType: filterType,
+            filterModel: filterModel,
+            onFilterChange: (next)=>{
+                onFilterChange(next);
+                setOpen(false);
+            },
+            labels: labels
+        }),
+        children: jsx("button", {
+            type: "button",
+            "aria-label": labels.filterColumn,
+            "aria-pressed": active,
+            disabled: disabled,
+            className: cn('inline-flex items-center justify-center h-6 w-6 rounded', 'text-neutral-500 hover:text-neutral-900', active && 'text-primary-700', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500', 'transition-colors motion-reduce:transition-none', 'disabled:opacity-50 disabled:cursor-not-allowed'),
+            children: jsx(FilterIcon, {})
+        })
+    });
+}
+// ───── Panel — dispatches to the right filter UI ─────
+function FilterPanel(props) {
+    const { field, filterType, filterModel, onFilterChange, labels } = props;
+    const current = findFilter(filterModel, field);
+    const commit = (next)=>{
+        onFilterChange(setFilter(filterModel, field, next));
+    };
+    switch(filterType){
+        case 'number':
+            return jsx(NumberRangeFilter, {
+                field: field,
+                current: current,
+                onCommit: commit,
+                labels: labels
+            });
+        case 'boolean':
+            return jsx(BooleanFilter, {
+                field: field,
+                current: current,
+                onCommit: commit,
+                labels: labels
+            });
+        case 'date':
+            return jsx(DateRangeFilter, {
+                field: field,
+                current: current,
+                onCommit: commit,
+                labels: labels
+            });
+        case 'text':
+        default:
+            return jsx(TextFilter, {
+                field: field,
+                current: current,
+                onCommit: commit,
+                labels: labels
+            });
+    }
+}
+// ───── Text filter ─────
+function TextFilter(props) {
+    const { field, current, onCommit, labels } = props;
+    const [value, setValue] = useState(typeof (current == null ? void 0 : current.value) === 'string' ? current.value : '');
+    return jsxs("div", {
+        className: "flex flex-col gap-2 min-w-[200px]",
+        children: [
+            jsx("input", {
+                type: "text",
+                value: value,
+                onChange: (e)=>setValue(e.target.value),
+                placeholder: "\u2026",
+                autoFocus: true,
+                className: "rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+            }),
+            jsx(FilterActions, {
+                onApply: ()=>onCommit(value.trim() ? {
+                        field,
+                        op: 'contains',
+                        value
+                    } : null),
+                onClear: ()=>{
+                    setValue('');
+                    onCommit(null);
+                },
+                labels: labels
+            })
+        ]
+    });
+}
+// ───── Number range filter ─────
+function NumberRangeFilter(props) {
+    const { field, current, onCommit, labels } = props;
+    const currentValue = current == null ? void 0 : current.value;
+    const currentTuple = Array.isArray(currentValue) ? currentValue : [
+        null,
+        null
+    ];
+    const [min, setMin] = useState(currentTuple[0] != null ? String(currentTuple[0]) : '');
+    const [max, setMax] = useState(currentTuple[1] != null ? String(currentTuple[1]) : '');
+    const apply = ()=>{
+        const minN = min.trim() ? Number(min) : null;
+        const maxN = max.trim() ? Number(max) : null;
+        if ((minN == null || Number.isFinite(minN)) && (maxN == null || Number.isFinite(maxN))) {
+            if (minN == null && maxN == null) {
+                onCommit(null);
+            } else {
+                onCommit({
+                    field,
+                    op: 'between',
+                    value: [
+                        minN,
+                        maxN
+                    ]
+                });
+            }
+        }
+    };
+    return jsxs("div", {
+        className: "flex flex-col gap-2 min-w-[220px]",
+        children: [
+            jsxs("div", {
+                className: "grid grid-cols-2 gap-2",
+                children: [
+                    jsxs("label", {
+                        className: "flex flex-col gap-1 text-xs text-neutral-700",
+                        children: [
+                            jsx("span", {
+                                children: labels.filterMin
+                            }),
+                            jsx("input", {
+                                type: "number",
+                                value: min,
+                                onChange: (e)=>setMin(e.target.value),
+                                autoFocus: true,
+                                className: "rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+                            })
+                        ]
+                    }),
+                    jsxs("label", {
+                        className: "flex flex-col gap-1 text-xs text-neutral-700",
+                        children: [
+                            jsx("span", {
+                                children: labels.filterMax
+                            }),
+                            jsx("input", {
+                                type: "number",
+                                value: max,
+                                onChange: (e)=>setMax(e.target.value),
+                                className: "rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            jsx(FilterActions, {
+                onApply: apply,
+                onClear: ()=>{
+                    setMin('');
+                    setMax('');
+                    onCommit(null);
+                },
+                labels: labels
+            })
+        ]
+    });
+}
+// ───── Boolean filter ─────
+function BooleanFilter(props) {
+    const { field, current, onCommit, labels } = props;
+    const initial = (current == null ? void 0 : current.value) === true ? 'true' : (current == null ? void 0 : current.value) === false ? 'false' : 'all';
+    const [value, setValue] = useState(initial);
+    const apply = ()=>{
+        if (value === 'all') onCommit(null);
+        else onCommit({
+            field,
+            op: 'equals',
+            value: value === 'true'
+        });
+    };
+    return jsxs("div", {
+        className: "flex flex-col gap-2 min-w-[160px]",
+        children: [
+            jsx("fieldset", {
+                className: "flex flex-col gap-1",
+                children: [
+                    'all',
+                    'true',
+                    'false'
+                ].map((opt)=>jsxs("label", {
+                        className: "flex items-center gap-2 text-sm cursor-pointer",
+                        children: [
+                            jsx("input", {
+                                type: "radio",
+                                name: `filter-${field}`,
+                                value: opt,
+                                checked: value === opt,
+                                onChange: ()=>setValue(opt),
+                                className: "cursor-pointer"
+                            }),
+                            jsx("span", {
+                                children: opt === 'all' ? labels.filterAll : opt === 'true' ? labels.filterTrue : labels.filterFalse
+                            })
+                        ]
+                    }, opt))
+            }),
+            jsx(FilterActions, {
+                onApply: apply,
+                onClear: ()=>{
+                    setValue('all');
+                    onCommit(null);
+                },
+                labels: labels
+            })
+        ]
+    });
+}
+// ───── Date range filter ─────
+function DateRangeFilter(props) {
+    const { field, current, onCommit, labels } = props;
+    const currentValue = current == null ? void 0 : current.value;
+    const currentTuple = Array.isArray(currentValue) ? currentValue : [
+        null,
+        null
+    ];
+    const [from, setFrom] = useState(typeof currentTuple[0] === 'string' ? currentTuple[0] : '');
+    const [to, setTo] = useState(typeof currentTuple[1] === 'string' ? currentTuple[1] : '');
+    const apply = ()=>{
+        if (!from && !to) {
+            onCommit(null);
+        } else {
+            onCommit({
+                field,
+                op: 'between',
+                value: [
+                    from || null,
+                    to || null
+                ]
+            });
+        }
+    };
+    return jsxs("div", {
+        className: "flex flex-col gap-2 min-w-[220px]",
+        children: [
+            jsxs("div", {
+                className: "grid grid-cols-2 gap-2",
+                children: [
+                    jsxs("label", {
+                        className: "flex flex-col gap-1 text-xs text-neutral-700",
+                        children: [
+                            jsx("span", {
+                                children: labels.filterFrom
+                            }),
+                            jsx("input", {
+                                type: "date",
+                                value: from,
+                                onChange: (e)=>setFrom(e.target.value),
+                                autoFocus: true,
+                                className: "rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+                            })
+                        ]
+                    }),
+                    jsxs("label", {
+                        className: "flex flex-col gap-1 text-xs text-neutral-700",
+                        children: [
+                            jsx("span", {
+                                children: labels.filterTo
+                            }),
+                            jsx("input", {
+                                type: "date",
+                                value: to,
+                                onChange: (e)=>setTo(e.target.value),
+                                className: "rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            jsx(FilterActions, {
+                onApply: apply,
+                onClear: ()=>{
+                    setFrom('');
+                    setTo('');
+                    onCommit(null);
+                },
+                labels: labels
+            })
+        ]
+    });
+}
+// ───── Apply + Clear actions ─────
+function FilterActions(props) {
+    return jsxs("div", {
+        className: "flex justify-end gap-2 pt-1 border-t border-neutral-200",
+        children: [
+            jsx("button", {
+                type: "button",
+                onClick: props.onClear,
+                className: "text-xs text-neutral-600 hover:text-neutral-900 underline-offset-2 hover:underline focus:outline-none focus-visible:underline px-2 py-1",
+                children: props.labels.filterClear
+            }),
+            jsx("button", {
+                type: "button",
+                onClick: props.onApply,
+                className: "text-xs bg-primary-500 text-white rounded-md hover:bg-primary-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 px-3 py-1",
+                children: props.labels.filterApply
+            })
+        ]
+    });
+}
+// ───── Icon ─────
+function FilterIcon() {
+    return jsx("svg", {
+        width: "0.875em",
+        height: "0.875em",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        children: jsx("path", {
+            d: "M2 3h12M4 8h8M6 13h4"
+        })
+    });
+}
+
+const DEFAULT_VISIBILITY_LABELS = {
+    columnsButton: 'Columns',
+    columnsTitle: 'Manage columns',
+    columnsDescription: 'Show or hide columns. Required columns cannot be toggled.',
+    columnsShowAll: 'Show all',
+    columnsHideAll: 'Hide all',
+    columnsDone: 'Done'
+};
+function ColumnVisibilityTrigger(props) {
+    const { cols, hiddenColumns, onChange, disabled, labels: labelsProp } = props;
+    const labels = _extends({}, DEFAULT_VISIBILITY_LABELS, labelsProp);
+    const [open, setOpen] = useState(false);
+    // Hideable cols are the only ones the user can toggle. `hideable`
+    // defaults to `true` — a column is hideable unless explicitly opted
+    // out with `hideable: false` (structurally required column).
+    const hideableCols = cols.filter((c)=>c.hideable !== false);
+    return jsxs(Fragment$1, {
+        children: [
+            jsxs("button", {
+                type: "button",
+                onClick: ()=>setOpen(true),
+                disabled: disabled,
+                className: cn('inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-md', 'text-sm text-neutral-700 hover:text-neutral-900', 'border border-neutral-300 bg-neutral-50 hover:bg-neutral-100', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500', 'transition-colors motion-reduce:transition-none', 'disabled:opacity-50 disabled:cursor-not-allowed'),
+                children: [
+                    jsx(ColumnsIcon, {}),
+                    jsx("span", {
+                        children: labels.columnsButton
+                    })
+                ]
+            }),
+            jsx(Dialog, {
+                open: open,
+                onOpenChange: setOpen,
+                title: labels.columnsTitle,
+                description: labels.columnsDescription,
+                size: "sm",
+                children: jsx(ColumnVisibilityBody, {
+                    cols: hideableCols,
+                    hiddenColumns: hiddenColumns,
+                    onChange: onChange,
+                    onDone: ()=>setOpen(false),
+                    labels: labels
+                })
+            })
+        ]
+    });
+}
+// ───── Dialog body ─────
+function ColumnVisibilityBody(props) {
+    const { cols, hiddenColumns, onChange, onDone, labels } = props;
+    // Local draft so the user can stage changes; commit on Done.
+    const [draft, setDraft] = useState(hiddenColumns);
+    // Re-sync when the dialog re-opens with a different external state.
+    useEffect(()=>{
+        setDraft(hiddenColumns);
+    }, [
+        hiddenColumns
+    ]);
+    const toggle = (field)=>{
+        setDraft((prev)=>prev.includes(field) ? prev.filter((f)=>f !== field) : [
+                ...prev,
+                field
+            ]);
+    };
+    const showAll = ()=>setDraft([]);
+    const hideAll = ()=>setDraft(cols.map((c)=>c.field));
+    return jsxs("div", {
+        className: "flex flex-col gap-3",
+        children: [
+            jsxs("div", {
+                className: "flex items-center gap-2 pb-2 border-b border-neutral-200",
+                children: [
+                    jsx("button", {
+                        type: "button",
+                        onClick: showAll,
+                        className: "text-xs text-neutral-600 hover:text-neutral-900 underline-offset-2 hover:underline focus:outline-none focus-visible:underline",
+                        children: labels.columnsShowAll
+                    }),
+                    jsx("span", {
+                        className: "text-neutral-300",
+                        children: "\u00B7"
+                    }),
+                    jsx("button", {
+                        type: "button",
+                        onClick: hideAll,
+                        className: "text-xs text-neutral-600 hover:text-neutral-900 underline-offset-2 hover:underline focus:outline-none focus-visible:underline",
+                        children: labels.columnsHideAll
+                    })
+                ]
+            }),
+            jsx("ul", {
+                className: "flex flex-col gap-1.5 max-h-72 overflow-auto",
+                children: cols.map((col)=>{
+                    const field = col.field;
+                    const hidden = draft.includes(field);
+                    const header = typeof col.header === 'function' ? col.header() : col.header;
+                    return jsx("li", {
+                        children: jsxs("label", {
+                            className: "flex items-center gap-2 cursor-pointer py-1 px-1 rounded hover:bg-neutral-100",
+                            children: [
+                                jsx("input", {
+                                    type: "checkbox",
+                                    checked: !hidden,
+                                    onChange: ()=>toggle(field),
+                                    className: "cursor-pointer"
+                                }),
+                                jsx("span", {
+                                    className: "text-sm text-neutral-900",
+                                    children: header
+                                })
+                            ]
+                        })
+                    }, field);
+                })
+            }),
+            jsx("div", {
+                className: "flex justify-end gap-2 pt-2 border-t border-neutral-200",
+                children: jsx("button", {
+                    type: "button",
+                    onClick: ()=>{
+                        onChange(draft);
+                        onDone();
+                    },
+                    className: "text-sm bg-primary-500 text-white rounded-md hover:bg-primary-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 px-3 py-1.5",
+                    children: labels.columnsDone
+                })
+            })
+        ]
+    });
+}
+// ───── Icon ─────
+function ColumnsIcon() {
+    return jsxs("svg", {
+        width: "0.875em",
+        height: "0.875em",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        children: [
+            jsx("rect", {
+                x: "2",
+                y: "3",
+                width: "3.5",
+                height: "10",
+                rx: "0.5"
+            }),
+            jsx("rect", {
+                x: "6.25",
+                y: "3",
+                width: "3.5",
+                height: "10",
+                rx: "0.5"
+            }),
+            jsx("rect", {
+                x: "10.5",
+                y: "3",
+                width: "3.5",
+                height: "10",
+                rx: "0.5"
+            })
+        ]
+    });
+}
+
+function useColumnResize(args) {
+    const { widths, onChange, minWidth = 40, maxWidth = 1200 } = args;
+    // We need the LATEST widths inside the pointermove closure. Stick
+    // them in a ref so the closure captured at pointerdown stays valid
+    // for the duration of the drag.
+    const widthsRef = useRef(widths);
+    widthsRef.current = widths;
+    const startResize = useCallback((field, startWidth, clampMin, clampMax)=>{
+        return (e)=>{
+            // Only respond to the primary mouse button (or touch / pen).
+            if (e.pointerType === 'mouse' && e.button !== 0) return;
+            e.preventDefault();
+            e.stopPropagation();
+            const startX = e.clientX;
+            const target = e.currentTarget;
+            try {
+                target.setPointerCapture(e.pointerId);
+            } catch (unused) {
+            // jsdom or older browsers — fine to fall back to global listeners.
+            }
+            const effectiveMin = Math.max(minWidth, clampMin);
+            const effectiveMax = Math.min(maxWidth, clampMax);
+            const handleMove = (ev)=>{
+                const delta = ev.clientX - startX;
+                const next = clamp(startWidth + delta, effectiveMin, effectiveMax);
+                onChange(_extends({}, widthsRef.current, {
+                    [field]: next
+                }));
+            };
+            const handleEnd = (ev)=>{
+                try {
+                    target.releasePointerCapture(ev.pointerId);
+                } catch (unused) {
+                /* noop */ }
+                target.removeEventListener('pointermove', handleMove);
+                target.removeEventListener('pointerup', handleEnd);
+                target.removeEventListener('pointercancel', handleEnd);
+            };
+            target.addEventListener('pointermove', handleMove);
+            target.addEventListener('pointerup', handleEnd);
+            target.addEventListener('pointercancel', handleEnd);
+        };
+    }, [
+        onChange,
+        minWidth,
+        maxWidth
+    ]);
+    return {
+        startResize
+    };
+}
+function clamp(n, min, max) {
+    if (n < min) return min;
+    if (n > max) return max;
+    return n;
+}
+
+function useColumnReorder(args) {
+    const { order, onChange } = args;
+    const sourceRef = useRef(null);
+    const [dropTarget, setDropTarget] = useState(null);
+    const [draggingField, setDraggingField] = useState(null);
+    const dragStart = useCallback((field)=>(e)=>{
+            sourceRef.current = field;
+            setDraggingField(field);
+            try {
+                e.dataTransfer.effectAllowed = 'move';
+                // Some browsers refuse to start a drag if no data is set.
+                e.dataTransfer.setData('text/plain', field);
+            } catch (unused) {
+            /* noop — jsdom doesn't implement dataTransfer fully. */ }
+        }, []);
+    const dragOver = useCallback((field)=>(e)=>{
+            if (sourceRef.current == null) return;
+            if (field === sourceRef.current) return;
+            e.preventDefault();
+            e.dataTransfer.dropEffect = 'move';
+            // Determine LEFT vs RIGHT half of the target.
+            const rect = e.currentTarget.getBoundingClientRect();
+            const midpoint = rect.left + rect.width / 2;
+            const side = e.clientX < midpoint ? 'left' : 'right';
+            setDropTarget((prev)=>prev && prev.field === field && prev.side === side ? prev : {
+                    field,
+                    side
+                });
+        }, []);
+    const drop = useCallback((field)=>(e)=>{
+            e.preventDefault();
+            const source = sourceRef.current;
+            sourceRef.current = null;
+            setDraggingField(null);
+            const target = dropTarget;
+            setDropTarget(null);
+            if (!source || source === field) return;
+            const side = (target == null ? void 0 : target.field) === field ? target.side : 'right';
+            const next = moveColumn(order, source, field, side);
+            if (!arraysEqual(next, order)) onChange(next);
+        }, [
+        order,
+        onChange,
+        dropTarget
+    ]);
+    const dragEnd = useCallback(()=>{
+        sourceRef.current = null;
+        setDraggingField(null);
+        setDropTarget(null);
+    }, []);
+    return {
+        dropTarget,
+        draggingField,
+        dragStart,
+        dragOver,
+        drop,
+        dragEnd
+    };
+}
+/**
+ * Move `source` next to `target` in the `order` list.
+ * `side='left'` inserts before; `side='right'` inserts after.
+ * Exposed for unit testing.
+ */ function moveColumn(order, source, target, side) {
+    const withoutSource = order.filter((f)=>f !== source);
+    const targetIndex = withoutSource.indexOf(target);
+    if (targetIndex === -1) return order;
+    const insertAt = side === 'left' ? targetIndex : targetIndex + 1;
+    return [
+        ...withoutSource.slice(0, insertAt),
+        source,
+        ...withoutSource.slice(insertAt)
+    ];
+}
+function arraysEqual(a, b) {
+    if (a === b) return true;
+    if (a.length !== b.length) return false;
+    for(let i = 0; i < a.length; i++){
+        if (a[i] !== b[i]) return false;
+    }
+    return true;
+}
+
 const DEFAULT_LABELS = {
     searchPlaceholder: 'Search...',
     noData: 'No data',
@@ -9764,10 +10538,23 @@ const DEFAULT_LABELS = {
     filterColumn: 'Filter',
     filterApply: 'Apply',
     filterClear: 'Clear',
+    filterMin: 'Min',
+    filterMax: 'Max',
+    filterFrom: 'From',
+    filterTo: 'To',
+    filterAll: 'All',
+    filterTrue: 'True',
+    filterFalse: 'False',
     density: 'Density',
     densityCompact: 'Compact',
     densityComfortable: 'Comfortable',
-    densitySpacious: 'Spacious'
+    densitySpacious: 'Spacious',
+    columnsButton: 'Columns',
+    columnsTitle: 'Manage columns',
+    columnsDescription: 'Show or hide columns. Required columns cannot be toggled.',
+    columnsShowAll: 'Show all',
+    columnsHideAll: 'Hide all',
+    columnsDone: 'Done'
 };
 /**
  * Dashforge TW `<DataGrid>` — virtualized data table.
@@ -9796,7 +10583,7 @@ const DEFAULT_LABELS = {
  *  - `'visible'` — toggles only the current viewport window
  */ function DataGrid(props) {
     var _slotProps_root, _slotProps_toolbar, _slotProps_search, _slotProps_scroll, _slotProps_table, _slotProps_thead, _slotProps_headerRow, _slotProps_headerCell, _slotProps_selectionCell, _slotProps_headerCell1, _slotProps_tbody, _slotProps_row, _slotProps_cell, _slotProps_emptyState, _slotProps_row1, _slotProps_cell1, _slotProps_cell2, _slotProps_selectionCell1, _slotProps_cell3, _slotProps_rowActionsCell, _slotProps_bulkActionFooter, _slotProps_pagination;
-    const { rows, cols, getRowId, totalCount: totalCountProp, rowHeight, overscan = 5, height, sortModel: sortModelProp, onSortChange, defaultSortModel, serverSideSort = false, enableSearch = false, searchQuery: searchQueryProp, onSearchQueryChange, searchPlaceholder, searchDebounceMs = 200, serverSideSearch = false, filterModel: filterModelProp, onFilterChange, serverSideFilter = false, rowSelection = 'none', selectedRowIds: selectedRowIdsProp, onSelectionChange, bulkActions, selectAllScope = 'allLoaded', pagination, serverSidePagination = false, rowActions, loading = false, loadingRowCount = 8, emptyState, stickyHeader = true, caption, showCaption = false, access: gridAccess, labels: labelsProp, variant, size, density, sx, slotProps } = props;
+    const { rows, cols, getRowId, totalCount: totalCountProp, rowHeight, overscan = 5, height, sortModel: sortModelProp, onSortChange, defaultSortModel, serverSideSort = false, enableSearch = false, searchQuery: searchQueryProp, onSearchQueryChange, searchPlaceholder, searchDebounceMs = 200, serverSideSearch = false, filterModel: filterModelProp, onFilterChange, serverSideFilter = false, hiddenColumns: hiddenColumnsProp, onHiddenColumnsChange, enableColumnVisibility = true, columnWidths: columnWidthsProp, onColumnWidthsChange, enableColumnResize = true, columnOrder: columnOrderProp, onColumnOrderChange, enableColumnReorder = true, rowSelection = 'none', selectedRowIds: selectedRowIdsProp, onSelectionChange, bulkActions, selectAllScope = 'allLoaded', pagination, serverSidePagination = false, rowActions, loading = false, loadingRowCount = 8, emptyState, stickyHeader = true, caption, showCaption = false, access: gridAccess, labels: labelsProp, variant, size, density, sx, slotProps } = props;
     const labels = _extends({}, DEFAULT_LABELS, labelsProp);
     const gridAccessState = useAccessState(gridAccess);
     // ───── Controllable state ─────
@@ -9810,16 +10597,109 @@ const DEFAULT_LABELS = {
         defaultValue: '',
         onChange: onSearchQueryChange
     });
-    const filterModel = filterModelProp != null ? filterModelProp : [];
+    // filterModel: in v1-bis the per-column header UI commits filter
+    // items to this controllable state. Consumer can lift it via
+    // filterModelProp + onFilterChange to drive server-side filtering.
+    const [filterModel, setFilterModel] = useControllableState({
+        controlledValue: filterModelProp,
+        defaultValue: [],
+        onChange: onFilterChange
+    });
     const [selectedRowIds, setSelectedRowIds] = useControllableState({
         controlledValue: selectedRowIdsProp,
         defaultValue: [],
         onChange: onSelectionChange
     });
-    // ───── RBAC: filter columns ─────
-    const visibleCols = useMemo(()=>cols.filter((col)=>!col.access || col.access.onUnauthorized !== 'hide'), [
+    // ───── Column visibility ─────
+    // Seed default hidden set from `defaultHidden` flag on columns.
+    // Memoized to avoid the seed shifting on every render — the
+    // controllable state keeps internal state stable thereafter.
+    const defaultHiddenColumns = useMemo(()=>cols.filter((c)=>c.defaultHidden === true).map((c)=>c.field), [
         cols
     ]);
+    const [hiddenColumns, setHiddenColumns] = useControllableState({
+        controlledValue: hiddenColumnsProp,
+        defaultValue: defaultHiddenColumns,
+        onChange: onHiddenColumnsChange
+    });
+    // ───── Column widths (resize state) ─────
+    // Seed from any `col.width` declared statically. Internal state is
+    // applied only when the user actually starts dragging; until then
+    // we fall back to the static width from the column def.
+    const defaultColumnWidths = useMemo(()=>{
+        const map = {};
+        for (const c of cols){
+            if (typeof c.width === 'number') {
+                map[c.field] = c.width;
+            }
+        }
+        return map;
+    }, [
+        cols
+    ]);
+    const [columnWidths, setColumnWidths] = useControllableState({
+        controlledValue: columnWidthsProp,
+        defaultValue: defaultColumnWidths,
+        onChange: onColumnWidthsChange
+    });
+    const { startResize } = useColumnResize({
+        widths: columnWidths,
+        onChange: setColumnWidths
+    });
+    // ───── Column order (reorder state) ─────
+    const defaultColumnOrder = useMemo(()=>cols.map((c)=>c.field), [
+        cols
+    ]);
+    const [columnOrder, setColumnOrder] = useControllableState({
+        controlledValue: columnOrderProp,
+        defaultValue: defaultColumnOrder,
+        onChange: onColumnOrderChange
+    });
+    const reorderHandlers = useColumnReorder({
+        order: columnOrder,
+        onChange: setColumnOrder
+    });
+    // Apply the active order to the columns list. Cols not in the
+    // order array (e.g. newly-added columns at runtime) are appended
+    // in their original position from `cols`.
+    const orderedCols = useMemo(()=>{
+        if (!columnOrder || columnOrder.length === 0) return cols;
+        const byField = new Map(cols.map((c)=>[
+                c.field,
+                c
+            ]));
+        const seen = new Set();
+        const result = [];
+        for (const field of columnOrder){
+            const c = byField.get(field);
+            if (c) {
+                result.push(c);
+                seen.add(field);
+            }
+        }
+        for (const c of cols){
+            if (!seen.has(c.field)) result.push(c);
+        }
+        return result;
+    }, [
+        cols,
+        columnOrder
+    ]);
+    // ───── RBAC + visibility + reorder: derive final column list ─────
+    //  - `access.onUnauthorized === 'hide'` removes a column entirely.
+    //  - `hiddenColumns` is the user-toggled hidden set from the
+    //    column-visibility dialog.
+    //  - `orderedCols` is the user-reordered version of `cols`.
+    // NOTE: filtering happens on `orderedCols` so the active order is
+    // preserved through visibility changes.
+    const visibleCols = useMemo(()=>orderedCols.filter((col)=>{
+            if (col.access && col.access.onUnauthorized === 'hide') return false;
+            if (hiddenColumns.includes(col.field)) return false;
+            return true;
+        }), [
+        orderedCols,
+        hiddenColumns
+    ]);
     // ───── Smart-default column types ─────
     const columnTypes = useColumnAutoDetect(rows, visibleCols);
     // ───── Pipeline: search → filter → sort (skip when server-side) ─────
@@ -9901,28 +10781,45 @@ const DEFAULT_LABELS = {
         className: cn(v.root(), sx, slotProps == null ? void 0 : (_slotProps_root = slotProps.root) == null ? void 0 : _slotProps_root.className),
         "data-disabled": !isInteractive ? 'true' : undefined,
         children: [
-            enableSearch && jsx("div", {
+            (enableSearch || enableColumnVisibility) && jsxs("div", {
                 className: cn(v.toolbar(), slotProps == null ? void 0 : (_slotProps_toolbar = slotProps.toolbar) == null ? void 0 : _slotProps_toolbar.className),
-                children: jsxs("label", {
-                    className: cn(v.search(), slotProps == null ? void 0 : (_slotProps_search = slotProps.search) == null ? void 0 : _slotProps_search.className),
-                    children: [
-                        jsx("span", {
-                            className: "sr-only",
-                            children: labels.searchPlaceholder
-                        }),
-                        jsx(SearchIcon, {
-                            className: "ml-2 shrink-0 text-neutral-500"
-                        }),
-                        jsx("input", {
-                            type: "text",
-                            value: searchQuery,
-                            onChange: (e)=>setSearchQuery(e.target.value),
-                            placeholder: searchPlaceholder != null ? searchPlaceholder : labels.searchPlaceholder,
-                            disabled: !isInteractive,
-                            className: cn('flex-1 bg-transparent border-0 outline-none', 'px-2 py-1.5', 'placeholder:text-neutral-400', 'disabled:opacity-50 disabled:cursor-not-allowed')
-                        })
-                    ]
-                })
+                children: [
+                    enableSearch && jsxs("label", {
+                        className: cn(v.search(), slotProps == null ? void 0 : (_slotProps_search = slotProps.search) == null ? void 0 : _slotProps_search.className),
+                        children: [
+                            jsx("span", {
+                                className: "sr-only",
+                                children: labels.searchPlaceholder
+                            }),
+                            jsx(SearchIcon, {
+                                className: "ml-2 shrink-0 text-neutral-500"
+                            }),
+                            jsx("input", {
+                                type: "text",
+                                value: searchQuery,
+                                onChange: (e)=>setSearchQuery(e.target.value),
+                                placeholder: searchPlaceholder != null ? searchPlaceholder : labels.searchPlaceholder,
+                                disabled: !isInteractive,
+                                className: cn('flex-1 bg-transparent border-0 outline-none', 'px-2 py-1.5', 'placeholder:text-neutral-400', 'disabled:opacity-50 disabled:cursor-not-allowed')
+                            })
+                        ]
+                    }),
+                    enableColumnVisibility && jsx(ColumnVisibilityTrigger, {
+                        cols: cols.filter((c)=>// RBAC-hidden columns are never offered in the dialog.
+                            !c.access || c.access.onUnauthorized !== 'hide'),
+                        hiddenColumns: hiddenColumns,
+                        onChange: setHiddenColumns,
+                        disabled: !isInteractive,
+                        labels: {
+                            columnsButton: labels.columnsButton,
+                            columnsTitle: labels.columnsTitle,
+                            columnsDescription: labels.columnsDescription,
+                            columnsShowAll: labels.columnsShowAll,
+                            columnsHideAll: labels.columnsHideAll,
+                            columnsDone: labels.columnsDone
+                        }
+                    })
+                ]
             }),
             jsx("div", {
                 ref: scrollRef,
@@ -9965,8 +10862,15 @@ const DEFAULT_LABELS = {
                                             sortModel: sortModel,
                                             onSortClick: (e)=>handleSortClick(col, e, sortModel, setSortModel),
                                             inferredType: columnTypes.get(col.field),
+                                            filterModel: filterModel,
+                                            onFilterChange: setFilterModel,
+                                            effectiveWidth: resolveColumnWidth(col, columnWidths),
+                                            resizable: enableColumnResize && col.resizable !== false,
+                                            startResize: startResize,
+                                            reorderable: enableColumnReorder && col.reorderable !== false,
+                                            reorderHandlers: reorderHandlers,
                                             labels: labels,
-                                            className: cn(v.headerCell(), col.sticky === 'left' && v.stickyLeftHeaderCell(), slotProps == null ? void 0 : (_slotProps_headerCell = slotProps.headerCell) == null ? void 0 : _slotProps_headerCell.className),
+                                            className: cn(v.headerCell(), col.sticky === 'left' && v.stickyLeftHeaderCell(), col.sticky === 'right' && v.stickyRightHeaderCell(), slotProps == null ? void 0 : (_slotProps_headerCell = slotProps.headerCell) == null ? void 0 : _slotProps_headerCell.className),
                                             buttonClassName: v.headerCellButton(),
                                             disabled: !isInteractive
                                         }, col.field);
@@ -9999,6 +10903,7 @@ const DEFAULT_LABELS = {
                                 renderedRows,
                                 visibleCols,
                                 columnTypes,
+                                columnWidths,
                                 selection,
                                 rowSelection,
                                 showSelectionColumn,
@@ -10012,6 +10917,7 @@ const DEFAULT_LABELS = {
                                     cell: cn(v.cell(), slotProps == null ? void 0 : (_slotProps_cell1 = slotProps.cell) == null ? void 0 : _slotProps_cell1.className),
                                     selectionCell: cn(v.cell(), v.selectionCell(), v.stickyLeftCell(), slotProps == null ? void 0 : (_slotProps_cell2 = slotProps.cell) == null ? void 0 : _slotProps_cell2.className, slotProps == null ? void 0 : (_slotProps_selectionCell1 = slotProps.selectionCell) == null ? void 0 : _slotProps_selectionCell1.className),
                                     stickyLeftCell: v.stickyLeftCell(),
+                                    stickyRightCell: v.stickyRightCell(),
                                     rowActionsCell: cn(v.cell(), v.rowActionsCell(), slotProps == null ? void 0 : (_slotProps_cell3 = slotProps.cell) == null ? void 0 : _slotProps_cell3.className, slotProps == null ? void 0 : (_slotProps_rowActionsCell = slotProps.rowActionsCell) == null ? void 0 : _slotProps_rowActionsCell.className)
                                 }
                             })
@@ -10058,50 +10964,160 @@ const DEFAULT_LABELS = {
 }
 // ───── Header cell ─────
 function HeaderCell(props) {
-    const { col, sortModel, onSortClick, inferredType, labels, className, buttonClassName, disabled } = props;
+    const { col, sortModel, onSortClick, inferredType, filterModel, onFilterChange, effectiveWidth, resizable, startResize, reorderable, reorderHandlers, labels, className, buttonClassName, disabled } = props;
     const align = resolveAlign(col, inferredType);
     const alignClass = align === 'right' ? 'text-right' : align === 'center' ? 'text-center' : 'text-left';
     const sortEntry = sortModel.find((s)=>s.field === col.field);
     const ariaSort = (sortEntry == null ? void 0 : sortEntry.direction) === 'asc' ? 'ascending' : (sortEntry == null ? void 0 : sortEntry.direction) === 'desc' ? 'descending' : 'none';
     const headerContent = typeof col.header === 'function' ? col.header() : col.header;
     const cellStyle = {
-        width: col.width != null ? `${col.width}px` : undefined,
+        width: effectiveWidth != null ? `${effectiveWidth}px` : undefined,
         minWidth: col.minWidth != null ? `${col.minWidth}px` : undefined,
-        flex: col.flex
+        flex: effectiveWidth != null ? undefined : col.flex,
+        position: resizable || reorderable ? 'relative' : undefined
     };
+    // Drop indicator for reorder: a 2px vertical bar at the LEFT or
+    // RIGHT edge of this th when it's the active drop target.
+    const dropTarget = reorderHandlers.dropTarget;
+    const dropIndicatorClass = dropTarget != null && dropTarget.field === col.field ? dropTarget.side === 'left' ? 'before:absolute before:top-0 before:bottom-0 before:left-0 before:w-0.5 before:bg-primary-500' : 'after:absolute after:top-0 after:bottom-0 after:right-0 after:w-0.5 after:bg-primary-500' : '';
+    const isDragging = reorderHandlers.draggingField === col.field;
+    // Drag attributes only attach when reorderable; we DO NOT make the
+    // entire th `draggable` if it isn't — keeps the keyboard focus
+    // behavior unchanged.
+    const dragAttrs = reorderable ? {
+        draggable: true,
+        onDragStart: reorderHandlers.dragStart(col.field),
+        onDragOver: reorderHandlers.dragOver(col.field),
+        onDrop: reorderHandlers.drop(col.field),
+        onDragEnd: reorderHandlers.dragEnd
+    } : {};
+    const resizeHandle = resizable ? jsx("span", {
+        role: "separator",
+        "aria-orientation": "vertical",
+        "aria-label": `Resize ${typeof col.header === 'string' ? col.header : col.field}`,
+        onPointerDown: (e)=>{
+            var _ref, _col_minWidth, _col_maxWidth;
+            const handle = e.currentTarget;
+            const th = handle.parentElement;
+            const startWidth = (_ref = effectiveWidth != null ? effectiveWidth : th == null ? void 0 : th.getBoundingClientRect().width) != null ? _ref : 120;
+            const min = (_col_minWidth = col.minWidth) != null ? _col_minWidth : 40;
+            const max = (_col_maxWidth = col.maxWidth) != null ? _col_maxWidth : 1200;
+            startResize(col.field, startWidth, min, max)(e);
+        },
+        className: cn('absolute top-0 bottom-0 right-0 w-1.5', 'cursor-col-resize select-none touch-none', 'hover:bg-primary-300 active:bg-primary-400', 'transition-colors motion-reduce:transition-none')
+    }) : null;
+    const filterType = col.filterable ? resolveFilterType(col, inferredType) : null;
+    const filterTrigger = col.filterable && filterType ? jsx(ColumnFilterTrigger, {
+        field: col.field,
+        filterType: filterType,
+        filterModel: filterModel,
+        onFilterChange: onFilterChange,
+        disabled: disabled,
+        labels: {
+            filterColumn: labels.filterColumn,
+            filterApply: labels.filterApply,
+            filterClear: labels.filterClear,
+            filterMin: labels.filterMin,
+            filterMax: labels.filterMax,
+            filterFrom: labels.filterFrom,
+            filterTo: labels.filterTo,
+            filterAll: labels.filterAll,
+            filterTrue: labels.filterTrue,
+            filterFalse: labels.filterFalse
+        }
+    }) : null;
+    // Layout strategy:
+    //  - sortable only → sort button is the cell content
+    //  - filterable only → header text + filter trigger in a flex row
+    //  - both → sort button + filter trigger in a flex row
+    //  - neither → plain header text
+    const wrapperJustify = align === 'right' ? 'justify-end' : align === 'center' ? 'justify-center' : 'justify-start';
     if (col.sortable) {
-        return jsx("th", {
+        const sortButton = jsxs("button", {
+            type: "button",
+            onClick: onSortClick,
+            disabled: disabled,
+            "aria-label": ariaSort === 'ascending' ? labels.ariaSortAscending : ariaSort === 'descending' ? labels.ariaSortDescending : labels.ariaSortNone,
+            className: cn(buttonClassName, align === 'right' && 'flex-row-reverse', 'disabled:cursor-not-allowed disabled:opacity-50'),
+            children: [
+                jsx("span", {
+                    children: headerContent
+                }),
+                jsx(SortIcon, {
+                    direction: sortEntry == null ? void 0 : sortEntry.direction
+                })
+            ]
+        });
+        return jsxs("th", _extends({
             scope: "col",
             "aria-sort": ariaSort,
-            className: cn(className, alignClass),
-            style: cellStyle,
-            children: jsxs("button", {
-                type: "button",
-                onClick: onSortClick,
-                disabled: disabled,
-                "aria-label": ariaSort === 'ascending' ? labels.ariaSortAscending : ariaSort === 'descending' ? labels.ariaSortDescending : labels.ariaSortNone,
-                className: cn(buttonClassName, align === 'right' && 'flex-row-reverse', 'disabled:cursor-not-allowed disabled:opacity-50'),
+            className: cn(className, alignClass, dropIndicatorClass, isDragging && 'opacity-50'),
+            style: cellStyle
+        }, dragAttrs, {
+            children: [
+                filterTrigger ? jsxs("div", {
+                    className: cn('flex items-center gap-1', wrapperJustify),
+                    children: [
+                        sortButton,
+                        filterTrigger
+                    ]
+                }) : sortButton,
+                resizeHandle
+            ]
+        }));
+    }
+    return jsxs("th", _extends({
+        scope: "col",
+        className: cn(className, alignClass, dropIndicatorClass, isDragging && 'opacity-50'),
+        style: cellStyle
+    }, dragAttrs, {
+        children: [
+            filterTrigger ? jsxs("div", {
+                className: cn('flex items-center gap-1', wrapperJustify),
                 children: [
                     jsx("span", {
                         children: headerContent
                     }),
-                    jsx(SortIcon, {
-                        direction: sortEntry == null ? void 0 : sortEntry.direction
-                    })
+                    filterTrigger
                 ]
-            })
-        });
+            }) : headerContent,
+            resizeHandle
+        ]
+    }));
+}
+/**
+ * Resolve the effective width (px) for a column. User-driven resize
+ * (`columnWidths[field]`) wins over the static `col.width`. Returns
+ * `undefined` if neither source has a width set — the consumer falls
+ * back to the column's `flex` value or browser auto-layout.
+ */ function resolveColumnWidth(col, columnWidths) {
+    const resized = columnWidths[col.field];
+    if (resized != null) return resized;
+    return col.width;
+}
+/**
+ * Resolve the filter UI type for a column. Explicit `col.filterType`
+ * wins; otherwise we map the auto-detected primitive type:
+ *  - `number` → number range
+ *  - `boolean` → true/false/all select
+ *  - `date` → date range
+ *  - anything else (string / unknown) → text contains
+ */ function resolveFilterType(col, inferred) {
+    if (col.filterType) return col.filterType;
+    switch(inferred){
+        case 'number':
+            return 'number';
+        case 'boolean':
+            return 'boolean';
+        case 'date':
+            return 'date';
+        default:
+            return 'text';
     }
-    return jsx("th", {
-        scope: "col",
-        className: cn(className, alignClass),
-        style: cellStyle,
-        children: headerContent
-    });
 }
 // ───── Virtualized body ─────
 function renderVirtualizedBody(args) {
-    const { vWindow, renderedRows, visibleCols, columnTypes, selection, rowSelection, showSelectionColumn, showRowActionsColumn, rowActions, getRowId, isInteractive, labels, classes } = args;
+    const { vWindow, renderedRows, visibleCols, columnTypes, columnWidths, selection, rowSelection, showSelectionColumn, showRowActionsColumn, rowActions, getRowId, isInteractive, labels, classes } = args;
     return jsxs(Fragment$1, {
         children: [
             vWindow.paddingTop > 0 && jsx("tr", {
@@ -10136,8 +11152,10 @@ function renderVirtualizedBody(args) {
                                 rowIndex: absoluteIdx,
                                 isSelected: isSelected,
                                 inferredType: columnTypes.get(col.field),
+                                effectiveWidth: resolveColumnWidth(col, columnWidths),
                                 cellClass: classes.cell,
-                                stickyLeftClass: classes.stickyLeftCell
+                                stickyLeftClass: classes.stickyLeftCell,
+                                stickyRightClass: classes.stickyRightCell
                             }, col.field)),
                         showRowActionsColumn && rowActions && jsx("td", {
                             className: classes.rowActionsCell,
@@ -10157,7 +11175,7 @@ function renderVirtualizedBody(args) {
 }
 // ───── Data cell ─────
 function DataCell(props) {
-    const { col, row, rowIndex, isSelected, inferredType, cellClass, stickyLeftClass } = props;
+    const { col, row, rowIndex, isSelected, inferredType, effectiveWidth, cellClass, stickyLeftClass, stickyRightClass } = props;
     const value = getNestedValue(row, col.field);
     const align = resolveAlign(col, inferredType);
     const tabularNums = resolveTabularNums(col, inferredType);
@@ -10177,9 +11195,9 @@ function DataCell(props) {
         access: columnAccessState
     }) : renderDefaultCell(value);
     return jsx("td", {
-        className: cn(cellClass, alignClass, tabularNums && 'tabular-nums', monospace && 'font-mono', col.sticky === 'left' && stickyLeftClass),
+        className: cn(cellClass, alignClass, tabularNums && 'tabular-nums', monospace && 'font-mono', col.sticky === 'left' && stickyLeftClass, col.sticky === 'right' && stickyRightClass),
         style: {
-            width: col.width != null ? `${col.width}px` : undefined,
+            width: effectiveWidth != null ? `${effectiveWidth}px` : undefined,
             minWidth: col.minWidth != null ? `${col.minWidth}px` : undefined
         },
         children: content