material-react-table 1.11.4 → 1.12.0-beta.0

package/dist/cjs/index.js

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 var reactTable = require('@tanstack/react-table');
-var styles = require('@mui/material/styles');
 var matchSorterUtils = require('@tanstack/match-sorter-utils');
+var styles = require('@mui/material/styles');
 var ArrowDownwardIcon = require('@mui/icons-material/ArrowDownward');
 var ArrowRightIcon = require('@mui/icons-material/ArrowRight');
 var CancelIcon = require('@mui/icons-material/Cancel');
@@ -81,7 +82,6 @@ var Stack = require('@mui/material/Stack');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ArrowDownwardIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowDownwardIcon);
 var ArrowRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowRightIcon);
 var CancelIcon__default = /*#__PURE__*/_interopDefaultLegacy(CancelIcon);
@@ -178,6 +178,104 @@ function __rest(s, e) {
 
 const MRT_AggregationFns = Object.assign({}, reactTable.aggregationFns);
 
+const fuzzy$1 = (row, columnId, filterValue, addMeta) => {
+    const itemRank = matchSorterUtils.rankItem(row.getValue(columnId), filterValue, {
+        threshold: matchSorterUtils.rankings.MATCHES,
+    });
+    addMeta(itemRank);
+    return itemRank.passed;
+};
+fuzzy$1.autoRemove = (val) => !val;
+const contains = (row, id, filterValue) => row
+    .getValue(id)
+    .toString()
+    .toLowerCase()
+    .trim()
+    .includes(filterValue.toString().toLowerCase().trim());
+contains.autoRemove = (val) => !val;
+const startsWith = (row, id, filterValue) => row
+    .getValue(id)
+    .toString()
+    .toLowerCase()
+    .trim()
+    .startsWith(filterValue.toString().toLowerCase().trim());
+startsWith.autoRemove = (val) => !val;
+const endsWith = (row, id, filterValue) => row
+    .getValue(id)
+    .toString()
+    .toLowerCase()
+    .trim()
+    .endsWith(filterValue.toString().toLowerCase().trim());
+endsWith.autoRemove = (val) => !val;
+const equals = (row, id, filterValue) => row.getValue(id).toString().toLowerCase().trim() ===
+    filterValue.toString().toLowerCase().trim();
+equals.autoRemove = (val) => !val;
+const notEquals = (row, id, filterValue) => row.getValue(id).toString().toLowerCase().trim() !==
+    filterValue.toString().toLowerCase().trim();
+notEquals.autoRemove = (val) => !val;
+const greaterThan = (row, id, filterValue) => !isNaN(+filterValue) && !isNaN(+row.getValue(id))
+    ? +row.getValue(id) > +filterValue
+    : row.getValue(id).toString().toLowerCase().trim() >
+        filterValue.toString().toLowerCase().trim();
+greaterThan.autoRemove = (val) => !val;
+const greaterThanOrEqualTo = (row, id, filterValue) => equals(row, id, filterValue) || greaterThan(row, id, filterValue);
+greaterThanOrEqualTo.autoRemove = (val) => !val;
+const lessThan = (row, id, filterValue) => !isNaN(+filterValue) && !isNaN(+row.getValue(id))
+    ? +row.getValue(id) < +filterValue
+    : row.getValue(id).toString().toLowerCase().trim() <
+        filterValue.toString().toLowerCase().trim();
+lessThan.autoRemove = (val) => !val;
+const lessThanOrEqualTo = (row, id, filterValue) => equals(row, id, filterValue) || lessThan(row, id, filterValue);
+lessThanOrEqualTo.autoRemove = (val) => !val;
+const between = (row, id, filterValues) => (['', undefined].includes(filterValues[0]) ||
+    greaterThan(row, id, filterValues[0])) &&
+    ((!isNaN(+filterValues[0]) &&
+        !isNaN(+filterValues[1]) &&
+        +filterValues[0] > +filterValues[1]) ||
+        ['', undefined].includes(filterValues[1]) ||
+        lessThan(row, id, filterValues[1]));
+between.autoRemove = (val) => !val;
+const betweenInclusive = (row, id, filterValues) => (['', undefined].includes(filterValues[0]) ||
+    greaterThanOrEqualTo(row, id, filterValues[0])) &&
+    ((!isNaN(+filterValues[0]) &&
+        !isNaN(+filterValues[1]) &&
+        +filterValues[0] > +filterValues[1]) ||
+        ['', undefined].includes(filterValues[1]) ||
+        lessThanOrEqualTo(row, id, filterValues[1]));
+betweenInclusive.autoRemove = (val) => !val;
+const empty = (row, id, _filterValue) => !row.getValue(id).toString().trim();
+empty.autoRemove = (val) => !val;
+const notEmpty = (row, id, _filterValue) => !!row.getValue(id).toString().trim();
+notEmpty.autoRemove = (val) => !val;
+const MRT_FilterFns = Object.assign(Object.assign({}, reactTable.filterFns), { between,
+    betweenInclusive,
+    contains,
+    empty,
+    endsWith,
+    equals,
+    fuzzy: fuzzy$1,
+    greaterThan,
+    greaterThanOrEqualTo,
+    lessThan,
+    lessThanOrEqualTo,
+    notEmpty,
+    notEquals,
+    startsWith });
+
+const fuzzy = (rowA, rowB, columnId) => {
+    let dir = 0;
+    if (rowA.columnFiltersMeta[columnId]) {
+        dir = matchSorterUtils.compareItems(rowA.columnFiltersMeta[columnId], rowB.columnFiltersMeta[columnId]);
+    }
+    // Provide a fallback for when the item ranks are equal
+    return dir === 0
+        ? reactTable.sortingFns.alphanumeric(rowA, rowB, columnId)
+        : dir;
+};
+const MRT_SortingFns = Object.assign(Object.assign({}, reactTable.sortingFns), { fuzzy });
+const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFiltersMeta).map((v) => v.rank)) -
+    Math.max(...Object.values(rowA.columnFiltersMeta).map((v) => v.rank));
+
 const getColumnId = (columnDef) => { var _a, _b, _c, _d; return (_d = (_a = columnDef.id) !== null && _a !== void 0 ? _a : (_c = (_b = columnDef.accessorKey) === null || _b === void 0 ? void 0 : _b.toString) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : columnDef.header; };
 const getAllLeafColumnDefs = (columns) => {
     const allLeafColumnDefs = [];
@@ -245,8 +343,9 @@ const reorderColumn = (draggedColumn, targetColumn, columnOrder) => {
     if (draggedColumn.getCanPin()) {
         draggedColumn.pin(targetColumn.getIsPinned());
     }
-    columnOrder.splice(columnOrder.indexOf(targetColumn.id), 0, columnOrder.splice(columnOrder.indexOf(draggedColumn.id), 1)[0]);
-    return [...columnOrder];
+    const newColumnOrder = [...columnOrder];
+    newColumnOrder.splice(newColumnOrder.indexOf(targetColumn.id), 0, newColumnOrder.splice(newColumnOrder.indexOf(draggedColumn.id), 1)[0]);
+    return newColumnOrder;
 };
 const showExpandColumn = (props, grouping) => !!(props.enableExpanding ||
     (props.enableGrouping && (grouping === undefined || (grouping === null || grouping === void 0 ? void 0 : grouping.length))) ||
@@ -381,90 +480,6 @@ const MRT_DefaultDisplayColumn = {
 };
 const parseCSSVarId = (id) => id.replace(/[^a-zA-Z0-9]/g, '_');
 
-const fuzzy$1 = (row, columnId, filterValue, addMeta) => {
-    const itemRank = matchSorterUtils.rankItem(row.getValue(columnId), filterValue, {
-        threshold: matchSorterUtils.rankings.MATCHES,
-    });
-    addMeta(itemRank);
-    return itemRank.passed;
-};
-fuzzy$1.autoRemove = (val) => !val;
-const contains = (row, id, filterValue) => row
-    .getValue(id)
-    .toString()
-    .toLowerCase()
-    .trim()
-    .includes(filterValue.toString().toLowerCase().trim());
-contains.autoRemove = (val) => !val;
-const startsWith = (row, id, filterValue) => row
-    .getValue(id)
-    .toString()
-    .toLowerCase()
-    .trim()
-    .startsWith(filterValue.toString().toLowerCase().trim());
-startsWith.autoRemove = (val) => !val;
-const endsWith = (row, id, filterValue) => row
-    .getValue(id)
-    .toString()
-    .toLowerCase()
-    .trim()
-    .endsWith(filterValue.toString().toLowerCase().trim());
-endsWith.autoRemove = (val) => !val;
-const equals = (row, id, filterValue) => row.getValue(id).toString().toLowerCase().trim() ===
-    filterValue.toString().toLowerCase().trim();
-equals.autoRemove = (val) => !val;
-const notEquals = (row, id, filterValue) => row.getValue(id).toString().toLowerCase().trim() !==
-    filterValue.toString().toLowerCase().trim();
-notEquals.autoRemove = (val) => !val;
-const greaterThan = (row, id, filterValue) => !isNaN(+filterValue) && !isNaN(+row.getValue(id))
-    ? +row.getValue(id) > +filterValue
-    : row.getValue(id).toString().toLowerCase().trim() >
-        filterValue.toString().toLowerCase().trim();
-greaterThan.autoRemove = (val) => !val;
-const greaterThanOrEqualTo = (row, id, filterValue) => equals(row, id, filterValue) || greaterThan(row, id, filterValue);
-greaterThanOrEqualTo.autoRemove = (val) => !val;
-const lessThan = (row, id, filterValue) => !isNaN(+filterValue) && !isNaN(+row.getValue(id))
-    ? +row.getValue(id) < +filterValue
-    : row.getValue(id).toString().toLowerCase().trim() <
-        filterValue.toString().toLowerCase().trim();
-lessThan.autoRemove = (val) => !val;
-const lessThanOrEqualTo = (row, id, filterValue) => equals(row, id, filterValue) || lessThan(row, id, filterValue);
-lessThanOrEqualTo.autoRemove = (val) => !val;
-const between = (row, id, filterValues) => (['', undefined].includes(filterValues[0]) ||
-    greaterThan(row, id, filterValues[0])) &&
-    ((!isNaN(+filterValues[0]) &&
-        !isNaN(+filterValues[1]) &&
-        +filterValues[0] > +filterValues[1]) ||
-        ['', undefined].includes(filterValues[1]) ||
-        lessThan(row, id, filterValues[1]));
-between.autoRemove = (val) => !val;
-const betweenInclusive = (row, id, filterValues) => (['', undefined].includes(filterValues[0]) ||
-    greaterThanOrEqualTo(row, id, filterValues[0])) &&
-    ((!isNaN(+filterValues[0]) &&
-        !isNaN(+filterValues[1]) &&
-        +filterValues[0] > +filterValues[1]) ||
-        ['', undefined].includes(filterValues[1]) ||
-        lessThanOrEqualTo(row, id, filterValues[1]));
-betweenInclusive.autoRemove = (val) => !val;
-const empty = (row, id, _filterValue) => !row.getValue(id).toString().trim();
-empty.autoRemove = (val) => !val;
-const notEmpty = (row, id, _filterValue) => !!row.getValue(id).toString().trim();
-notEmpty.autoRemove = (val) => !val;
-const MRT_FilterFns = Object.assign(Object.assign({}, reactTable.filterFns), { between,
-    betweenInclusive,
-    contains,
-    empty,
-    endsWith,
-    equals,
-    fuzzy: fuzzy$1,
-    greaterThan,
-    greaterThanOrEqualTo,
-    lessThan,
-    lessThanOrEqualTo,
-    notEmpty,
-    notEquals,
-    startsWith });
-
 const MRT_Default_Icons = {
     ArrowDownwardIcon: ArrowDownwardIcon__default["default"],
     ArrowRightIcon: ArrowRightIcon__default["default"],
@@ -496,19 +511,97 @@ const MRT_Default_Icons = {
     VisibilityOffIcon: VisibilityOffIcon__default["default"],
 };
 
-const fuzzy = (rowA, rowB, columnId) => {
-    let dir = 0;
-    if (rowA.columnFiltersMeta[columnId]) {
-        dir = matchSorterUtils.compareItems(rowA.columnFiltersMeta[columnId], rowB.columnFiltersMeta[columnId]);
-    }
-    // Provide a fallback for when the item ranks are equal
-    return dir === 0
-        ? reactTable.sortingFns.alphanumeric(rowA, rowB, columnId)
-        : dir;
+const MRT_Localization_EN = {
+    actions: 'Actions',
+    and: 'and',
+    cancel: 'Cancel',
+    changeFilterMode: 'Change filter mode',
+    changeSearchMode: 'Change search mode',
+    clearFilter: 'Clear filter',
+    clearSearch: 'Clear search',
+    clearSort: 'Clear sort',
+    clickToCopy: 'Click to copy',
+    collapse: 'Collapse',
+    collapseAll: 'Collapse all',
+    columnActions: 'Column Actions',
+    copiedToClipboard: 'Copied to clipboard',
+    dropToGroupBy: 'Drop to group by {column}',
+    edit: 'Edit',
+    expand: 'Expand',
+    expandAll: 'Expand all',
+    filterArrIncludes: 'Includes',
+    filterArrIncludesAll: 'Includes all',
+    filterArrIncludesSome: 'Includes',
+    filterBetween: 'Between',
+    filterBetweenInclusive: 'Between Inclusive',
+    filterByColumn: 'Filter by {column}',
+    filterContains: 'Contains',
+    filterEmpty: 'Empty',
+    filterEndsWith: 'Ends With',
+    filterEquals: 'Equals',
+    filterEqualsString: 'Equals',
+    filterFuzzy: 'Fuzzy',
+    filterGreaterThan: 'Greater Than',
+    filterGreaterThanOrEqualTo: 'Greater Than Or Equal To',
+    filterInNumberRange: 'Between',
+    filterIncludesString: 'Contains',
+    filterIncludesStringSensitive: 'Contains',
+    filterLessThan: 'Less Than',
+    filterLessThanOrEqualTo: 'Less Than Or Equal To',
+    filterMode: 'Filter Mode: {filterType}',
+    filterNotEmpty: 'Not Empty',
+    filterNotEquals: 'Not Equals',
+    filterStartsWith: 'Starts With',
+    filterWeakEquals: 'Equals',
+    filteringByColumn: 'Filtering by {column} - {filterType} {filterValue}',
+    goToFirstPage: 'Go to first page',
+    goToLastPage: 'Go to last page',
+    goToNextPage: 'Go to next page',
+    goToPreviousPage: 'Go to previous page',
+    grab: 'Grab',
+    groupByColumn: 'Group by {column}',
+    groupedBy: 'Grouped by ',
+    hideAll: 'Hide all',
+    hideColumn: 'Hide {column} column',
+    max: 'Max',
+    min: 'Min',
+    move: 'Move',
+    noRecordsToDisplay: 'No records to display',
+    noResultsFound: 'No results found',
+    of: 'of',
+    or: 'or',
+    pinToLeft: 'Pin to left',
+    pinToRight: 'Pin to right',
+    resetColumnSize: 'Reset column size',
+    resetOrder: 'Reset order',
+    rowActions: 'Row Actions',
+    rowNumber: '#',
+    rowNumbers: 'Row Numbers',
+    rowsPerPage: 'Rows per page',
+    save: 'Save',
+    search: 'Search',
+    selectedCountOfRowCountRowsSelected: '{selectedCount} of {rowCount} row(s) selected',
+    select: 'Select',
+    showAll: 'Show all',
+    showAllColumns: 'Show all columns',
+    showHideColumns: 'Show/Hide columns',
+    showHideFilters: 'Show/Hide filters',
+    showHideSearch: 'Show/Hide search',
+    sortByColumnAsc: 'Sort by {column} ascending',
+    sortByColumnDesc: 'Sort by {column} descending',
+    sortedByColumnAsc: 'Sorted by {column} ascending',
+    sortedByColumnDesc: 'Sorted by {column} descending',
+    thenBy: ', then by ',
+    toggleDensity: 'Toggle density',
+    toggleFullScreen: 'Toggle full screen',
+    toggleSelectAll: 'Toggle select all',
+    toggleSelectRow: 'Toggle select row',
+    toggleVisibility: 'Toggle visibility',
+    ungroupByColumn: 'Ungroup by {column}',
+    unpin: 'Unpin',
+    unpinAll: 'Unpin all',
+    unsorted: 'Unsorted',
 };
-const MRT_SortingFns = Object.assign(Object.assign({}, reactTable.sortingFns), { fuzzy });
-const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFiltersMeta).map((v) => v.rank)) -
-    Math.max(...Object.values(rowA.columnFiltersMeta).map((v) => v.rank));
 
 const MRT_ExpandAllButton = ({ table }) => {
     var _a, _b;
@@ -518,16 +611,14 @@ const MRT_ExpandAllButton = ({ table }) => {
         ? muiExpandAllButtonProps({ table })
         : muiExpandAllButtonProps;
     const isAllRowsExpanded = getIsAllRowsExpanded();
-    return (React__default["default"].createElement(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: ((_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : isAllRowsExpanded)
+    return (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({ arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: ((_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : isAllRowsExpanded)
             ? localization.collapseAll
-            : localization.expandAll },
-        React__default["default"].createElement("span", null,
-            React__default["default"].createElement(IconButton__default["default"], Object.assign({ "aria-label": localization.expandAll, disabled: isLoading || (!renderDetailPanel && !getCanSomeRowsExpand()), onClick: () => toggleAllRowsExpanded(!isAllRowsExpanded) }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
+            : localization.expandAll }, { children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.expandAll, disabled: isLoading || (!renderDetailPanel && !getCanSomeRowsExpand()), onClick: () => toggleAllRowsExpanded(!isAllRowsExpanded) }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
                     ? iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx(theme)
-                    : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }), (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (React__default["default"].createElement(KeyboardDoubleArrowDownIcon, { style: {
-                    transform: `rotate(${isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0}deg)`,
-                    transition: 'transform 150ms',
-                } }))))));
+                    : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }, { children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsxRuntime.jsx(KeyboardDoubleArrowDownIcon, { style: {
+                        transform: `rotate(${isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0}deg)`,
+                        transition: 'transform 150ms',
+                    } })) })) }) })));
 };
 
 const MRT_ExpandButton = ({ row, table, }) => {
@@ -545,16 +636,14 @@ const MRT_ExpandButton = ({ row, table, }) => {
         row.toggleExpanded();
         (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
     };
-    return (React__default["default"].createElement(Tooltip__default["default"], { arrow: true, disableHoverListener: !canExpand && !renderDetailPanel, enterDelay: 1000, enterNextDelay: 1000, title: ((_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : isExpanded)
+    return (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({ arrow: true, disableHoverListener: !canExpand && !renderDetailPanel, enterDelay: 1000, enterNextDelay: 1000, title: ((_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : isExpanded)
             ? localization.collapse
-            : localization.expand },
-        React__default["default"].createElement("span", null,
-            React__default["default"].createElement(IconButton__default["default"], Object.assign({ "aria-label": localization.expand, disabled: !canExpand && !renderDetailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem' }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
+            : localization.expand }, { children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.expand, disabled: !canExpand && !renderDetailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem' }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
                     ? iconButtonProps.sx(theme)
-                    : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }), (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (React__default["default"].createElement(ExpandMoreIcon, { style: {
-                    transform: `rotate(${!canExpand && !renderDetailPanel ? -90 : isExpanded ? -180 : 0}deg)`,
-                    transition: 'transform 150ms',
-                } }))))));
+                    : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }, { children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsxRuntime.jsx(ExpandMoreIcon, { style: {
+                        transform: `rotate(${!canExpand && !renderDetailPanel ? -90 : isExpanded ? -180 : 0}deg)`,
+                        transition: 'transform 150ms',
+                    } })) })) }) })));
 };
 
 const mrtFilterOptions = (localization) => [
@@ -654,7 +743,7 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
     const { columnDef } = column !== null && column !== void 0 ? column : {};
     const currentFilterValue = column === null || column === void 0 ? void 0 : column.getFilterValue();
     const allowedColumnFilterOptions = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _a !== void 0 ? _a : columnFilterModeOptions;
-    const internalFilterOptions = React.useMemo(() => mrtFilterOptions(localization).filter((filterOption) => columnDef
+    const internalFilterOptions = react.useMemo(() => mrtFilterOptions(localization).filter((filterOption) => columnDef
         ? allowedColumnFilterOptions === undefined ||
             (allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.includes(filterOption.option))
         : (!globalFilterModeOptions ||
@@ -721,33 +810,31 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
         onSelect === null || onSelect === void 0 ? void 0 : onSelect();
     };
     const filterOption = !!header && columnDef ? columnDef._filterFn : globalFilterFn;
-    return (React__default["default"].createElement(Menu__default["default"], { anchorEl: anchorEl, anchorOrigin: { vertical: 'center', horizontal: 'right' }, onClose: () => setAnchorEl(null), open: !!anchorEl, MenuListProps: {
+    return (jsxRuntime.jsx(Menu__default["default"], Object.assign({ anchorEl: anchorEl, anchorOrigin: { vertical: 'center', horizontal: 'right' }, onClose: () => setAnchorEl(null), open: !!anchorEl, MenuListProps: {
             dense: density === 'compact',
-        } }, (_d = (header && column && columnDef
-        ? (_c = (_b = columnDef.renderColumnFilterModeMenuItems) === null || _b === void 0 ? void 0 : _b.call(columnDef, {
-            column: column,
-            internalFilterOptions,
-            onSelectFilterMode: handleSelectFilterMode,
-            table,
-        })) !== null && _c !== void 0 ? _c : renderColumnFilterModeMenuItems === null || renderColumnFilterModeMenuItems === void 0 ? void 0 : renderColumnFilterModeMenuItems({
-            column: column,
-            internalFilterOptions,
-            onSelectFilterMode: handleSelectFilterMode,
-            table,
-        })
-        : renderGlobalFilterModeMenuItems === null || renderGlobalFilterModeMenuItems === void 0 ? void 0 : renderGlobalFilterModeMenuItems({
-            internalFilterOptions,
-            onSelectFilterMode: handleSelectFilterMode,
-            table,
-        }))) !== null && _d !== void 0 ? _d : internalFilterOptions.map(({ option, label, divider, symbol }, index) => (React__default["default"].createElement(MenuItem__default["default"], { divider: divider, key: index, onClick: () => handleSelectFilterMode(option), selected: option === filterOption, sx: {
-            alignItems: 'center',
-            display: 'flex',
-            gap: '2ch',
-            my: 0,
-            py: '6px',
-        }, value: option },
-        React__default["default"].createElement(Box__default["default"], { sx: { fontSize: '1.25rem', width: '2ch' } }, symbol),
-        label)))));
+        } }, { children: (_d = (header && column && columnDef
+            ? (_c = (_b = columnDef.renderColumnFilterModeMenuItems) === null || _b === void 0 ? void 0 : _b.call(columnDef, {
+                column: column,
+                internalFilterOptions,
+                onSelectFilterMode: handleSelectFilterMode,
+                table,
+            })) !== null && _c !== void 0 ? _c : renderColumnFilterModeMenuItems === null || renderColumnFilterModeMenuItems === void 0 ? void 0 : renderColumnFilterModeMenuItems({
+                column: column,
+                internalFilterOptions,
+                onSelectFilterMode: handleSelectFilterMode,
+                table,
+            })
+            : renderGlobalFilterModeMenuItems === null || renderGlobalFilterModeMenuItems === void 0 ? void 0 : renderGlobalFilterModeMenuItems({
+                internalFilterOptions,
+                onSelectFilterMode: handleSelectFilterMode,
+                table,
+            }))) !== null && _d !== void 0 ? _d : internalFilterOptions.map(({ option, label, divider, symbol }, index) => (jsxRuntime.jsxs(MenuItem__default["default"], Object.assign({ divider: divider, onClick: () => handleSelectFilterMode(option), selected: option === filterOption, sx: {
+                alignItems: 'center',
+                display: 'flex',
+                gap: '2ch',
+                my: 0,
+                py: '6px',
+            }, value: option }, { children: [jsxRuntime.jsx(Box__default["default"], Object.assign({ sx: { fontSize: '1.25rem', width: '2ch' } }, { children: symbol })), label] }), index))) })));
 };
 
 const commonMenuItemStyles = {
@@ -766,7 +853,7 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
     const { column } = header;
     const { columnDef } = column;
     const { columnSizing, columnVisibility, density, showColumnFilters } = getState();
-    const [filterMenuAnchorEl, setFilterMenuAnchorEl] = React.useState(null);
+    const [filterMenuAnchorEl, setFilterMenuAnchorEl] = react.useState(null);
     const handleClearSort = () => {
         column.clearSorting();
         setAnchorEl(null);
@@ -821,121 +908,60 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
         !isSelectFilter &&
         (allowedColumnFilterOptions === undefined ||
             !!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length));
-    return (React__default["default"].createElement(Menu__default["default"], { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
+    return (jsxRuntime.jsxs(Menu__default["default"], Object.assign({ anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
             dense: density === 'compact',
-        } }, (_d = (_c = (_b = columnDef.renderColumnActionsMenuItems) === null || _b === void 0 ? void 0 : _b.call(columnDef, {
-        closeMenu: () => setAnchorEl(null),
-        column,
-        table,
-    })) !== null && _c !== void 0 ? _c : renderColumnActionsMenuItems === null || renderColumnActionsMenuItems === void 0 ? void 0 : renderColumnActionsMenuItems({
-        closeMenu: () => setAnchorEl(null),
-        column,
-        table,
-    })) !== null && _d !== void 0 ? _d : (enableSorting &&
-        column.getCanSort() &&
-        [
-            enableSortingRemoval !== false && (React__default["default"].createElement(MenuItem__default["default"], { disabled: !column.getIsSorted(), key: 0, onClick: handleClearSort, sx: commonMenuItemStyles },
-                React__default["default"].createElement(Box__default["default"], { sx: commonListItemStyles },
-                    React__default["default"].createElement(ListItemIcon__default["default"], null,
-                        React__default["default"].createElement(ClearAllIcon, null)),
-                    localization.clearSort))),
-            React__default["default"].createElement(MenuItem__default["default"], { disabled: column.getIsSorted() === 'asc', key: 1, onClick: handleSortAsc, sx: commonMenuItemStyles },
-                React__default["default"].createElement(Box__default["default"], { sx: commonListItemStyles },
-                    React__default["default"].createElement(ListItemIcon__default["default"], null,
-                        React__default["default"].createElement(SortIcon, { style: { transform: 'rotate(180deg) scaleX(-1)' } })), (_e = localization.sortByColumnAsc) === null || _e === void 0 ? void 0 :
-                    _e.replace('{column}', String(columnDef.header)))),
-            React__default["default"].createElement(MenuItem__default["default"], { divider: enableColumnFilters || enableGrouping || enableHiding, key: 2, disabled: column.getIsSorted() === 'desc', onClick: handleSortDesc, sx: commonMenuItemStyles },
-                React__default["default"].createElement(Box__default["default"], { sx: commonListItemStyles },
-                    React__default["default"].createElement(ListItemIcon__default["default"], null,
-                        React__default["default"].createElement(SortIcon, null)), (_f = localization.sortByColumnDesc) === null || _f === void 0 ? void 0 :
-                    _f.replace('{column}', String(columnDef.header)))),
-        ].filter(Boolean)),
-        enableColumnFilters &&
-            column.getCanFilter() &&
-            [
-                React__default["default"].createElement(MenuItem__default["default"], { disabled: !column.getFilterValue(), key: 0, onClick: handleClearFilter, sx: commonMenuItemStyles },
-                    React__default["default"].createElement(Box__default["default"], { sx: commonListItemStyles },
-                        React__default["default"].createElement(ListItemIcon__default["default"], null,
-                            React__default["default"].createElement(FilterListOffIcon, null)),
-                        localization.clearFilter)),
-                React__default["default"].createElement(MenuItem__default["default"], { disabled: showColumnFilters && !enableColumnFilterModes, divider: enableGrouping || enableHiding, key: 1, onClick: showColumnFilters
-                        ? handleOpenFilterModeMenu
-                        : handleFilterByColumn, sx: commonMenuItemStyles },
-                    React__default["default"].createElement(Box__default["default"], { sx: commonListItemStyles },
-                        React__default["default"].createElement(ListItemIcon__default["default"], null,
-                            React__default["default"].createElement(FilterListIcon, null)), (_g = localization.filterByColumn) === null || _g === void 0 ? void 0 :
-                        _g.replace('{column}', String(columnDef.header))),
-                    showFilterModeSubMenu && (React__default["default"].createElement(IconButton__default["default"], { onClick: handleOpenFilterModeMenu, onMouseEnter: handleOpenFilterModeMenu, size: "small", sx: { p: 0 } },
-                        React__default["default"].createElement(ArrowRightIcon, null)))),
-                showFilterModeSubMenu && (React__default["default"].createElement(MRT_FilterOptionMenu, { anchorEl: filterMenuAnchorEl, header: header, key: 2, onSelect: handleFilterByColumn, setAnchorEl: setFilterMenuAnchorEl, table: table })),
-            ].filter(Boolean),
-        enableGrouping &&
-            column.getCanGroup() && [
-            React__default["default"].createElement(MenuItem__default["default"], { divider: enablePinning, key: 0, onClick: handleGroupByColumn, sx: commonMenuItemStyles },
-                React__default["default"].createElement(Box__default["default"], { sx: commonListItemStyles },
-                    React__default["default"].createElement(ListItemIcon__default["default"], null,
-                        React__default["default"].createElement(DynamicFeedIcon, null)), (_h = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) === null || _h === void 0 ? void 0 :
-                    _h.replace('{column}', String(columnDef.header)))),
-        ],
-        enablePinning &&
-            column.getCanPin() && [
-            React__default["default"].createElement(MenuItem__default["default"], { disabled: column.getIsPinned() === 'left' || !column.getCanPin(), key: 0, onClick: () => handlePinColumn('left'), sx: commonMenuItemStyles },
-                React__default["default"].createElement(Box__default["default"], { sx: commonListItemStyles },
-                    React__default["default"].createElement(ListItemIcon__default["default"], null,
-                        React__default["default"].createElement(PushPinIcon, { style: { transform: 'rotate(90deg)' } })),
-                    localization.pinToLeft)),
-            React__default["default"].createElement(MenuItem__default["default"], { disabled: column.getIsPinned() === 'right' || !column.getCanPin(), key: 1, onClick: () => handlePinColumn('right'), sx: commonMenuItemStyles },
-                React__default["default"].createElement(Box__default["default"], { sx: commonListItemStyles },
-                    React__default["default"].createElement(ListItemIcon__default["default"], null,
-                        React__default["default"].createElement(PushPinIcon, { style: { transform: 'rotate(-90deg)' } })),
-                    localization.pinToRight)),
-            React__default["default"].createElement(MenuItem__default["default"], { disabled: !column.getIsPinned(), divider: enableHiding, key: 2, onClick: () => handlePinColumn(false), sx: commonMenuItemStyles },
-                React__default["default"].createElement(Box__default["default"], { sx: commonListItemStyles },
-                    React__default["default"].createElement(ListItemIcon__default["default"], null,
-                        React__default["default"].createElement(PushPinIcon, null)),
-                    localization.unpin)),
-        ],
-        enableColumnResizing &&
-            column.getCanResize() && [
-            React__default["default"].createElement(MenuItem__default["default"], { disabled: !columnSizing[column.id], key: 0, onClick: handleResetColumnSize, sx: commonMenuItemStyles },
-                React__default["default"].createElement(Box__default["default"], { sx: commonListItemStyles },
-                    React__default["default"].createElement(ListItemIcon__default["default"], null,
-                        React__default["default"].createElement(RestartAltIcon, null)),
-                    localization.resetColumnSize)),
-        ],
-        enableHiding && [
-            React__default["default"].createElement(MenuItem__default["default"], { disabled: !column.getCanHide(), key: 0, onClick: handleHideColumn, sx: commonMenuItemStyles },
-                React__default["default"].createElement(Box__default["default"], { sx: commonListItemStyles },
-                    React__default["default"].createElement(ListItemIcon__default["default"], null,
-                        React__default["default"].createElement(VisibilityOffIcon, null)), (_j = localization.hideColumn) === null || _j === void 0 ? void 0 :
-                    _j.replace('{column}', String(columnDef.header)))),
-            React__default["default"].createElement(MenuItem__default["default"], { disabled: !Object.values(columnVisibility).filter((visible) => !visible)
-                    .length, key: 1, onClick: handleShowAllColumns, sx: commonMenuItemStyles },
-                React__default["default"].createElement(Box__default["default"], { sx: commonListItemStyles },
-                    React__default["default"].createElement(ListItemIcon__default["default"], null,
-                        React__default["default"].createElement(ViewColumnIcon, null)), (_k = localization.showAllColumns) === null || _k === void 0 ? void 0 :
-                    _k.replace('{column}', String(columnDef.header)))),
-        ]));
+        } }, { children: [(_d = (_c = (_b = columnDef.renderColumnActionsMenuItems) === null || _b === void 0 ? void 0 : _b.call(columnDef, {
+                closeMenu: () => setAnchorEl(null),
+                column,
+                table,
+            })) !== null && _c !== void 0 ? _c : renderColumnActionsMenuItems === null || renderColumnActionsMenuItems === void 0 ? void 0 : renderColumnActionsMenuItems({
+                closeMenu: () => setAnchorEl(null),
+                column,
+                table,
+            })) !== null && _d !== void 0 ? _d : (enableSorting &&
+                column.getCanSort() &&
+                [
+                    enableSortingRemoval !== false && (jsxRuntime.jsx(MenuItem__default["default"], Object.assign({ disabled: !column.getIsSorted(), onClick: handleClearSort, sx: commonMenuItemStyles }, { children: jsxRuntime.jsxs(Box__default["default"], Object.assign({ sx: commonListItemStyles }, { children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(ClearAllIcon, {}) }), localization.clearSort] })) }), 0)),
+                    jsxRuntime.jsx(MenuItem__default["default"], Object.assign({ disabled: column.getIsSorted() === 'asc', onClick: handleSortAsc, sx: commonMenuItemStyles }, { children: jsxRuntime.jsxs(Box__default["default"], Object.assign({ sx: commonListItemStyles }, { children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(SortIcon, { style: { transform: 'rotate(180deg) scaleX(-1)' } }) }), (_e = localization.sortByColumnAsc) === null || _e === void 0 ? void 0 : _e.replace('{column}', String(columnDef.header))] })) }), 1),
+                    jsxRuntime.jsx(MenuItem__default["default"], Object.assign({ divider: enableColumnFilters || enableGrouping || enableHiding, disabled: column.getIsSorted() === 'desc', onClick: handleSortDesc, sx: commonMenuItemStyles }, { children: jsxRuntime.jsxs(Box__default["default"], Object.assign({ sx: commonListItemStyles }, { children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(SortIcon, {}) }), (_f = localization.sortByColumnDesc) === null || _f === void 0 ? void 0 : _f.replace('{column}', String(columnDef.header))] })) }), 2),
+                ].filter(Boolean)), enableColumnFilters &&
+                column.getCanFilter() &&
+                [
+                    jsxRuntime.jsx(MenuItem__default["default"], Object.assign({ disabled: !column.getFilterValue(), onClick: handleClearFilter, sx: commonMenuItemStyles }, { children: jsxRuntime.jsxs(Box__default["default"], Object.assign({ sx: commonListItemStyles }, { children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(FilterListOffIcon, {}) }), localization.clearFilter] })) }), 0),
+                    jsxRuntime.jsxs(MenuItem__default["default"], Object.assign({ disabled: showColumnFilters && !enableColumnFilterModes, divider: enableGrouping || enableHiding, onClick: showColumnFilters
+                            ? handleOpenFilterModeMenu
+                            : handleFilterByColumn, sx: commonMenuItemStyles }, { children: [jsxRuntime.jsxs(Box__default["default"], Object.assign({ sx: commonListItemStyles }, { children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(FilterListIcon, {}) }), (_g = localization.filterByColumn) === null || _g === void 0 ? void 0 : _g.replace('{column}', String(columnDef.header))] })), showFilterModeSubMenu && (jsxRuntime.jsx(IconButton__default["default"], Object.assign({ onClick: handleOpenFilterModeMenu, onMouseEnter: handleOpenFilterModeMenu, size: "small", sx: { p: 0 } }, { children: jsxRuntime.jsx(ArrowRightIcon, {}) })))] }), 1),
+                    showFilterModeSubMenu && (jsxRuntime.jsx(MRT_FilterOptionMenu, { anchorEl: filterMenuAnchorEl, header: header, onSelect: handleFilterByColumn, setAnchorEl: setFilterMenuAnchorEl, table: table }, 2)),
+                ].filter(Boolean), enableGrouping &&
+                column.getCanGroup() && [
+                jsxRuntime.jsx(MenuItem__default["default"], Object.assign({ divider: enablePinning, onClick: handleGroupByColumn, sx: commonMenuItemStyles }, { children: jsxRuntime.jsxs(Box__default["default"], Object.assign({ sx: commonListItemStyles }, { children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(DynamicFeedIcon, {}) }), (_h = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) === null || _h === void 0 ? void 0 : _h.replace('{column}', String(columnDef.header))] })) }), 0),
+            ], enablePinning &&
+                column.getCanPin() && [
+                jsxRuntime.jsx(MenuItem__default["default"], Object.assign({ disabled: column.getIsPinned() === 'left' || !column.getCanPin(), onClick: () => handlePinColumn('left'), sx: commonMenuItemStyles }, { children: jsxRuntime.jsxs(Box__default["default"], Object.assign({ sx: commonListItemStyles }, { children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(PushPinIcon, { style: { transform: 'rotate(90deg)' } }) }), localization.pinToLeft] })) }), 0),
+                jsxRuntime.jsx(MenuItem__default["default"], Object.assign({ disabled: column.getIsPinned() === 'right' || !column.getCanPin(), onClick: () => handlePinColumn('right'), sx: commonMenuItemStyles }, { children: jsxRuntime.jsxs(Box__default["default"], Object.assign({ sx: commonListItemStyles }, { children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(PushPinIcon, { style: { transform: 'rotate(-90deg)' } }) }), localization.pinToRight] })) }), 1),
+                jsxRuntime.jsx(MenuItem__default["default"], Object.assign({ disabled: !column.getIsPinned(), divider: enableHiding, onClick: () => handlePinColumn(false), sx: commonMenuItemStyles }, { children: jsxRuntime.jsxs(Box__default["default"], Object.assign({ sx: commonListItemStyles }, { children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(PushPinIcon, {}) }), localization.unpin] })) }), 2),
+            ], enableColumnResizing &&
+                column.getCanResize() && [
+                jsxRuntime.jsx(MenuItem__default["default"], Object.assign({ disabled: !columnSizing[column.id], onClick: handleResetColumnSize, sx: commonMenuItemStyles }, { children: jsxRuntime.jsxs(Box__default["default"], Object.assign({ sx: commonListItemStyles }, { children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(RestartAltIcon, {}) }), localization.resetColumnSize] })) }), 0),
+            ], enableHiding && [
+                jsxRuntime.jsx(MenuItem__default["default"], Object.assign({ disabled: !column.getCanHide(), onClick: handleHideColumn, sx: commonMenuItemStyles }, { children: jsxRuntime.jsxs(Box__default["default"], Object.assign({ sx: commonListItemStyles }, { children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(VisibilityOffIcon, {}) }), (_j = localization.hideColumn) === null || _j === void 0 ? void 0 : _j.replace('{column}', String(columnDef.header))] })) }), 0),
+                jsxRuntime.jsx(MenuItem__default["default"], Object.assign({ disabled: !Object.values(columnVisibility).filter((visible) => !visible)
+                        .length, onClick: handleShowAllColumns, sx: commonMenuItemStyles }, { children: jsxRuntime.jsxs(Box__default["default"], Object.assign({ sx: commonListItemStyles }, { children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(ViewColumnIcon, {}) }), (_k = localization.showAllColumns) === null || _k === void 0 ? void 0 : _k.replace('{column}', String(columnDef.header))] })) }), 1),
+            ]] })));
 };
 
 const MRT_RowActionMenu = ({ anchorEl, handleEdit, row, setAnchorEl, table, }) => {
     const { getState, options: { icons: { EditIcon }, enableEditing, localization, renderRowActionMenuItems, }, } = table;
     const { density } = getState();
-    return (React__default["default"].createElement(Menu__default["default"], { anchorEl: anchorEl, open: !!anchorEl, onClick: (event) => event.stopPropagation(), onClose: () => setAnchorEl(null), MenuListProps: {
+    return (jsxRuntime.jsxs(Menu__default["default"], Object.assign({ anchorEl: anchorEl, open: !!anchorEl, onClick: (event) => event.stopPropagation(), onClose: () => setAnchorEl(null), MenuListProps: {
             dense: density === 'compact',
-        } },
-        enableEditing instanceof Function
-            ? enableEditing(row)
-            : enableEditing && (React__default["default"].createElement(MenuItem__default["default"], { onClick: handleEdit, sx: commonMenuItemStyles },
-                React__default["default"].createElement(Box__default["default"], { sx: commonListItemStyles },
-                    React__default["default"].createElement(ListItemIcon__default["default"], null,
-                        React__default["default"].createElement(EditIcon, null)),
-                    localization.edit))), renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 :
-        renderRowActionMenuItems({
-            row,
-            table,
-            closeMenu: () => setAnchorEl(null),
-        })));
+        } }, { children: [enableEditing instanceof Function
+                ? enableEditing(row)
+                : enableEditing && (jsxRuntime.jsx(MenuItem__default["default"], Object.assign({ onClick: handleEdit, sx: commonMenuItemStyles }, { children: jsxRuntime.jsxs(Box__default["default"], Object.assign({ sx: commonListItemStyles }, { children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(EditIcon, {}) }), localization.edit] })) }))), renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 : renderRowActionMenuItems({
+                row,
+                table,
+                closeMenu: () => setAnchorEl(null),
+            })] })));
 };
 
 const MRT_EditActionButtons = ({ row, table, variant = 'icon', }) => {
@@ -962,15 +988,7 @@ const MRT_EditActionButtons = ({ row, table, variant = 'icon', }) => {
             values: (_b = editingRow === null || editingRow === void 0 ? void 0 : editingRow._valuesCache) !== null && _b !== void 0 ? _b : Object.assign({}, row.original),
         });
     };
-    return (React__default["default"].createElement(Box__default["default"], { onClick: (e) => e.stopPropagation(), sx: { display: 'flex', gap: '0.75rem' } }, variant === 'icon' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: localization.cancel },
-            React__default["default"].createElement(IconButton__default["default"], { "aria-label": localization.cancel, onClick: handleCancel },
-                React__default["default"].createElement(CancelIcon, null))),
-        React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: localization.save },
-            React__default["default"].createElement(IconButton__default["default"], { "aria-label": localization.save, color: "info", onClick: handleSave },
-                React__default["default"].createElement(SaveIcon, null))))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(Button__default["default"], { onClick: handleCancel }, localization.cancel),
-        React__default["default"].createElement(Button__default["default"], { onClick: handleSave, variant: "contained" }, localization.save)))));
+    return (jsxRuntime.jsx(Box__default["default"], Object.assign({ onClick: (e) => e.stopPropagation(), sx: { display: 'flex', gap: '0.75rem' } }, { children: variant === 'icon' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip__default["default"], Object.assign({ arrow: true, title: localization.cancel }, { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.cancel, onClick: handleCancel }, { children: jsxRuntime.jsx(CancelIcon, {}) })) })), jsxRuntime.jsx(Tooltip__default["default"], Object.assign({ arrow: true, title: localization.save }, { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.save, color: "info", onClick: handleSave }, { children: jsxRuntime.jsx(SaveIcon, {}) })) }))] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button__default["default"], Object.assign({ onClick: handleCancel }, { children: localization.cancel })), jsxRuntime.jsx(Button__default["default"], Object.assign({ onClick: handleSave, variant: "contained" }, { children: localization.save }))] })) })));
 };
 
 const commonIconButtonStyles = {
@@ -986,7 +1004,7 @@ const commonIconButtonStyles = {
 const MRT_ToggleRowActionMenuButton = ({ cell, row, table, }) => {
     const { getState, options: { editingMode, enableEditing, icons: { EditIcon, MoreHorizIcon }, localization, renderRowActionMenuItems, renderRowActions, }, setEditingRow, } = table;
     const { editingRow } = getState();
-    const [anchorEl, setAnchorEl] = React.useState(null);
+    const [anchorEl, setAnchorEl] = react.useState(null);
     const handleOpenRowActionMenu = (event) => {
         event.stopPropagation();
         event.preventDefault();
@@ -997,16 +1015,10 @@ const MRT_ToggleRowActionMenuButton = ({ cell, row, table, }) => {
         setEditingRow(Object.assign({}, row));
         setAnchorEl(null);
     };
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, renderRowActions ? (renderRowActions({ cell, row, table })) : row.id === (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) && editingMode === 'row' ? (React__default["default"].createElement(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems &&
-        (enableEditing instanceof Function
-            ? enableEditing(row)
-            : enableEditing) ? (React__default["default"].createElement(Tooltip__default["default"], { placement: "right", arrow: true, title: localization.edit },
-        React__default["default"].createElement(IconButton__default["default"], { "aria-label": localization.edit, sx: commonIconButtonStyles, onClick: handleStartEditMode },
-            React__default["default"].createElement(EditIcon, null)))) : renderRowActionMenuItems ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.rowActions },
-            React__default["default"].createElement(IconButton__default["default"], { "aria-label": localization.rowActions, onClick: handleOpenRowActionMenu, size: "small", sx: commonIconButtonStyles },
-                React__default["default"].createElement(MoreHorizIcon, null))),
-        React__default["default"].createElement(MRT_RowActionMenu, { anchorEl: anchorEl, handleEdit: handleStartEditMode, row: row, setAnchorEl: setAnchorEl, table: table }))) : null));
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderRowActions ? (renderRowActions({ cell, row, table })) : row.id === (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) && editingMode === 'row' ? (jsxRuntime.jsx(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems &&
+            (enableEditing instanceof Function
+                ? enableEditing(row)
+                : enableEditing) ? (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({ placement: "right", arrow: true, title: localization.edit }, { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.edit, sx: commonIconButtonStyles, onClick: handleStartEditMode }, { children: jsxRuntime.jsx(EditIcon, {}) })) }))) : renderRowActionMenuItems ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip__default["default"], Object.assign({ arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.rowActions }, { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.rowActions, onClick: handleOpenRowActionMenu, size: "small", sx: commonIconButtonStyles }, { children: jsxRuntime.jsx(MoreHorizIcon, {}) })) })), jsxRuntime.jsx(MRT_RowActionMenu, { anchorEl: anchorEl, handleEdit: handleStartEditMode, row: row, setAnchorEl: setAnchorEl, table: table })] })) : null }));
 };
 
 const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
@@ -1040,11 +1052,11 @@ const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
         }, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.5rem', width: density === 'compact' ? '1.75rem' : '2.5rem', m: density !== 'compact' ? '-0.4rem' : undefined }, ((checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx) instanceof Function
             ? checkboxProps.sx(theme)
             : checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx))), title: undefined });
-    return (React__default["default"].createElement(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _a !== void 0 ? _a : (selectAll
+    return (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({ arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _a !== void 0 ? _a : (selectAll
             ? localization.toggleSelectAll
-            : localization.toggleSelectRow) }, enableMultiRowSelection === false ? (React__default["default"].createElement(Radio__default["default"], Object.assign({}, commonProps))) : (React__default["default"].createElement(Checkbox__default["default"], Object.assign({ indeterminate: selectAll
-            ? table.getIsSomeRowsSelected() && !allRowsSelected
-            : row === null || row === void 0 ? void 0 : row.getIsSomeSelected() }, commonProps)))));
+            : localization.toggleSelectRow) }, { children: enableMultiRowSelection === false ? (jsxRuntime.jsx(Radio__default["default"], Object.assign({}, commonProps))) : (jsxRuntime.jsx(Checkbox__default["default"], Object.assign({ indeterminate: selectAll
+                ? table.getIsSomeRowsSelected() && !allRowsSelected
+                : row === null || row === void 0 ? void 0 : row.getIsSomeSelected() }, commonProps))) })));
 };
 
 const MRT_GlobalFilterTextField = ({ table, }) => {
@@ -1054,10 +1066,10 @@ const MRT_GlobalFilterTextField = ({ table, }) => {
     const textFieldProps = muiSearchTextFieldProps instanceof Function
         ? muiSearchTextFieldProps({ table })
         : muiSearchTextFieldProps;
-    const isMounted = React.useRef(false);
-    const [anchorEl, setAnchorEl] = React.useState(null);
-    const [searchValue, setSearchValue] = React.useState(globalFilter !== null && globalFilter !== void 0 ? globalFilter : '');
-    const handleChangeDebounced = React.useCallback(utils.debounce((event) => {
+    const isMounted = react.useRef(false);
+    const [anchorEl, setAnchorEl] = react.useState(null);
+    const [searchValue, setSearchValue] = react.useState(globalFilter !== null && globalFilter !== void 0 ? globalFilter : '');
+    const handleChangeDebounced = react.useCallback(utils.debounce((event) => {
         var _a;
         setGlobalFilter((_a = event.target.value) !== null && _a !== void 0 ? _a : undefined);
     }, manualFiltering ? 500 : 250), []);
@@ -1072,7 +1084,7 @@ const MRT_GlobalFilterTextField = ({ table, }) => {
         setSearchValue('');
         setGlobalFilter(undefined);
     };
-    React.useEffect(() => {
+    react.useEffect(() => {
         if (isMounted.current) {
             if (globalFilter === undefined) {
                 handleClear();
@@ -1083,24 +1095,15 @@ const MRT_GlobalFilterTextField = ({ table, }) => {
         }
         isMounted.current = true;
     }, [globalFilter]);
-    return (React__default["default"].createElement(Collapse__default["default"], { in: showGlobalFilter, orientation: "horizontal", unmountOnExit: true, mountOnEnter: true },
-        React__default["default"].createElement(TextField__default["default"], Object.assign({ placeholder: localization.search, onChange: handleChange, value: searchValue !== null && searchValue !== void 0 ? searchValue : '', variant: "standard", InputProps: {
-                startAdornment: enableGlobalFilterModes ? (React__default["default"].createElement(InputAdornment__default["default"], { position: "start" },
-                    React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: localization.changeSearchMode },
-                        React__default["default"].createElement(IconButton__default["default"], { "aria-label": localization.changeSearchMode, onClick: handleGlobalFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' } },
-                            React__default["default"].createElement(SearchIcon, null))))) : (React__default["default"].createElement(SearchIcon, { style: { marginRight: '4px' } })),
-                endAdornment: (React__default["default"].createElement(InputAdornment__default["default"], { position: "end" },
-                    React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: (_a = localization.clearSearch) !== null && _a !== void 0 ? _a : '' },
-                        React__default["default"].createElement("span", null,
-                            React__default["default"].createElement(IconButton__default["default"], { "aria-label": localization.clearSearch, disabled: !(searchValue === null || searchValue === void 0 ? void 0 : searchValue.length), onClick: handleClear, size: "small" },
-                                React__default["default"].createElement(CloseIcon, null)))))),
-            } }, textFieldProps, { inputRef: (inputRef) => {
-                searchInputRef.current = inputRef;
-                if (textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.inputRef) {
-                    textFieldProps.inputRef = inputRef;
-                }
-            } })),
-        React__default["default"].createElement(MRT_FilterOptionMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table, onSelect: handleClear })));
+    return (jsxRuntime.jsxs(Collapse__default["default"], Object.assign({ in: showGlobalFilter, orientation: "horizontal", unmountOnExit: true, mountOnEnter: true }, { children: [jsxRuntime.jsx(TextField__default["default"], Object.assign({ placeholder: localization.search, onChange: handleChange, value: searchValue !== null && searchValue !== void 0 ? searchValue : '', variant: "standard", InputProps: {
+                    startAdornment: enableGlobalFilterModes ? (jsxRuntime.jsx(InputAdornment__default["default"], Object.assign({ position: "start" }, { children: jsxRuntime.jsx(Tooltip__default["default"], Object.assign({ arrow: true, title: localization.changeSearchMode }, { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.changeSearchMode, onClick: handleGlobalFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' } }, { children: jsxRuntime.jsx(SearchIcon, {}) })) })) }))) : (jsxRuntime.jsx(SearchIcon, { style: { marginRight: '4px' } })),
+                    endAdornment: (jsxRuntime.jsx(InputAdornment__default["default"], Object.assign({ position: "end" }, { children: jsxRuntime.jsx(Tooltip__default["default"], Object.assign({ arrow: true, title: (_a = localization.clearSearch) !== null && _a !== void 0 ? _a : '' }, { children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.clearSearch, disabled: !(searchValue === null || searchValue === void 0 ? void 0 : searchValue.length), onClick: handleClear, size: "small" }, { children: jsxRuntime.jsx(CloseIcon, {}) })) }) })) }))),
+                } }, textFieldProps, { inputRef: (inputRef) => {
+                    searchInputRef.current = inputRef;
+                    if (textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.inputRef) {
+                        textFieldProps.inputRef = inputRef;
+                    }
+                } })), jsxRuntime.jsx(MRT_FilterOptionMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table, onSelect: handleClear })] })));
 };
 
 const MRT_LinearProgressBar = ({ isTopToolbar, table, }) => {
@@ -1109,13 +1112,12 @@ const MRT_LinearProgressBar = ({ isTopToolbar, table, }) => {
     const linearProgressProps = muiLinearProgressProps instanceof Function
         ? muiLinearProgressProps({ isTopToolbar, table })
         : muiLinearProgressProps;
-    return (React__default["default"].createElement(Collapse__default["default"], { in: isLoading || showProgressBars, mountOnEnter: true, unmountOnExit: true, sx: {
+    return (jsxRuntime.jsx(Collapse__default["default"], Object.assign({ in: isLoading || showProgressBars, mountOnEnter: true, unmountOnExit: true, sx: {
             bottom: isTopToolbar ? 0 : undefined,
             position: 'absolute',
             top: !isTopToolbar ? 0 : undefined,
             width: '100%',
-        } },
-        React__default["default"].createElement(LinearProgress__default["default"], Object.assign({ "aria-label": "Loading", "aria-busy": "true", sx: { position: 'relative' } }, linearProgressProps))));
+        } }, { children: jsxRuntime.jsx(LinearProgress__default["default"], Object.assign({ "aria-label": "Loading", "aria-busy": "true", sx: { position: 'relative' } }, linearProgressProps)) })));
 };
 
 const MRT_TablePagination = ({ table, position = 'bottom', }) => {
@@ -1129,7 +1131,7 @@ const MRT_TablePagination = ({ table, position = 'bottom', }) => {
     const handleChangeRowsPerPage = (event) => {
         setPageSize(+event.target.value);
     };
-    return (React__default["default"].createElement(TablePagination__default["default"], Object.assign({ component: "div", count: totalRowCount, getItemAriaLabel: (type) => type === 'first'
+    return (jsxRuntime.jsx(TablePagination__default["default"], Object.assign({ component: "div", count: totalRowCount, getItemAriaLabel: (type) => type === 'first'
             ? localization.goToFirstPage
             : type === 'last'
                 ? localization.goToLastPage
@@ -1170,27 +1172,14 @@ const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, }) => {
     const selectMessage = getSelectedRowModel().rows.length > 0
         ? (_b = (_a = localization.selectedCountOfRowCountRowsSelected) === null || _a === void 0 ? void 0 : _a.replace('{selectedCount}', getSelectedRowModel().rows.length.toString())) === null || _b === void 0 ? void 0 : _b.replace('{rowCount}', (rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length).toString())
         : null;
-    const groupedByMessage = grouping.length > 0 ? (React__default["default"].createElement("span", null,
-        localization.groupedBy,
-        ' ',
-        grouping.map((columnId, index) => (React__default["default"].createElement(React.Fragment, { key: `${index}-${columnId}` },
-            index > 0 ? localization.thenBy : '',
-            React__default["default"].createElement(Chip__default["default"], Object.assign({ label: table.getColumn(columnId).columnDef.header, onDelete: () => table.getColumn(columnId).toggleGrouping() }, chipProps))))))) : null;
-    return (React__default["default"].createElement(Collapse__default["default"], { in: showAlertBanner || !!selectMessage || !!groupedByMessage, timeout: stackAlertBanner ? 200 : 0 },
-        React__default["default"].createElement(Alert__default["default"], Object.assign({ color: "info", icon: false }, alertProps, { sx: (theme) => (Object.assign({ borderRadius: 0, fontSize: '1rem', left: 0, p: 0, position: 'relative', mb: stackAlertBanner
+    const groupedByMessage = grouping.length > 0 ? (jsxRuntime.jsxs("span", { children: [localization.groupedBy, ' ', grouping.map((columnId, index) => (jsxRuntime.jsxs(react.Fragment, { children: [index > 0 ? localization.thenBy : '', jsxRuntime.jsx(Chip__default["default"], Object.assign({ label: table.getColumn(columnId).columnDef.header, onDelete: () => table.getColumn(columnId).toggleGrouping() }, chipProps))] }, `${index}-${columnId}`)))] })) : null;
+    return (jsxRuntime.jsx(Collapse__default["default"], Object.assign({ in: showAlertBanner || !!selectMessage || !!groupedByMessage, timeout: stackAlertBanner ? 200 : 0 }, { children: jsxRuntime.jsxs(Alert__default["default"], Object.assign({ color: "info", icon: false }, alertProps, { sx: (theme) => (Object.assign({ borderRadius: 0, fontSize: '1rem', left: 0, p: 0, position: 'relative', mb: stackAlertBanner
                     ? 0
                     : positionToolbarAlertBanner === 'bottom'
                         ? '-1rem'
                         : undefined, right: 0, top: 0, width: '100%', zIndex: 2 }, ((alertProps === null || alertProps === void 0 ? void 0 : alertProps.sx) instanceof Function
                 ? alertProps.sx(theme)
-                : alertProps === null || alertProps === void 0 ? void 0 : alertProps.sx))) }),
-            (alertProps === null || alertProps === void 0 ? void 0 : alertProps.title) && React__default["default"].createElement(AlertTitle__default["default"], null, alertProps.title),
-            React__default["default"].createElement(Box__default["default"], { sx: { p: '0.5rem 1rem' } }, alertProps === null || alertProps === void 0 ? void 0 :
-                alertProps.children,
-                (alertProps === null || alertProps === void 0 ? void 0 : alertProps.children) && (selectMessage || groupedByMessage) && (React__default["default"].createElement("br", null)),
-                selectMessage,
-                selectMessage && groupedByMessage && React__default["default"].createElement("br", null),
-                groupedByMessage))));
+                : alertProps === null || alertProps === void 0 ? void 0 : alertProps.sx))) }, { children: [(alertProps === null || alertProps === void 0 ? void 0 : alertProps.title) && jsxRuntime.jsx(AlertTitle__default["default"], { children: alertProps.title }), jsxRuntime.jsxs(Box__default["default"], Object.assign({ sx: { p: '0.5rem 1rem' } }, { children: [alertProps === null || alertProps === void 0 ? void 0 : alertProps.children, (alertProps === null || alertProps === void 0 ? void 0 : alertProps.children) && (selectMessage || groupedByMessage) && (jsxRuntime.jsx("br", {})), selectMessage, selectMessage && groupedByMessage && jsxRuntime.jsx("br", {}), groupedByMessage] }))] })) })));
 };
 
 const MRT_FullScreenToggleButton = (_a) => {
@@ -1201,8 +1190,7 @@ const MRT_FullScreenToggleButton = (_a) => {
     const handleToggleFullScreen = () => {
         setIsFullScreen(!isFullScreen);
     };
-    return (React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleFullScreen },
-        React__default["default"].createElement(IconButton__default["default"], Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleFullScreen }, rest, { title: undefined }), isFullScreen ? React__default["default"].createElement(FullscreenExitIcon, null) : React__default["default"].createElement(FullscreenIcon, null))));
+    return (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({ arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleFullScreen }, { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleFullScreen }, rest, { title: undefined }, { children: isFullScreen ? jsxRuntime.jsx(FullscreenExitIcon, {}) : jsxRuntime.jsx(FullscreenIcon, {}) })) })));
 };
 
 const MRT_ColumnPinningButtons = ({ column, table, }) => {
@@ -1210,26 +1198,17 @@ const MRT_ColumnPinningButtons = ({ column, table, }) => {
     const handlePinColumn = (pinDirection) => {
         column.pin(pinDirection);
     };
-    return (React__default["default"].createElement(Box__default["default"], { sx: { minWidth: '70px', textAlign: 'center' } }, column.getIsPinned() ? (React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: localization.unpin },
-        React__default["default"].createElement(IconButton__default["default"], { onClick: () => handlePinColumn(false), size: "small" },
-            React__default["default"].createElement(PushPinIcon, null)))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: localization.pinToLeft },
-            React__default["default"].createElement(IconButton__default["default"], { onClick: () => handlePinColumn('left'), size: "small" },
-                React__default["default"].createElement(PushPinIcon, { style: {
-                        transform: 'rotate(90deg)',
-                    } }))),
-        React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: localization.pinToRight },
-            React__default["default"].createElement(IconButton__default["default"], { onClick: () => handlePinColumn('right'), size: "small" },
-                React__default["default"].createElement(PushPinIcon, { style: {
-                        transform: 'rotate(-90deg)',
-                    } })))))));
+    return (jsxRuntime.jsx(Box__default["default"], Object.assign({ sx: { minWidth: '70px', textAlign: 'center' } }, { children: column.getIsPinned() ? (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({ arrow: true, title: localization.unpin }, { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ onClick: () => handlePinColumn(false), size: "small" }, { children: jsxRuntime.jsx(PushPinIcon, {}) })) }))) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip__default["default"], Object.assign({ arrow: true, title: localization.pinToLeft }, { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ onClick: () => handlePinColumn('left'), size: "small" }, { children: jsxRuntime.jsx(PushPinIcon, { style: {
+                                transform: 'rotate(90deg)',
+                            } }) })) })), jsxRuntime.jsx(Tooltip__default["default"], Object.assign({ arrow: true, title: localization.pinToRight }, { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ onClick: () => handlePinColumn('right'), size: "small" }, { children: jsxRuntime.jsx(PushPinIcon, { style: {
+                                transform: 'rotate(-90deg)',
+                            } }) })) }))] })) })));
 };
 
 const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table, }) => {
     var _a;
     const { options: { icons: { DragHandleIcon }, localization, }, } = table;
-    return (React__default["default"].createElement(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.move },
-        React__default["default"].createElement(IconButton__default["default"], Object.assign({ disableRipple: true, draggable: "true", size: "small" }, iconButtonProps, { onClick: (e) => {
+    return (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({ arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.move }, { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ disableRipple: true, draggable: "true", size: "small" }, iconButtonProps, { onClick: (e) => {
                 var _a;
                 e.stopPropagation();
                 (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, e);
@@ -1240,8 +1219,7 @@ const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table,
                     cursor: 'grabbing',
                 } }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
                 ? iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx(theme)
-                : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }),
-            React__default["default"].createElement(DragHandleIcon, null))));
+                : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }, { children: jsxRuntime.jsx(DragHandleIcon, {}) })) })));
 };
 
 const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredColumn, column, table, }) => {
@@ -1264,8 +1242,8 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredCol
             column.toggleVisibility();
         }
     };
-    const menuItemRef = React.useRef(null);
-    const [isDragging, setIsDragging] = React.useState(false);
+    const menuItemRef = react.useRef(null);
+    const [isDragging, setIsDragging] = react.useState(false);
     const handleDragStart = (e) => {
         setIsDragging(true);
         e.dataTransfer.setDragImage(menuItemRef.current, 0, 0);
@@ -1282,42 +1260,35 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredCol
             setHoveredColumn(column);
         }
     };
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(MenuItem__default["default"], { disableRipple: true, ref: menuItemRef, onDragEnter: handleDragEnter, sx: (theme) => ({
-                alignItems: 'center',
-                justifyContent: 'flex-start',
-                my: 0,
-                opacity: isDragging ? 0.5 : 1,
-                outlineOffset: '-2px',
-                outline: isDragging
-                    ? `2px dashed ${theme.palette.divider}`
-                    : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
-                        ? `2px dashed ${theme.palette.primary.main}`
-                        : 'none',
-                pl: `${(column.depth + 0.5) * 2}rem`,
-                py: '6px',
-            }) },
-            React__default["default"].createElement(Box__default["default"], { sx: {
-                    display: 'flex',
-                    flexWrap: 'nowrap',
-                    gap: '8px',
-                } },
-                columnDefType !== 'group' &&
-                    enableColumnOrdering &&
-                    !allColumns.some((col) => col.columnDef.columnDefType === 'group') &&
-                    (columnDef.enableColumnOrdering !== false ? (React__default["default"].createElement(MRT_GrabHandleButton, { onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table })) : (React__default["default"].createElement(Box__default["default"], { sx: { width: '28px' } }))),
-                enablePinning &&
-                    (column.getCanPin() ? (React__default["default"].createElement(MRT_ColumnPinningButtons, { column: column, table: table })) : (React__default["default"].createElement(Box__default["default"], { sx: { width: '70px' } }))),
-                enableHiding ? (React__default["default"].createElement(FormControlLabel__default["default"], { componentsProps: {
-                        typography: {
-                            sx: {
-                                mb: 0,
-                                opacity: columnDefType !== 'display' ? 1 : 0.5,
-                            },
-                        },
-                    }, checked: switchChecked, control: React__default["default"].createElement(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.toggleVisibility },
-                        React__default["default"].createElement(Switch__default["default"], null)), disabled: !column.getCanHide(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (React__default["default"].createElement(Typography__default["default"], { sx: { alignSelf: 'center' } }, columnDef.header)))), (_a = column.columns) === null || _a === void 0 ? void 0 :
-        _a.map((c, i) => (React__default["default"].createElement(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: c, hoveredColumn: hoveredColumn, key: `${i}-${c.id}`, setHoveredColumn: setHoveredColumn, table: table })))));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuItem__default["default"], Object.assign({ disableRipple: true, ref: menuItemRef, onDragEnter: handleDragEnter, sx: (theme) => ({
+                    alignItems: 'center',
+                    justifyContent: 'flex-start',
+                    my: 0,
+                    opacity: isDragging ? 0.5 : 1,
+                    outlineOffset: '-2px',
+                    outline: isDragging
+                        ? `2px dashed ${theme.palette.divider}`
+                        : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
+                            ? `2px dashed ${theme.palette.primary.main}`
+                            : 'none',
+                    pl: `${(column.depth + 0.5) * 2}rem`,
+                    py: '6px',
+                }) }, { children: jsxRuntime.jsxs(Box__default["default"], Object.assign({ sx: {
+                        display: 'flex',
+                        flexWrap: 'nowrap',
+                        gap: '8px',
+                    } }, { children: [columnDefType !== 'group' &&
+                            enableColumnOrdering &&
+                            !allColumns.some((col) => col.columnDef.columnDefType === 'group') &&
+                            (columnDef.enableColumnOrdering !== false ? (jsxRuntime.jsx(MRT_GrabHandleButton, { onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table })) : (jsxRuntime.jsx(Box__default["default"], { sx: { width: '28px' } }))), enablePinning &&
+                            (column.getCanPin() ? (jsxRuntime.jsx(MRT_ColumnPinningButtons, { column: column, table: table })) : (jsxRuntime.jsx(Box__default["default"], { sx: { width: '70px' } }))), enableHiding ? (jsxRuntime.jsx(FormControlLabel__default["default"], { componentsProps: {
+                                typography: {
+                                    sx: {
+                                        mb: 0,
+                                        opacity: columnDefType !== 'display' ? 1 : 0.5,
+                                    },
+                                },
+                            }, checked: switchChecked, control: jsxRuntime.jsx(Tooltip__default["default"], Object.assign({ arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.toggleVisibility }, { children: jsxRuntime.jsx(Switch__default["default"], {}) })), disabled: !column.getCanHide(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (jsxRuntime.jsx(Typography__default["default"], Object.assign({ sx: { alignSelf: 'center' } }, { children: columnDef.header })))] })) })), (_a = column.columns) === null || _a === void 0 ? void 0 : _a.map((c, i) => (jsxRuntime.jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: c, hoveredColumn: hoveredColumn, setHoveredColumn: setHoveredColumn, table: table }, `${i}-${c.id}`)))] }));
 };
 
 const MRT_ShowHideColumnsMenu = ({ anchorEl, setAnchorEl, table, }) => {
@@ -1328,7 +1299,7 @@ const MRT_ShowHideColumnsMenu = ({ anchorEl, setAnchorEl, table, }) => {
             .filter((col) => col.columnDef.enableHiding !== false)
             .forEach((col) => col.toggleVisibility(false));
     };
-    const allColumns = React.useMemo(() => {
+    const allColumns = react.useMemo(() => {
         const columns = getAllColumns();
         if (columnOrder.length > 0 &&
             !columns.some((col) => col.columnDef.columnDefType === 'group')) {
@@ -1347,37 +1318,26 @@ const MRT_ShowHideColumnsMenu = ({ anchorEl, setAnchorEl, table, }) => {
         getLeftLeafColumns(),
         getRightLeafColumns(),
     ]);
-    const [hoveredColumn, setHoveredColumn] = React.useState(null);
-    return (React__default["default"].createElement(Menu__default["default"], { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
+    const [hoveredColumn, setHoveredColumn] = react.useState(null);
+    return (jsxRuntime.jsxs(Menu__default["default"], Object.assign({ anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
             dense: density === 'compact',
-        } },
-        React__default["default"].createElement(Box__default["default"], { sx: {
-                display: 'flex',
-                justifyContent: 'space-between',
-                p: '0.5rem',
-                pt: 0,
-            } },
-            enableHiding && (React__default["default"].createElement(Button__default["default"], { disabled: !getIsSomeColumnsVisible(), onClick: hideAllColumns }, localization.hideAll)),
-            enableColumnOrdering && (React__default["default"].createElement(Button__default["default"], { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options)) }, localization.resetOrder)),
-            enablePinning && (React__default["default"].createElement(Button__default["default"], { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true) }, localization.unpinAll)),
-            enableHiding && (React__default["default"].createElement(Button__default["default"], { disabled: getIsAllColumnsVisible(), onClick: () => toggleAllColumnsVisible(true) }, localization.showAll))),
-        React__default["default"].createElement(Divider__default["default"], null),
-        allColumns.map((column, index) => (React__default["default"].createElement(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, key: `${index}-${column.id}`, setHoveredColumn: setHoveredColumn, table: table })))));
+        } }, { children: [jsxRuntime.jsxs(Box__default["default"], Object.assign({ sx: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    p: '0.5rem',
+                    pt: 0,
+                } }, { children: [enableHiding && (jsxRuntime.jsx(Button__default["default"], Object.assign({ disabled: !getIsSomeColumnsVisible(), onClick: hideAllColumns }, { children: localization.hideAll }))), enableColumnOrdering && (jsxRuntime.jsx(Button__default["default"], Object.assign({ onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options)) }, { children: localization.resetOrder }))), enablePinning && (jsxRuntime.jsx(Button__default["default"], Object.assign({ disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true) }, { children: localization.unpinAll }))), enableHiding && (jsxRuntime.jsx(Button__default["default"], Object.assign({ disabled: getIsAllColumnsVisible(), onClick: () => toggleAllColumnsVisible(true) }, { children: localization.showAll })))] })), jsxRuntime.jsx(Divider__default["default"], {}), allColumns.map((column, index) => (jsxRuntime.jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, setHoveredColumn: setHoveredColumn, table: table }, `${index}-${column.id}`)))] })));
 };
 
 const MRT_ShowHideColumnsButton = (_a) => {
     var _b;
     var { table } = _a, rest = __rest(_a, ["table"]);
     const { options: { icons: { ViewColumnIcon }, localization, }, } = table;
-    const [anchorEl, setAnchorEl] = React.useState(null);
+    const [anchorEl, setAnchorEl] = react.useState(null);
     const handleClick = (event) => {
         setAnchorEl(event.currentTarget);
     };
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideColumns },
-            React__default["default"].createElement(IconButton__default["default"], Object.assign({ "aria-label": localization.showHideColumns, onClick: handleClick }, rest, { title: undefined }),
-                React__default["default"].createElement(ViewColumnIcon, null))),
-        anchorEl && (React__default["default"].createElement(MRT_ShowHideColumnsMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table }))));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip__default["default"], Object.assign({ arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideColumns }, { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.showHideColumns, onClick: handleClick }, rest, { title: undefined }, { children: jsxRuntime.jsx(ViewColumnIcon, {}) })) })), anchorEl && (jsxRuntime.jsx(MRT_ShowHideColumnsMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table }))] }));
 };
 
 const MRT_ToggleDensePaddingButton = (_a) => {
@@ -1393,8 +1353,7 @@ const MRT_ToggleDensePaddingButton = (_a) => {
                 : 'comfortable';
         setDensity(nextDensity);
     };
-    return (React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleDensity },
-        React__default["default"].createElement(IconButton__default["default"], Object.assign({ "aria-label": localization.toggleDensity, onClick: handleToggleDensePadding }, rest, { title: undefined }), density === 'compact' ? (React__default["default"].createElement(DensitySmallIcon, null)) : density === 'comfortable' ? (React__default["default"].createElement(DensityMediumIcon, null)) : (React__default["default"].createElement(DensityLargeIcon, null)))));
+    return (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({ arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleDensity }, { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.toggleDensity, onClick: handleToggleDensePadding }, rest, { title: undefined }, { children: density === 'compact' ? (jsxRuntime.jsx(DensitySmallIcon, {})) : density === 'comfortable' ? (jsxRuntime.jsx(DensityMediumIcon, {})) : (jsxRuntime.jsx(DensityLargeIcon, {})) })) })));
 };
 
 const MRT_ToggleFiltersButton = (_a) => {
@@ -1405,8 +1364,7 @@ const MRT_ToggleFiltersButton = (_a) => {
     const handleToggleShowFilters = () => {
         setShowColumnFilters(!showColumnFilters);
     };
-    return (React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideFilters },
-        React__default["default"].createElement(IconButton__default["default"], Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleShowFilters }, rest, { title: undefined }), showColumnFilters ? React__default["default"].createElement(FilterListOffIcon, null) : React__default["default"].createElement(FilterListIcon, null))));
+    return (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({ arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideFilters }, { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleShowFilters }, rest, { title: undefined }, { children: showColumnFilters ? jsxRuntime.jsx(FilterListOffIcon, {}) : jsxRuntime.jsx(FilterListIcon, {}) })) })));
 };
 
 const MRT_ToggleGlobalFilterButton = (_a) => {
@@ -1418,27 +1376,21 @@ const MRT_ToggleGlobalFilterButton = (_a) => {
         setShowGlobalFilter(!showGlobalFilter);
         queueMicrotask(() => { var _a; return (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
     };
-    return (React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideSearch },
-        React__default["default"].createElement(IconButton__default["default"], Object.assign({ "aria-label": (_c = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _c !== void 0 ? _c : localization.showHideSearch, disabled: !!globalFilter, onClick: handleToggleSearch }, rest, { title: undefined }), showGlobalFilter ? React__default["default"].createElement(SearchOffIcon, null) : React__default["default"].createElement(SearchIcon, null))));
+    return (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({ arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideSearch }, { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": (_c = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _c !== void 0 ? _c : localization.showHideSearch, disabled: !!globalFilter, onClick: handleToggleSearch }, rest, { title: undefined }, { children: showGlobalFilter ? jsxRuntime.jsx(SearchOffIcon, {}) : jsxRuntime.jsx(SearchIcon, {}) })) })));
 };
 
 const MRT_ToolbarInternalButtons = ({ table, }) => {
     var _a;
     const { options: { enableColumnFilters, enableColumnOrdering, enableDensityToggle, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, enablePinning, initialState, renderToolbarInternalActions, }, } = table;
-    return (React__default["default"].createElement(Box__default["default"], { sx: {
+    return (jsxRuntime.jsx(Box__default["default"], Object.assign({ sx: {
             alignItems: 'center',
             display: 'flex',
             zIndex: 3,
-        } }, (_a = renderToolbarInternalActions === null || renderToolbarInternalActions === void 0 ? void 0 : renderToolbarInternalActions({
-        table,
-    })) !== null && _a !== void 0 ? _a : (React__default["default"].createElement(React__default["default"].Fragment, null,
-        enableFilters &&
-            enableGlobalFilter &&
-            !(initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) && (React__default["default"].createElement(MRT_ToggleGlobalFilterButton, { table: table })),
-        enableFilters && enableColumnFilters && (React__default["default"].createElement(MRT_ToggleFiltersButton, { table: table })),
-        (enableHiding || enableColumnOrdering || enablePinning) && (React__default["default"].createElement(MRT_ShowHideColumnsButton, { table: table })),
-        enableDensityToggle && (React__default["default"].createElement(MRT_ToggleDensePaddingButton, { table: table })),
-        enableFullScreenToggle && (React__default["default"].createElement(MRT_FullScreenToggleButton, { table: table }))))));
+        } }, { children: (_a = renderToolbarInternalActions === null || renderToolbarInternalActions === void 0 ? void 0 : renderToolbarInternalActions({
+            table,
+        })) !== null && _a !== void 0 ? _a : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [enableFilters &&
+                    enableGlobalFilter &&
+                    !(initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) && (jsxRuntime.jsx(MRT_ToggleGlobalFilterButton, { table: table })), enableFilters && enableColumnFilters && (jsxRuntime.jsx(MRT_ToggleFiltersButton, { table: table })), (enableHiding || enableColumnOrdering || enablePinning) && (jsxRuntime.jsx(MRT_ShowHideColumnsButton, { table: table })), enableDensityToggle && (jsxRuntime.jsx(MRT_ToggleDensePaddingButton, { table: table })), enableFullScreenToggle && (jsxRuntime.jsx(MRT_FullScreenToggleButton, { table: table }))] })) })));
 };
 
 const MRT_ToolbarDropZone = ({ table, }) => {
@@ -1448,7 +1400,7 @@ const MRT_ToolbarDropZone = ({ table, }) => {
     const handleDragEnter = (_event) => {
         setHoveredColumn({ id: 'drop-zone' });
     };
-    React.useEffect(() => {
+    react.useEffect(() => {
         var _a;
         if (((_a = table.options.state) === null || _a === void 0 ? void 0 : _a.showToolbarDropZone) !== undefined) {
             setShowToolbarDropZone(!!enableGrouping &&
@@ -1457,8 +1409,7 @@ const MRT_ToolbarDropZone = ({ table, }) => {
                 !grouping.includes(draggingColumn.id));
         }
     }, [enableGrouping, draggingColumn, grouping]);
-    return (React__default["default"].createElement(Fade__default["default"], { in: showToolbarDropZone },
-        React__default["default"].createElement(Box__default["default"], { className: "Mui-ToolbarDropZone", sx: (theme) => ({
+    return (jsxRuntime.jsx(Fade__default["default"], Object.assign({ in: showToolbarDropZone }, { children: jsxRuntime.jsx(Box__default["default"], Object.assign({ className: "Mui-ToolbarDropZone", sx: (theme) => ({
                 alignItems: 'center',
                 backgroundColor: styles.alpha(theme.palette.info.main, (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone' ? 0.2 : 0.1),
                 backdropFilter: 'blur(4px)',
@@ -1470,8 +1421,7 @@ const MRT_ToolbarDropZone = ({ table, }) => {
                 position: 'absolute',
                 width: '100%',
                 zIndex: 4,
-            }), onDragEnter: handleDragEnter },
-            React__default["default"].createElement(Typography__default["default"], { fontStyle: "italic" }, localization.dropToGroupBy.replace('{column}', (_b = (_a = draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.columnDef) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : '')))));
+            }), onDragEnter: handleDragEnter }, { children: jsxRuntime.jsx(Typography__default["default"], Object.assign({ fontStyle: "italic" }, { children: localization.dropToGroupBy.replace('{column}', (_b = (_a = draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.columnDef) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : '') })) })) })));
 };
 
 const commonToolbarStyles = ({ theme }) => ({
@@ -1495,7 +1445,7 @@ const MRT_TopToolbar = ({ table, }) => {
         ? muiTopToolbarProps({ table })
         : muiTopToolbarProps;
     const stackAlertBanner = isMobile || !!renderTopToolbarCustomActions || showGlobalFilter;
-    return (React__default["default"].createElement(Toolbar__default["default"], Object.assign({ variant: "dense" }, toolbarProps, { ref: (ref) => {
+    return (jsxRuntime.jsxs(Toolbar__default["default"], Object.assign({ variant: "dense" }, toolbarProps, { ref: (ref) => {
             topToolbarRef.current = ref;
             if (toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.ref) {
                 // @ts-ignore
@@ -1503,32 +1453,23 @@ const MRT_TopToolbar = ({ table, }) => {
             }
         }, sx: (theme) => (Object.assign(Object.assign({ position: isFullScreen ? 'sticky' : undefined, top: isFullScreen ? '0' : undefined }, commonToolbarStyles({ theme })), ((toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx) instanceof Function
             ? toolbarProps.sx(theme)
-            : toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx))) }),
-        positionToolbarAlertBanner === 'top' && (React__default["default"].createElement(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })),
-        ['both', 'top'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (React__default["default"].createElement(MRT_ToolbarDropZone, { table: table })),
-        React__default["default"].createElement(Box__default["default"], { sx: {
-                alignItems: 'flex-start',
-                boxSizing: 'border-box',
-                display: 'flex',
-                justifyContent: 'space-between',
-                p: '0.5rem',
-                position: stackAlertBanner ? 'relative' : 'absolute',
-                right: 0,
-                top: 0,
-                width: '100%',
-            } },
-            enableGlobalFilter && positionGlobalFilter === 'left' && (React__default["default"].createElement(MRT_GlobalFilterTextField, { table: table })), (_a = renderTopToolbarCustomActions === null || renderTopToolbarCustomActions === void 0 ? void 0 : renderTopToolbarCustomActions({ table })) !== null && _a !== void 0 ? _a : React__default["default"].createElement("span", null),
-            enableToolbarInternalActions ? (React__default["default"].createElement(Box__default["default"], { sx: {
+            : toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx))) }, { children: [positionToolbarAlertBanner === 'top' && (jsxRuntime.jsx(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })), ['both', 'top'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (jsxRuntime.jsx(MRT_ToolbarDropZone, { table: table })), jsxRuntime.jsxs(Box__default["default"], Object.assign({ sx: {
+                    alignItems: 'flex-start',
+                    boxSizing: 'border-box',
                     display: 'flex',
-                    flexWrap: 'wrap-reverse',
-                    justifyContent: 'flex-end',
-                } },
-                enableGlobalFilter && positionGlobalFilter === 'right' && (React__default["default"].createElement(MRT_GlobalFilterTextField, { table: table })),
-                React__default["default"].createElement(MRT_ToolbarInternalButtons, { table: table }))) : (enableGlobalFilter &&
-                positionGlobalFilter === 'right' && (React__default["default"].createElement(MRT_GlobalFilterTextField, { table: table })))),
-        enablePagination &&
-            ['top', 'both'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (React__default["default"].createElement(MRT_TablePagination, { table: table, position: "top" })),
-        React__default["default"].createElement(MRT_LinearProgressBar, { isTopToolbar: true, table: table })));
+                    justifyContent: 'space-between',
+                    p: '0.5rem',
+                    position: stackAlertBanner ? 'relative' : 'absolute',
+                    right: 0,
+                    top: 0,
+                    width: '100%',
+                } }, { children: [enableGlobalFilter && positionGlobalFilter === 'left' && (jsxRuntime.jsx(MRT_GlobalFilterTextField, { table: table })), (_a = renderTopToolbarCustomActions === null || renderTopToolbarCustomActions === void 0 ? void 0 : renderTopToolbarCustomActions({ table })) !== null && _a !== void 0 ? _a : jsxRuntime.jsx("span", {}), enableToolbarInternalActions ? (jsxRuntime.jsxs(Box__default["default"], Object.assign({ sx: {
+                            display: 'flex',
+                            flexWrap: 'wrap-reverse',
+                            justifyContent: 'flex-end',
+                        } }, { children: [enableGlobalFilter && positionGlobalFilter === 'right' && (jsxRuntime.jsx(MRT_GlobalFilterTextField, { table: table })), jsxRuntime.jsx(MRT_ToolbarInternalButtons, { table: table })] }))) : (enableGlobalFilter &&
+                        positionGlobalFilter === 'right' && (jsxRuntime.jsx(MRT_GlobalFilterTextField, { table: table })))] })), enablePagination &&
+                ['top', 'both'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (jsxRuntime.jsx(MRT_TablePagination, { table: table, position: "top" })), jsxRuntime.jsx(MRT_LinearProgressBar, { isTopToolbar: true, table: table })] })));
 };
 
 const MRT_BottomToolbar = ({ table, }) => {
@@ -1539,7 +1480,7 @@ const MRT_BottomToolbar = ({ table, }) => {
         ? muiBottomToolbarProps({ table })
         : muiBottomToolbarProps;
     const stackAlertBanner = isMobile || !!renderBottomToolbarCustomActions;
-    return (React__default["default"].createElement(Toolbar__default["default"], Object.assign({ variant: "dense" }, toolbarProps, { ref: (node) => {
+    return (jsxRuntime.jsxs(Toolbar__default["default"], Object.assign({ variant: "dense" }, toolbarProps, { ref: (node) => {
             if (node) {
                 bottomToolbarRef.current = node;
                 if (toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.ref) {
@@ -1549,27 +1490,21 @@ const MRT_BottomToolbar = ({ table, }) => {
             }
         }, sx: (theme) => (Object.assign(Object.assign(Object.assign({}, commonToolbarStyles({ theme })), { bottom: isFullScreen ? '0' : undefined, boxShadow: `0 1px 2px -1px ${styles.alpha(theme.palette.common.black, 0.1)} inset`, left: 0, position: isFullScreen ? 'fixed' : 'relative', right: 0 }), ((toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx) instanceof Function
             ? toolbarProps.sx(theme)
-            : toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx))) }),
-        React__default["default"].createElement(MRT_LinearProgressBar, { isTopToolbar: false, table: table }),
-        positionToolbarAlertBanner === 'bottom' && (React__default["default"].createElement(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })),
-        ['both', 'bottom'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (React__default["default"].createElement(MRT_ToolbarDropZone, { table: table })),
-        React__default["default"].createElement(Box__default["default"], { sx: {
-                alignItems: 'center',
-                boxSizing: 'border-box',
-                display: 'flex',
-                justifyContent: 'space-between',
-                p: '0.5rem',
-                width: '100%',
-            } },
-            renderBottomToolbarCustomActions ? (renderBottomToolbarCustomActions({ table })) : (React__default["default"].createElement("span", null)),
-            React__default["default"].createElement(Box__default["default"], { sx: {
+            : toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx))) }, { children: [jsxRuntime.jsx(MRT_LinearProgressBar, { isTopToolbar: false, table: table }), positionToolbarAlertBanner === 'bottom' && (jsxRuntime.jsx(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })), ['both', 'bottom'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (jsxRuntime.jsx(MRT_ToolbarDropZone, { table: table })), jsxRuntime.jsxs(Box__default["default"], Object.assign({ sx: {
+                    alignItems: 'center',
+                    boxSizing: 'border-box',
                     display: 'flex',
-                    justifyContent: 'flex-end',
-                    position: stackAlertBanner ? 'relative' : 'absolute',
-                    right: 0,
-                    top: 0,
-                } }, enablePagination &&
-                ['bottom', 'both'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (React__default["default"].createElement(MRT_TablePagination, { table: table, position: "bottom" }))))));
+                    justifyContent: 'space-between',
+                    p: '0.5rem',
+                    width: '100%',
+                } }, { children: [renderBottomToolbarCustomActions ? (renderBottomToolbarCustomActions({ table })) : (jsxRuntime.jsx("span", {})), jsxRuntime.jsx(Box__default["default"], Object.assign({ sx: {
+                            display: 'flex',
+                            justifyContent: 'flex-end',
+                            position: stackAlertBanner ? 'relative' : 'absolute',
+                            right: 0,
+                            top: 0,
+                        } }, { children: enablePagination &&
+                            ['bottom', 'both'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (jsxRuntime.jsx(MRT_TablePagination, { table: table, position: "bottom" })) }))] }))] })));
 };
 
 const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
@@ -1577,7 +1512,7 @@ const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
     const { options: { icons: { MoreVertIcon }, localization, muiTableHeadCellColumnActionsButtonProps, }, } = table;
     const { column } = header;
     const { columnDef } = column;
-    const [anchorEl, setAnchorEl] = React.useState(null);
+    const [anchorEl, setAnchorEl] = react.useState(null);
     const handleClick = (event) => {
         event.stopPropagation();
         event.preventDefault();
@@ -1593,15 +1528,11 @@ const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
         })
         : columnDef.muiTableHeadCellColumnActionsButtonProps;
     const iconButtonProps = Object.assign(Object.assign({}, mTableHeadCellColumnActionsButtonProps), mcTableHeadCellColumnActionsButtonProps);
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.columnActions },
-            React__default["default"].createElement(IconButton__default["default"], Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ height: '2rem', m: '-8px -4px', opacity: 0.5, transform: 'scale(0.85) translateX(-4px)', transition: 'opacity 150ms', width: '2rem', '&:hover': {
-                        opacity: 1,
-                    } }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
-                    ? iconButtonProps.sx(theme)
-                    : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }),
-                React__default["default"].createElement(MoreVertIcon, null))),
-        anchorEl && (React__default["default"].createElement(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table }))));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip__default["default"], Object.assign({ arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.columnActions }, { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ height: '2rem', m: '-8px -4px', opacity: 0.5, transform: 'scale(0.85) translateX(-4px)', transition: 'opacity 150ms', width: '2rem', '&:hover': {
+                            opacity: 1,
+                        } }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
+                        ? iconButtonProps.sx(theme)
+                        : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }, { children: jsxRuntime.jsx(MoreVertIcon, {}) })) })), anchorEl && (jsxRuntime.jsx(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table }))] }));
 };
 
 const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
@@ -1648,8 +1579,8 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
         !rangeFilterIndex &&
         (allowedColumnFilterOptions === undefined ||
             !!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length));
-    const [anchorEl, setAnchorEl] = React.useState(null);
-    const [filterValue, setFilterValue] = React.useState(() => {
+    const [anchorEl, setAnchorEl] = react.useState(null);
+    const [filterValue, setFilterValue] = react.useState(() => {
         var _a, _b;
         return isMultiSelectFilter
             ? column.getFilterValue() || []
@@ -1657,7 +1588,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                 ? ((_a = column.getFilterValue()) === null || _a === void 0 ? void 0 : _a[rangeFilterIndex]) || []
                 : (_b = column.getFilterValue()) !== null && _b !== void 0 ? _b : '';
     });
-    const handleChangeDebounced = React.useCallback(utils.debounce((event) => {
+    const handleChangeDebounced = react.useCallback(utils.debounce((event) => {
         const value = textFieldProps.type === 'date'
             ? event.target.valueAsDate
             : textFieldProps.type === 'number'
@@ -1707,8 +1638,8 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
     const handleFilterMenuOpen = (event) => {
         setAnchorEl(event.currentTarget);
     };
-    const isMounted = React.useRef(false);
-    React.useEffect(() => {
+    const isMounted = react.useRef(false);
+    react.useEffect(() => {
         if (isMounted.current) {
             const filterValue = column.getFilterValue();
             if (filterValue === undefined) {
@@ -1724,100 +1655,83 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
         isMounted.current = true;
     }, [column.getFilterValue()]);
     if (columnDef.Filter) {
-        return (React__default["default"].createElement(React__default["default"].Fragment, null, (_f = columnDef.Filter) === null || _f === void 0 ? void 0 : _f.call(columnDef, { column, header, rangeFilterIndex, table })));
+        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (_f = columnDef.Filter) === null || _f === void 0 ? void 0 : _f.call(columnDef, { column, header, rangeFilterIndex, table }) }));
     }
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(TextField__default["default"], Object.assign({ fullWidth: true, inputProps: {
-                disabled: !!filterChipLabel,
-                sx: {
-                    textOverflow: 'ellipsis',
-                    width: filterChipLabel ? 0 : undefined,
-                },
-                title: filterPlaceholder,
-            }, helperText: showChangeModeButton ? (React__default["default"].createElement("label", null, localization.filterMode.replace('{filterType}', 
-            // @ts-ignore
-            localization[`filter${((_g = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _g === void 0 ? void 0 : _g.toUpperCase()) +
-                (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]))) : null, FormHelperTextProps: {
-                sx: {
-                    fontSize: '0.75rem',
-                    lineHeight: '0.8rem',
-                    whiteSpace: 'nowrap',
-                },
-            }, margin: "none", placeholder: filterChipLabel || isSelectFilter || isMultiSelectFilter
-                ? undefined
-                : filterPlaceholder, onChange: handleChange, onClick: (e) => e.stopPropagation(), select: isSelectFilter || isMultiSelectFilter, value: filterValue !== null && filterValue !== void 0 ? filterValue : '', variant: "standard", InputProps: {
-                startAdornment: showChangeModeButton ? (React__default["default"].createElement(InputAdornment__default["default"], { position: "start" },
-                    React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: localization.changeFilterMode },
-                        React__default["default"].createElement("span", null,
-                            React__default["default"].createElement(IconButton__default["default"], { "aria-label": localization.changeFilterMode, onClick: handleFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' } },
-                                React__default["default"].createElement(FilterListIcon, null)))),
-                    filterChipLabel && (React__default["default"].createElement(Chip__default["default"], { onDelete: handleClearEmptyFilterChip, label: filterChipLabel })))) : null,
-                endAdornment: !filterChipLabel && (React__default["default"].createElement(InputAdornment__default["default"], { position: "end" },
-                    React__default["default"].createElement(Tooltip__default["default"], { arrow: true, placement: "right", title: (_h = localization.clearFilter) !== null && _h !== void 0 ? _h : '' },
-                        React__default["default"].createElement("span", null,
-                            React__default["default"].createElement(IconButton__default["default"], { "aria-label": localization.clearFilter, disabled: !((_j = filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString()) === null || _j === void 0 ? void 0 : _j.length), onClick: handleClear, size: "small", sx: {
-                                    height: '1.75rem',
-                                    width: '1.75rem',
-                                } },
-                                React__default["default"].createElement(CloseIcon, null)))))),
-            }, SelectProps: {
-                displayEmpty: true,
-                multiple: isMultiSelectFilter,
-                renderValue: isMultiSelectFilter
-                    ? (selected) => !(selected === null || selected === void 0 ? void 0 : selected.length) ? (React__default["default"].createElement(Box__default["default"], { sx: { opacity: 0.5 } }, filterPlaceholder)) : (React__default["default"].createElement(Box__default["default"], { sx: { display: 'flex', flexWrap: 'wrap', gap: '2px' } }, selected === null || selected === void 0 ? void 0 : selected.map((value) => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(TextField__default["default"], Object.assign({ fullWidth: true, inputProps: {
+                    disabled: !!filterChipLabel,
+                    sx: {
+                        textOverflow: 'ellipsis',
+                        width: filterChipLabel ? 0 : undefined,
+                    },
+                    title: filterPlaceholder,
+                }, helperText: showChangeModeButton ? (jsxRuntime.jsx("label", { children: localization.filterMode.replace('{filterType}', 
+                    // @ts-ignore
+                    localization[`filter${((_g = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _g === void 0 ? void 0 : _g.toUpperCase()) +
+                        (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]) })) : null, FormHelperTextProps: {
+                    sx: {
+                        fontSize: '0.75rem',
+                        lineHeight: '0.8rem',
+                        whiteSpace: 'nowrap',
+                    },
+                }, margin: "none", placeholder: filterChipLabel || isSelectFilter || isMultiSelectFilter
+                    ? undefined
+                    : filterPlaceholder, onChange: handleChange, onClick: (e) => e.stopPropagation(), select: isSelectFilter || isMultiSelectFilter, value: filterValue !== null && filterValue !== void 0 ? filterValue : '', variant: "standard", InputProps: {
+                    startAdornment: showChangeModeButton ? (jsxRuntime.jsxs(InputAdornment__default["default"], Object.assign({ position: "start" }, { children: [jsxRuntime.jsx(Tooltip__default["default"], Object.assign({ arrow: true, title: localization.changeFilterMode }, { children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.changeFilterMode, onClick: handleFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' } }, { children: jsxRuntime.jsx(FilterListIcon, {}) })) }) })), filterChipLabel && (jsxRuntime.jsx(Chip__default["default"], { onDelete: handleClearEmptyFilterChip, label: filterChipLabel }))] }))) : null,
+                    endAdornment: !filterChipLabel && (jsxRuntime.jsx(InputAdornment__default["default"], Object.assign({ position: "end" }, { children: jsxRuntime.jsx(Tooltip__default["default"], Object.assign({ arrow: true, placement: "right", title: (_h = localization.clearFilter) !== null && _h !== void 0 ? _h : '' }, { children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.clearFilter, disabled: !((_j = filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString()) === null || _j === void 0 ? void 0 : _j.length), onClick: handleClear, size: "small", sx: {
+                                        height: '1.75rem',
+                                        width: '1.75rem',
+                                    } }, { children: jsxRuntime.jsx(CloseIcon, {}) })) }) })) }))),
+                }, SelectProps: {
+                    displayEmpty: true,
+                    multiple: isMultiSelectFilter,
+                    renderValue: isMultiSelectFilter
+                        ? (selected) => !(selected === null || selected === void 0 ? void 0 : selected.length) ? (jsxRuntime.jsx(Box__default["default"], Object.assign({ sx: { opacity: 0.5 } }, { children: filterPlaceholder }))) : (jsxRuntime.jsx(Box__default["default"], Object.assign({ sx: { display: 'flex', flexWrap: 'wrap', gap: '2px' } }, { children: selected === null || selected === void 0 ? void 0 : selected.map((value) => {
+                                var _a;
+                                const selectedValue = (_a = columnDef.filterSelectOptions) === null || _a === void 0 ? void 0 : _a.find((option) => option instanceof Object
+                                    ? option.value === value
+                                    : option === value);
+                                return (jsxRuntime.jsx(Chip__default["default"], { label: selectedValue instanceof Object
+                                        ? selectedValue.text
+                                        : selectedValue }, value));
+                            }) })))
+                        : undefined,
+                } }, textFieldProps, { inputRef: (inputRef) => {
+                    filterInputRefs.current[`${column.id}-${rangeFilterIndex !== null && rangeFilterIndex !== void 0 ? rangeFilterIndex : 0}`] =
+                        inputRef;
+                    if (textFieldProps.inputRef) {
+                        textFieldProps.inputRef = inputRef;
+                    }
+                }, sx: (theme) => (Object.assign({ p: 0, minWidth: isRangeFilter
+                        ? '100px'
+                        : !filterChipLabel
+                            ? '120px'
+                            : 'auto', width: 'calc(100% + 4px)', mx: '-2px', '& .MuiSelect-icon': {
+                        mr: '1.5rem',
+                    } }, ((textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx) instanceof Function
+                    ? textFieldProps.sx(theme)
+                    : textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx))) }, { children: [(isSelectFilter || isMultiSelectFilter) && (jsxRuntime.jsx(MenuItem__default["default"], Object.assign({ divider: true, disabled: true, hidden: true, value: "" }, { children: jsxRuntime.jsx(Box__default["default"], Object.assign({ sx: { opacity: 0.5 } }, { children: filterPlaceholder })) }))), (_k = textFieldProps.children) !== null && _k !== void 0 ? _k : (_l = columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterSelectOptions) === null || _l === void 0 ? void 0 : _l.map((option) => {
                         var _a;
-                        const selectedValue = (_a = columnDef.filterSelectOptions) === null || _a === void 0 ? void 0 : _a.find((option) => option instanceof Object
-                            ? option.value === value
-                            : option === value);
-                        return (React__default["default"].createElement(Chip__default["default"], { key: value, label: selectedValue instanceof Object
-                                ? selectedValue.text
-                                : selectedValue }));
-                    })))
-                    : undefined,
-            } }, textFieldProps, { inputRef: (inputRef) => {
-                filterInputRefs.current[`${column.id}-${rangeFilterIndex !== null && rangeFilterIndex !== void 0 ? rangeFilterIndex : 0}`] =
-                    inputRef;
-                if (textFieldProps.inputRef) {
-                    textFieldProps.inputRef = inputRef;
-                }
-            }, sx: (theme) => (Object.assign({ p: 0, minWidth: isRangeFilter
-                    ? '100px'
-                    : !filterChipLabel
-                        ? '120px'
-                        : 'auto', width: 'calc(100% + 4px)', mx: '-2px', '& .MuiSelect-icon': {
-                    mr: '1.5rem',
-                } }, ((textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx) instanceof Function
-                ? textFieldProps.sx(theme)
-                : textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx))) }),
-            (isSelectFilter || isMultiSelectFilter) && (React__default["default"].createElement(MenuItem__default["default"], { divider: true, disabled: true, hidden: true, value: "" },
-                React__default["default"].createElement(Box__default["default"], { sx: { opacity: 0.5 } }, filterPlaceholder))), (_k = textFieldProps.children) !== null && _k !== void 0 ? _k : (_l = columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterSelectOptions) === null || _l === void 0 ? void 0 : _l.map((option) => {
-            var _a;
-            let value;
-            let text;
-            if (typeof option !== 'object') {
-                value = option;
-                text = option;
-            }
-            else {
-                value = option.value;
-                text = option.text;
-            }
-            return (React__default["default"].createElement(MenuItem__default["default"], { key: value, sx: {
-                    display: 'flex',
-                    m: 0,
-                    alignItems: 'center',
-                    gap: '0.5rem',
-                }, value: value },
-                isMultiSelectFilter && (React__default["default"].createElement(Checkbox__default["default"], { checked: ((_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : []).includes(value), sx: { mr: '0.5rem' } })),
-                text));
-        })),
-        React__default["default"].createElement(MRT_FilterOptionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table, setFilterValue: setFilterValue })));
+                        let value;
+                        let text;
+                        if (typeof option !== 'object') {
+                            value = option;
+                            text = option;
+                        }
+                        else {
+                            value = option.value;
+                            text = option.text;
+                        }
+                        return (jsxRuntime.jsxs(MenuItem__default["default"], Object.assign({ sx: {
+                                display: 'flex',
+                                m: 0,
+                                alignItems: 'center',
+                                gap: '0.5rem',
+                            }, value: value }, { children: [isMultiSelectFilter && (jsxRuntime.jsx(Checkbox__default["default"], { checked: ((_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : []).includes(value), sx: { mr: '0.5rem' } })), text] }), value));
+                    })] })), jsxRuntime.jsx(MRT_FilterOptionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table, setFilterValue: setFilterValue })] }));
 };
 
 const MRT_FilterRangeFields = ({ header, table }) => {
-    return (React__default["default"].createElement(Box__default["default"], { sx: { display: 'grid', gridTemplateColumns: '6fr 6fr', gap: '1rem' } },
-        React__default["default"].createElement(MRT_FilterTextField, { header: header, rangeFilterIndex: 0, table: table }),
-        React__default["default"].createElement(MRT_FilterTextField, { header: header, rangeFilterIndex: 1, table: table })));
+    return (jsxRuntime.jsxs(Box__default["default"], Object.assign({ sx: { display: 'grid', gridTemplateColumns: '6fr 6fr', gap: '1rem' } }, { children: [jsxRuntime.jsx(MRT_FilterTextField, { header: header, rangeFilterIndex: 0, table: table }), jsxRuntime.jsx(MRT_FilterTextField, { header: header, rangeFilterIndex: 1, table: table })] })));
 };
 
 const MRT_FilterCheckbox = ({ column, table }) => {
@@ -1839,8 +1753,7 @@ const MRT_FilterCheckbox = ({ column, table }) => {
         : columnDef.muiTableHeadCellFilterCheckboxProps;
     const checkboxProps = Object.assign(Object.assign({}, mTableHeadCellFilterCheckboxProps), mcTableHeadCellFilterCheckboxProps);
     const filterLabel = (_a = localization.filterByColumn) === null || _a === void 0 ? void 0 : _a.replace('{column}', columnDef.header);
-    return (React__default["default"].createElement(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_b = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _b !== void 0 ? _b : filterLabel },
-        React__default["default"].createElement(FormControlLabel__default["default"], { control: React__default["default"].createElement(Checkbox__default["default"], Object.assign({ checked: column.getFilterValue() === 'true', indeterminate: column.getFilterValue() === undefined, color: column.getFilterValue() === undefined ? 'default' : 'primary', size: density === 'compact' ? 'small' : 'medium' }, checkboxProps, { onClick: (e) => {
+    return (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({ arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_b = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _b !== void 0 ? _b : filterLabel }, { children: jsxRuntime.jsx(FormControlLabel__default["default"], { control: jsxRuntime.jsx(Checkbox__default["default"], Object.assign({ checked: column.getFilterValue() === 'true', indeterminate: column.getFilterValue() === undefined, color: column.getFilterValue() === undefined ? 'default' : 'primary', size: density === 'compact' ? 'small' : 'medium' }, checkboxProps, { onClick: (e) => {
                     var _a;
                     e.stopPropagation();
                     (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onClick) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e);
@@ -1854,7 +1767,7 @@ const MRT_FilterCheckbox = ({ column, table }) => {
                     (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onChange) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e, checked);
                 }, sx: (theme) => (Object.assign({ height: '2.5rem', width: '2.5rem' }, ((checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx) instanceof Function
                     ? checkboxProps.sx(theme)
-                    : checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx))) })), disableTypography: true, label: (_c = checkboxProps.title) !== null && _c !== void 0 ? _c : filterLabel, sx: { color: 'text.secondary', mt: '-4px', fontWeight: 'normal' }, title: undefined })));
+                    : checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx))) })), disableTypography: true, label: (_c = checkboxProps.title) !== null && _c !== void 0 ? _c : filterLabel, sx: { color: 'text.secondary', mt: '-4px', fontWeight: 'normal' }, title: undefined }) })));
 };
 
 const MRT_TableHeadCellFilterContainer = ({ header, table }) => {
@@ -1862,8 +1775,8 @@ const MRT_TableHeadCellFilterContainer = ({ header, table }) => {
     const { showColumnFilters } = getState();
     const { column } = header;
     const { columnDef } = column;
-    return (React__default["default"].createElement(Collapse__default["default"], { in: showColumnFilters, mountOnEnter: true, unmountOnExit: true }, columnDef.filterVariant === 'checkbox' ? (React__default["default"].createElement(MRT_FilterCheckbox, { column: column, table: table })) : columnDef.filterVariant === 'range' ||
-        ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn) ? (React__default["default"].createElement(MRT_FilterRangeFields, { header: header, table: table })) : (React__default["default"].createElement(MRT_FilterTextField, { header: header, table: table }))));
+    return (jsxRuntime.jsx(Collapse__default["default"], Object.assign({ in: showColumnFilters, mountOnEnter: true, unmountOnExit: true }, { children: columnDef.filterVariant === 'checkbox' ? (jsxRuntime.jsx(MRT_FilterCheckbox, { column: column, table: table })) : columnDef.filterVariant === 'range' ||
+            ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn) ? (jsxRuntime.jsx(MRT_FilterRangeFields, { header: header, table: table })) : (jsxRuntime.jsx(MRT_FilterTextField, { header: header, table: table })) })));
 };
 
 const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
@@ -1884,12 +1797,9 @@ const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
         ? column.getFilterValue().join(`" ${isRangeFilter ? localization.and : localization.or} "`)
         : column.getFilterValue()}"`)
         .replace('" "', '');
-    return (React__default["default"].createElement(Grow__default["default"], { unmountOnExit: true, in: (!!column.getFilterValue() && !isRangeFilter) ||
+    return (jsxRuntime.jsx(Grow__default["default"], Object.assign({ unmountOnExit: true, in: (!!column.getFilterValue() && !isRangeFilter) ||
             (isRangeFilter && // @ts-ignore
-                (!!((_b = column.getFilterValue()) === null || _b === void 0 ? void 0 : _b[0]) || !!((_c = column.getFilterValue()) === null || _c === void 0 ? void 0 : _c[1]))) },
-        React__default["default"].createElement(Box__default["default"], { component: "span", sx: { flex: '0 0' } },
-            React__default["default"].createElement(Tooltip__default["default"], { arrow: true, placement: "top", title: filterTooltip },
-                React__default["default"].createElement(IconButton__default["default"], { disableRipple: true, onClick: (event) => {
+                (!!((_b = column.getFilterValue()) === null || _b === void 0 ? void 0 : _b[0]) || !!((_c = column.getFilterValue()) === null || _c === void 0 ? void 0 : _c[1]))) }, { children: jsxRuntime.jsx(Box__default["default"], Object.assign({ component: "span", sx: { flex: '0 0' } }, { children: jsxRuntime.jsx(Tooltip__default["default"], Object.assign({ arrow: true, placement: "top", title: filterTooltip }, { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ disableRipple: true, onClick: (event) => {
                         setShowColumnFilters(true);
                         queueMicrotask(() => {
                             var _a, _b;
@@ -1904,8 +1814,7 @@ const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
                         p: '2px',
                         transform: 'scale(0.66)',
                         width: '12px',
-                    } },
-                    React__default["default"].createElement(FilterAltIcon, null))))));
+                    } }, { children: jsxRuntime.jsx(FilterAltIcon, {}) })) })) })) })));
 };
 
 const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, }) => {
@@ -1939,7 +1848,7 @@ const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, }) => {
         setDraggingColumn(null);
         setHoveredColumn(null);
     };
-    return (React__default["default"].createElement(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragStart: handleDragStart, onDragEnd: handleDragEnd, table: table }));
+    return (jsxRuntime.jsx(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragStart: handleDragStart, onDragEnd: handleDragEnd, table: table }));
 };
 
 const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
@@ -1947,7 +1856,7 @@ const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
     const { getState, options: { columnResizeMode }, setColumnSizingInfo, } = table;
     const { density } = getState();
     const { column } = header;
-    return (React__default["default"].createElement(Box__default["default"], { className: "Mui-TableHeadCell-ResizeHandle-Wrapper", onDoubleClick: () => {
+    return (jsxRuntime.jsx(Box__default["default"], Object.assign({ className: "Mui-TableHeadCell-ResizeHandle-Wrapper", onDoubleClick: () => {
             setColumnSizingInfo((old) => (Object.assign(Object.assign({}, old), { isResizingColumn: false })));
             column.resetSize();
         }, onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), sx: (theme) => ({
@@ -1964,8 +1873,7 @@ const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
             transform: column.getIsResizing() && columnResizeMode === 'onEnd'
                 ? `translateX(${(_a = getState().columnSizingInfo.deltaOffset) !== null && _a !== void 0 ? _a : 0}px)`
                 : undefined,
-        } },
-        React__default["default"].createElement(Divider__default["default"], { className: "Mui-TableHeadCell-ResizeHandle-Divider", flexItem: true, orientation: "vertical", sx: {
+        } }, { children: jsxRuntime.jsx(Divider__default["default"], { className: "Mui-TableHeadCell-ResizeHandle-Divider", flexItem: true, orientation: "vertical", sx: {
                 borderRadius: '2px',
                 borderWidth: '2px',
                 height: '24px',
@@ -1975,7 +1883,7 @@ const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
                     : 'all 150ms ease-in-out',
                 userSelect: 'none',
                 zIndex: 4,
-            } })));
+            } }) })));
 };
 
 const MRT_TableHeadCellSortLabel = ({ header, table, tableCellProps, }) => {
@@ -1988,9 +1896,7 @@ const MRT_TableHeadCellSortLabel = ({ header, table, tableCellProps, }) => {
             ? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
             : localization.sortedByColumnAsc.replace('{column}', columnDef.header)
         : localization.unsorted;
-    return (React__default["default"].createElement(Tooltip__default["default"], { arrow: true, placement: "top", title: sortTooltip },
-        React__default["default"].createElement(Badge__default["default"], { badgeContent: sorting.length > 1 ? column.getSortIndex() + 1 : 0, overlap: "circular" },
-            React__default["default"].createElement(TableSortLabel__default["default"], { "aria-label": sortTooltip, active: !!column.getIsSorted(), direction: column.getIsSorted()
+    return (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({ arrow: true, placement: "top", title: sortTooltip }, { children: jsxRuntime.jsx(Badge__default["default"], Object.assign({ badgeContent: sorting.length > 1 ? column.getSortIndex() + 1 : 0, overlap: "circular" }, { children: jsxRuntime.jsx(TableSortLabel__default["default"], { "aria-label": sortTooltip, active: !!column.getIsSorted(), direction: column.getIsSorted()
                     ? column.getIsSorted()
                     : undefined, sx: {
                     flex: '0 0',
@@ -2002,7 +1908,7 @@ const MRT_TableHeadCellSortLabel = ({ header, table, tableCellProps, }) => {
                     var _a;
                     e.stopPropagation();
                     (_a = header.column.getToggleSortingHandler()) === null || _a === void 0 ? void 0 : _a(e);
-                } }))));
+                } }) })) })));
 };
 
 const MRT_TableHeadCell = ({ header, table }) => {
@@ -2029,7 +1935,7 @@ const MRT_TableHeadCell = ({ header, table }) => {
             (enableGrouping &&
                 columnDef.enableGrouping !== false &&
                 !grouping.includes(column.id)));
-    const headerPL = React.useMemo(() => {
+    const headerPL = react.useMemo(() => {
         let pl = 0;
         if (column.getCanSort())
             pl++;
@@ -2039,7 +1945,7 @@ const MRT_TableHeadCell = ({ header, table }) => {
             pl += 1.25;
         return pl;
     }, [showColumnActions, showDragHandle]);
-    const draggingBorder = React.useMemo(() => (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
+    const draggingBorder = react.useMemo(() => (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
         ? `1px dashed ${theme.palette.text.secondary}`
         : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
             ? `2px dashed ${theme.palette.primary.main}`
@@ -2066,7 +1972,7 @@ const MRT_TableHeadCell = ({ header, table }) => {
             table,
         })
         : (_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.Header) !== null && _b !== void 0 ? _b : columnDef.header;
-    return (React__default["default"].createElement(TableCell__default["default"], Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: header.colSpan, onDragEnter: handleDragEnter, ref: (node) => {
+    return (jsxRuntime.jsxs(TableCell__default["default"], Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: header.colSpan, onDragEnter: handleDragEnter, ref: (node) => {
             if (node) {
                 tableHeadCellRefs.current[column.id] = node;
             }
@@ -2096,49 +2002,39 @@ const MRT_TableHeadCell = ({ header, table }) => {
             table,
             tableCellProps,
             theme,
-        })), draggingBorders)) }),
-        header.isPlaceholder ? null : (React__default["default"].createElement(Box__default["default"], { className: "Mui-TableHeadCell-Content", sx: {
-                alignItems: 'center',
-                display: 'flex',
-                flexDirection: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'right' ? 'row-reverse' : 'row',
-                justifyContent: columnDefType === 'group' || (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'center'
-                    ? 'center'
-                    : column.getCanResize()
-                        ? 'space-between'
-                        : 'flex-start',
-                position: 'relative',
-                width: '100%',
-            } },
-            React__default["default"].createElement(Box__default["default"], { className: "Mui-TableHeadCell-Content-Labels", onClick: column.getToggleSortingHandler(), sx: {
+        })), draggingBorders)) }, { children: [header.isPlaceholder ? null : (jsxRuntime.jsxs(Box__default["default"], Object.assign({ className: "Mui-TableHeadCell-Content", sx: {
                     alignItems: 'center',
-                    cursor: column.getCanSort() && columnDefType !== 'group'
-                        ? 'pointer'
-                        : undefined,
                     display: 'flex',
                     flexDirection: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'right' ? 'row-reverse' : 'row',
-                    overflow: columnDefType === 'data' ? 'hidden' : undefined,
-                    pl: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'center'
-                        ? `${headerPL}rem`
-                        : undefined,
-                } },
-                React__default["default"].createElement(Box__default["default"], { className: "Mui-TableHeadCell-Content-Wrapper", sx: {
-                        minWidth: `${Math.min((_d = (_c = columnDef.header) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0, 5)}ch`,
-                        overflow: columnDefType === 'data' ? 'hidden' : undefined,
-                        textOverflow: 'ellipsis',
-                        whiteSpace: ((_g = (_f = columnDef.header) === null || _f === void 0 ? void 0 : _f.length) !== null && _g !== void 0 ? _g : 0) < 20 ? 'nowrap' : 'normal',
-                        '&:hover': {
-                            textOverflow: 'clip',
-                        },
-                    }, title: columnDefType === 'data' ? columnDef.header : undefined }, headerElement),
-                column.getCanSort() && (React__default["default"].createElement(MRT_TableHeadCellSortLabel, { header: header, table: table, tableCellProps: tableCellProps })),
-                column.getCanFilter() && (React__default["default"].createElement(MRT_TableHeadCellFilterLabel, { header: header, table: table }))),
-            columnDefType !== 'group' && (React__default["default"].createElement(Box__default["default"], { className: "Mui-TableHeadCell-Content-Actions", sx: { whiteSpace: 'nowrap' } },
-                showDragHandle && (React__default["default"].createElement(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: {
-                        current: tableHeadCellRefs.current[column.id],
-                    } })),
-                showColumnActions && (React__default["default"].createElement(MRT_TableHeadCellColumnActionsButton, { header: header, table: table })))),
-            column.getCanResize() && (React__default["default"].createElement(MRT_TableHeadCellResizeHandle, { header: header, table: table })))),
-        column.getCanFilter() && (React__default["default"].createElement(MRT_TableHeadCellFilterContainer, { header: header, table: table }))));
+                    justifyContent: columnDefType === 'group' || (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'center'
+                        ? 'center'
+                        : column.getCanResize()
+                            ? 'space-between'
+                            : 'flex-start',
+                    position: 'relative',
+                    width: '100%',
+                } }, { children: [jsxRuntime.jsxs(Box__default["default"], Object.assign({ className: "Mui-TableHeadCell-Content-Labels", onClick: column.getToggleSortingHandler(), sx: {
+                            alignItems: 'center',
+                            cursor: column.getCanSort() && columnDefType !== 'group'
+                                ? 'pointer'
+                                : undefined,
+                            display: 'flex',
+                            flexDirection: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'right' ? 'row-reverse' : 'row',
+                            overflow: columnDefType === 'data' ? 'hidden' : undefined,
+                            pl: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'center'
+                                ? `${headerPL}rem`
+                                : undefined,
+                        } }, { children: [jsxRuntime.jsx(Box__default["default"], Object.assign({ className: "Mui-TableHeadCell-Content-Wrapper", sx: {
+                                    minWidth: `${Math.min((_d = (_c = columnDef.header) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0, 5)}ch`,
+                                    overflow: columnDefType === 'data' ? 'hidden' : undefined,
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: ((_g = (_f = columnDef.header) === null || _f === void 0 ? void 0 : _f.length) !== null && _g !== void 0 ? _g : 0) < 20 ? 'nowrap' : 'normal',
+                                    '&:hover': {
+                                        textOverflow: 'clip',
+                                    },
+                                }, title: columnDefType === 'data' ? columnDef.header : undefined }, { children: headerElement })), column.getCanSort() && (jsxRuntime.jsx(MRT_TableHeadCellSortLabel, { header: header, table: table, tableCellProps: tableCellProps })), column.getCanFilter() && (jsxRuntime.jsx(MRT_TableHeadCellFilterLabel, { header: header, table: table }))] })), columnDefType !== 'group' && (jsxRuntime.jsxs(Box__default["default"], Object.assign({ className: "Mui-TableHeadCell-Content-Actions", sx: { whiteSpace: 'nowrap' } }, { children: [showDragHandle && (jsxRuntime.jsx(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: {
+                                    current: tableHeadCellRefs.current[column.id],
+                                } })), showColumnActions && (jsxRuntime.jsx(MRT_TableHeadCellColumnActionsButton, { header: header, table: table }))] }))), column.getCanResize() && (jsxRuntime.jsx(MRT_TableHeadCellResizeHandle, { header: header, table: table }))] }))), column.getCanFilter() && (jsxRuntime.jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }))] })));
 };
 
 const MRT_TableHeadRow = ({ headerGroup, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
@@ -2146,17 +2042,14 @@ const MRT_TableHeadRow = ({ headerGroup, table, virtualColumns, virtualPaddingLe
     const tableRowProps = muiTableHeadRowProps instanceof Function
         ? muiTableHeadRowProps({ headerGroup, table })
         : muiTableHeadRowProps;
-    return (React__default["default"].createElement(TableRow__default["default"], Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: styles.lighten(theme.palette.background.default, 0.04), boxShadow: `4px 0 8px ${styles.alpha(theme.palette.common.black, 0.1)}`, display: layoutMode === 'grid' ? 'flex' : 'table-row', top: 0 }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
+    return (jsxRuntime.jsxs(TableRow__default["default"], Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: styles.lighten(theme.palette.background.default, 0.04), boxShadow: `4px 0 8px ${styles.alpha(theme.palette.common.black, 0.1)}`, display: layoutMode === 'grid' ? 'flex' : 'table-row', top: 0 }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
             ? tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx(theme)
-            : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx))) }),
-        virtualPaddingLeft ? (React__default["default"].createElement("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null,
-        (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : headerGroup.headers).map((headerOrVirtualHeader) => {
-            const header = virtualColumns
-                ? headerGroup.headers[headerOrVirtualHeader.index]
-                : headerOrVirtualHeader;
-            return (React__default["default"].createElement(MRT_TableHeadCell, { header: header, key: header.id, table: table }));
-        }),
-        virtualPaddingRight ? (React__default["default"].createElement("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null));
+            : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx))) }, { children: [virtualPaddingLeft ? (jsxRuntime.jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : headerGroup.headers).map((headerOrVirtualHeader) => {
+                const header = virtualColumns
+                    ? headerGroup.headers[headerOrVirtualHeader.index]
+                    : headerOrVirtualHeader;
+                return (jsxRuntime.jsx(MRT_TableHeadCell, { header: header, table: table }, header.id));
+            }), virtualPaddingRight ? (jsxRuntime.jsx("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })));
 };
 
 const MRT_TableHead = ({ table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
@@ -2166,9 +2059,9 @@ const MRT_TableHead = ({ table, virtualColumns, virtualPaddingLeft, virtualPaddi
         ? muiTableHeadProps({ table })
         : muiTableHeadProps;
     const stickyHeader = enableStickyHeader || isFullScreen;
-    return (React__default["default"].createElement(TableHead__default["default"], Object.assign({}, tableHeadProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group', opacity: 0.97, position: stickyHeader ? 'sticky' : 'relative', top: stickyHeader && layoutMode === 'grid' ? 0 : undefined, zIndex: stickyHeader ? 2 : undefined }, ((tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx) instanceof Function
+    return (jsxRuntime.jsx(TableHead__default["default"], Object.assign({}, tableHeadProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group', opacity: 0.97, position: stickyHeader ? 'sticky' : 'relative', top: stickyHeader && layoutMode === 'grid' ? 0 : undefined, zIndex: stickyHeader ? 2 : undefined }, ((tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx) instanceof Function
             ? tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx(theme)
-            : tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx))) }), getHeaderGroups().map((headerGroup) => (React__default["default"].createElement(MRT_TableHeadRow, { headerGroup: headerGroup, key: headerGroup.id, table: table, virtualColumns: virtualColumns, virtualPaddingLeft: virtualPaddingLeft, virtualPaddingRight: virtualPaddingRight })))));
+            : tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx))) }, { children: getHeaderGroups().map((headerGroup) => (jsxRuntime.jsx(MRT_TableHeadRow, { headerGroup: headerGroup, table: table, virtualColumns: virtualColumns, virtualPaddingLeft: virtualPaddingLeft, virtualPaddingRight: virtualPaddingRight }, headerGroup.id))) })));
 };
 
 const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
@@ -2177,7 +2070,7 @@ const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
     const { column, row } = cell;
     const { columnDef } = column;
     const { editingRow } = getState();
-    const [value, setValue] = React.useState(() => cell.getValue());
+    const [value, setValue] = react.useState(() => cell.getValue());
     const mTableBodyCellEditTextFieldProps = muiTableBodyCellEditTextFieldProps instanceof Function
         ? muiTableBodyCellEditTextFieldProps({ cell, column, row, table })
         : muiTableBodyCellEditTextFieldProps;
@@ -2218,9 +2111,9 @@ const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
         }
     };
     if (columnDef.Edit) {
-        return React__default["default"].createElement(React__default["default"].Fragment, null, (_a = columnDef.Edit) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table }));
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: (_a = columnDef.Edit) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table }) });
     }
-    return (React__default["default"].createElement(TextField__default["default"], Object.assign({ disabled: (columnDef.enableEditing instanceof Function
+    return (jsxRuntime.jsx(TextField__default["default"], Object.assign({ disabled: (columnDef.enableEditing instanceof Function
             ? columnDef.enableEditing(row)
             : columnDef.enableEditing) === false, fullWidth: true, inputRef: (inputRef) => {
             if (inputRef) {
@@ -2233,24 +2126,24 @@ const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
             var _a;
             e.stopPropagation();
             (_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.onClick) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, e);
-        }, onBlur: handleBlur, onChange: handleChange, onKeyDown: handleEnterKeyDown }), (_b = textFieldProps.children) !== null && _b !== void 0 ? _b : (_c = columnDef === null || columnDef === void 0 ? void 0 : columnDef.editSelectOptions) === null || _c === void 0 ? void 0 : _c.map((option) => {
-        let value;
-        let text;
-        if (typeof option !== 'object') {
-            value = option;
-            text = option;
-        }
-        else {
-            value = option.value;
-            text = option.text;
-        }
-        return (React__default["default"].createElement(MenuItem__default["default"], { key: value, sx: {
-                display: 'flex',
-                m: 0,
-                alignItems: 'center',
-                gap: '0.5rem',
-            }, value: value }, text));
-    })));
+        }, onBlur: handleBlur, onChange: handleChange, onKeyDown: handleEnterKeyDown }, { children: (_b = textFieldProps.children) !== null && _b !== void 0 ? _b : (_c = columnDef === null || columnDef === void 0 ? void 0 : columnDef.editSelectOptions) === null || _c === void 0 ? void 0 : _c.map((option) => {
+            let value;
+            let text;
+            if (typeof option !== 'object') {
+                value = option;
+                text = option;
+            }
+            else {
+                value = option.value;
+                text = option.text;
+            }
+            return (jsxRuntime.jsx(MenuItem__default["default"], Object.assign({ sx: {
+                    display: 'flex',
+                    m: 0,
+                    alignItems: 'center',
+                    gap: '0.5rem',
+                }, value: value }, { children: text }), value));
+        }) })));
 };
 
 const MRT_CopyButton = ({ cell, children, table, }) => {
@@ -2258,7 +2151,7 @@ const MRT_CopyButton = ({ cell, children, table, }) => {
     const { options: { localization, muiTableBodyCellCopyButtonProps }, } = table;
     const { column, row } = cell;
     const { columnDef } = column;
-    const [copied, setCopied] = React.useState(false);
+    const [copied, setCopied] = react.useState(false);
     const handleCopy = (event, text) => {
         event.stopPropagation();
         navigator.clipboard.writeText(text);
@@ -2277,10 +2170,9 @@ const MRT_CopyButton = ({ cell, children, table, }) => {
         })
         : columnDef.muiTableBodyCellCopyButtonProps;
     const buttonProps = Object.assign(Object.assign({}, mTableBodyCellCopyButtonProps), mcTableBodyCellCopyButtonProps);
-    return (React__default["default"].createElement(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.title) !== null && _a !== void 0 ? _a : (copied ? localization.copiedToClipboard : localization.clickToCopy) },
-        React__default["default"].createElement(Button__default["default"], Object.assign({ onClick: (e) => handleCopy(e, cell.getValue()), size: "small", type: "button", variant: "text" }, buttonProps, { sx: (theme) => (Object.assign({ backgroundColor: 'transparent', border: 'none', color: 'inherit', cursor: 'copy', fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit', m: '-0.25rem', minWidth: 'unset', textAlign: 'inherit', textTransform: 'inherit' }, ((buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx) instanceof Function
+    return (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({ arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.title) !== null && _a !== void 0 ? _a : (copied ? localization.copiedToClipboard : localization.clickToCopy) }, { children: jsxRuntime.jsx(Button__default["default"], Object.assign({ onClick: (e) => handleCopy(e, cell.getValue()), size: "small", type: "button", variant: "text" }, buttonProps, { sx: (theme) => (Object.assign({ backgroundColor: 'transparent', border: 'none', color: 'inherit', cursor: 'copy', fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit', m: '-0.25rem', minWidth: 'unset', textAlign: 'inherit', textTransform: 'inherit' }, ((buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx) instanceof Function
                 ? buttonProps.sx(theme)
-                : buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx))), title: undefined }), children)));
+                : buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx))), title: undefined }, { children: children })) })));
 };
 
 const MRT_TableBodyRowGrabHandle = ({ cell, rowRef, table }) => {
@@ -2301,7 +2193,7 @@ const MRT_TableBodyRowGrabHandle = ({ cell, rowRef, table }) => {
         table.setDraggingRow(null);
         table.setHoveredRow(null);
     };
-    return (React__default["default"].createElement(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragStart: handleDragStart, onDragEnd: handleDragEnd, table: table }));
+    return (jsxRuntime.jsx(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragStart: handleDragStart, onDragEnd: handleDragEnd, table: table }));
 };
 
 const allowedTypes = ['string', 'number'];
@@ -2349,16 +2241,16 @@ const MRT_TableBodyCellValue = ({ cell, table }) => {
             matchExactly: (filterValue ? columnDef._filterFn : globalFilterFn) !== 'fuzzy',
         });
         if ((chunks === null || chunks === void 0 ? void 0 : chunks.length) > 1 || ((_b = chunks === null || chunks === void 0 ? void 0 : chunks[0]) === null || _b === void 0 ? void 0 : _b.match)) {
-            renderedCellValue = (React__default["default"].createElement("span", { "aria-label": renderedCellValue, role: "note" }, (_c = chunks === null || chunks === void 0 ? void 0 : chunks.map(({ key, match, text }) => (React__default["default"].createElement(Box__default["default"], { "aria-hidden": "true", component: "span", key: key, sx: match
-                    ? {
-                        backgroundColor: (theme) => theme.palette.mode === 'dark'
-                            ? styles.darken(theme.palette.warning.dark, 0.25)
-                            : styles.lighten(theme.palette.warning.light, 0.5),
-                        borderRadius: '2px',
-                        color: (theme) => theme.palette.mode === 'dark' ? 'white' : 'black',
-                        padding: '2px 1px',
-                    }
-                    : undefined }, text)))) !== null && _c !== void 0 ? _c : renderedCellValue));
+            renderedCellValue = (jsxRuntime.jsx("span", Object.assign({ "aria-label": renderedCellValue, role: "note" }, { children: (_c = chunks === null || chunks === void 0 ? void 0 : chunks.map(({ key, match, text }) => (jsxRuntime.jsx(Box__default["default"], Object.assign({ "aria-hidden": "true", component: "span", sx: match
+                        ? {
+                            backgroundColor: (theme) => theme.palette.mode === 'dark'
+                                ? styles.darken(theme.palette.warning.dark, 0.25)
+                                : styles.lighten(theme.palette.warning.light, 0.5),
+                            borderRadius: '2px',
+                            color: (theme) => theme.palette.mode === 'dark' ? 'white' : 'black',
+                            padding: '2px 1px',
+                        }
+                        : undefined }, { children: text }), key)))) !== null && _c !== void 0 ? _c : renderedCellValue })));
         }
     }
     if (columnDef.Cell && !isGroupedValue) {
@@ -2370,7 +2262,7 @@ const MRT_TableBodyCellValue = ({ cell, table }) => {
             table,
         });
     }
-    return React__default["default"].createElement(React__default["default"].Fragment, null, renderedCellValue);
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderedCellValue });
 };
 
 const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, table, virtualCell, }) => {
@@ -2391,14 +2283,14 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
     const skeletonProps = muiTableBodyCellSkeletonProps instanceof Function
         ? muiTableBodyCellSkeletonProps({ cell, column, row, table })
         : muiTableBodyCellSkeletonProps;
-    const [skeletonWidth, setSkeletonWidth] = React.useState(0);
-    React.useEffect(() => setSkeletonWidth(isLoading || showSkeletons
+    const [skeletonWidth, setSkeletonWidth] = react.useState(0);
+    react.useEffect(() => setSkeletonWidth(isLoading || showSkeletons
         ? columnDefType === 'display'
             ? column.getSize() / 2
             : Math.round(Math.random() * (column.getSize() - column.getSize() / 3) +
                 column.getSize() / 3)
         : 100), []);
-    const draggingBorders = React.useMemo(() => {
+    const draggingBorders = react.useMemo(() => {
         const isDraggingColumn = (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id;
         const isHoveredColumn = (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id;
         const isDraggingRow = (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id;
@@ -2465,7 +2357,7 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
             setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
         }
     };
-    return (React__default["default"].createElement(TableCell__default["default"], Object.assign({ "data-index": virtualCell === null || virtualCell === void 0 ? void 0 : virtualCell.index, ref: (node) => {
+    return (jsxRuntime.jsx(TableCell__default["default"], Object.assign({ "data-index": virtualCell === null || virtualCell === void 0 ? void 0 : virtualCell.index, ref: (node) => {
             if (node) {
                 measureElement === null || measureElement === void 0 ? void 0 : measureElement(node);
             }
@@ -2497,28 +2389,21 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
             table,
             theme,
             tableCellProps,
-        })), draggingBorders)) }),
-        React__default["default"].createElement(React__default["default"].Fragment, null,
-            cell.getIsPlaceholder() ? ((_b = (_a = columnDef.PlaceholderCell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table })) !== null && _b !== void 0 ? _b : null) : isLoading || showSkeletons ? (React__default["default"].createElement(Skeleton__default["default"], Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
-                rowNumberMode === 'static' &&
-                column.id === 'mrt-row-numbers' ? (rowIndex + 1) : column.id === 'mrt-row-drag' ? (React__default["default"].createElement(MRT_TableBodyRowGrabHandle, { cell: cell, rowRef: rowRef, table: table })) : columnDefType === 'display' &&
-                (column.id === 'mrt-row-select' ||
-                    column.id === 'mrt-row-expand' ||
-                    !row.getIsGrouped()) ? ((_c = columnDef.Cell) === null || _c === void 0 ? void 0 : _c.call(columnDef, {
-                cell,
-                renderedCellValue: cell.renderValue(),
-                column,
-                row,
-                table,
-            })) : isEditing ? (React__default["default"].createElement(MRT_EditCellTextField, { cell: cell, table: table })) : (enableClickToCopy || columnDef.enableClickToCopy) &&
-                columnDef.enableClickToCopy !== false ? (React__default["default"].createElement(MRT_CopyButton, { cell: cell, table: table },
-                React__default["default"].createElement(MRT_TableBodyCellValue, { cell: cell, table: table }))) : (React__default["default"].createElement(MRT_TableBodyCellValue, { cell: cell, table: table })),
-            cell.getIsGrouped() && !columnDef.GroupedCell && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                " (", (_d = row.subRows) === null || _d === void 0 ? void 0 :
-                _d.length,
-                ")")))));
+        })), draggingBorders)) }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [cell.getIsPlaceholder() ? ((_b = (_a = columnDef.PlaceholderCell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table })) !== null && _b !== void 0 ? _b : null) : isLoading || showSkeletons ? (jsxRuntime.jsx(Skeleton__default["default"], Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
+                    rowNumberMode === 'static' &&
+                    column.id === 'mrt-row-numbers' ? (rowIndex + 1) : column.id === 'mrt-row-drag' ? (jsxRuntime.jsx(MRT_TableBodyRowGrabHandle, { cell: cell, rowRef: rowRef, table: table })) : columnDefType === 'display' &&
+                    (column.id === 'mrt-row-select' ||
+                        column.id === 'mrt-row-expand' ||
+                        !row.getIsGrouped()) ? ((_c = columnDef.Cell) === null || _c === void 0 ? void 0 : _c.call(columnDef, {
+                    cell,
+                    renderedCellValue: cell.renderValue(),
+                    column,
+                    row,
+                    table,
+                })) : isEditing ? (jsxRuntime.jsx(MRT_EditCellTextField, { cell: cell, table: table })) : (enableClickToCopy || columnDef.enableClickToCopy) &&
+                    columnDef.enableClickToCopy !== false ? (jsxRuntime.jsx(MRT_CopyButton, Object.assign({ cell: cell, table: table }, { children: jsxRuntime.jsx(MRT_TableBodyCellValue, { cell: cell, table: table }) }))) : (jsxRuntime.jsx(MRT_TableBodyCellValue, { cell: cell, table: table })), cell.getIsGrouped() && !columnDef.GroupedCell && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [" (", (_d = row.subRows) === null || _d === void 0 ? void 0 : _d.length, ")"] }))] }) })));
 };
-const Memo_MRT_TableBodyCell = React.memo(MRT_TableBodyCell, (prev, next) => next.cell === prev.cell);
+const Memo_MRT_TableBodyCell = react.memo(MRT_TableBodyCell, (prev, next) => next.cell === prev.cell);
 
 const MRT_TableDetailPanel = ({ parentRowRef, row, rowIndex, table, virtualRow, }) => {
     const { getVisibleLeafColumns, getState, options: { layoutMode, muiTableBodyRowProps, muiTableDetailPanelProps, renderDetailPanel, }, } = table;
@@ -2534,7 +2419,7 @@ const MRT_TableDetailPanel = ({ parentRowRef, row, rowIndex, table, virtualRow,
     const tableCellProps = muiTableDetailPanelProps instanceof Function
         ? muiTableDetailPanelProps({ row, table })
         : muiTableDetailPanelProps;
-    return (React__default["default"].createElement(TableRow__default["default"], Object.assign({ className: "Mui-TableBodyCell-DetailPanel" }, tableRowProps, { sx: (theme) => {
+    return (jsxRuntime.jsx(TableRow__default["default"], Object.assign({ className: "Mui-TableBodyCell-DetailPanel" }, tableRowProps, { sx: (theme) => {
             var _a, _b;
             return (Object.assign({ display: layoutMode === 'grid' ? 'flex' : 'table-row', position: virtualRow ? 'absolute' : undefined, top: virtualRow
                     ? `${(_b = (_a = parentRowRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height}px`
@@ -2543,12 +2428,11 @@ const MRT_TableDetailPanel = ({ parentRowRef, row, rowIndex, table, virtualRow,
                     : undefined, width: '100%', zIndex: virtualRow ? 2 : undefined }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
                 ? tableRowProps.sx(theme)
                 : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx)));
-        } }),
-        React__default["default"].createElement(TableCell__default["default"], Object.assign({ className: "Mui-TableBodyCell-DetailPanel", colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ backgroundColor: virtualRow
+        } }, { children: jsxRuntime.jsx(TableCell__default["default"], Object.assign({ className: "Mui-TableBodyCell-DetailPanel", colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ backgroundColor: virtualRow
                     ? styles.lighten(theme.palette.background.default, 0.06)
                     : undefined, borderBottom: !row.getIsExpanded() ? 'none' : undefined, display: layoutMode === 'grid' ? 'flex' : 'table-cell', pb: row.getIsExpanded() ? '1rem' : 0, pt: row.getIsExpanded() ? '1rem' : 0, transition: 'all 150ms ease-in-out', width: `${table.getTotalSize()}px` }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
                 ? tableCellProps.sx(theme)
-                : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx))) }), renderDetailPanel && (React__default["default"].createElement(Collapse__default["default"], { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true }, !isLoading && renderDetailPanel({ row, table }))))));
+                : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx))) }, { children: renderDetailPanel && (jsxRuntime.jsx(Collapse__default["default"], Object.assign({ in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true }, { children: !isLoading && renderDetailPanel({ row, table }) }))) })) })));
 };
 
 const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, row, rowIndex, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, virtualRow, }) => {
@@ -2562,54 +2446,49 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, row, row
             setHoveredRow(row);
         }
     };
-    const rowRef = React.useRef(null);
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(TableRow__default["default"], Object.assign({ "data-index": virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.index, onDragEnter: handleDragEnter, selected: row.getIsSelected(), ref: (node) => {
-                if (node) {
-                    rowRef.current = node;
-                    measureElement === null || measureElement === void 0 ? void 0 : measureElement(node);
-                }
-            } }, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: styles.lighten(theme.palette.background.default, 0.06), boxSizing: 'border-box', display: layoutMode === 'grid' ? 'flex' : 'table-row', opacity: (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id || (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id ? 0.5 : 1, position: virtualRow ? 'absolute' : undefined, transition: virtualRow ? 'none' : 'all 150ms ease-in-out', top: virtualRow ? 0 : undefined, width: '100%', '&:hover td': {
-                    backgroundColor: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false
-                        ? row.getIsSelected()
-                            ? `${styles.alpha(theme.palette.primary.main, 0.2)}`
-                            : theme.palette.mode === 'dark'
-                                ? `${styles.lighten(theme.palette.background.default, 0.12)}`
-                                : `${styles.darken(theme.palette.background.default, 0.05)}`
-                        : undefined,
-                } }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
-                ? tableRowProps.sx(theme)
-                : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx))), style: Object.assign({ transform: virtualRow
-                    ? `translateY(${virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.start}px)`
-                    : undefined }, tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.style) }),
-            virtualPaddingLeft ? (React__default["default"].createElement("td", { style: { display: 'flex', width: virtualPaddingLeft } })) : null,
-            (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : row.getVisibleCells()).map((cellOrVirtualCell) => {
-                const cell = columnVirtualizer
-                    ? row.getVisibleCells()[cellOrVirtualCell.index]
-                    : cellOrVirtualCell;
-                const props = {
-                    cell,
-                    key: cell.id,
-                    measureElement: columnVirtualizer === null || columnVirtualizer === void 0 ? void 0 : columnVirtualizer.measureElement,
-                    numRows,
-                    rowIndex,
-                    rowRef,
-                    table,
-                    virtualCell: columnVirtualizer
-                        ? cellOrVirtualCell
-                        : undefined,
-                };
-                return memoMode === 'cells' &&
-                    cell.column.columnDef.columnDefType === 'data' &&
-                    !draggingColumn &&
-                    !draggingRow &&
-                    (editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) !== cell.id &&
-                    (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) !== row.id ? (React__default["default"].createElement(Memo_MRT_TableBodyCell, Object.assign({}, props))) : (React__default["default"].createElement(MRT_TableBodyCell, Object.assign({}, props)));
-            }),
-            virtualPaddingRight ? (React__default["default"].createElement("td", { style: { display: 'flex', width: virtualPaddingRight } })) : null),
-        renderDetailPanel && !row.getIsGrouped() && (React__default["default"].createElement(MRT_TableDetailPanel, { parentRowRef: rowRef, row: row, rowIndex: rowIndex, table: table, virtualRow: virtualRow }))));
-};
-const Memo_MRT_TableBodyRow = React.memo(MRT_TableBodyRow, (prev, next) => prev.row === next.row && prev.rowIndex === next.rowIndex);
+    const rowRef = react.useRef(null);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(TableRow__default["default"], Object.assign({ "data-index": virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.index, onDragEnter: handleDragEnter, selected: row.getIsSelected(), ref: (node) => {
+                    if (node) {
+                        rowRef.current = node;
+                        measureElement === null || measureElement === void 0 ? void 0 : measureElement(node);
+                    }
+                } }, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: styles.lighten(theme.palette.background.default, 0.06), boxSizing: 'border-box', display: layoutMode === 'grid' ? 'flex' : 'table-row', opacity: (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id || (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id ? 0.5 : 1, position: virtualRow ? 'absolute' : undefined, transition: virtualRow ? 'none' : 'all 150ms ease-in-out', top: virtualRow ? 0 : undefined, width: '100%', '&:hover td': {
+                        backgroundColor: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false
+                            ? row.getIsSelected()
+                                ? `${styles.alpha(theme.palette.primary.main, 0.2)}`
+                                : theme.palette.mode === 'dark'
+                                    ? `${styles.lighten(theme.palette.background.default, 0.12)}`
+                                    : `${styles.darken(theme.palette.background.default, 0.05)}`
+                            : undefined,
+                    } }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
+                    ? tableRowProps.sx(theme)
+                    : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx))), style: Object.assign({ transform: virtualRow
+                        ? `translateY(${virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.start}px)`
+                        : undefined }, tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.style) }, { children: [virtualPaddingLeft ? (jsxRuntime.jsx("td", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : row.getVisibleCells()).map((cellOrVirtualCell) => {
+                        const cell = columnVirtualizer
+                            ? row.getVisibleCells()[cellOrVirtualCell.index]
+                            : cellOrVirtualCell;
+                        const props = {
+                            cell,
+                            key: cell.id,
+                            measureElement: columnVirtualizer === null || columnVirtualizer === void 0 ? void 0 : columnVirtualizer.measureElement,
+                            numRows,
+                            rowIndex,
+                            rowRef,
+                            table,
+                            virtualCell: columnVirtualizer
+                                ? cellOrVirtualCell
+                                : undefined,
+                        };
+                        return memoMode === 'cells' &&
+                            cell.column.columnDef.columnDefType === 'data' &&
+                            !draggingColumn &&
+                            !draggingRow &&
+                            (editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) !== cell.id &&
+                            (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) !== row.id ? (jsxRuntime.jsx(Memo_MRT_TableBodyCell, Object.assign({}, props))) : (jsxRuntime.jsx(MRT_TableBodyCell, Object.assign({}, props)));
+                    }), virtualPaddingRight ? (jsxRuntime.jsx("td", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })), renderDetailPanel && !row.getIsGrouped() && (jsxRuntime.jsx(MRT_TableDetailPanel, { parentRowRef: rowRef, row: row, rowIndex: rowIndex, table: table, virtualRow: virtualRow }))] }));
+};
+const Memo_MRT_TableBodyRow = react.memo(MRT_TableBodyRow, (prev, next) => prev.row === next.row && prev.rowIndex === next.rowIndex);
 
 const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
     var _a, _b, _c, _d;
@@ -2624,7 +2503,7 @@ const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddin
     const vProps = rowVirtualizerProps instanceof Function
         ? rowVirtualizerProps({ table })
         : rowVirtualizerProps;
-    const shouldRankResults = React.useMemo(() => !manualExpanding &&
+    const shouldRankResults = react.useMemo(() => !manualExpanding &&
         !manualFiltering &&
         !manualGrouping &&
         !manualSorting &&
@@ -2643,7 +2522,7 @@ const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddin
         manualSorting,
         sorting,
     ]);
-    const rows = React.useMemo(() => {
+    const rows = react.useMemo(() => {
         if (!shouldRankResults)
             return getRowModel().rows;
         const rankedRows = getPrePaginationRowModel().rows.sort((a, b) => rankGlobalFuzzy(a, b));
@@ -2674,45 +2553,44 @@ const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddin
     const virtualRows = rowVirtualizer
         ? rowVirtualizer.getVirtualItems()
         : undefined;
-    return (React__default["default"].createElement(TableBody__default["default"], Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group', height: rowVirtualizer
+    return (jsxRuntime.jsx(TableBody__default["default"], Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group', height: rowVirtualizer
                 ? `${rowVirtualizer.getTotalSize()}px`
                 : 'inherit', minHeight: !rows.length ? '100px' : undefined, position: 'relative' }, ((tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx) instanceof Function
             ? tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx(theme)
-            : tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx))) }), (_a = tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.children) !== null && _a !== void 0 ? _a : (!rows.length ? (React__default["default"].createElement("tr", { style: { display: layoutMode === 'grid' ? 'grid' : 'table-row' } },
-        React__default["default"].createElement("td", { colSpan: table.getVisibleLeafColumns().length, style: {
-                display: layoutMode === 'grid' ? 'grid' : 'table-cell',
-            } }, (_b = renderEmptyRowsFallback === null || renderEmptyRowsFallback === void 0 ? void 0 : renderEmptyRowsFallback({ table })) !== null && _b !== void 0 ? _b : (React__default["default"].createElement(Typography__default["default"], { sx: {
-                color: 'text.secondary',
-                fontStyle: 'italic',
-                maxWidth: `min(100vw, ${(_d = (_c = tablePaperRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth) !== null && _d !== void 0 ? _d : 360}px)`,
-                py: '2rem',
-                textAlign: 'center',
-                width: '100%',
-            } }, globalFilter || columnFilters.length
-            ? localization.noResultsFound
-            : localization.noRecordsToDisplay))))) : (React__default["default"].createElement(React__default["default"].Fragment, null, (virtualRows !== null && virtualRows !== void 0 ? virtualRows : rows).map((rowOrVirtualRow, rowIndex) => {
-        const row = rowVirtualizer
-            ? rows[rowOrVirtualRow.index]
-            : rowOrVirtualRow;
-        const props = {
-            columnVirtualizer,
-            key: row.id,
-            measureElement: rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement,
-            numRows: rows.length,
-            row,
-            rowIndex: rowVirtualizer ? rowOrVirtualRow.index : rowIndex,
-            table,
-            virtualColumns,
-            virtualPaddingLeft,
-            virtualPaddingRight,
-            virtualRow: rowVirtualizer
-                ? rowOrVirtualRow
-                : undefined,
-        };
-        return memoMode === 'rows' ? (React__default["default"].createElement(Memo_MRT_TableBodyRow, Object.assign({}, props))) : (React__default["default"].createElement(MRT_TableBodyRow, Object.assign({}, props)));
-    }))))));
+            : tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx))) }, { children: (_a = tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.children) !== null && _a !== void 0 ? _a : (!rows.length ? (jsxRuntime.jsx("tr", Object.assign({ style: { display: layoutMode === 'grid' ? 'grid' : 'table-row' } }, { children: jsxRuntime.jsx("td", Object.assign({ colSpan: table.getVisibleLeafColumns().length, style: {
+                    display: layoutMode === 'grid' ? 'grid' : 'table-cell',
+                } }, { children: (_b = renderEmptyRowsFallback === null || renderEmptyRowsFallback === void 0 ? void 0 : renderEmptyRowsFallback({ table })) !== null && _b !== void 0 ? _b : (jsxRuntime.jsx(Typography__default["default"], Object.assign({ sx: {
+                        color: 'text.secondary',
+                        fontStyle: 'italic',
+                        maxWidth: `min(100vw, ${(_d = (_c = tablePaperRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth) !== null && _d !== void 0 ? _d : 360}px)`,
+                        py: '2rem',
+                        textAlign: 'center',
+                        width: '100%',
+                    } }, { children: globalFilter || columnFilters.length
+                        ? localization.noResultsFound
+                        : localization.noRecordsToDisplay }))) })) }))) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (virtualRows !== null && virtualRows !== void 0 ? virtualRows : rows).map((rowOrVirtualRow, rowIndex) => {
+                const row = rowVirtualizer
+                    ? rows[rowOrVirtualRow.index]
+                    : rowOrVirtualRow;
+                const props = {
+                    columnVirtualizer,
+                    key: row.id,
+                    measureElement: rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement,
+                    numRows: rows.length,
+                    row,
+                    rowIndex: rowVirtualizer ? rowOrVirtualRow.index : rowIndex,
+                    table,
+                    virtualColumns,
+                    virtualPaddingLeft,
+                    virtualPaddingRight,
+                    virtualRow: rowVirtualizer
+                        ? rowOrVirtualRow
+                        : undefined,
+                };
+                return memoMode === 'rows' ? (jsxRuntime.jsx(Memo_MRT_TableBodyRow, Object.assign({}, props))) : (jsxRuntime.jsx(MRT_TableBodyRow, Object.assign({}, props)));
+            }) }))) })));
 };
-const Memo_MRT_TableBody = React.memo(MRT_TableBody, (prev, next) => prev.table.options.data === next.table.options.data);
+const Memo_MRT_TableBody = react.memo(MRT_TableBody, (prev, next) => prev.table.options.data === next.table.options.data);
 
 const MRT_TableFooterCell = ({ footer, table }) => {
     var _a, _b, _c;
@@ -2728,7 +2606,7 @@ const MRT_TableFooterCell = ({ footer, table }) => {
         ? columnDef.muiTableFooterCellProps({ column, table })
         : columnDef.muiTableFooterCellProps;
     const tableCellProps = Object.assign(Object.assign({}, mTableFooterCellProps), mcTableFooterCellProps);
-    return (React__default["default"].createElement(TableCell__default["default"], Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: footer.colSpan, variant: "head" }, tableCellProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-cell', fontWeight: 'bold', justifyContent: columnDefType === 'group' ? 'center' : undefined, p: density === 'compact'
+    return (jsxRuntime.jsx(TableCell__default["default"], Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: footer.colSpan, variant: "head" }, tableCellProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-cell', fontWeight: 'bold', justifyContent: columnDefType === 'group' ? 'center' : undefined, p: density === 'compact'
                 ? '0.5rem'
                 : density === 'comfortable'
                     ? '1rem'
@@ -2737,16 +2615,15 @@ const MRT_TableFooterCell = ({ footer, table }) => {
             table,
             theme,
             tableCellProps,
-        }))) }),
-        React__default["default"].createElement(React__default["default"].Fragment, null, footer.isPlaceholder
-            ? null
-            : (_c = (_b = (columnDef.Footer instanceof Function
-                ? (_a = columnDef.Footer) === null || _a === void 0 ? void 0 : _a.call(columnDef, {
-                    column,
-                    footer,
-                    table,
-                })
-                : columnDef.Footer)) !== null && _b !== void 0 ? _b : columnDef.footer) !== null && _c !== void 0 ? _c : null)));
+        }))) }, { children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: footer.isPlaceholder
+                ? null
+                : (_c = (_b = (columnDef.Footer instanceof Function
+                    ? (_a = columnDef.Footer) === null || _a === void 0 ? void 0 : _a.call(columnDef, {
+                        column,
+                        footer,
+                        table,
+                    })
+                    : columnDef.Footer)) !== null && _b !== void 0 ? _b : columnDef.footer) !== null && _c !== void 0 ? _c : null }) })));
 };
 
 const MRT_TableFooterRow = ({ footerGroup, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
@@ -2760,17 +2637,14 @@ const MRT_TableFooterRow = ({ footerGroup, table, virtualColumns, virtualPadding
     const tableRowProps = muiTableFooterRowProps instanceof Function
         ? muiTableFooterRowProps({ footerGroup, table })
         : muiTableFooterRowProps;
-    return (React__default["default"].createElement(TableRow__default["default"], Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: styles.lighten(theme.palette.background.default, 0.04), display: layoutMode === 'grid' ? 'flex' : 'table-row', width: '100%' }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
+    return (jsxRuntime.jsxs(TableRow__default["default"], Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: styles.lighten(theme.palette.background.default, 0.04), display: layoutMode === 'grid' ? 'flex' : 'table-row', width: '100%' }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
             ? tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx(theme)
-            : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx))) }),
-        virtualPaddingLeft ? (React__default["default"].createElement("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null,
-        (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : footerGroup.headers).map((footerOrVirtualFooter) => {
-            const footer = virtualColumns
-                ? footerGroup.headers[footerOrVirtualFooter.index]
-                : footerOrVirtualFooter;
-            return (React__default["default"].createElement(MRT_TableFooterCell, { footer: footer, key: footer.id, table: table }));
-        }),
-        virtualPaddingRight ? (React__default["default"].createElement("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null));
+            : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx))) }, { children: [virtualPaddingLeft ? (jsxRuntime.jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : footerGroup.headers).map((footerOrVirtualFooter) => {
+                const footer = virtualColumns
+                    ? footerGroup.headers[footerOrVirtualFooter.index]
+                    : footerOrVirtualFooter;
+                return (jsxRuntime.jsx(MRT_TableFooterCell, { footer: footer, table: table }, footer.id));
+            }), virtualPaddingRight ? (jsxRuntime.jsx("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })));
 };
 
 const MRT_TableFooter = ({ table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
@@ -2780,13 +2654,13 @@ const MRT_TableFooter = ({ table, virtualColumns, virtualPaddingLeft, virtualPad
         ? muiTableFooterProps({ table })
         : muiTableFooterProps;
     const stickFooter = (isFullScreen || enableStickyFooter) && enableStickyFooter !== false;
-    return (React__default["default"].createElement(TableFooter__default["default"], Object.assign({}, tableFooterProps, { sx: (theme) => (Object.assign({ bottom: stickFooter ? 0 : undefined, display: layoutMode === 'grid' ? 'grid' : 'table-row-group', opacity: stickFooter ? 0.97 : undefined, outline: stickFooter
+    return (jsxRuntime.jsx(TableFooter__default["default"], Object.assign({}, tableFooterProps, { sx: (theme) => (Object.assign({ bottom: stickFooter ? 0 : undefined, display: layoutMode === 'grid' ? 'grid' : 'table-row-group', opacity: stickFooter ? 0.97 : undefined, outline: stickFooter
                 ? theme.palette.mode === 'light'
                     ? `1px solid ${theme.palette.grey[300]}`
                     : `1px solid ${theme.palette.grey[700]}`
                 : undefined, position: stickFooter ? 'sticky' : undefined, zIndex: stickFooter ? 1 : undefined }, ((tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx) instanceof Function
             ? tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx(theme)
-            : tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx))) }), getFooterGroups().map((footerGroup) => (React__default["default"].createElement(MRT_TableFooterRow, { footerGroup: footerGroup, key: footerGroup.id, table: table, virtualColumns: virtualColumns, virtualPaddingLeft: virtualPaddingLeft, virtualPaddingRight: virtualPaddingRight })))));
+            : tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx))) }, { children: getFooterGroups().map((footerGroup) => (jsxRuntime.jsx(MRT_TableFooterRow, { footerGroup: footerGroup, table: table, virtualColumns: virtualColumns, virtualPaddingLeft: virtualPaddingLeft, virtualPaddingRight: virtualPaddingRight }, footerGroup.id))) })));
 };
 
 const MRT_Table = ({ table }) => {
@@ -2799,7 +2673,7 @@ const MRT_Table = ({ table }) => {
     const vProps = columnVirtualizerProps instanceof Function
         ? columnVirtualizerProps({ table })
         : columnVirtualizerProps;
-    const columnSizeVars = React.useMemo(() => {
+    const columnSizeVars = react.useMemo(() => {
         const headers = getFlatHeaders();
         const colSizes = {};
         for (let i = 0; i < headers.length; i++) {
@@ -2811,7 +2685,7 @@ const MRT_Table = ({ table }) => {
         return colSizes;
     }, [columns, columnSizing, columnSizingInfo, columnVisibility]);
     //get first 16 column widths and average them
-    const averageColumnWidth = React.useMemo(() => {
+    const averageColumnWidth = react.useMemo(() => {
         var _a, _b, _c, _d;
         if (!enableColumnVirtualization)
             return 0;
@@ -2820,7 +2694,7 @@ const MRT_Table = ({ table }) => {
             .rows[0]) === null || _a === void 0 ? void 0 : _a.getCenterVisibleCells()) === null || _b === void 0 ? void 0 : _b.slice(0, 16)) === null || _c === void 0 ? void 0 : _c.map((cell) => cell.column.getSize() * 1.2)) !== null && _d !== void 0 ? _d : [];
         return columnsWidths.reduce((a, b) => a + b, 0) / columnsWidths.length;
     }, [table.getRowModel().rows, columnPinning, columnVisibility]);
-    const [leftPinnedIndexes, rightPinnedIndexes] = React.useMemo(() => enableColumnVirtualization && enablePinning
+    const [leftPinnedIndexes, rightPinnedIndexes] = react.useMemo(() => enableColumnVirtualization && enablePinning
         ? [
             table.getLeftLeafColumns().map((c) => c.getPinnedIndex()),
             table
@@ -2829,7 +2703,7 @@ const MRT_Table = ({ table }) => {
         ]
         : [[], []], [columnPinning, enableColumnVirtualization, enablePinning]);
     const columnVirtualizer = enableColumnVirtualization
-        ? reactVirtual.useVirtualizer(Object.assign({ count: table.getVisibleLeafColumns().length, estimateSize: () => averageColumnWidth, getScrollElement: () => tableContainerRef.current, horizontal: true, overscan: 3, rangeExtractor: React.useCallback((range) => [
+        ? reactVirtual.useVirtualizer(Object.assign({ count: table.getVisibleLeafColumns().length, estimateSize: () => averageColumnWidth, getScrollElement: () => tableContainerRef.current, horizontal: true, overscan: 3, rangeExtractor: react.useCallback((range) => [
                 ...new Set([
                     ...leftPinnedIndexes,
                     ...reactVirtual.defaultRangeExtractor(range),
@@ -2857,19 +2731,16 @@ const MRT_Table = ({ table }) => {
         virtualPaddingLeft,
         virtualPaddingRight,
     };
-    return (React__default["default"].createElement(Table__default["default"], Object.assign({ stickyHeader: enableStickyHeader || isFullScreen }, tableProps, { sx: (theme) => (Object.assign({ borderCollapse: 'separate', display: layoutMode === 'grid' ? 'grid' : 'table', tableLayout: layoutMode !== 'grid' && enableColumnResizing ? 'fixed' : undefined }, ((tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx) instanceof Function
+    return (jsxRuntime.jsxs(Table__default["default"], Object.assign({ stickyHeader: enableStickyHeader || isFullScreen }, tableProps, { sx: (theme) => (Object.assign({ borderCollapse: 'separate', display: layoutMode === 'grid' ? 'grid' : 'table', tableLayout: layoutMode !== 'grid' && enableColumnResizing ? 'fixed' : undefined }, ((tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx) instanceof Function
             ? tableProps.sx(theme)
-            : tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx))), style: Object.assign(Object.assign({}, columnSizeVars), tableProps === null || tableProps === void 0 ? void 0 : tableProps.style) }),
-        enableTableHead && React__default["default"].createElement(MRT_TableHead, Object.assign({}, props)),
-        memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (React__default["default"].createElement(Memo_MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))) : (React__default["default"].createElement(MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))),
-        enableTableFooter && React__default["default"].createElement(MRT_TableFooter, Object.assign({}, props))));
+            : tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx))), style: Object.assign(Object.assign({}, columnSizeVars), tableProps === null || tableProps === void 0 ? void 0 : tableProps.style) }, { children: [enableTableHead && jsxRuntime.jsx(MRT_TableHead, Object.assign({}, props)), memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (jsxRuntime.jsx(Memo_MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))) : (jsxRuntime.jsx(MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))), enableTableFooter && jsxRuntime.jsx(MRT_TableFooter, Object.assign({}, props))] })));
 };
 
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? react.useLayoutEffect : react.useEffect;
 const MRT_TableContainer = ({ table }) => {
     const { getState, options: { enableStickyHeader, muiTableContainerProps }, refs: { tableContainerRef, bottomToolbarRef, topToolbarRef }, } = table;
     const { isFullScreen } = getState();
-    const [totalToolbarHeight, setTotalToolbarHeight] = React.useState(0);
+    const [totalToolbarHeight, setTotalToolbarHeight] = react.useState(0);
     const tableContainerProps = muiTableContainerProps instanceof Function
         ? muiTableContainerProps({ table })
         : muiTableContainerProps;
@@ -2883,7 +2754,7 @@ const MRT_TableContainer = ({ table }) => {
             : 0;
         setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
     });
-    return (React__default["default"].createElement(TableContainer__default["default"], Object.assign({}, tableContainerProps, { ref: (node) => {
+    return (jsxRuntime.jsx(TableContainer__default["default"], Object.assign({}, tableContainerProps, { ref: (node) => {
             if (node) {
                 tableContainerRef.current = node;
                 if (tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.ref) {
@@ -2897,8 +2768,7 @@ const MRT_TableContainer = ({ table }) => {
             ? tableContainerProps.sx(theme)
             : tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.sx))), style: Object.assign({ maxHeight: isFullScreen
                 ? `calc(100vh - ${totalToolbarHeight}px)`
-                : undefined }, tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.style) }),
-        React__default["default"].createElement(MRT_Table, { table: table })));
+                : undefined }, tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.style) }, { children: jsxRuntime.jsx(MRT_Table, { table: table }) })));
 };
 
 const MRT_TablePaper = ({ table }) => {
@@ -2907,7 +2777,7 @@ const MRT_TablePaper = ({ table }) => {
     const tablePaperProps = muiTablePaperProps instanceof Function
         ? muiTablePaperProps({ table })
         : muiTablePaperProps;
-    return (React__default["default"].createElement(Paper__default["default"], Object.assign({ elevation: 2 }, tablePaperProps, { ref: (ref) => {
+    return (jsxRuntime.jsxs(Paper__default["default"], Object.assign({ elevation: 2 }, tablePaperProps, { ref: (ref) => {
             tablePaperRef.current = ref;
             if (tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.ref) {
                 //@ts-ignore
@@ -2924,48 +2794,39 @@ const MRT_TablePaper = ({ table }) => {
                 padding: 0,
                 width: '100vw',
             }
-            : {})) }),
-        enableTopToolbar &&
-            (renderTopToolbar instanceof Function
-                ? renderTopToolbar({ table })
-                : renderTopToolbar !== null && renderTopToolbar !== void 0 ? renderTopToolbar : React__default["default"].createElement(MRT_TopToolbar, { table: table })),
-        React__default["default"].createElement(MRT_TableContainer, { table: table }),
-        enableBottomToolbar &&
-            (renderBottomToolbar instanceof Function
-                ? renderBottomToolbar({ table })
-                : renderBottomToolbar !== null && renderBottomToolbar !== void 0 ? renderBottomToolbar : React__default["default"].createElement(MRT_BottomToolbar, { table: table }))));
+            : {})) }, { children: [enableTopToolbar &&
+                (renderTopToolbar instanceof Function
+                    ? renderTopToolbar({ table })
+                    : renderTopToolbar !== null && renderTopToolbar !== void 0 ? renderTopToolbar : jsxRuntime.jsx(MRT_TopToolbar, { table: table })), jsxRuntime.jsx(MRT_TableContainer, { table: table }), enableBottomToolbar &&
+                (renderBottomToolbar instanceof Function
+                    ? renderBottomToolbar({ table })
+                    : renderBottomToolbar !== null && renderBottomToolbar !== void 0 ? renderBottomToolbar : jsxRuntime.jsx(MRT_BottomToolbar, { table: table }))] })));
 };
 
 const MRT_EditRowModal = ({ open, row, table, }) => {
     const { options: { localization }, } = table;
-    return (React__default["default"].createElement(Dialog__default["default"], { open: open },
-        React__default["default"].createElement(DialogTitle__default["default"], { textAlign: "center" }, localization.edit),
-        React__default["default"].createElement(DialogContent__default["default"], null,
-            React__default["default"].createElement("form", { onSubmit: (e) => e.preventDefault() },
-                React__default["default"].createElement(Stack__default["default"], { sx: {
-                        gap: '1.5rem',
-                        minWidth: { xs: '300px', sm: '360px', md: '400px' },
-                        pt: '1rem',
-                        width: '100%',
-                    } }, row
-                    .getAllCells()
-                    .filter((cell) => cell.column.columnDef.columnDefType === 'data')
-                    .map((cell) => (React__default["default"].createElement(MRT_EditCellTextField, { cell: cell, key: cell.id, showLabel: true, table: table })))))),
-        React__default["default"].createElement(DialogActions__default["default"], { sx: { p: '1.25rem' } },
-            React__default["default"].createElement(MRT_EditActionButtons, { row: row, table: table, variant: "text" }))));
+    return (jsxRuntime.jsxs(Dialog__default["default"], Object.assign({ open: open }, { children: [jsxRuntime.jsx(DialogTitle__default["default"], Object.assign({ textAlign: "center" }, { children: localization.edit })), jsxRuntime.jsx(DialogContent__default["default"], { children: jsxRuntime.jsx("form", Object.assign({ onSubmit: (e) => e.preventDefault() }, { children: jsxRuntime.jsx(Stack__default["default"], Object.assign({ sx: {
+                            gap: '1.5rem',
+                            minWidth: { xs: '300px', sm: '360px', md: '400px' },
+                            pt: '1rem',
+                            width: '100%',
+                        } }, { children: row
+                            .getAllCells()
+                            .filter((cell) => cell.column.columnDef.columnDefType === 'data')
+                            .map((cell) => (jsxRuntime.jsx(MRT_EditCellTextField, { cell: cell, showLabel: true, table: table }, cell.id))) })) })) }), jsxRuntime.jsx(DialogActions__default["default"], Object.assign({ sx: { p: '1.25rem' } }, { children: jsxRuntime.jsx(MRT_EditActionButtons, { row: row, table: table, variant: "text" }) }))] })));
 };
 
 const MRT_TableRoot = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13;
-    const bottomToolbarRef = React.useRef(null);
-    const editInputRefs = React.useRef({});
-    const filterInputRefs = React.useRef({});
-    const searchInputRef = React.useRef(null);
-    const tableContainerRef = React.useRef(null);
-    const tableHeadCellRefs = React.useRef({});
-    const tablePaperRef = React.useRef(null);
-    const topToolbarRef = React.useRef(null);
-    const initialState = React.useMemo(() => {
+    const bottomToolbarRef = react.useRef(null);
+    const editInputRefs = react.useRef({});
+    const filterInputRefs = react.useRef({});
+    const searchInputRef = react.useRef(null);
+    const tableContainerRef = react.useRef(null);
+    const tableHeadCellRefs = react.useRef({});
+    const tablePaperRef = react.useRef(null);
+    const topToolbarRef = react.useRef(null);
+    const initialState = react.useMemo(() => {
         var _a, _b, _c;
         const initState = (_a = props.initialState) !== null && _a !== void 0 ? _a : {};
         initState.columnOrder =
@@ -2973,7 +2834,7 @@ const MRT_TableRoot = (props) => {
         initState.globalFilterFn = (_c = props.globalFilterFn) !== null && _c !== void 0 ? _c : 'fuzzy';
         return initState;
     }, []);
-    const [columnFilterFns, setColumnFilterFns] = React.useState(() => Object.assign({}, ...getAllLeafColumnDefs(props.columns).map((col) => {
+    const [columnFilterFns, setColumnFilterFns] = react.useState(() => Object.assign({}, ...getAllLeafColumnDefs(props.columns).map((col) => {
         var _a, _b, _c, _d;
         return ({
             [getColumnId(col)]: col.filterFn instanceof Function
@@ -2981,32 +2842,32 @@ const MRT_TableRoot = (props) => {
                 : (_d = (_b = col.filterFn) !== null && _b !== void 0 ? _b : (_c = initialState === null || initialState === void 0 ? void 0 : initialState.columnFilterFns) === null || _c === void 0 ? void 0 : _c[getColumnId(col)]) !== null && _d !== void 0 ? _d : getDefaultColumnFilterFn(col),
         });
     })));
-    const [columnOrder, setColumnOrder] = React.useState((_a = initialState.columnOrder) !== null && _a !== void 0 ? _a : []);
-    const [density, setDensity] = React.useState((_b = initialState === null || initialState === void 0 ? void 0 : initialState.density) !== null && _b !== void 0 ? _b : 'comfortable');
-    const [draggingColumn, setDraggingColumn] = React.useState((_c = initialState.draggingColumn) !== null && _c !== void 0 ? _c : null);
-    const [draggingRow, setDraggingRow] = React.useState((_d = initialState.draggingRow) !== null && _d !== void 0 ? _d : null);
-    const [editingCell, setEditingCell] = React.useState((_e = initialState.editingCell) !== null && _e !== void 0 ? _e : null);
-    const [editingRow, setEditingRow] = React.useState((_f = initialState.editingRow) !== null && _f !== void 0 ? _f : null);
-    const [globalFilterFn, setGlobalFilterFn] = React.useState((_g = initialState.globalFilterFn) !== null && _g !== void 0 ? _g : 'fuzzy');
-    const [grouping, setGrouping] = React.useState((_h = initialState.grouping) !== null && _h !== void 0 ? _h : []);
-    const [hoveredColumn, setHoveredColumn] = React.useState((_j = initialState.hoveredColumn) !== null && _j !== void 0 ? _j : null);
-    const [hoveredRow, setHoveredRow] = React.useState((_k = initialState.hoveredRow) !== null && _k !== void 0 ? _k : null);
-    const [isFullScreen, setIsFullScreen] = React.useState((_l = initialState === null || initialState === void 0 ? void 0 : initialState.isFullScreen) !== null && _l !== void 0 ? _l : false);
-    const [showAlertBanner, setShowAlertBanner] = React.useState((_o = (_m = props.initialState) === null || _m === void 0 ? void 0 : _m.showAlertBanner) !== null && _o !== void 0 ? _o : false);
-    const [showColumnFilters, setShowColumnFilters] = React.useState((_p = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _p !== void 0 ? _p : false);
-    const [showGlobalFilter, setShowGlobalFilter] = React.useState((_q = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _q !== void 0 ? _q : false);
-    const [showToolbarDropZone, setShowToolbarDropZone] = React.useState((_r = initialState === null || initialState === void 0 ? void 0 : initialState.showToolbarDropZone) !== null && _r !== void 0 ? _r : false);
-    const displayColumns = React.useMemo(() => {
+    const [columnOrder, setColumnOrder] = react.useState((_a = initialState.columnOrder) !== null && _a !== void 0 ? _a : []);
+    const [density, setDensity] = react.useState((_b = initialState === null || initialState === void 0 ? void 0 : initialState.density) !== null && _b !== void 0 ? _b : 'comfortable');
+    const [draggingColumn, setDraggingColumn] = react.useState((_c = initialState.draggingColumn) !== null && _c !== void 0 ? _c : null);
+    const [draggingRow, setDraggingRow] = react.useState((_d = initialState.draggingRow) !== null && _d !== void 0 ? _d : null);
+    const [editingCell, setEditingCell] = react.useState((_e = initialState.editingCell) !== null && _e !== void 0 ? _e : null);
+    const [editingRow, setEditingRow] = react.useState((_f = initialState.editingRow) !== null && _f !== void 0 ? _f : null);
+    const [globalFilterFn, setGlobalFilterFn] = react.useState((_g = initialState.globalFilterFn) !== null && _g !== void 0 ? _g : 'fuzzy');
+    const [grouping, setGrouping] = react.useState((_h = initialState.grouping) !== null && _h !== void 0 ? _h : []);
+    const [hoveredColumn, setHoveredColumn] = react.useState((_j = initialState.hoveredColumn) !== null && _j !== void 0 ? _j : null);
+    const [hoveredRow, setHoveredRow] = react.useState((_k = initialState.hoveredRow) !== null && _k !== void 0 ? _k : null);
+    const [isFullScreen, setIsFullScreen] = react.useState((_l = initialState === null || initialState === void 0 ? void 0 : initialState.isFullScreen) !== null && _l !== void 0 ? _l : false);
+    const [showAlertBanner, setShowAlertBanner] = react.useState((_o = (_m = props.initialState) === null || _m === void 0 ? void 0 : _m.showAlertBanner) !== null && _o !== void 0 ? _o : false);
+    const [showColumnFilters, setShowColumnFilters] = react.useState((_p = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _p !== void 0 ? _p : false);
+    const [showGlobalFilter, setShowGlobalFilter] = react.useState((_q = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _q !== void 0 ? _q : false);
+    const [showToolbarDropZone, setShowToolbarDropZone] = react.useState((_r = initialState === null || initialState === void 0 ? void 0 : initialState.showToolbarDropZone) !== null && _r !== void 0 ? _r : false);
+    const displayColumns = react.useMemo(() => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
         return [
             ((_b = (_a = props.state) === null || _a === void 0 ? void 0 : _a.columnOrder) !== null && _b !== void 0 ? _b : columnOrder).includes('mrt-row-drag') && Object.assign(Object.assign(Object.assign({ header: props.localization.move, size: 60 }, props.defaultDisplayColumn), (_c = props.displayColumnDefOptions) === null || _c === void 0 ? void 0 : _c['mrt-row-drag']), { id: 'mrt-row-drag' }),
-            ((_e = (_d = props.state) === null || _d === void 0 ? void 0 : _d.columnOrder) !== null && _e !== void 0 ? _e : columnOrder).includes('mrt-row-actions') && Object.assign(Object.assign(Object.assign({ Cell: ({ cell, row }) => (React__default["default"].createElement(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, table: table })), header: props.localization.actions, size: 70 }, props.defaultDisplayColumn), (_f = props.displayColumnDefOptions) === null || _f === void 0 ? void 0 : _f['mrt-row-actions']), { id: 'mrt-row-actions' }),
+            ((_e = (_d = props.state) === null || _d === void 0 ? void 0 : _d.columnOrder) !== null && _e !== void 0 ? _e : columnOrder).includes('mrt-row-actions') && Object.assign(Object.assign(Object.assign({ Cell: ({ cell, row }) => (jsxRuntime.jsx(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, table: table })), header: props.localization.actions, size: 70 }, props.defaultDisplayColumn), (_f = props.displayColumnDefOptions) === null || _f === void 0 ? void 0 : _f['mrt-row-actions']), { id: 'mrt-row-actions' }),
             ((_h = (_g = props.state) === null || _g === void 0 ? void 0 : _g.columnOrder) !== null && _h !== void 0 ? _h : columnOrder).includes('mrt-row-expand') &&
-                showExpandColumn(props, (_k = (_j = props.state) === null || _j === void 0 ? void 0 : _j.grouping) !== null && _k !== void 0 ? _k : grouping) && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React__default["default"].createElement(MRT_ExpandButton, { row: row, table: table })), Header: props.enableExpandAll
-                    ? () => React__default["default"].createElement(MRT_ExpandAllButton, { table: table })
+                showExpandColumn(props, (_k = (_j = props.state) === null || _j === void 0 ? void 0 : _j.grouping) !== null && _k !== void 0 ? _k : grouping) && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (jsxRuntime.jsx(MRT_ExpandButton, { row: row, table: table })), Header: props.enableExpandAll
+                    ? () => jsxRuntime.jsx(MRT_ExpandAllButton, { table: table })
                     : null, header: props.localization.expand, size: 60 }, props.defaultDisplayColumn), (_l = props.displayColumnDefOptions) === null || _l === void 0 ? void 0 : _l['mrt-row-expand']), { id: 'mrt-row-expand' }),
-            ((_o = (_m = props.state) === null || _m === void 0 ? void 0 : _m.columnOrder) !== null && _o !== void 0 ? _o : columnOrder).includes('mrt-row-select') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React__default["default"].createElement(MRT_SelectCheckbox, { row: row, table: table })), Header: props.enableSelectAll && props.enableMultiRowSelection
-                    ? () => React__default["default"].createElement(MRT_SelectCheckbox, { selectAll: true, table: table })
+            ((_o = (_m = props.state) === null || _m === void 0 ? void 0 : _m.columnOrder) !== null && _o !== void 0 ? _o : columnOrder).includes('mrt-row-select') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (jsxRuntime.jsx(MRT_SelectCheckbox, { row: row, table: table })), Header: props.enableSelectAll && props.enableMultiRowSelection
+                    ? () => jsxRuntime.jsx(MRT_SelectCheckbox, { selectAll: true, table: table })
                     : null, header: props.localization.select, size: 60 }, props.defaultDisplayColumn), (_p = props.displayColumnDefOptions) === null || _p === void 0 ? void 0 : _p['mrt-row-select']), { id: 'mrt-row-select' }),
             ((_r = (_q = props.state) === null || _q === void 0 ? void 0 : _q.columnOrder) !== null && _r !== void 0 ? _r : columnOrder).includes('mrt-row-numbers') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => row.index + 1, Header: () => props.localization.rowNumber, header: props.localization.rowNumbers, size: 60 }, props.defaultDisplayColumn), (_s = props.displayColumnDefOptions) === null || _s === void 0 ? void 0 : _s['mrt-row-numbers']), { id: 'mrt-row-numbers' }),
         ].filter(Boolean);
@@ -3036,7 +2897,7 @@ const MRT_TableRoot = (props) => {
         (_s = props.state) === null || _s === void 0 ? void 0 : _s.columnOrder,
         (_t = props.state) === null || _t === void 0 ? void 0 : _t.grouping,
     ]);
-    const columnDefs = React.useMemo(() => {
+    const columnDefs = react.useMemo(() => {
         var _a, _b, _c;
         return prepareColumns({
             aggregationFns: props.aggregationFns,
@@ -3052,7 +2913,7 @@ const MRT_TableRoot = (props) => {
         props.columns,
         (_u = props.state) === null || _u === void 0 ? void 0 : _u.columnFilterFns,
     ]);
-    const data = React.useMemo(() => {
+    const data = react.useMemo(() => {
         var _a, _b, _c, _d, _e;
         return (((_a = props.state) === null || _a === void 0 ? void 0 : _a.isLoading) || ((_b = props.state) === null || _b === void 0 ? void 0 : _b.showSkeletons)) &&
             !props.data.length
@@ -3101,13 +2962,13 @@ const MRT_TableRoot = (props) => {
     if (props.tableInstanceRef) {
         props.tableInstanceRef.current = table;
     }
-    const initialBodyHeight = React.useRef();
-    React.useEffect(() => {
+    const initialBodyHeight = react.useRef();
+    react.useEffect(() => {
         if (typeof window !== 'undefined') {
             initialBodyHeight.current = document.body.style.height;
         }
     }, []);
-    React.useEffect(() => {
+    react.useEffect(() => {
         if (typeof window !== 'undefined') {
             if (table.getState().isFullScreen) {
                 document.body.style.height = '100vh';
@@ -3118,7 +2979,7 @@ const MRT_TableRoot = (props) => {
         }
     }, [table.getState().isFullScreen]);
     //if page index is out of bounds, set it to the last page
-    React.useEffect(() => {
+    react.useEffect(() => {
         var _a;
         const { pageIndex, pageSize } = table.getState().pagination;
         const totalRowCount = (_a = props.rowCount) !== null && _a !== void 0 ? _a : table.getPrePaginationRowModel().rows.length;
@@ -3127,115 +2988,19 @@ const MRT_TableRoot = (props) => {
             table.setPageIndex(Math.floor(totalRowCount / pageSize));
         }
     }, [props.rowCount, table.getPrePaginationRowModel().rows.length]);
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(Dialog__default["default"], { PaperComponent: Box__default["default"], TransitionComponent: !props.enableRowVirtualization ? Grow__default["default"] : undefined, disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => table.setIsFullScreen(false), open: table.getState().isFullScreen, transitionDuration: 400 },
-            React__default["default"].createElement(MRT_TablePaper, { table: table })),
-        !table.getState().isFullScreen && (React__default["default"].createElement(MRT_TablePaper, { table: table })),
-        editingRow && props.editingMode === 'modal' && (React__default["default"].createElement(MRT_EditRowModal, { row: editingRow, table: table, open: true }))));
-};
-
-const MRT_Localization_EN = {
-    actions: 'Actions',
-    and: 'and',
-    cancel: 'Cancel',
-    changeFilterMode: 'Change filter mode',
-    changeSearchMode: 'Change search mode',
-    clearFilter: 'Clear filter',
-    clearSearch: 'Clear search',
-    clearSort: 'Clear sort',
-    clickToCopy: 'Click to copy',
-    collapse: 'Collapse',
-    collapseAll: 'Collapse all',
-    columnActions: 'Column Actions',
-    copiedToClipboard: 'Copied to clipboard',
-    dropToGroupBy: 'Drop to group by {column}',
-    edit: 'Edit',
-    expand: 'Expand',
-    expandAll: 'Expand all',
-    filterArrIncludes: 'Includes',
-    filterArrIncludesAll: 'Includes all',
-    filterArrIncludesSome: 'Includes',
-    filterBetween: 'Between',
-    filterBetweenInclusive: 'Between Inclusive',
-    filterByColumn: 'Filter by {column}',
-    filterContains: 'Contains',
-    filterEmpty: 'Empty',
-    filterEndsWith: 'Ends With',
-    filterEquals: 'Equals',
-    filterEqualsString: 'Equals',
-    filterFuzzy: 'Fuzzy',
-    filterGreaterThan: 'Greater Than',
-    filterGreaterThanOrEqualTo: 'Greater Than Or Equal To',
-    filterInNumberRange: 'Between',
-    filterIncludesString: 'Contains',
-    filterIncludesStringSensitive: 'Contains',
-    filterLessThan: 'Less Than',
-    filterLessThanOrEqualTo: 'Less Than Or Equal To',
-    filterMode: 'Filter Mode: {filterType}',
-    filterNotEmpty: 'Not Empty',
-    filterNotEquals: 'Not Equals',
-    filterStartsWith: 'Starts With',
-    filterWeakEquals: 'Equals',
-    filteringByColumn: 'Filtering by {column} - {filterType} {filterValue}',
-    goToFirstPage: 'Go to first page',
-    goToLastPage: 'Go to last page',
-    goToNextPage: 'Go to next page',
-    goToPreviousPage: 'Go to previous page',
-    grab: 'Grab',
-    groupByColumn: 'Group by {column}',
-    groupedBy: 'Grouped by ',
-    hideAll: 'Hide all',
-    hideColumn: 'Hide {column} column',
-    max: 'Max',
-    min: 'Min',
-    move: 'Move',
-    noRecordsToDisplay: 'No records to display',
-    noResultsFound: 'No results found',
-    of: 'of',
-    or: 'or',
-    pinToLeft: 'Pin to left',
-    pinToRight: 'Pin to right',
-    resetColumnSize: 'Reset column size',
-    resetOrder: 'Reset order',
-    rowActions: 'Row Actions',
-    rowNumber: '#',
-    rowNumbers: 'Row Numbers',
-    rowsPerPage: 'Rows per page',
-    save: 'Save',
-    search: 'Search',
-    selectedCountOfRowCountRowsSelected: '{selectedCount} of {rowCount} row(s) selected',
-    select: 'Select',
-    showAll: 'Show all',
-    showAllColumns: 'Show all columns',
-    showHideColumns: 'Show/Hide columns',
-    showHideFilters: 'Show/Hide filters',
-    showHideSearch: 'Show/Hide search',
-    sortByColumnAsc: 'Sort by {column} ascending',
-    sortByColumnDesc: 'Sort by {column} descending',
-    sortedByColumnAsc: 'Sorted by {column} ascending',
-    sortedByColumnDesc: 'Sorted by {column} descending',
-    thenBy: ', then by ',
-    toggleDensity: 'Toggle density',
-    toggleFullScreen: 'Toggle full screen',
-    toggleSelectAll: 'Toggle select all',
-    toggleSelectRow: 'Toggle select row',
-    toggleVisibility: 'Toggle visibility',
-    ungroupByColumn: 'Ungroup by {column}',
-    unpin: 'Unpin',
-    unpinAll: 'Unpin all',
-    unsorted: 'Unsorted',
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Dialog__default["default"], Object.assign({ PaperComponent: Box__default["default"], TransitionComponent: !props.enableRowVirtualization ? Grow__default["default"] : undefined, disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => table.setIsFullScreen(false), open: table.getState().isFullScreen, transitionDuration: 400 }, { children: jsxRuntime.jsx(MRT_TablePaper, { table: table }) })), !table.getState().isFullScreen && (jsxRuntime.jsx(MRT_TablePaper, { table: table })), editingRow && props.editingMode === 'modal' && (jsxRuntime.jsx(MRT_EditRowModal, { row: editingRow, table: table, open: true }))] }));
 };
 
 const MaterialReactTable = (_a) => {
     var _b;
     var { aggregationFns, autoResetExpanded = false, columnResizeMode = 'onChange', defaultColumn, defaultDisplayColumn, editingMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enablePinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode = 'semantic', localization, manualFiltering, manualGrouping, manualPagination, manualSorting, positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'original', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnResizeMode", "defaultColumn", "defaultDisplayColumn", "editingMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "selectAllMode", "sortingFns"]);
-    const _icons = React.useMemo(() => (Object.assign(Object.assign({}, MRT_Default_Icons), icons)), [icons]);
-    const _localization = React.useMemo(() => (Object.assign(Object.assign({}, MRT_Localization_EN), localization)), [localization]);
-    const _aggregationFns = React.useMemo(() => (Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns)), []);
-    const _filterFns = React.useMemo(() => (Object.assign(Object.assign({}, MRT_FilterFns), filterFns)), []);
-    const _sortingFns = React.useMemo(() => (Object.assign(Object.assign({}, MRT_SortingFns), sortingFns)), []);
-    const _defaultColumn = React.useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultColumn), defaultColumn)), [defaultColumn]);
-    const _defaultDisplayColumn = React.useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultDisplayColumn), defaultDisplayColumn)), [defaultDisplayColumn]);
+    const _icons = react.useMemo(() => (Object.assign(Object.assign({}, MRT_Default_Icons), icons)), [icons]);
+    const _localization = react.useMemo(() => (Object.assign(Object.assign({}, MRT_Localization_EN), localization)), [localization]);
+    const _aggregationFns = react.useMemo(() => (Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns)), []);
+    const _filterFns = react.useMemo(() => (Object.assign(Object.assign({}, MRT_FilterFns), filterFns)), []);
+    const _sortingFns = react.useMemo(() => (Object.assign(Object.assign({}, MRT_SortingFns), sortingFns)), []);
+    const _defaultColumn = react.useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultColumn), defaultColumn)), [defaultColumn]);
+    const _defaultDisplayColumn = react.useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultDisplayColumn), defaultDisplayColumn)), [defaultDisplayColumn]);
     if (rest.enableRowVirtualization || rest.enableColumnVirtualization) {
         layoutMode = 'grid';
     }
@@ -3251,7 +3016,7 @@ const MaterialReactTable = (_a) => {
         manualPagination = true;
         manualSorting = true;
     }
-    return (React__default["default"].createElement(MRT_TableRoot, Object.assign({ aggregationFns: _aggregationFns, autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: _defaultColumn, defaultDisplayColumn: _defaultDisplayColumn, editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilterMatchHighlighting: enableFilterMatchHighlighting, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterRankedResults: enableGlobalFilterRankedResults, enableGrouping: enableGrouping, enableHiding: enableHiding, enableMultiRowSelection: enableMultiRowSelection, enableMultiSort: enableMultiSort, enablePagination: enablePagination, enablePinning: enablePinning, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, enableSorting: enableSorting, enableStickyHeader: enableStickyHeader, enableTableFooter: enableTableFooter, enableTableHead: enableTableHead, enableToolbarInternalActions: enableToolbarInternalActions, enableTopToolbar: enableTopToolbar, filterFns: _filterFns, icons: _icons, layoutMode: layoutMode, localization: _localization, manualFiltering: manualFiltering, manualGrouping: manualGrouping, manualPagination: manualPagination, manualSorting: manualSorting, positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: _sortingFns }, rest)));
+    return (jsxRuntime.jsx(MRT_TableRoot, Object.assign({ aggregationFns: _aggregationFns, autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: _defaultColumn, defaultDisplayColumn: _defaultDisplayColumn, editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilterMatchHighlighting: enableFilterMatchHighlighting, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterRankedResults: enableGlobalFilterRankedResults, enableGrouping: enableGrouping, enableHiding: enableHiding, enableMultiRowSelection: enableMultiRowSelection, enableMultiSort: enableMultiSort, enablePagination: enablePagination, enablePinning: enablePinning, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, enableSorting: enableSorting, enableStickyHeader: enableStickyHeader, enableTableFooter: enableTableFooter, enableTableHead: enableTableHead, enableToolbarInternalActions: enableToolbarInternalActions, enableTopToolbar: enableTopToolbar, filterFns: _filterFns, icons: _icons, layoutMode: layoutMode, localization: _localization, manualFiltering: manualFiltering, manualGrouping: manualGrouping, manualPagination: manualPagination, manualSorting: manualSorting, positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: _sortingFns }, rest)));
 };
 
 exports.MRT_AggregationFns = MRT_AggregationFns;
@@ -3276,5 +3041,6 @@ exports.MRT_ToolbarAlertBanner = MRT_ToolbarAlertBanner;
 exports.MRT_ToolbarDropZone = MRT_ToolbarDropZone;
 exports.MRT_ToolbarInternalButtons = MRT_ToolbarInternalButtons;
 exports.MRT_TopToolbar = MRT_TopToolbar;
+exports.MaterialReactTable = MaterialReactTable;
 exports["default"] = MaterialReactTable;
 //# sourceMappingURL=index.js.map