@worknice/whiteboard 0.37.0 → 0.38.0

package/dist/presentation/Table.js

@@ -9,21 +9,30 @@ import * as __WEBPACK_EXTERNAL_MODULE_utf8__ from "utf8";
 import * as __WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__ from "../controls/Button.js";
 import * as __WEBPACK_EXTERNAL_MODULE__controls_Disclosure_js_6e4cc59c__ from "../controls/Disclosure.js";
 import * as __WEBPACK_EXTERNAL_MODULE__controls_MenuButton_js_b23cdd05__ from "../controls/MenuButton.js";
-import * as __WEBPACK_EXTERNAL_MODULE__fields_SelectField_js_8b78efe2__ from "../fields/SelectField.js";
-import * as __WEBPACK_EXTERNAL_MODULE__fields_StringField_js_cab546d4__ from "../fields/StringField.js";
+import * as __WEBPACK_EXTERNAL_MODULE__fields_BooleanField_js_dc79ee46__ from "../fields/BooleanField.js";
+import * as __WEBPACK_EXTERNAL_MODULE__fields_CheckboxSetField_js_bce910a4__ from "../fields/CheckboxSetField.js";
+import * as __WEBPACK_EXTERNAL_MODULE__fields_ListBoxField_js_b7d4cb12__ from "../fields/ListBoxField.js";
+import * as __WEBPACK_EXTERNAL_MODULE__fields_SimpleRadioSetField_js_118e9421__ from "../fields/SimpleRadioSetField.js";
+import * as __WEBPACK_EXTERNAL_MODULE__forms_FormButtonSet_js_c160eb1a__ from "../forms/FormButtonSet.js";
+import * as __WEBPACK_EXTERNAL_MODULE__forms_useForm_js_e756b4e7__ from "../forms/useForm.js";
 import * as __WEBPACK_EXTERNAL_MODULE__inputs_CheckboxInput_js_3a83f64b__ from "../inputs/CheckboxInput.js";
+import * as __WEBPACK_EXTERNAL_MODULE__inputs_SelectInput_js_d1a6f32e__ from "../inputs/SelectInput.js";
+import * as __WEBPACK_EXTERNAL_MODULE__inputs_StringInput_js_091f1e06__ from "../inputs/StringInput.js";
 import * as __WEBPACK_EXTERNAL_MODULE__utils_encodeCsv_js_1d824629__ from "../utils/encodeCsv.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__ from "./Card.js";
 import * as __WEBPACK_EXTERNAL_MODULE__CardContent_js_20e3f6de__ from "./CardContent.js";
 import * as __WEBPACK_EXTERNAL_MODULE__HStack_js_cc26058d__ from "./HStack.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__ from "./Icon.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Modal_js_50f53bdf__ from "./Modal.js";
 import * as __WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__ from "./PlainText.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__ from "./Table.module.js";
 import * as __WEBPACK_EXTERNAL_MODULE__VStack_js_02eb6792__ from "./VStack.js";
 const selectColumnId = "_selectColumn";
 const actionsColumnId = "_actionsColumn";
+const MIN_LIST_BOX_FILTER_OPTIONS = 10;
 const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csvFilename, estimatedRowSize = 100, emptyState = "No results", pathName, id, localStorageSchema, getRowId, rowActions })=>{
     const [searchTerm, setSearchTerm] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)("");
+    const [isFilterModalOpen, setIsFilterModalOpen] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
     const lastSelectedRow = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(void 0);
     const { refs, x: bulkSelectionModalXCoordinate } = (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_dom_d5bb3c23__.useFloating)({
         placement: "bottom",
@@ -49,8 +58,18 @@ const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csv
                 enableGlobalFilter: false !== globalFiltering,
                 enableSorting,
                 filterFn: filter ? (row, _, filterValue)=>{
-                    const option = filter.options.find((option)=>option.id === filterValue);
-                    return option?.predicate?.(row.original) ?? true;
+                    if (filter.isMulti && Array.isArray(filterValue)) {
+                        if (0 === filterValue.length) return true;
+                        return filterValue.some((optionId)=>{
+                            const option = filter.options.find((opt)=>opt.id === optionId);
+                            return option ? option.predicate(row.original) : false;
+                        });
+                    }
+                    if (!filter.isMulti && "string" == typeof filterValue) {
+                        const option = filter.options.find((opt)=>opt.id === filterValue);
+                        return option?.predicate?.(row.original) ?? true;
+                    }
+                    return true;
                 } : void 0,
                 getGroupingValue: grouping ? (row)=>grouping.fn(row) : void 0,
                 header,
@@ -108,6 +127,8 @@ const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csv
             header: "",
             size: 38,
             cell: ({ row })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_MenuButton_js_b23cdd05__["default"], {
+                    type: "ghost",
+                    size: "small",
                     options: rowActions(row.original).filter((action)=>null !== action),
                     icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
                         symbol: "Overflow"
@@ -129,14 +150,27 @@ const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csv
         rowActions
     ]);
     const globalFilterableColumns = columns.filter((column)=>false !== column.globalFiltering && "display" !== column.type);
-    const filterableColumns = columns.filter((column)=>void 0 !== column.filter);
+    const filterableColumns = columns.filter((column)=>void 0 !== column.filter && column.filter.options.length > 0);
     const groupableColumns = columns.filter((column)=>void 0 !== column.grouping);
     const csvExportableColumns = columns.filter((column)=>true === column.csvExport);
-    const columnFiltersInitialState = filterableColumns.map((col)=>({
-            id: col.id,
-            value: col.filter.options[0].id
-        }));
-    const localStorageData = "undefined" != typeof window && pathName && id ? window.localStorage.getItem(`${pathName}#${id}`) : null;
+    const columnFiltersInitialState = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>filterableColumns.map((col)=>{
+            const filter = col.filter;
+            if (filter.isMulti) return {
+                id: col.id,
+                value: []
+            };
+            return {
+                id: col.id,
+                value: filter.options[0].id
+            };
+        }), [
+        filterableColumns
+    ]);
+    const storageKey = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>pathName && id ? `${pathName}#${id}_table` : null, [
+        pathName,
+        id
+    ]);
+    const localStorageData = "undefined" != typeof window && storageKey ? window.localStorage.getItem(storageKey) : null;
     let parsedLocalStorage = {};
     if (localStorageData && localStorageSchema) try {
         parsedLocalStorage = JSON.parse(localStorageData);
@@ -225,12 +259,25 @@ const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csv
         a.click();
     };
     const throttledSetGlobalFilter = (0, __WEBPACK_EXTERNAL_MODULE__react_hook_throttle_d66151d4__.useThrottleCallback)((value)=>table.setGlobalFilter(value), 4);
-    const showSearchReset = columnFiltersInitialState.some((filter, index)=>filter.value !== table.getState().columnFilters[index].value) || table.initialState.globalFilter !== table.getState().globalFilter;
+    const activeFilterCount = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        const currentFilters = tableState.columnFilters;
+        return columnFiltersInitialState.filter((initialFilter)=>{
+            const currentFilter = currentFilters.find((f)=>f.id === initialFilter.id);
+            const currentValue = currentFilter?.value;
+            const initialValue = initialFilter.value;
+            if (Array.isArray(initialValue) && Array.isArray(currentValue)) return currentValue.length !== initialValue.length || initialValue.some((v, i)=>v !== currentValue[i]);
+            return currentValue !== initialValue;
+        }).length;
+    }, [
+        tableState.columnFilters,
+        columnFiltersInitialState
+    ]);
+    const showSearchReset = activeFilterCount > 0 || "" !== tableState.globalFilter;
     const filteredSelectedRows = table.getFilteredSelectedRowModel();
     const validPrimaryBulkActions = bulkActions.filter((bulkAction)=>filteredSelectedRows.rows.some((row)=>bulkAction.predicate ? bulkAction.predicate(row.original) : true));
     const validSecondaryBulkActions = secondaryBulkActions.filter((bulkAction)=>filteredSelectedRows.rows.some((row)=>bulkAction.predicate ? bulkAction.predicate(row.original) : true));
     (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
-        if (pathName && id) window.localStorage.setItem(`${pathName}#${id}`, JSON.stringify({
+        if (storageKey) window.localStorage.setItem(storageKey, JSON.stringify({
             columnFilters: tableState.columnFilters,
             sorting: tableState.sorting,
             grouping: tableState.grouping
@@ -239,8 +286,7 @@ const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csv
         tableState.columnFilters,
         tableState.sorting,
         tableState.grouping,
-        pathName,
-        id
+        storageKey
     ]);
     const shouldShowCsvExport = csvExportableColumns.length > 0 && csvFilename;
     const shouldShowMoreActions = validSecondaryBulkActions.length > 0 || shouldShowCsvExport;
@@ -261,283 +307,546 @@ const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csv
     const hasMultipleActions = allBulkActionRowCounts.length > 1;
     const allRowsCanDoAllActions = hasMultipleActions && allBulkActionRowCounts.every((count)=>count === filteredSelectedRows.rows.length);
     const showBulkActionCounts = bulkActionRowCountsDiffer || hasMultipleActions && !allRowsCanDoAllActions;
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
-        ref: refs.setReference,
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
         children: [
-            validPrimaryBulkActions.length > 0 || validSecondaryBulkActions.length > 0 ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                ref: refs.setFloating,
-                className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].bulkSelectionModal,
-                style: {
-                    left: bulkSelectionModalXCoordinate
-                },
-                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__["default"], {
-                    hasShadow: true,
-                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__CardContent_js_20e3f6de__["default"], {
-                        spacing: "00",
-                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
-                            className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].bulkSelectionModalContent,
-                            children: [
-                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {
-                                    font: "regular-bold",
-                                    children: [
-                                        filteredSelectedRows.rows.length,
-                                        " ",
-                                        1 === filteredSelectedRows.rows.length ? "selection" : "selections"
-                                    ]
-                                }),
-                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
-                                    className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].bulkSelectionActions,
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                ref: refs.setReference,
+                children: [
+                    validPrimaryBulkActions.length > 0 || validSecondaryBulkActions.length > 0 ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                        ref: refs.setFloating,
+                        className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].bulkSelectionModal,
+                        style: {
+                            left: bulkSelectionModalXCoordinate
+                        },
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__["default"], {
+                            hasShadow: true,
+                            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__CardContent_js_20e3f6de__["default"], {
+                                spacing: "00",
+                                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                                    className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].bulkSelectionModalContent,
                                     children: [
-                                        validPrimaryBulkActions.map((bulkAction)=>{
-                                            const rows = primaryBulkActionRowsMap.get(bulkAction.key) ?? [];
-                                            return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Disclosure_js_6e4cc59c__["default"], {
-                                                render: (onClose)=>bulkAction.render({
-                                                        rows: primaryBulkActionRowsMap.get(bulkAction.key) ?? [],
-                                                        resetRowSelection: ()=>table.resetRowSelection(),
-                                                        onClose: onClose
-                                                    }),
-                                                children: showBulkActionCounts ? `${bulkAction.label} (${rows.length})` : bulkAction.label
-                                            }, bulkAction.key);
+                                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {
+                                            font: "regular-bold",
+                                            children: [
+                                                filteredSelectedRows.rows.length,
+                                                " ",
+                                                1 === filteredSelectedRows.rows.length ? "selection" : "selections"
+                                            ]
                                         }),
-                                        shouldShowMoreActions ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_MenuButton_js_b23cdd05__["default"], {
-                                            id: "bulkActionOverflow",
-                                            options: [
-                                                ...validSecondaryBulkActions.map((bulkAction)=>{
-                                                    const rows = secondaryBulkActionRowsMap.get(bulkAction.key) ?? [];
-                                                    return {
-                                                        id: bulkAction.key,
-                                                        label: showBulkActionCounts ? `${bulkAction.label} (${rows.length})` : bulkAction.label,
-                                                        type: "render",
+                                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                                            className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].bulkSelectionActions,
+                                            children: [
+                                                validPrimaryBulkActions.map((bulkAction)=>{
+                                                    const rows = primaryBulkActionRowsMap.get(bulkAction.key) ?? [];
+                                                    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Disclosure_js_6e4cc59c__["default"], {
                                                         render: (onClose)=>bulkAction.render({
-                                                                rows: rows,
+                                                                rows: primaryBulkActionRowsMap.get(bulkAction.key) ?? [],
                                                                 resetRowSelection: ()=>table.resetRowSelection(),
                                                                 onClose: onClose
-                                                            })
-                                                    };
+                                                            }),
+                                                        children: showBulkActionCounts ? `${bulkAction.label} (${rows.length})` : bulkAction.label
+                                                    }, bulkAction.key);
                                                 }),
-                                                ...shouldShowCsvExport ? [
-                                                    {
-                                                        id: "download-selected-rows",
-                                                        label: "Download selected rows as CSV",
-                                                        type: "onClick",
-                                                        onClick: ()=>handleDownloadCsv(csvExportableColumns, table.getSelectedRowModel().rows)
-                                                    }
-                                                ] : []
-                                            ],
-                                            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
-                                                symbol: "Plus"
-                                            }),
-                                            children: "More actions"
-                                        }) : null,
-                                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__["default"], {
-                                            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
-                                                symbol: "Close"
-                                            }),
-                                            onClick: ()=>{
-                                                table.resetRowSelection(true);
-                                            },
-                                            title: `Deselect ${table.getFilteredSelectedRowModel().rows.length} ${1 === table.getFilteredSelectedRowModel().rows.length ? "selection" : "selections"}`,
-                                            type: "secondary"
+                                                shouldShowMoreActions ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_MenuButton_js_b23cdd05__["default"], {
+                                                    id: "bulkActionOverflow",
+                                                    options: [
+                                                        ...validSecondaryBulkActions.map((bulkAction)=>{
+                                                            const rows = secondaryBulkActionRowsMap.get(bulkAction.key) ?? [];
+                                                            return {
+                                                                id: bulkAction.key,
+                                                                label: showBulkActionCounts ? `${bulkAction.label} (${rows.length})` : bulkAction.label,
+                                                                type: "render",
+                                                                render: (onClose)=>bulkAction.render({
+                                                                        rows: rows,
+                                                                        resetRowSelection: ()=>table.resetRowSelection(),
+                                                                        onClose: onClose
+                                                                    })
+                                                            };
+                                                        }),
+                                                        ...shouldShowCsvExport ? [
+                                                            {
+                                                                id: "download-selected-rows",
+                                                                label: "Download selected rows as CSV",
+                                                                type: "onClick",
+                                                                onClick: ()=>handleDownloadCsv(csvExportableColumns, table.getSelectedRowModel().rows)
+                                                            }
+                                                        ] : []
+                                                    ],
+                                                    icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
+                                                        symbol: "Plus"
+                                                    }),
+                                                    children: "More actions"
+                                                }) : null,
+                                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__["default"], {
+                                                    icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
+                                                        symbol: "Close"
+                                                    }),
+                                                    onClick: ()=>{
+                                                        table.resetRowSelection(true);
+                                                    },
+                                                    title: `Deselect ${table.getFilteredSelectedRowModel().rows.length} ${1 === table.getFilteredSelectedRowModel().rows.length ? "selection" : "selections"}`,
+                                                    type: "secondary"
+                                                })
+                                            ]
                                         })
                                     ]
                                 })
-                            ]
+                            })
                         })
-                    })
-                })
-            }) : null,
-            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__VStack_js_02eb6792__["default"], {
-                spacing: "p1",
-                children: [
-                    0 !== globalFilterableColumns.length || 0 !== filterableColumns.length || 0 !== groupableColumns.length ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
-                        className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].filterBar,
+                    }) : null,
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__VStack_js_02eb6792__["default"], {
+                        spacing: "p1",
                         children: [
-                            0 !== globalFilterableColumns.length ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__fields_StringField_js_cab546d4__["default"], {
-                                label: "Search",
-                                id: "globalSearch",
-                                value: searchTerm,
-                                onChange: (value)=>{
-                                    setSearchTerm(value ?? "");
-                                    throttledSetGlobalFilter(value ?? "");
-                                }
-                            }) : null,
-                            0 !== filterableColumns.length || 0 !== groupableColumns.length ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
-                                className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].filterSelectMenus,
+                            0 !== globalFilterableColumns.length || 0 !== filterableColumns.length || 0 !== groupableColumns.length ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                                className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].filterBar,
                                 children: [
-                                    filterableColumns.map((column)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__fields_SelectField_js_8b78efe2__["default"], {
-                                            label: column.filter.label,
-                                            id: `${column.id}Filter`,
+                                    0 !== globalFilterableColumns.length ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                        className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].filterBarSearch,
+                                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__inputs_StringInput_js_091f1e06__["default"], {
+                                            prefix: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
+                                                symbol: "Search"
+                                            }),
+                                            placeholder: "Search",
+                                            id: "globalSearch",
+                                            value: searchTerm,
                                             onChange: (value)=>{
-                                                table.getColumn(column.id)?.setFilterValue(value.id);
-                                            },
-                                            options: column.filter.options,
-                                            optionToId: (option)=>option.id,
-                                            optionToLabel: (option)=>option.label,
-                                            value: column.filter.options.find((option)=>option.id === table.getColumn(column.id)?.getFilterValue()) ?? column.filter.options[0]
-                                        }, column.id)),
-                                    0 !== groupableColumns.length ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__fields_SelectField_js_8b78efe2__["default"], {
-                                        label: "Group by",
-                                        id: "columnGroupings",
-                                        onChange: (value)=>table.setGrouping(value ? [
-                                                value.id
-                                            ] : []),
-                                        options: [
-                                            void 0,
-                                            ...groupableColumns
-                                        ],
-                                        optionToId: (option)=>void 0 === option ? "noGrouping" : option.id,
-                                        optionToLabel: (option)=>void 0 === option ? "No grouping" : option.grouping.label,
-                                        value: groupableColumns.find((column)=>table.getState().grouping.some((id)=>id === column.id))
+                                                setSearchTerm(value ?? "");
+                                                throttledSetGlobalFilter(value ?? "");
+                                            }
+                                        })
+                                    }) : null,
+                                    0 !== filterableColumns.length || 0 !== groupableColumns.length ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                                        className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].filterSelectMenus,
+                                        children: [
+                                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__["default"], {
+                                                type: "secondary",
+                                                onClick: ()=>setIsFilterModalOpen(true),
+                                                icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
+                                                    symbol: "Filter"
+                                                }),
+                                                children: [
+                                                    "Filters",
+                                                    activeFilterCount > 0 ? ` (${activeFilterCount})` : ""
+                                                ]
+                                            }),
+                                            0 !== groupableColumns.length ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__inputs_SelectInput_js_d1a6f32e__["default"], {
+                                                    id: "columnGroupings",
+                                                    onChange: (value)=>table.setGrouping(value ? [
+                                                            value.id
+                                                        ] : []),
+                                                    options: [
+                                                        void 0,
+                                                        ...groupableColumns
+                                                    ],
+                                                    optionToId: (option)=>void 0 === option ? "noGrouping" : option.id,
+                                                    optionToLabel: (option)=>void 0 === option ? "No grouping" : option.grouping.label,
+                                                    value: groupableColumns.find((column)=>table.getState().grouping.some((id)=>id === column.id))
+                                                })
+                                            }) : null
+                                        ]
+                                    }) : null,
+                                    showSearchReset ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                        className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].filterBarSearchReset,
+                                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                                            className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].filterBarSearchResetContent,
+                                            children: [
+                                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("p", {
+                                                    children: [
+                                                        "Showing ",
+                                                        table.getPreGroupedRowModel().flatRows.length,
+                                                        " of",
+                                                        " ",
+                                                        table.getPreFilteredRowModel().flatRows.length
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__["default"], {
+                                                    onClick: ()=>{
+                                                        table.setColumnFilters(columnFiltersInitialState);
+                                                        table.resetGlobalFilter();
+                                                        setSearchTerm("");
+                                                    },
+                                                    type: "secondary",
+                                                    size: "small",
+                                                    children: "Reset filters and search"
+                                                })
+                                            ]
+                                        })
                                     }) : null
                                 ]
-                            }) : null
-                        ]
-                    }) : null,
-                    showSearchReset ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__HStack_js_cc26058d__["default"], {
-                        children: [
-                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("p", {
-                                children: [
-                                    "Showing ",
-                                    table.getPreGroupedRowModel().flatRows.length,
-                                    " of",
-                                    " ",
-                                    table.getPreFilteredRowModel().flatRows.length
-                                ]
-                            }),
-                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__["default"], {
-                                onClick: ()=>{
-                                    table.setColumnFilters(columnFiltersInitialState);
-                                    table.resetGlobalFilter();
-                                    setSearchTerm("");
-                                },
-                                type: "secondary",
-                                size: "small",
-                                children: "Reset filters and search"
-                            })
-                        ]
-                    }) : null,
-                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                        className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableContainer,
-                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("table", {
-                            className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].table,
-                            children: [
-                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("thead", {
-                                    className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableHead,
-                                    children: table.getHeaderGroups().map((headerGroup)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("tr", {
-                                            className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])([
-                                                __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableRow,
-                                                enableRowSelection ? __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].selectableRows : ""
-                                            ]),
-                                            children: headerGroup.headers.map((header)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("th", {
+                            }) : null,
+                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableContainer,
+                                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("table", {
+                                    className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].table,
+                                    children: [
+                                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("thead", {
+                                            className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableHead,
+                                            children: table.getHeaderGroups().map((headerGroup)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("tr", {
                                                     className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])([
-                                                        __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableCell,
-                                                        __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableHeader,
-                                                        header.column.id === selectColumnId ? __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].selectionCell : void 0,
-                                                        header.column.id === actionsColumnId ? __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].actionsCell : void 0
+                                                        __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableRow,
+                                                        enableRowSelection ? __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].selectableRows : ""
                                                     ]),
+                                                    children: headerGroup.headers.map((header)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("th", {
+                                                            className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])([
+                                                                __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableCell,
+                                                                __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableHeader,
+                                                                header.column.id === selectColumnId ? __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].selectionCell : void 0,
+                                                                header.column.id === actionsColumnId ? __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].actionsCell : void 0
+                                                            ]),
+                                                            style: {
+                                                                width: header.column.getSize(),
+                                                                flexGrow: header.column.id === selectColumnId || header.column.id === actionsColumnId ? 0 : header.column.getSize()
+                                                            },
+                                                            children: header.isPlaceholder ? null : header.column.getCanSort() ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("button", {
+                                                                onClick: header.column.getToggleSortingHandler(),
+                                                                className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].sortableTableHeader,
+                                                                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_0d271bb6__["default"], {
+                                                                        size: "small",
+                                                                        symbol: "SortAsc",
+                                                                        className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].sortIcon
+                                                                    }) : "desc" === header.column.getIsSorted() ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
+                                                                        size: "small",
+                                                                        symbol: "SortDes",
+                                                                        className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].sortIcon
+                                                                    }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
+                                                                        size: "small",
+                                                                        symbol: "SortDefault",
+                                                                        className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].sortIcon
+                                                                    })
+                                                                ]
+                                                            }) : /*#__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())
+                                                            })
+                                                        }, header.id))
+                                                }, headerGroup.id))
+                                        }),
+                                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("tbody", {
+                                            ref: tBodyRef,
+                                            className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableBody,
+                                            style: {
+                                                height: rows.length > 0 ? `${rowVirtualizer.getTotalSize()}px` : "auto"
+                                            },
+                                            children: table.getRowModel().rows.length ? rowVirtualizer.getVirtualItems().map((virtualRow)=>{
+                                                const row = rows[virtualRow.index];
+                                                const groupColumn = groupableColumns.find((column)=>column.id === row.groupingColumnId);
+                                                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_1c0e33be__["default"].tableRow,
+                                                        enableRowSelection ? __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].selectableRows : "",
+                                                        row.getIsGrouped() && groupColumn ? __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableRowGrouped : ""
+                                                    ]),
+                                                    "data-index": virtualRow.index,
+                                                    ref: rowVirtualizer.measureElement,
                                                     style: {
-                                                        width: header.column.getSize(),
-                                                        flexGrow: header.column.id === selectColumnId || header.column.id === actionsColumnId ? 0 : header.column.getSize()
+                                                        position: "absolute",
+                                                        transform: `translateY(${virtualRow.start - rowVirtualizer.options.scrollMargin}px)`
                                                     },
-                                                    children: header.isPlaceholder ? null : header.column.getCanSort() ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("button", {
-                                                        onClick: header.column.getToggleSortingHandler(),
-                                                        className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].sortableTableHeader,
-                                                        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_0d271bb6__["default"], {
-                                                                size: "small",
-                                                                symbol: "SortAsc",
-                                                                className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].sortIcon
-                                                            }) : "desc" === header.column.getIsSorted() ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
-                                                                size: "small",
-                                                                symbol: "SortDes",
-                                                                className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].sortIcon
-                                                            }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
-                                                                size: "small",
-                                                                symbol: "SortDefault",
-                                                                className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].sortIcon
-                                                            })
-                                                        ]
-                                                    }) : /*#__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())
+                                                    children: row.getIsGrouped() && groupColumn ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("td", {
+                                                        className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableCell,
+                                                        children: groupColumn.grouping.header(row.original)
+                                                    }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
+                                                        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_1c0e33be__["default"].tableCell,
+                                                                    cell.column.id === selectColumnId ? __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].selectionCell : void 0,
+                                                                    cell.column.id === actionsColumnId ? __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].actionsCell : void 0
+                                                                ]),
+                                                                style: {
+                                                                    width: cell.column.getSize(),
+                                                                    flexGrow: cell.column.id === selectColumnId || cell.column.id === actionsColumnId ? 0 : cell.column.getSize()
+                                                                },
+                                                                children: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.flexRender)(cell.column.columnDef.cell, cell.getContext())
+                                                            }, cell.id))
                                                     })
-                                                }, header.id))
-                                        }, headerGroup.id))
+                                                }, row.id);
+                                            }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("tr", {
+                                                className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableRow,
+                                                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("td", {
+                                                    className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].noRows,
+                                                    children: emptyState
+                                                })
+                                            })
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].downloadLink,
+                                children: shouldShowCsvExport ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__["default"], {
+                                    type: "secondary",
+                                    onClick: ()=>handleDownloadCsv(csvExportableColumns, table.getRowModel().rows),
+                                    children: "Download all rows as CSV"
+                                }) : null
+                            })
+                        ]
+                    })
+                ]
+            }),
+            isFilterModalOpen && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(FilterModal, {
+                onClose: ()=>setIsFilterModalOpen(false),
+                filterableColumns: filterableColumns,
+                currentFilters: tableState.columnFilters,
+                onFiltersChange: (filters)=>table.setColumnFilters(filters)
+            })
+        ]
+    });
+};
+const FilterExpander = ({ label, children, highlight = false, defaultOpen = false })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("details", {
+        open: defaultOpen,
+        className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].filterExpander, {
+            [__WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].filterExpanderHighlight]: highlight
+        }),
+        children: [
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("summary", {
+                className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].filterExpanderRow,
+                children: [
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                        className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].filterExpanderIcon,
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
+                            symbol: "ChevronRight"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                        className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].filterExpanderLabel,
+                        children: label
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].filterExpanderWrapper,
+                children: children
+            })
+        ]
+    });
+const FilterModal = ({ onClose, filterableColumns, currentFilters, onFiltersChange })=>{
+    const initialFilterValues = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        const result = {};
+        for (const column of filterableColumns){
+            const current = currentFilters.find((f)=>f.id === column.id);
+            const filter = column.filter;
+            if (filter.isMulti) result[column.id] = Array.isArray(current?.value) ? current.value : [];
+            else result[column.id] = ("string" == typeof current?.value ? current.value : null) ?? filter.options[0].id;
+        }
+        return result;
+    }, [
+        filterableColumns,
+        currentFilters
+    ]);
+    const resetFilterValues = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        const result = {};
+        for (const col of filterableColumns){
+            const filter = col.filter;
+            result[col.id] = filter.isMulti ? [] : filter.options[0].id;
+        }
+        return result;
+    }, [
+        filterableColumns
+    ]);
+    const { data, setData, status, submit } = (0, __WEBPACK_EXTERNAL_MODULE__forms_useForm_js_e756b4e7__["default"])({
+        initialValues: {
+            filters: initialFilterValues
+        },
+        onSubmit: async (values)=>{
+            const filters = Object.entries(values.filters).map(([columnId, value])=>({
+                    id: columnId,
+                    value
+                }));
+            onFiltersChange(filters);
+        }
+    });
+    const handleMultiFilterChange = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((columnId, option)=>{
+        setData((prev)=>{
+            const prevValue = prev.filters[columnId];
+            const current = Array.isArray(prevValue) ? prevValue : [];
+            const next = current.includes(option.id) ? current.filter((id)=>id !== option.id) : [
+                ...current,
+                option.id
+            ];
+            return {
+                filters: {
+                    ...prev.filters,
+                    [columnId]: next
+                }
+            };
+        });
+    }, [
+        setData
+    ]);
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Modal_js_50f53bdf__["default"], {
+        onClose: onClose,
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__["default"], {
+            header: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__["default"], {
+                font: "h6",
+                tagName: "h6",
+                children: "Filters"
+            }),
+            footer: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__HStack_js_cc26058d__["default"], {
+                justify: "space-between",
+                children: [
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__["default"], {
+                        type: "secondary",
+                        onClick: ()=>{
+                            setData(()=>({
+                                    filters: resetFilterValues
+                                }));
+                        },
+                        icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
+                            symbol: "Restore"
+                        }),
+                        children: "Reset all filters"
+                    }),
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__forms_FormButtonSet_js_c160eb1a__["default"], {
+                        formStatus: status,
+                        primary: {
+                            action: async ()=>{
+                                submit();
+                                onClose();
+                            },
+                            label: "Apply filters"
+                        },
+                        secondary: {
+                            action: onClose,
+                            label: "Cancel"
+                        }
+                    })
+                ]
+            }),
+            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].filterExpandersContainer,
+                children: filterableColumns.map((column)=>{
+                    const filter = column.filter;
+                    if (filter.isMulti) {
+                        const filterValue = data.filters[column.id];
+                        const selectedIds = Array.isArray(filterValue) ? filterValue : [];
+                        const selectedOptions = filter.options.filter((opt)=>selectedIds.includes(opt.id));
+                        const multiFilterLabel = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__HStack_js_cc26058d__["default"], {
+                            justify: "space-between",
+                            children: [
+                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                                    children: selectedIds.length > 0 ? `${filter.label} (${selectedIds.length} selected)` : filter.label
                                 }),
-                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("tbody", {
-                                    ref: tBodyRef,
-                                    className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableBody,
+                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
                                     style: {
-                                        height: rows.length > 0 ? `${rowVirtualizer.getTotalSize()}px` : "auto"
+                                        visibility: selectedIds.length > 0 ? "visible" : "hidden"
                                     },
-                                    children: table.getRowModel().rows.length ? rowVirtualizer.getVirtualItems().map((virtualRow)=>{
-                                        const row = rows[virtualRow.index];
-                                        const groupColumn = groupableColumns.find((column)=>column.id === row.groupingColumnId);
-                                        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_1c0e33be__["default"].tableRow,
-                                                enableRowSelection ? __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].selectableRows : "",
-                                                row.getIsGrouped() && groupColumn ? __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableRowGrouped : ""
-                                            ]),
-                                            "data-index": virtualRow.index,
-                                            ref: rowVirtualizer.measureElement,
-                                            style: {
-                                                position: "absolute",
-                                                transform: `translateY(${virtualRow.start - rowVirtualizer.options.scrollMargin}px)`
-                                            },
-                                            children: row.getIsGrouped() && groupColumn ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("td", {
-                                                className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableCell,
-                                                children: groupColumn.grouping.header(row.original)
-                                            }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
-                                                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_1c0e33be__["default"].tableCell,
-                                                            cell.column.id === selectColumnId ? __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].selectionCell : void 0,
-                                                            cell.column.id === actionsColumnId ? __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].actionsCell : void 0
-                                                        ]),
-                                                        style: {
-                                                            width: cell.column.getSize(),
-                                                            flexGrow: cell.column.id === selectColumnId || cell.column.id === actionsColumnId ? 0 : cell.column.getSize()
-                                                        },
-                                                        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: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableRow,
-                                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("td", {
-                                            className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].noRows,
-                                            children: emptyState
-                                        })
+                                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__["default"], {
+                                        type: "secondary",
+                                        size: "small",
+                                        onClick: (e)=>{
+                                            e.stopPropagation();
+                                            setData((prev)=>({
+                                                    filters: {
+                                                        ...prev.filters,
+                                                        [column.id]: []
+                                                    }
+                                                }));
+                                        },
+                                        children: "Reset"
                                     })
                                 })
                             ]
-                        })
-                    }),
-                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
-                        className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].downloadLink,
+                        });
+                        return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(FilterExpander, {
+                            label: multiFilterLabel,
+                            highlight: selectedIds.length > 0,
+                            defaultOpen: 1 === filterableColumns.length,
+                            children: filter.options.length > MIN_LIST_BOX_FILTER_OPTIONS ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].listBoxFilterContainer,
+                                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__fields_ListBoxField_js_b7d4cb12__["default"], {
+                                    id: `${column.id}-filter`,
+                                    label: "",
+                                    options: filter.options,
+                                    optionToId: (opt)=>opt.id,
+                                    optionToLabel: (opt)=>opt.label,
+                                    searchField: "label",
+                                    value: selectedOptions,
+                                    onChange: (option)=>handleMultiFilterChange(column.id, option)
+                                })
+                            }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__fields_CheckboxSetField_js_bce910a4__["default"], {
+                                id: `${column.id}-filter`,
+                                label: "",
+                                options: filter.options,
+                                optionToId: (opt)=>opt.id,
+                                optionToLabel: (opt)=>opt.label,
+                                values: selectedOptions,
+                                onChange: (option)=>handleMultiFilterChange(column.id, option)
+                            })
+                        }, column.id);
+                    }
+                    const rawValue = data.filters[column.id];
+                    const value = "string" == typeof rawValue ? rawValue : filter.options[0].id;
+                    const hasNonDefaultValue = "string" == typeof rawValue && rawValue !== filter.options[0].id;
+                    const isBooleanFilter = 2 === filter.options.length;
+                    const booleanValue = isBooleanFilter && value === filter.options[1].id;
+                    const singleFilterLabel = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__HStack_js_cc26058d__["default"], {
+                        justify: "space-between",
                         children: [
-                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("p", {
-                                children: [
-                                    "Showing ",
-                                    table.getPreGroupedRowModel().flatRows.length,
-                                    " of",
-                                    " ",
-                                    table.getPreFilteredRowModel().flatRows.length
-                                ]
+                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                                children: hasNonDefaultValue ? `${filter.label} (Selected)` : filter.label
                             }),
-                            shouldShowCsvExport ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__["default"], {
-                                type: "secondary",
-                                onClick: ()=>handleDownloadCsv(csvExportableColumns, table.getRowModel().rows),
-                                children: "Download all rows as CSV"
-                            }) : null
+                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                                style: {
+                                    visibility: hasNonDefaultValue ? "visible" : "hidden"
+                                },
+                                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_Button_js_f591ba2e__["default"], {
+                                    type: "secondary",
+                                    size: "small",
+                                    onClick: (e)=>{
+                                        e.stopPropagation();
+                                        setData((prev)=>({
+                                                filters: {
+                                                    ...prev.filters,
+                                                    [column.id]: filter.options[0].id
+                                                }
+                                            }));
+                                    },
+                                    children: "Reset"
+                                })
+                            })
                         ]
-                    })
-                ]
+                    });
+                    return isBooleanFilter ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                        className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].filterBooleanFieldWrapper,
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__fields_BooleanField_js_dc79ee46__["default"], {
+                            id: `${column.id}-filter`,
+                            label: filter.label,
+                            value: booleanValue,
+                            onChange: (checked)=>{
+                                setData((prev)=>({
+                                        filters: {
+                                            ...prev.filters,
+                                            [column.id]: checked ? filter.options[1].id : filter.options[0].id
+                                        }
+                                    }));
+                            }
+                        })
+                    }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(FilterExpander, {
+                        label: singleFilterLabel,
+                        highlight: hasNonDefaultValue,
+                        defaultOpen: 1 === filterableColumns.length,
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__fields_SimpleRadioSetField_js_118e9421__["default"], {
+                            id: `${column.id}-filter`,
+                            label: "",
+                            options: filter.options,
+                            value: value,
+                            onChange: (optionId)=>{
+                                setData((prev)=>({
+                                        filters: {
+                                            ...prev.filters,
+                                            [column.id]: optionId
+                                        }
+                                    }));
+                            }
+                        })
+                    }, column.id);
+                })
             })
-        ]
+        })
     });
 };
 const Table_rslib_entry_ = Table;