@worknice/whiteboard 0.43.1 → 0.45.0

package/dist/presentation/CustomizableTable/CustomizableTable.js

@@ -1,43 +1,137 @@
+"use client";
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__dnd_kit_core_a545325d__ from "@dnd-kit/core";
+import * as __WEBPACK_EXTERNAL_MODULE__dnd_kit_sortable_a8361dd8__ from "@dnd-kit/sortable";
+import * as __WEBPACK_EXTERNAL_MODULE__dnd_kit_utilities_3c8eb4c2__ from "@dnd-kit/utilities";
+import * as __WEBPACK_EXTERNAL_MODULE__react_hook_throttle_d66151d4__ from "@react-hook/throttle";
 import * as __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__ from "@tanstack/react-table";
+import * as __WEBPACK_EXTERNAL_MODULE__tanstack_react_virtual_e7b31bc6__ from "@tanstack/react-virtual";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
 import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
-import * as __WEBPACK_EXTERNAL_MODULE__inputs_CheckboxInput_js_0c849015__ from "../../inputs/CheckboxInput.js";
-import * as __WEBPACK_EXTERNAL_MODULE__VStack_js_6ebc0134__ from "../VStack.js";
-import * as __WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_js_b9639d58__ from "./CustomizableTableContents.js";
-import * as __WEBPACK_EXTERNAL_MODULE__CustomizableTableDetails_js_b2cb72de__ from "./CustomizableTableDetails.js";
-import * as __WEBPACK_EXTERNAL_MODULE__TableFilterModal_js_008c3ed2__ from "./TableFilterModal.js";
-const selectColumnId = "_selectColumn";
-const CustomizableTable = ({ data, columns, getRowId, availableColumns = columns.map((col)=>({
+import * as __WEBPACK_EXTERNAL_MODULE__controls_Button_js_2f50b64a__ from "../../controls/Button.js";
+import * as __WEBPACK_EXTERNAL_MODULE__controls_Disclosure_js_07249afc__ from "../../controls/Disclosure.js";
+import * as __WEBPACK_EXTERNAL_MODULE__inputs_StringInput_js_39dae7d5__ from "../../inputs/StringInput.js";
+import * as __WEBPACK_EXTERNAL_MODULE__utils_tables_js_ad146866__ from "../../utils/tables.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__ from "../Icon.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__ from "../Table.module.js";
+import * as __WEBPACK_EXTERNAL_MODULE__TableColumnFilterModal_js_faecb911__ from "../TableColumnFilterModal.js";
+import * as __WEBPACK_EXTERNAL_MODULE__ConfigureColumnsModal_js_cdac33d6__ from "./ConfigureColumnsModal.js";
+import * as __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__ from "./CustomizableTable.module.js";
+function asFilter(filter) {
+    return filter;
+}
+const DraggableColumnHeader = ({ header, getColumnStyle, showResizer = true })=>{
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = (0, __WEBPACK_EXTERNAL_MODULE__dnd_kit_sortable_a8361dd8__.useSortable)({
+        id: header.column.id
+    });
+    const style = {
+        transform: __WEBPACK_EXTERNAL_MODULE__dnd_kit_utilities_3c8eb4c2__.CSS.Transform.toString(transform),
+        transition: transition || void 0,
+        opacity: isDragging ? 0.5 : 1,
+        ...getColumnStyle(header.column),
+        flexGrow: 0,
+        position: "relative"
+    };
+    const headerContent = header.isPlaceholder ? null : header.column.getCanSort() ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("button", {
+            type: "button",
+            onClick: header.column.getToggleSortingHandler(),
+            className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].sortableTableHeader, __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].headerSortable),
+            title: "asc" === header.column.getIsSorted() ? "Sorted by ascending order" : "desc" === header.column.getIsSorted() ? "Sorted by descending order" : "Default sorting order",
+            children: [
+                (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.flexRender)(header.column.columnDef.header, header.getContext()),
+                "asc" === header.column.getIsSorted() ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
+                    size: "small",
+                    symbol: "SortAsc",
+                    className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].sortIcon, __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].headerSortIcon)
+                }) : "desc" === header.column.getIsSorted() ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
+                    size: "small",
+                    symbol: "SortDes",
+                    className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].sortIcon, __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].headerSortIcon)
+                }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
+                    size: "small",
+                    symbol: "SortDefault",
+                    className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].sortIcon, __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].headerSortIcon)
+                })
+            ]
+        })
+    }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        children: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.flexRender)(header.column.columnDef.header, header.getContext())
+    });
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("th", {
+        ref: setNodeRef,
+        style: style,
+        className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].tableCell, __WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].tableHeader, __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].cell, __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].headerCell),
+        ...attributes,
+        ...listeners,
+        children: [
+            headerContent,
+            showResizer ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                onPointerDown: (e)=>e.stopPropagation(),
+                onMouseDown: (e)=>{
+                    e.stopPropagation();
+                    header.getResizeHandler()(e);
+                },
+                onTouchStart: (e)=>{
+                    e.stopPropagation();
+                    header.getResizeHandler()(e);
+                },
+                className: __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].columnResizer
+            }) : null
+        ]
+    });
+};
+const CustomizableTable = ({ data, columns, csvFilename, getRowId, availableColumns = columns.map((col)=>({
         id: col.id,
         header: "string" == typeof col.header ? col.header : col.id
-    })), initialState, onStateChange, showRowCount = true, isLoading = false })=>{
-    const [name, setName] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(initialState.name);
-    const [description, setDescription] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(initialState.description);
-    const lastSelectedRow = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(void 0);
+    })), view, onViewChange, isLoading = false, estimatedRowSize = 100, emptyState = "No results" })=>{
+    const [searchTerm, setSearchTerm] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)("");
+    const [isFilterModalOpen, setIsFilterModalOpen] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
+    const [activeId, setActiveId] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(null);
     const mountedRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(false);
-    const [showFilterModal, setShowFilterModal] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
-    const enableRowSelection = false;
+    const resizeEmitTimeoutRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const scrollRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const [scrollContainerWidth, setScrollContainerWidth] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(0);
+    const sensors = (0, __WEBPACK_EXTERNAL_MODULE__dnd_kit_core_a545325d__.useSensors)((0, __WEBPACK_EXTERNAL_MODULE__dnd_kit_core_a545325d__.useSensor)(__WEBPACK_EXTERNAL_MODULE__dnd_kit_core_a545325d__.MouseSensor, {
+        activationConstraint: {
+            distance: 10
+        }
+    }), (0, __WEBPACK_EXTERNAL_MODULE__dnd_kit_core_a545325d__.useSensor)(__WEBPACK_EXTERNAL_MODULE__dnd_kit_core_a545325d__.TouchSensor, {
+        activationConstraint: {
+            delay: 250,
+            tolerance: 5
+        }
+    }));
     const columnDefs = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
         const columnHelper = (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.createColumnHelper)();
         const result = columns.map((column)=>{
             const { filter, header, id, cell, globalFiltering, type, size, enableSorting, sortUndefined } = column;
-            const columnSize = initialState.config.columns?.find((col)=>col.id === id)?.size ?? size ?? 150;
-            if ("accessor" == type || void 0 == type) return columnHelper.accessor((row)=>column.value(row), {
+            const columnSize = view.columns?.find((col)=>col.id === id)?.size ?? size ?? 150;
+            const tableFilter = filter ? asFilter(filter) : void 0;
+            if ("accessor" === type || void 0 === type) return columnHelper.accessor((row)=>column.value(row), {
                 cell: cell ? (props)=>cell(props.row.original) : void 0,
                 enableGlobalFilter: false !== globalFiltering,
                 enableSorting: enableSorting ?? true,
-                filterFn: filter ? (row, _, filterValue)=>{
-                    const option = filter.options.find((option)=>option.id === filterValue);
-                    return option?.predicate?.(row.original) ?? true;
+                filterFn: tableFilter ? (row, _, filterValue)=>{
+                    const f = tableFilter;
+                    if (f.isMulti && Array.isArray(filterValue)) {
+                        if (0 === filterValue.length) return true;
+                        return filterValue.some((optionId)=>{
+                            const option = f.options.find((opt)=>opt.id === optionId);
+                            return option ? option.predicate(row.original) : false;
+                        });
+                    }
+                    if (!f.isMulti && "string" == typeof filterValue) {
+                        const option = f.options.find((opt)=>opt.id === filterValue);
+                        return option?.predicate?.(row.original) ?? true;
+                    }
+                    return true;
                 } : void 0,
                 header,
                 id,
                 size: columnSize,
                 meta: {
-                    fixedWidth: false,
-                    filter: filter ? {
-                        options: filter.options
-                    } : void 0
+                    fixedWidth: false
                 },
                 sortUndefined: sortUndefined ?? 1
             });
@@ -47,66 +141,59 @@ const CustomizableTable = ({ data, columns, getRowId, availableColumns = columns
                 id,
                 size: columnSize,
                 meta: {
-                    fixedWidth: false,
-                    filter: filter ? {
-                        options: filter.options
-                    } : void 0
+                    fixedWidth: false
                 }
             });
         });
-        return enableRowSelection ? [
-            {
-                id: selectColumnId,
-                header: ({ table })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__inputs_CheckboxInput_js_0c849015__["default"], {
-                        disabled: 0 === table.getRowModel().rows.length,
-                        value: table.getIsAllRowsSelected(),
-                        onChange: ()=>{
-                            table.toggleAllRowsSelected(!(table.getIsAllRowsSelected() || table.getIsSomeRowsSelected()));
-                        },
-                        indeterminate: table.getIsSomeRowsSelected()
-                    }),
-                cell: ({ table, row })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__inputs_CheckboxInput_js_0c849015__["default"], {
-                        value: row.getIsSelected(),
-                        onClick: (event)=>{
-                            if (event.shiftKey && lastSelectedRow.current) {
-                                const visibleRows = table.getRowModel().rows;
-                                const visibleIndex = visibleRows.findIndex((r)=>r.id === row.id);
-                                const lastIndex = visibleRows.findIndex((r)=>r.id === lastSelectedRow.current?.id);
-                                const startIndex = Math.min(lastIndex, visibleIndex);
-                                const endIndex = Math.max(lastIndex, visibleIndex);
-                                const rowsToSelect = visibleRows.slice(startIndex, endIndex + 1).filter((r)=>0 === r.subRows.length);
-                                rowsToSelect.forEach((rowToSelect)=>rowToSelect.toggleSelected(!row.getIsSelected()));
-                            }
-                            lastSelectedRow.current = row;
-                        },
-                        onChange: (value)=>{
-                            row.toggleSelected(value);
-                        }
-                    })
-            },
-            ...result
-        ] : result;
+        return result;
     }, [
         columns,
-        enableRowSelection,
-        initialState
+        view.columns
+    ]);
+    const filterableColumns = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>columns.filter((column)=>void 0 !== column.filter && column.filter.options.length > 0), [
+        columns
+    ]);
+    const columnFiltersInitialState = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>filterableColumns.map((col)=>{
+            const filter = col.filter;
+            if (filter.isMulti) return {
+                id: col.id,
+                value: []
+            };
+            const saved = view.filters.find((f)=>f.id === col.id);
+            return {
+                id: col.id,
+                value: saved?.value ?? filter.options[0].id
+            };
+        }), [
+        filterableColumns,
+        view.filters
+    ]);
+    const columnFiltersDefaultState = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>filterableColumns.map((col)=>{
+            const filter = col.filter;
+            return {
+                id: col.id,
+                value: filter.isMulti ? [] : filter.options[0].id
+            };
+        }), [
+        filterableColumns
     ]);
     const getInitialState = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>({
             expanded: {},
-            columnFilters: initialState.config.filters,
-            sorting: initialState.config.sorting,
+            columnFilters: columnFiltersInitialState,
+            sorting: view.sorting,
             grouping: [],
             columnVisibility: Object.fromEntries(columns.map((col)=>[
                     col.id,
-                    initialState.config.columns.some((c)=>c.id === col.id)
+                    view.columns.some((c)=>c.id === col.id)
                 ])),
             columnOrder: [
-                selectColumnId,
-                ...initialState.config.columns.map((col)=>col.id)
-            ]
+                ...view.columns.map((col)=>col.id)
+            ],
+            globalFilter: ""
         }), [
         columns,
-        initialState
+        view,
+        columnFiltersInitialState
     ]);
     const getColumnCanGlobalFilter = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((column)=>{
         const columnDef = columns.find((col)=>col.id === column.id);
@@ -114,6 +201,9 @@ const CustomizableTable = ({ data, columns, getRowId, availableColumns = columns
     }, [
         columns
     ]);
+    const globalFilterableColumns = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>columns.filter((column)=>false !== column.globalFiltering && "display" !== column.type), [
+        columns
+    ]);
     const reactTable = (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.useReactTable)({
         data,
         getRowId,
@@ -129,16 +219,16 @@ const CustomizableTable = ({ data, columns, getRowId, availableColumns = columns
         enableColumnResizing: true,
         initialState: mountedRef.current ? {
             expanded: true,
-            columnFilters: initialState.config.filters,
-            sorting: initialState.config.sorting,
+            columnFilters: columnFiltersInitialState,
+            sorting: view.sorting,
             columnVisibility: Object.fromEntries(columns.map((col)=>[
                     col.id,
-                    initialState.config.columns.some((c)=>c.id === col.id)
+                    view.columns.some((c)=>c.id === col.id)
                 ])),
             columnOrder: [
-                selectColumnId,
-                ...initialState.config.columns.map((col)=>col.id)
-            ]
+                ...view.columns.map((col)=>col.id)
+            ],
+            globalFilter: ""
         } : getInitialState(),
         defaultColumn: {
             enableGrouping: false,
@@ -149,160 +239,437 @@ const CustomizableTable = ({ data, columns, getRowId, availableColumns = columns
             minSize: 50
         }
     });
-    const resizeTimeoutRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
     const tableState = reactTable.getState();
     const columnVisibility = tableState.columnVisibility;
     const columnFilters = tableState.columnFilters;
     const sorting = tableState.sorting;
     const columnOrder = tableState.columnOrder;
     const columnSizing = tableState.columnSizing;
-    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
-        const currentSizing = reactTable.getState().columnSizing;
-        if (resizeTimeoutRef.current) clearTimeout(resizeTimeoutRef.current);
-        resizeTimeoutRef.current = setTimeout(()=>{
-            onStateChange({
-                name,
-                description,
-                config: {
-                    columns: Object.entries(reactTable.getState().columnVisibility).filter(([, visible])=>visible).map(([id])=>({
-                            id: id,
-                            size: reactTable.getColumn(id)?.getSize() ?? 150
-                        })).sort((a, b)=>{
-                        const aIndex = reactTable.getState().columnOrder.indexOf(a.id);
-                        const bIndex = reactTable.getState().columnOrder.indexOf(b.id);
-                        return aIndex - bIndex;
-                    }),
-                    filters: reactTable.getState().columnFilters.filter((filter)=>{
-                        const column = reactTable.getColumn(filter.id);
-                        return column?.getIsVisible();
-                    }).map((filter)=>({
-                            id: filter.id,
-                            value: filter.value
-                        })),
-                    sorting: reactTable.getState().sorting
-                }
-            });
-        }, 250);
-        if (0 === Object.keys(currentSizing).length) onStateChange({
-            name,
-            description,
-            config: {
-                columns: Object.entries(reactTable.getState().columnVisibility).filter(([, visible])=>visible).map(([id])=>({
-                        id: id,
-                        size: reactTable.getColumn(id)?.getSize() ?? 150
-                    })).sort((a, b)=>{
-                    const aIndex = reactTable.getState().columnOrder.indexOf(a.id);
-                    const bIndex = reactTable.getState().columnOrder.indexOf(b.id);
-                    return aIndex - bIndex;
-                }),
-                filters: reactTable.getState().columnFilters.filter((filter)=>{
-                    const column = reactTable.getColumn(filter.id);
-                    return column?.getIsVisible();
-                }).map((filter)=>({
-                        id: filter.id,
-                        value: filter.value
-                    })),
-                sorting: reactTable.getState().sorting
-            }
-        });
-        return ()=>{
-            if (resizeTimeoutRef.current) clearTimeout(resizeTimeoutRef.current);
-        };
+    const throttledSetGlobalFilter = (0, __WEBPACK_EXTERNAL_MODULE__react_hook_throttle_d66151d4__.useThrottleCallback)((value)=>reactTable.setGlobalFilter(value), 4);
+    const csvExportableColumns = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        const columnMap = new Map(columns.map((c)=>[
+                c.id,
+                c
+            ]));
+        return reactTable.getVisibleLeafColumns().map((leaf)=>columnMap.get(leaf.id)).filter((col)=>void 0 !== col && true === col.csvExport).map((column)=>({
+                id: column.id,
+                header: "string" == typeof column.header ? column.header : column.id
+            }));
     }, [
-        name,
-        description,
+        columns,
         reactTable,
-        columnVisibility,
-        columnFilters,
-        sorting,
-        columnOrder,
-        columnSizing,
-        onStateChange
+        columnVisibility
+    ]);
+    const activeFilterCount = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        const currentFilters = tableState.columnFilters;
+        return columnFiltersDefaultState.filter((defaultFilter)=>{
+            const currentFilter = currentFilters.find((f)=>f.id === defaultFilter.id);
+            if (void 0 === currentFilter) return false;
+            const currentValue = currentFilter.value;
+            const defaultValue = defaultFilter.value;
+            if (Array.isArray(defaultValue) && Array.isArray(currentValue)) return currentValue.length !== defaultValue.length || defaultValue.some((v, i)=>v !== currentValue[i]);
+            return currentValue !== defaultValue;
+        }).length;
+    }, [
+        tableState.columnFilters,
+        columnFiltersDefaultState
+    ]);
+    const showSearchReset = activeFilterCount > 0 || "" !== tableState.globalFilter;
+    const rows = reactTable.getRowModel().rows;
+    const estimateSize = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>estimatedRowSize, [
+        estimatedRowSize
     ]);
+    const rowVirtualizer = (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_virtual_e7b31bc6__.useVirtualizer)({
+        count: isLoading ? 0 : rows.length,
+        getScrollElement: ()=>scrollRef.current,
+        estimateSize,
+        overscan: 10,
+        getItemKey: (index)=>rows[index]?.id ?? String(index),
+        measureElement: (element, _, instance)=>{
+            const rect = element.getBoundingClientRect();
+            if (rect.height > 0 && rect.width > 0) return Math.round(rect.height);
+            const cachedSize = instance.measurementsCache[instance.indexFromElement(element)]?.size;
+            return cachedSize ?? estimatedRowSize;
+        }
+    });
     (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
         mountedRef.current = true;
     }, []);
-    const filterableColumns = columns.filter((column)=>{
-        const tableColumn = reactTable.getColumn(column.id);
-        return void 0 !== column.filter && void 0 !== tableColumn && tableColumn.getIsVisible();
-    });
-    const hasFilterableColumns = filterableColumns.length > 0;
-    const handleColumnClick = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((col)=>{
-        const tableColumn = reactTable.getColumn(col.id);
-        if (!tableColumn) return;
-        const newVisibility = !tableColumn.getIsVisible();
-        tableColumn.toggleVisibility(newVisibility);
-        if (newVisibility) {
-            const currentOrder = reactTable.getState().columnOrder;
-            const newOrder = [
-                ...currentOrder.filter((id)=>id !== col.id),
-                col.id
-            ];
-            reactTable.setColumnOrder(newOrder);
-        } else {
-            const currentFilters = reactTable.getState().columnFilters;
-            const newFilters = currentFilters.filter((filter)=>filter.id !== col.id);
-            reactTable.setColumnFilters(newFilters);
-        }
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        const el = scrollRef.current;
+        if (!el) return;
+        const update = ()=>setScrollContainerWidth(el.clientWidth);
+        update();
+        const ro = new ResizeObserver(update);
+        ro.observe(el);
+        return ()=>ro.disconnect();
+    }, []);
+    const emitView = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>{
+        onViewChange({
+            columns: Object.entries(reactTable.getState().columnVisibility).filter(([, visible])=>visible).map(([id])=>({
+                    id: id,
+                    size: reactTable.getColumn(id)?.getSize() ?? 150
+                })).sort((a, b)=>{
+                const aIndex = reactTable.getState().columnOrder.indexOf(a.id);
+                const bIndex = reactTable.getState().columnOrder.indexOf(b.id);
+                return aIndex - bIndex;
+            }),
+            filters: reactTable.getState().columnFilters.filter((filter)=>{
+                const column = reactTable.getColumn(filter.id);
+                return column?.getIsVisible();
+            }).map((filter)=>({
+                    id: filter.id,
+                    value: filter.value
+                })),
+            sorting: reactTable.getState().sorting
+        });
     }, [
+        onViewChange,
         reactTable
     ]);
-    const memoizedTableContents = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__CustomizableTableContents_js_b9639d58__["default"], {
-            reactTable: reactTable,
-            columns: columns,
-            showRowCount: showRowCount,
-            isLoading: isLoading
-        }), [
-        reactTable,
-        columns,
-        showRowCount,
-        isLoading,
-        columnSizing,
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        if (resizeEmitTimeoutRef.current) {
+            clearTimeout(resizeEmitTimeoutRef.current);
+            resizeEmitTimeoutRef.current = null;
+        }
+        emitView();
+    }, [
         columnFilters,
+        columnOrder,
+        columnVisibility,
+        emitView,
         sorting
     ]);
+    const columnSizingKey = JSON.stringify(columnSizing);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        if ("{}" === columnSizingKey) return;
+        if (resizeEmitTimeoutRef.current) clearTimeout(resizeEmitTimeoutRef.current);
+        resizeEmitTimeoutRef.current = setTimeout(()=>{
+            resizeEmitTimeoutRef.current = null;
+            emitView();
+        }, 250);
+        return ()=>{
+            if (resizeEmitTimeoutRef.current) {
+                clearTimeout(resizeEmitTimeoutRef.current);
+                resizeEmitTimeoutRef.current = null;
+            }
+        };
+    }, [
+        columnSizingKey,
+        emitView
+    ]);
+    const filterableColumnsForModal = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>filterableColumns.filter((col)=>{
+            const tableColumn = reactTable.getColumn(col.id);
+            return void 0 !== tableColumn && tableColumn.getIsVisible();
+        }), [
+        filterableColumns,
+        reactTable
+    ]);
+    const hasFilterableColumns = filterableColumnsForModal.length > 0;
+    const applyColumnSelection = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((selected)=>{
+        if (0 === availableColumns.length) return;
+        const availableIds = new Set(availableColumns.map((c)=>c.id));
+        const selectedIds = new Set(selected.map((c)=>c.id));
+        const filtersBefore = reactTable.getState().columnFilters;
+        const visibility = {
+            ...reactTable.getState().columnVisibility
+        };
+        for (const id of availableIds)visibility[id] = selectedIds.has(id);
+        reactTable.setColumnVisibility(visibility);
+        const currentOrder = reactTable.getState().columnOrder;
+        const newOrder = currentOrder.filter((id)=>{
+            if (availableIds.has(id)) return selectedIds.has(id);
+            return true;
+        });
+        for (const col of selected)if (!newOrder.includes(col.id)) newOrder.push(col.id);
+        reactTable.setColumnOrder(newOrder);
+        reactTable.setColumnFilters(filtersBefore.filter((f)=>!availableIds.has(f.id) || selectedIds.has(f.id)));
+    }, [
+        availableColumns,
+        reactTable
+    ]);
+    const configureColumnsModalColumns = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>availableColumns.map((col)=>({
+                id: col.id,
+                name: col.header
+            })), [
+        availableColumns
+    ]);
+    const selectedConfigureColumns = availableColumns.filter((col)=>reactTable.getColumn(col.id)?.getIsVisible() ?? false).map((col)=>({
+            id: col.id,
+            name: col.header
+        }));
+    const handleDragStart = (event)=>{
+        setActiveId(event.active.id);
+    };
+    const handleDragEnd = (event)=>{
+        const { active, over } = event;
+        setActiveId(null);
+        if (over && active.id !== over.id) {
+            const order = reactTable.getState().columnOrder;
+            const oldIndex = order.indexOf(active.id);
+            const newIndex = order.indexOf(over.id);
+            if (-1 !== oldIndex && -1 !== newIndex) reactTable.setColumnOrder((0, __WEBPACK_EXTERNAL_MODULE__dnd_kit_sortable_a8361dd8__.arrayMove)(order, oldIndex, newIndex));
+        }
+    };
+    const getColumnStyle = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((column)=>{
+        if (!mountedRef.current) return {
+            width: `${column.getSize()}px`,
+            minWidth: "50px"
+        };
+        const containerWidth = scrollContainerWidth;
+        const visible = reactTable.getVisibleLeafColumns();
+        if (1 === visible.length) return {
+            width: `${containerWidth}px`,
+            minWidth: "50px"
+        };
+        const currentSize = column.getSize();
+        const totalVisibleWidth = visible.reduce((sum, col)=>sum + col.getSize(), 0);
+        const isLastVisibleColumn = visible[visible.length - 1]?.id === column.id;
+        if (isLastVisibleColumn && containerWidth > totalVisibleWidth) return {
+            width: `${currentSize + (containerWidth - totalVisibleWidth)}px`,
+            minWidth: "50px"
+        };
+        return {
+            width: `${currentSize}px`,
+            minWidth: "50px"
+        };
+    }, [
+        reactTable,
+        scrollContainerWidth
+    ]);
+    const showTableFilterBar = 0 !== globalFilterableColumns.length || 0 !== filterableColumns.length || 0 !== availableColumns.length;
+    const tableLayoutWidthPx = reactTable.getTotalSize();
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+        className: __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].root,
         children: [
-            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__VStack_js_6ebc0134__["default"], {
-                spacing: "p2",
-                children: [
-                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__CustomizableTableDetails_js_b2cb72de__["default"], {
-                        name: name,
-                        description: description,
-                        onStateChange: (state)=>{
-                            setName(state.name);
-                            setDescription(state.description);
-                        },
-                        availableColumns: availableColumns.map((col)=>({
-                                id: col.id,
-                                header: col.header,
-                                visible: reactTable.getColumn(col.id)?.getIsVisible() ?? false
-                            })),
-                        hasFilterableColumns: hasFilterableColumns,
-                        onColumnClick: handleColumnClick,
-                        onFilterListClick: ()=>setShowFilterModal(true)
-                    }),
-                    memoizedTableContents
-                ]
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].mainColumn,
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                    className: __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].columnStack,
+                    children: [
+                        showTableFilterBar ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                            className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].filterBar,
+                            children: [
+                                0 !== globalFilterableColumns.length ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                    className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].filterBarSearch,
+                                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__inputs_StringInput_js_39dae7d5__["default"], {
+                                        prefix: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
+                                            symbol: "Search"
+                                        }),
+                                        placeholder: "Search",
+                                        id: "globalSearch",
+                                        value: searchTerm,
+                                        onChange: (value)=>{
+                                            setSearchTerm(value ?? "");
+                                            throttledSetGlobalFilter(value ?? "");
+                                        },
+                                        disabled: isLoading
+                                    })
+                                }) : null,
+                                0 !== availableColumns.length || 0 !== filterableColumns.length ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                                    className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].filterSelectMenus,
+                                    children: [
+                                        0 !== filterableColumns.length ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_2f50b64a__["default"], {
+                                            type: "secondary",
+                                            onClick: ()=>setIsFilterModalOpen(true),
+                                            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
+                                                symbol: "Filter"
+                                            }),
+                                            disabled: isLoading || !hasFilterableColumns,
+                                            children: [
+                                                "Filters",
+                                                !isLoading && activeFilterCount > 0 ? ` (${activeFilterCount})` : ""
+                                            ]
+                                        }) : null,
+                                        0 !== availableColumns.length ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Disclosure_js_07249afc__["default"], {
+                                            disabled: isLoading,
+                                            id: "columnVisibility",
+                                            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
+                                                symbol: "Columns"
+                                            }),
+                                            type: "secondary",
+                                            render: (onClose)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__ConfigureColumnsModal_js_cdac33d6__.ConfigureColumnsModal, {
+                                                    selectedColumns: selectedConfigureColumns,
+                                                    availableColumns: configureColumnsModalColumns,
+                                                    onClose: onClose,
+                                                    onSave: (selectedColumns)=>{
+                                                        applyColumnSelection(selectedColumns);
+                                                    }
+                                                }),
+                                            children: "Columns"
+                                        }) : null,
+                                        data.length > 0 ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_2f50b64a__["default"], {
+                                            type: "secondary",
+                                            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
+                                                symbol: "Download"
+                                            }),
+                                            tooltip: "Download as CSV",
+                                            onClick: ()=>(0, __WEBPACK_EXTERNAL_MODULE__utils_tables_js_ad146866__.handleDownloadCsv)(csvFilename, csvExportableColumns, rows)
+                                        }) : null
+                                    ]
+                                }) : null,
+                                !isLoading && showSearchReset ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                    className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].filterBarSearchReset,
+                                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                                        className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].filterBarSearchResetContent,
+                                        children: [
+                                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("p", {
+                                                children: [
+                                                    "Showing ",
+                                                    reactTable.getPreGroupedRowModel().flatRows.length,
+                                                    " of",
+                                                    " ",
+                                                    reactTable.getPreFilteredRowModel().flatRows.length
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_2f50b64a__["default"], {
+                                                onClick: ()=>{
+                                                    reactTable.setColumnFilters(columnFiltersDefaultState);
+                                                    reactTable.resetGlobalFilter();
+                                                    setSearchTerm("");
+                                                },
+                                                type: "secondary",
+                                                size: "small",
+                                                children: "Reset filters"
+                                            })
+                                        ]
+                                    })
+                                }) : null
+                            ]
+                        }) : null,
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                            className: __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].scrollArea,
+                            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].tableHorizontal, {
+                                    [__WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].tableHorizontalLoading]: isLoading
+                                }),
+                                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__dnd_kit_core_a545325d__.DndContext, {
+                                    sensors: sensors,
+                                    onDragStart: handleDragStart,
+                                    onDragEnd: handleDragEnd,
+                                    children: [
+                                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                                            className: __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].tableHorizontalInner,
+                                            style: {
+                                                width: isLoading ? "100%" : `${tableLayoutWidthPx}px`,
+                                                minWidth: "100%"
+                                            },
+                                            children: [
+                                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("table", {
+                                                    className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].table,
+                                                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("thead", {
+                                                        className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].tableHead, __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].stickyHead),
+                                                        children: !isLoading && reactTable.getHeaderGroups().map((headerGroup)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("tr", {
+                                                                className: __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].headerRow,
+                                                                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__dnd_kit_sortable_a8361dd8__.SortableContext, {
+                                                                    items: headerGroup.headers.map((h)=>h.column.id),
+                                                                    strategy: __WEBPACK_EXTERNAL_MODULE__dnd_kit_sortable_a8361dd8__.horizontalListSortingStrategy,
+                                                                    children: headerGroup.headers.map((header, headerIndex)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(DraggableColumnHeader, {
+                                                                            header: header,
+                                                                            getColumnStyle: getColumnStyle,
+                                                                            showResizer: headerIndex < headerGroup.headers.length - 1
+                                                                        }, header.id))
+                                                                })
+                                                            }, headerGroup.id))
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                                    ref: scrollRef,
+                                                    className: __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].bodyScroll,
+                                                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("table", {
+                                                        className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].table,
+                                                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("tbody", {
+                                                            className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].tableBody,
+                                                            style: {
+                                                                height: !isLoading && rows.length > 0 ? `${rowVirtualizer.getTotalSize()}px` : "auto"
+                                                            },
+                                                            children: isLoading ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("tr", {
+                                                                className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].tableRow, __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].row),
+                                                                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("td", {
+                                                                    className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].noRows, __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].loadingCell),
+                                                                    colSpan: Math.max(reactTable.getVisibleLeafColumns().length, 1),
+                                                                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_e5f9af80__["default"], {
+                                                                        symbol: "Loading",
+                                                                        size: "large",
+                                                                        animate: true
+                                                                    })
+                                                                })
+                                                            }) : 0 === reactTable.getVisibleLeafColumns().length ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("tr", {
+                                                                className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].tableRow, __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].row),
+                                                                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("td", {
+                                                                    className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].noRows,
+                                                                    children: "No columns"
+                                                                })
+                                                            }) : rows.length ? rowVirtualizer.getVirtualItems().map((virtualRow)=>{
+                                                                const row = rows[virtualRow.index];
+                                                                return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("tr", {
+                                                                    "data-state": row.getIsSelected() ? "selected" : "",
+                                                                    className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].tableRow, __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].row),
+                                                                    "data-index": virtualRow.index,
+                                                                    ref: rowVirtualizer.measureElement,
+                                                                    style: {
+                                                                        position: "absolute",
+                                                                        transform: `translateY(${virtualRow.start}px)`
+                                                                    },
+                                                                    children: row.getVisibleCells().map((cell)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("td", {
+                                                                            className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].tableCell, __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].cell),
+                                                                            style: {
+                                                                                ...getColumnStyle(cell.column),
+                                                                                flexGrow: 0
+                                                                            },
+                                                                            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                                                                className: __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].cellClip,
+                                                                                children: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.flexRender)(cell.column.columnDef.cell, cell.getContext())
+                                                                            })
+                                                                        }, cell.id))
+                                                                }, row.id);
+                                                            }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("tr", {
+                                                                className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].tableRow, __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].row),
+                                                                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("td", {
+                                                                    className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_61474ffd__["default"].noRows,
+                                                                    colSpan: reactTable.getVisibleLeafColumns().length,
+                                                                    children: emptyState
+                                                                })
+                                                            })
+                                                        })
+                                                    })
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__dnd_kit_core_a545325d__.DragOverlay, {
+                                            children: activeId ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                                className: __WEBPACK_EXTERNAL_MODULE__CustomizableTable_module_js_80cff08d__["default"].dragOverlayHeader,
+                                                children: (()=>{
+                                                    const header = reactTable.getHeaderGroups().flatMap((group)=>group.headers).find((h)=>h.column.id === activeId);
+                                                    if (!header) return null;
+                                                    const headerContent = header.column.columnDef.header;
+                                                    return "string" == typeof headerContent ? headerContent : (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.flexRender)(headerContent, header.getContext());
+                                                })()
+                                            }) : null
+                                        })
+                                    ]
+                                })
+                            })
+                        })
+                    ]
+                })
             }),
-            showFilterModal && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__TableFilterModal_js_008c3ed2__.TableFilterModal, {
-                onClose: ()=>setShowFilterModal(false),
-                columns: columns.filter((col)=>{
-                    const tableColumn = reactTable.getColumn(col.id);
-                    return void 0 !== col.filter && void 0 !== tableColumn && tableColumn.getIsVisible();
-                }).map((col)=>({
+            isFilterModalOpen && filterableColumnsForModal.length > 0 ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__TableColumnFilterModal_js_faecb911__["default"], {
+                onClose: ()=>setIsFilterModalOpen(false),
+                filterableColumns: filterableColumnsForModal.map((col)=>({
                         id: col.id,
-                        header: "string" == typeof col.header ? col.header : col.id,
                         filter: col.filter
                     })),
+                currentFilters: reactTable.getState().columnFilters,
                 onFiltersChange: (filters)=>{
-                    reactTable.setColumnFilters(filters);
-                },
-                currentFilters: reactTable.getState().columnFilters.map((filter)=>({
-                        id: filter.id,
-                        value: filter.value
-                    }))
-            })
+                    const visibleFilterColumnIds = new Set(filterableColumnsForModal.map((col)=>col.id));
+                    const hiddenColumnFilters = reactTable.getState().columnFilters.filter((filter)=>!visibleFilterColumnIds.has(filter.id));
+                    reactTable.setColumnFilters([
+                        ...hiddenColumnFilters,
+                        ...filters
+                    ]);
+                }
+            }) : null
         ]
     });
 };