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

package/dist/esm/material-react-table.esm.js

@@ -1,7 +1,8 @@
-import React, { useMemo, useState, useRef, useCallback, useEffect, Fragment, memo, useLayoutEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useMemo, useState, useRef, useCallback, useEffect, Fragment as Fragment$1, memo, useLayoutEffect } from 'react';
 import { aggregationFns, filterFns, sortingFns, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
-import { alpha, lighten, useTheme, darken } from '@mui/material/styles';
 import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
+import { alpha, lighten, useTheme, darken } from '@mui/material/styles';
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import ArrowRightIcon from '@mui/icons-material/ArrowRight';
 import CancelIcon from '@mui/icons-material/Cancel';
@@ -100,6 +101,104 @@ function __rest(s, e) {
 
 const MRT_AggregationFns = Object.assign({}, aggregationFns);
 
+const fuzzy$1 = (row, columnId, filterValue, addMeta) => {
+    const itemRank = rankItem(row.getValue(columnId), filterValue, {
+        threshold: 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({}, 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 = compareItems(rowA.columnFiltersMeta[columnId], rowB.columnFiltersMeta[columnId]);
+    }
+    // Provide a fallback for when the item ranks are equal
+    return dir === 0
+        ? sortingFns.alphanumeric(rowA, rowB, columnId)
+        : dir;
+};
+const MRT_SortingFns = Object.assign(Object.assign({}, 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 = [];
@@ -167,8 +266,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))) ||
@@ -303,90 +403,6 @@ const MRT_DefaultDisplayColumn = {
 };
 const parseCSSVarId = (id) => id.replace(/[^a-zA-Z0-9]/g, '_');
 
-const fuzzy$1 = (row, columnId, filterValue, addMeta) => {
-    const itemRank = rankItem(row.getValue(columnId), filterValue, {
-        threshold: 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({}, filterFns), { between,
-    betweenInclusive,
-    contains,
-    empty,
-    endsWith,
-    equals,
-    fuzzy: fuzzy$1,
-    greaterThan,
-    greaterThanOrEqualTo,
-    lessThan,
-    lessThanOrEqualTo,
-    notEmpty,
-    notEquals,
-    startsWith });
-
 const MRT_Default_Icons = {
     ArrowDownwardIcon,
     ArrowRightIcon,
@@ -418,19 +434,97 @@ const MRT_Default_Icons = {
     VisibilityOffIcon,
 };
 
-const fuzzy = (rowA, rowB, columnId) => {
-    let dir = 0;
-    if (rowA.columnFiltersMeta[columnId]) {
-        dir = compareItems(rowA.columnFiltersMeta[columnId], rowB.columnFiltersMeta[columnId]);
-    }
-    // Provide a fallback for when the item ranks are equal
-    return dir === 0
-        ? 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({}, 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;
@@ -440,16 +534,14 @@ const MRT_ExpandAllButton = ({ table }) => {
         ? muiExpandAllButtonProps({ table })
         : muiExpandAllButtonProps;
     const isAllRowsExpanded = getIsAllRowsExpanded();
-    return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: ((_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : isAllRowsExpanded)
+    return (jsx(Tooltip, 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.createElement("span", null,
-            React.createElement(IconButton, 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: jsx("span", { children: jsx(IconButton, 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.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 : (jsx(KeyboardDoubleArrowDownIcon, { style: {
+                        transform: `rotate(${isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0}deg)`,
+                        transition: 'transform 150ms',
+                    } })) })) }) })));
 };
 
 const MRT_ExpandButton = ({ row, table, }) => {
@@ -467,16 +559,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.createElement(Tooltip, { 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 (jsx(Tooltip, 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.createElement("span", null,
-            React.createElement(IconButton, 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: jsx("span", { children: jsx(IconButton, 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.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 : (jsx(ExpandMoreIcon, { style: {
+                        transform: `rotate(${!canExpand && !renderDetailPanel ? -90 : isExpanded ? -180 : 0}deg)`,
+                        transition: 'transform 150ms',
+                    } })) })) }) })));
 };
 
 const mrtFilterOptions = (localization) => [
@@ -643,33 +733,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.createElement(Menu, { anchorEl: anchorEl, anchorOrigin: { vertical: 'center', horizontal: 'right' }, onClose: () => setAnchorEl(null), open: !!anchorEl, MenuListProps: {
+    return (jsx(Menu, 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.createElement(MenuItem, { divider: divider, key: index, onClick: () => handleSelectFilterMode(option), selected: option === filterOption, sx: {
-            alignItems: 'center',
-            display: 'flex',
-            gap: '2ch',
-            my: 0,
-            py: '6px',
-        }, value: option },
-        React.createElement(Box, { 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) => (jsxs(MenuItem, Object.assign({ divider: divider, onClick: () => handleSelectFilterMode(option), selected: option === filterOption, sx: {
+                alignItems: 'center',
+                display: 'flex',
+                gap: '2ch',
+                my: 0,
+                py: '6px',
+            }, value: option }, { children: [jsx(Box, Object.assign({ sx: { fontSize: '1.25rem', width: '2ch' } }, { children: symbol })), label] }), index))) })));
 };
 
 const commonMenuItemStyles = {
@@ -743,121 +831,60 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
         !isSelectFilter &&
         (allowedColumnFilterOptions === undefined ||
             !!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length));
-    return (React.createElement(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
+    return (jsxs(Menu, 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.createElement(MenuItem, { disabled: !column.getIsSorted(), key: 0, onClick: handleClearSort, sx: commonMenuItemStyles },
-                React.createElement(Box, { sx: commonListItemStyles },
-                    React.createElement(ListItemIcon, null,
-                        React.createElement(ClearAllIcon, null)),
-                    localization.clearSort))),
-            React.createElement(MenuItem, { disabled: column.getIsSorted() === 'asc', key: 1, onClick: handleSortAsc, sx: commonMenuItemStyles },
-                React.createElement(Box, { sx: commonListItemStyles },
-                    React.createElement(ListItemIcon, null,
-                        React.createElement(SortIcon, { style: { transform: 'rotate(180deg) scaleX(-1)' } })), (_e = localization.sortByColumnAsc) === null || _e === void 0 ? void 0 :
-                    _e.replace('{column}', String(columnDef.header)))),
-            React.createElement(MenuItem, { divider: enableColumnFilters || enableGrouping || enableHiding, key: 2, disabled: column.getIsSorted() === 'desc', onClick: handleSortDesc, sx: commonMenuItemStyles },
-                React.createElement(Box, { sx: commonListItemStyles },
-                    React.createElement(ListItemIcon, null,
-                        React.createElement(SortIcon, null)), (_f = localization.sortByColumnDesc) === null || _f === void 0 ? void 0 :
-                    _f.replace('{column}', String(columnDef.header)))),
-        ].filter(Boolean)),
-        enableColumnFilters &&
-            column.getCanFilter() &&
-            [
-                React.createElement(MenuItem, { disabled: !column.getFilterValue(), key: 0, onClick: handleClearFilter, sx: commonMenuItemStyles },
-                    React.createElement(Box, { sx: commonListItemStyles },
-                        React.createElement(ListItemIcon, null,
-                            React.createElement(FilterListOffIcon, null)),
-                        localization.clearFilter)),
-                React.createElement(MenuItem, { disabled: showColumnFilters && !enableColumnFilterModes, divider: enableGrouping || enableHiding, key: 1, onClick: showColumnFilters
-                        ? handleOpenFilterModeMenu
-                        : handleFilterByColumn, sx: commonMenuItemStyles },
-                    React.createElement(Box, { sx: commonListItemStyles },
-                        React.createElement(ListItemIcon, null,
-                            React.createElement(FilterListIcon, null)), (_g = localization.filterByColumn) === null || _g === void 0 ? void 0 :
-                        _g.replace('{column}', String(columnDef.header))),
-                    showFilterModeSubMenu && (React.createElement(IconButton, { onClick: handleOpenFilterModeMenu, onMouseEnter: handleOpenFilterModeMenu, size: "small", sx: { p: 0 } },
-                        React.createElement(ArrowRightIcon, null)))),
-                showFilterModeSubMenu && (React.createElement(MRT_FilterOptionMenu, { anchorEl: filterMenuAnchorEl, header: header, key: 2, onSelect: handleFilterByColumn, setAnchorEl: setFilterMenuAnchorEl, table: table })),
-            ].filter(Boolean),
-        enableGrouping &&
-            column.getCanGroup() && [
-            React.createElement(MenuItem, { divider: enablePinning, key: 0, onClick: handleGroupByColumn, sx: commonMenuItemStyles },
-                React.createElement(Box, { sx: commonListItemStyles },
-                    React.createElement(ListItemIcon, null,
-                        React.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.createElement(MenuItem, { disabled: column.getIsPinned() === 'left' || !column.getCanPin(), key: 0, onClick: () => handlePinColumn('left'), sx: commonMenuItemStyles },
-                React.createElement(Box, { sx: commonListItemStyles },
-                    React.createElement(ListItemIcon, null,
-                        React.createElement(PushPinIcon, { style: { transform: 'rotate(90deg)' } })),
-                    localization.pinToLeft)),
-            React.createElement(MenuItem, { disabled: column.getIsPinned() === 'right' || !column.getCanPin(), key: 1, onClick: () => handlePinColumn('right'), sx: commonMenuItemStyles },
-                React.createElement(Box, { sx: commonListItemStyles },
-                    React.createElement(ListItemIcon, null,
-                        React.createElement(PushPinIcon, { style: { transform: 'rotate(-90deg)' } })),
-                    localization.pinToRight)),
-            React.createElement(MenuItem, { disabled: !column.getIsPinned(), divider: enableHiding, key: 2, onClick: () => handlePinColumn(false), sx: commonMenuItemStyles },
-                React.createElement(Box, { sx: commonListItemStyles },
-                    React.createElement(ListItemIcon, null,
-                        React.createElement(PushPinIcon, null)),
-                    localization.unpin)),
-        ],
-        enableColumnResizing &&
-            column.getCanResize() && [
-            React.createElement(MenuItem, { disabled: !columnSizing[column.id], key: 0, onClick: handleResetColumnSize, sx: commonMenuItemStyles },
-                React.createElement(Box, { sx: commonListItemStyles },
-                    React.createElement(ListItemIcon, null,
-                        React.createElement(RestartAltIcon, null)),
-                    localization.resetColumnSize)),
-        ],
-        enableHiding && [
-            React.createElement(MenuItem, { disabled: !column.getCanHide(), key: 0, onClick: handleHideColumn, sx: commonMenuItemStyles },
-                React.createElement(Box, { sx: commonListItemStyles },
-                    React.createElement(ListItemIcon, null,
-                        React.createElement(VisibilityOffIcon, null)), (_j = localization.hideColumn) === null || _j === void 0 ? void 0 :
-                    _j.replace('{column}', String(columnDef.header)))),
-            React.createElement(MenuItem, { disabled: !Object.values(columnVisibility).filter((visible) => !visible)
-                    .length, key: 1, onClick: handleShowAllColumns, sx: commonMenuItemStyles },
-                React.createElement(Box, { sx: commonListItemStyles },
-                    React.createElement(ListItemIcon, null,
-                        React.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 && (jsx(MenuItem, Object.assign({ disabled: !column.getIsSorted(), onClick: handleClearSort, sx: commonMenuItemStyles }, { children: jsxs(Box, Object.assign({ sx: commonListItemStyles }, { children: [jsx(ListItemIcon, { children: jsx(ClearAllIcon, {}) }), localization.clearSort] })) }), 0)),
+                    jsx(MenuItem, Object.assign({ disabled: column.getIsSorted() === 'asc', onClick: handleSortAsc, sx: commonMenuItemStyles }, { children: jsxs(Box, Object.assign({ sx: commonListItemStyles }, { children: [jsx(ListItemIcon, { children: jsx(SortIcon, { style: { transform: 'rotate(180deg) scaleX(-1)' } }) }), (_e = localization.sortByColumnAsc) === null || _e === void 0 ? void 0 : _e.replace('{column}', String(columnDef.header))] })) }), 1),
+                    jsx(MenuItem, Object.assign({ divider: enableColumnFilters || enableGrouping || enableHiding, disabled: column.getIsSorted() === 'desc', onClick: handleSortDesc, sx: commonMenuItemStyles }, { children: jsxs(Box, Object.assign({ sx: commonListItemStyles }, { children: [jsx(ListItemIcon, { children: jsx(SortIcon, {}) }), (_f = localization.sortByColumnDesc) === null || _f === void 0 ? void 0 : _f.replace('{column}', String(columnDef.header))] })) }), 2),
+                ].filter(Boolean)), enableColumnFilters &&
+                column.getCanFilter() &&
+                [
+                    jsx(MenuItem, Object.assign({ disabled: !column.getFilterValue(), onClick: handleClearFilter, sx: commonMenuItemStyles }, { children: jsxs(Box, Object.assign({ sx: commonListItemStyles }, { children: [jsx(ListItemIcon, { children: jsx(FilterListOffIcon, {}) }), localization.clearFilter] })) }), 0),
+                    jsxs(MenuItem, Object.assign({ disabled: showColumnFilters && !enableColumnFilterModes, divider: enableGrouping || enableHiding, onClick: showColumnFilters
+                            ? handleOpenFilterModeMenu
+                            : handleFilterByColumn, sx: commonMenuItemStyles }, { children: [jsxs(Box, Object.assign({ sx: commonListItemStyles }, { children: [jsx(ListItemIcon, { children: jsx(FilterListIcon, {}) }), (_g = localization.filterByColumn) === null || _g === void 0 ? void 0 : _g.replace('{column}', String(columnDef.header))] })), showFilterModeSubMenu && (jsx(IconButton, Object.assign({ onClick: handleOpenFilterModeMenu, onMouseEnter: handleOpenFilterModeMenu, size: "small", sx: { p: 0 } }, { children: jsx(ArrowRightIcon, {}) })))] }), 1),
+                    showFilterModeSubMenu && (jsx(MRT_FilterOptionMenu, { anchorEl: filterMenuAnchorEl, header: header, onSelect: handleFilterByColumn, setAnchorEl: setFilterMenuAnchorEl, table: table }, 2)),
+                ].filter(Boolean), enableGrouping &&
+                column.getCanGroup() && [
+                jsx(MenuItem, Object.assign({ divider: enablePinning, onClick: handleGroupByColumn, sx: commonMenuItemStyles }, { children: jsxs(Box, Object.assign({ sx: commonListItemStyles }, { children: [jsx(ListItemIcon, { children: jsx(DynamicFeedIcon, {}) }), (_h = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) === null || _h === void 0 ? void 0 : _h.replace('{column}', String(columnDef.header))] })) }), 0),
+            ], enablePinning &&
+                column.getCanPin() && [
+                jsx(MenuItem, Object.assign({ disabled: column.getIsPinned() === 'left' || !column.getCanPin(), onClick: () => handlePinColumn('left'), sx: commonMenuItemStyles }, { children: jsxs(Box, Object.assign({ sx: commonListItemStyles }, { children: [jsx(ListItemIcon, { children: jsx(PushPinIcon, { style: { transform: 'rotate(90deg)' } }) }), localization.pinToLeft] })) }), 0),
+                jsx(MenuItem, Object.assign({ disabled: column.getIsPinned() === 'right' || !column.getCanPin(), onClick: () => handlePinColumn('right'), sx: commonMenuItemStyles }, { children: jsxs(Box, Object.assign({ sx: commonListItemStyles }, { children: [jsx(ListItemIcon, { children: jsx(PushPinIcon, { style: { transform: 'rotate(-90deg)' } }) }), localization.pinToRight] })) }), 1),
+                jsx(MenuItem, Object.assign({ disabled: !column.getIsPinned(), divider: enableHiding, onClick: () => handlePinColumn(false), sx: commonMenuItemStyles }, { children: jsxs(Box, Object.assign({ sx: commonListItemStyles }, { children: [jsx(ListItemIcon, { children: jsx(PushPinIcon, {}) }), localization.unpin] })) }), 2),
+            ], enableColumnResizing &&
+                column.getCanResize() && [
+                jsx(MenuItem, Object.assign({ disabled: !columnSizing[column.id], onClick: handleResetColumnSize, sx: commonMenuItemStyles }, { children: jsxs(Box, Object.assign({ sx: commonListItemStyles }, { children: [jsx(ListItemIcon, { children: jsx(RestartAltIcon, {}) }), localization.resetColumnSize] })) }), 0),
+            ], enableHiding && [
+                jsx(MenuItem, Object.assign({ disabled: !column.getCanHide(), onClick: handleHideColumn, sx: commonMenuItemStyles }, { children: jsxs(Box, Object.assign({ sx: commonListItemStyles }, { children: [jsx(ListItemIcon, { children: jsx(VisibilityOffIcon, {}) }), (_j = localization.hideColumn) === null || _j === void 0 ? void 0 : _j.replace('{column}', String(columnDef.header))] })) }), 0),
+                jsx(MenuItem, Object.assign({ disabled: !Object.values(columnVisibility).filter((visible) => !visible)
+                        .length, onClick: handleShowAllColumns, sx: commonMenuItemStyles }, { children: jsxs(Box, Object.assign({ sx: commonListItemStyles }, { children: [jsx(ListItemIcon, { children: 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.createElement(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClick: (event) => event.stopPropagation(), onClose: () => setAnchorEl(null), MenuListProps: {
+    return (jsxs(Menu, Object.assign({ anchorEl: anchorEl, open: !!anchorEl, onClick: (event) => event.stopPropagation(), onClose: () => setAnchorEl(null), MenuListProps: {
             dense: density === 'compact',
-        } },
-        enableEditing instanceof Function
-            ? enableEditing(row)
-            : enableEditing && (React.createElement(MenuItem, { onClick: handleEdit, sx: commonMenuItemStyles },
-                React.createElement(Box, { sx: commonListItemStyles },
-                    React.createElement(ListItemIcon, null,
-                        React.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 && (jsx(MenuItem, Object.assign({ onClick: handleEdit, sx: commonMenuItemStyles }, { children: jsxs(Box, Object.assign({ sx: commonListItemStyles }, { children: [jsx(ListItemIcon, { children: jsx(EditIcon, {}) }), localization.edit] })) }))), renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 : renderRowActionMenuItems({
+                row,
+                table,
+                closeMenu: () => setAnchorEl(null),
+            })] })));
 };
 
 const MRT_EditActionButtons = ({ row, table, variant = 'icon', }) => {
@@ -884,15 +911,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.createElement(Box, { onClick: (e) => e.stopPropagation(), sx: { display: 'flex', gap: '0.75rem' } }, variant === 'icon' ? (React.createElement(React.Fragment, null,
-        React.createElement(Tooltip, { arrow: true, title: localization.cancel },
-            React.createElement(IconButton, { "aria-label": localization.cancel, onClick: handleCancel },
-                React.createElement(CancelIcon, null))),
-        React.createElement(Tooltip, { arrow: true, title: localization.save },
-            React.createElement(IconButton, { "aria-label": localization.save, color: "info", onClick: handleSave },
-                React.createElement(SaveIcon, null))))) : (React.createElement(React.Fragment, null,
-        React.createElement(Button, { onClick: handleCancel }, localization.cancel),
-        React.createElement(Button, { onClick: handleSave, variant: "contained" }, localization.save)))));
+    return (jsx(Box, Object.assign({ onClick: (e) => e.stopPropagation(), sx: { display: 'flex', gap: '0.75rem' } }, { children: variant === 'icon' ? (jsxs(Fragment, { children: [jsx(Tooltip, Object.assign({ arrow: true, title: localization.cancel }, { children: jsx(IconButton, Object.assign({ "aria-label": localization.cancel, onClick: handleCancel }, { children: jsx(CancelIcon, {}) })) })), jsx(Tooltip, Object.assign({ arrow: true, title: localization.save }, { children: jsx(IconButton, Object.assign({ "aria-label": localization.save, color: "info", onClick: handleSave }, { children: jsx(SaveIcon, {}) })) }))] })) : (jsxs(Fragment, { children: [jsx(Button, Object.assign({ onClick: handleCancel }, { children: localization.cancel })), jsx(Button, Object.assign({ onClick: handleSave, variant: "contained" }, { children: localization.save }))] })) })));
 };
 
 const commonIconButtonStyles = {
@@ -919,16 +938,10 @@ const MRT_ToggleRowActionMenuButton = ({ cell, row, table, }) => {
         setEditingRow(Object.assign({}, row));
         setAnchorEl(null);
     };
-    return (React.createElement(React.Fragment, null, renderRowActions ? (renderRowActions({ cell, row, table })) : row.id === (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) && editingMode === 'row' ? (React.createElement(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems &&
-        (enableEditing instanceof Function
-            ? enableEditing(row)
-            : enableEditing) ? (React.createElement(Tooltip, { placement: "right", arrow: true, title: localization.edit },
-        React.createElement(IconButton, { "aria-label": localization.edit, sx: commonIconButtonStyles, onClick: handleStartEditMode },
-            React.createElement(EditIcon, null)))) : renderRowActionMenuItems ? (React.createElement(React.Fragment, null,
-        React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.rowActions },
-            React.createElement(IconButton, { "aria-label": localization.rowActions, onClick: handleOpenRowActionMenu, size: "small", sx: commonIconButtonStyles },
-                React.createElement(MoreHorizIcon, null))),
-        React.createElement(MRT_RowActionMenu, { anchorEl: anchorEl, handleEdit: handleStartEditMode, row: row, setAnchorEl: setAnchorEl, table: table }))) : null));
+    return (jsx(Fragment, { children: renderRowActions ? (renderRowActions({ cell, row, table })) : row.id === (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) && editingMode === 'row' ? (jsx(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems &&
+            (enableEditing instanceof Function
+                ? enableEditing(row)
+                : enableEditing) ? (jsx(Tooltip, Object.assign({ placement: "right", arrow: true, title: localization.edit }, { children: jsx(IconButton, Object.assign({ "aria-label": localization.edit, sx: commonIconButtonStyles, onClick: handleStartEditMode }, { children: jsx(EditIcon, {}) })) }))) : renderRowActionMenuItems ? (jsxs(Fragment, { children: [jsx(Tooltip, Object.assign({ arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.rowActions }, { children: jsx(IconButton, Object.assign({ "aria-label": localization.rowActions, onClick: handleOpenRowActionMenu, size: "small", sx: commonIconButtonStyles }, { children: jsx(MoreHorizIcon, {}) })) })), jsx(MRT_RowActionMenu, { anchorEl: anchorEl, handleEdit: handleStartEditMode, row: row, setAnchorEl: setAnchorEl, table: table })] })) : null }));
 };
 
 const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
@@ -962,11 +975,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.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _a !== void 0 ? _a : (selectAll
+    return (jsx(Tooltip, 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.createElement(Radio, Object.assign({}, commonProps))) : (React.createElement(Checkbox, Object.assign({ indeterminate: selectAll
-            ? table.getIsSomeRowsSelected() && !allRowsSelected
-            : row === null || row === void 0 ? void 0 : row.getIsSomeSelected() }, commonProps)))));
+            : localization.toggleSelectRow) }, { children: enableMultiRowSelection === false ? (jsx(Radio, Object.assign({}, commonProps))) : (jsx(Checkbox, Object.assign({ indeterminate: selectAll
+                ? table.getIsSomeRowsSelected() && !allRowsSelected
+                : row === null || row === void 0 ? void 0 : row.getIsSomeSelected() }, commonProps))) })));
 };
 
 const MRT_GlobalFilterTextField = ({ table, }) => {
@@ -1005,24 +1018,15 @@ const MRT_GlobalFilterTextField = ({ table, }) => {
         }
         isMounted.current = true;
     }, [globalFilter]);
-    return (React.createElement(Collapse, { in: showGlobalFilter, orientation: "horizontal", unmountOnExit: true, mountOnEnter: true },
-        React.createElement(TextField, Object.assign({ placeholder: localization.search, onChange: handleChange, value: searchValue !== null && searchValue !== void 0 ? searchValue : '', variant: "standard", InputProps: {
-                startAdornment: enableGlobalFilterModes ? (React.createElement(InputAdornment, { position: "start" },
-                    React.createElement(Tooltip, { arrow: true, title: localization.changeSearchMode },
-                        React.createElement(IconButton, { "aria-label": localization.changeSearchMode, onClick: handleGlobalFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' } },
-                            React.createElement(SearchIcon, null))))) : (React.createElement(SearchIcon, { style: { marginRight: '4px' } })),
-                endAdornment: (React.createElement(InputAdornment, { position: "end" },
-                    React.createElement(Tooltip, { arrow: true, title: (_a = localization.clearSearch) !== null && _a !== void 0 ? _a : '' },
-                        React.createElement("span", null,
-                            React.createElement(IconButton, { "aria-label": localization.clearSearch, disabled: !(searchValue === null || searchValue === void 0 ? void 0 : searchValue.length), onClick: handleClear, size: "small" },
-                                React.createElement(CloseIcon, null)))))),
-            } }, textFieldProps, { inputRef: (inputRef) => {
-                searchInputRef.current = inputRef;
-                if (textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.inputRef) {
-                    textFieldProps.inputRef = inputRef;
-                }
-            } })),
-        React.createElement(MRT_FilterOptionMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table, onSelect: handleClear })));
+    return (jsxs(Collapse, Object.assign({ in: showGlobalFilter, orientation: "horizontal", unmountOnExit: true, mountOnEnter: true }, { children: [jsx(TextField, Object.assign({ placeholder: localization.search, onChange: handleChange, value: searchValue !== null && searchValue !== void 0 ? searchValue : '', variant: "standard", InputProps: {
+                    startAdornment: enableGlobalFilterModes ? (jsx(InputAdornment, Object.assign({ position: "start" }, { children: jsx(Tooltip, Object.assign({ arrow: true, title: localization.changeSearchMode }, { children: jsx(IconButton, Object.assign({ "aria-label": localization.changeSearchMode, onClick: handleGlobalFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' } }, { children: jsx(SearchIcon, {}) })) })) }))) : (jsx(SearchIcon, { style: { marginRight: '4px' } })),
+                    endAdornment: (jsx(InputAdornment, Object.assign({ position: "end" }, { children: jsx(Tooltip, Object.assign({ arrow: true, title: (_a = localization.clearSearch) !== null && _a !== void 0 ? _a : '' }, { children: jsx("span", { children: jsx(IconButton, Object.assign({ "aria-label": localization.clearSearch, disabled: !(searchValue === null || searchValue === void 0 ? void 0 : searchValue.length), onClick: handleClear, size: "small" }, { children: jsx(CloseIcon, {}) })) }) })) }))),
+                } }, textFieldProps, { inputRef: (inputRef) => {
+                    searchInputRef.current = inputRef;
+                    if (textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.inputRef) {
+                        textFieldProps.inputRef = inputRef;
+                    }
+                } })), jsx(MRT_FilterOptionMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table, onSelect: handleClear })] })));
 };
 
 const MRT_LinearProgressBar = ({ isTopToolbar, table, }) => {
@@ -1031,13 +1035,12 @@ const MRT_LinearProgressBar = ({ isTopToolbar, table, }) => {
     const linearProgressProps = muiLinearProgressProps instanceof Function
         ? muiLinearProgressProps({ isTopToolbar, table })
         : muiLinearProgressProps;
-    return (React.createElement(Collapse, { in: isLoading || showProgressBars, mountOnEnter: true, unmountOnExit: true, sx: {
+    return (jsx(Collapse, Object.assign({ in: isLoading || showProgressBars, mountOnEnter: true, unmountOnExit: true, sx: {
             bottom: isTopToolbar ? 0 : undefined,
             position: 'absolute',
             top: !isTopToolbar ? 0 : undefined,
             width: '100%',
-        } },
-        React.createElement(LinearProgress, Object.assign({ "aria-label": "Loading", "aria-busy": "true", sx: { position: 'relative' } }, linearProgressProps))));
+        } }, { children: jsx(LinearProgress, Object.assign({ "aria-label": "Loading", "aria-busy": "true", sx: { position: 'relative' } }, linearProgressProps)) })));
 };
 
 const MRT_TablePagination = ({ table, position = 'bottom', }) => {
@@ -1051,7 +1054,7 @@ const MRT_TablePagination = ({ table, position = 'bottom', }) => {
     const handleChangeRowsPerPage = (event) => {
         setPageSize(+event.target.value);
     };
-    return (React.createElement(TablePagination, Object.assign({ component: "div", count: totalRowCount, getItemAriaLabel: (type) => type === 'first'
+    return (jsx(TablePagination, Object.assign({ component: "div", count: totalRowCount, getItemAriaLabel: (type) => type === 'first'
             ? localization.goToFirstPage
             : type === 'last'
                 ? localization.goToLastPage
@@ -1092,27 +1095,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.createElement("span", null,
-        localization.groupedBy,
-        ' ',
-        grouping.map((columnId, index) => (React.createElement(Fragment, { key: `${index}-${columnId}` },
-            index > 0 ? localization.thenBy : '',
-            React.createElement(Chip, Object.assign({ label: table.getColumn(columnId).columnDef.header, onDelete: () => table.getColumn(columnId).toggleGrouping() }, chipProps))))))) : null;
-    return (React.createElement(Collapse, { in: showAlertBanner || !!selectMessage || !!groupedByMessage, timeout: stackAlertBanner ? 200 : 0 },
-        React.createElement(Alert, 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 ? (jsxs("span", { children: [localization.groupedBy, ' ', grouping.map((columnId, index) => (jsxs(Fragment$1, { children: [index > 0 ? localization.thenBy : '', jsx(Chip, Object.assign({ label: table.getColumn(columnId).columnDef.header, onDelete: () => table.getColumn(columnId).toggleGrouping() }, chipProps))] }, `${index}-${columnId}`)))] })) : null;
+    return (jsx(Collapse, Object.assign({ in: showAlertBanner || !!selectMessage || !!groupedByMessage, timeout: stackAlertBanner ? 200 : 0 }, { children: jsxs(Alert, 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.createElement(AlertTitle, null, alertProps.title),
-            React.createElement(Box, { 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.createElement("br", null)),
-                selectMessage,
-                selectMessage && groupedByMessage && React.createElement("br", null),
-                groupedByMessage))));
+                : alertProps === null || alertProps === void 0 ? void 0 : alertProps.sx))) }, { children: [(alertProps === null || alertProps === void 0 ? void 0 : alertProps.title) && jsx(AlertTitle, { children: alertProps.title }), jsxs(Box, 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) && (jsx("br", {})), selectMessage, selectMessage && groupedByMessage && jsx("br", {}), groupedByMessage] }))] })) })));
 };
 
 const MRT_FullScreenToggleButton = (_a) => {
@@ -1123,8 +1113,7 @@ const MRT_FullScreenToggleButton = (_a) => {
     const handleToggleFullScreen = () => {
         setIsFullScreen(!isFullScreen);
     };
-    return (React.createElement(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleFullScreen },
-        React.createElement(IconButton, Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleFullScreen }, rest, { title: undefined }), isFullScreen ? React.createElement(FullscreenExitIcon, null) : React.createElement(FullscreenIcon, null))));
+    return (jsx(Tooltip, Object.assign({ arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleFullScreen }, { children: jsx(IconButton, Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleFullScreen }, rest, { title: undefined }, { children: isFullScreen ? jsx(FullscreenExitIcon, {}) : jsx(FullscreenIcon, {}) })) })));
 };
 
 const MRT_ColumnPinningButtons = ({ column, table, }) => {
@@ -1132,26 +1121,17 @@ const MRT_ColumnPinningButtons = ({ column, table, }) => {
     const handlePinColumn = (pinDirection) => {
         column.pin(pinDirection);
     };
-    return (React.createElement(Box, { sx: { minWidth: '70px', textAlign: 'center' } }, column.getIsPinned() ? (React.createElement(Tooltip, { arrow: true, title: localization.unpin },
-        React.createElement(IconButton, { onClick: () => handlePinColumn(false), size: "small" },
-            React.createElement(PushPinIcon, null)))) : (React.createElement(React.Fragment, null,
-        React.createElement(Tooltip, { arrow: true, title: localization.pinToLeft },
-            React.createElement(IconButton, { onClick: () => handlePinColumn('left'), size: "small" },
-                React.createElement(PushPinIcon, { style: {
-                        transform: 'rotate(90deg)',
-                    } }))),
-        React.createElement(Tooltip, { arrow: true, title: localization.pinToRight },
-            React.createElement(IconButton, { onClick: () => handlePinColumn('right'), size: "small" },
-                React.createElement(PushPinIcon, { style: {
-                        transform: 'rotate(-90deg)',
-                    } })))))));
+    return (jsx(Box, Object.assign({ sx: { minWidth: '70px', textAlign: 'center' } }, { children: column.getIsPinned() ? (jsx(Tooltip, Object.assign({ arrow: true, title: localization.unpin }, { children: jsx(IconButton, Object.assign({ onClick: () => handlePinColumn(false), size: "small" }, { children: jsx(PushPinIcon, {}) })) }))) : (jsxs(Fragment, { children: [jsx(Tooltip, Object.assign({ arrow: true, title: localization.pinToLeft }, { children: jsx(IconButton, Object.assign({ onClick: () => handlePinColumn('left'), size: "small" }, { children: jsx(PushPinIcon, { style: {
+                                transform: 'rotate(90deg)',
+                            } }) })) })), jsx(Tooltip, Object.assign({ arrow: true, title: localization.pinToRight }, { children: jsx(IconButton, Object.assign({ onClick: () => handlePinColumn('right'), size: "small" }, { children: jsx(PushPinIcon, { style: {
+                                transform: 'rotate(-90deg)',
+                            } }) })) }))] })) })));
 };
 
 const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table, }) => {
     var _a;
     const { options: { icons: { DragHandleIcon }, localization, }, } = table;
-    return (React.createElement(Tooltip, { 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.createElement(IconButton, Object.assign({ disableRipple: true, draggable: "true", size: "small" }, iconButtonProps, { onClick: (e) => {
+    return (jsx(Tooltip, 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: jsx(IconButton, 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);
@@ -1162,8 +1142,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.createElement(DragHandleIcon, null))));
+                : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }, { children: jsx(DragHandleIcon, {}) })) })));
 };
 
 const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredColumn, column, table, }) => {
@@ -1204,42 +1183,35 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredCol
             setHoveredColumn(column);
         }
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(MenuItem, { 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.createElement(Box, { sx: {
-                    display: 'flex',
-                    flexWrap: 'nowrap',
-                    gap: '8px',
-                } },
-                columnDefType !== 'group' &&
-                    enableColumnOrdering &&
-                    !allColumns.some((col) => col.columnDef.columnDefType === 'group') &&
-                    (columnDef.enableColumnOrdering !== false ? (React.createElement(MRT_GrabHandleButton, { onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table })) : (React.createElement(Box, { sx: { width: '28px' } }))),
-                enablePinning &&
-                    (column.getCanPin() ? (React.createElement(MRT_ColumnPinningButtons, { column: column, table: table })) : (React.createElement(Box, { sx: { width: '70px' } }))),
-                enableHiding ? (React.createElement(FormControlLabel, { componentsProps: {
-                        typography: {
-                            sx: {
-                                mb: 0,
-                                opacity: columnDefType !== 'display' ? 1 : 0.5,
-                            },
-                        },
-                    }, checked: switchChecked, control: React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.toggleVisibility },
-                        React.createElement(Switch, null)), disabled: !column.getCanHide(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (React.createElement(Typography, { sx: { alignSelf: 'center' } }, columnDef.header)))), (_a = column.columns) === null || _a === void 0 ? void 0 :
-        _a.map((c, i) => (React.createElement(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: c, hoveredColumn: hoveredColumn, key: `${i}-${c.id}`, setHoveredColumn: setHoveredColumn, table: table })))));
+    return (jsxs(Fragment, { children: [jsx(MenuItem, 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: jsxs(Box, Object.assign({ sx: {
+                        display: 'flex',
+                        flexWrap: 'nowrap',
+                        gap: '8px',
+                    } }, { children: [columnDefType !== 'group' &&
+                            enableColumnOrdering &&
+                            !allColumns.some((col) => col.columnDef.columnDefType === 'group') &&
+                            (columnDef.enableColumnOrdering !== false ? (jsx(MRT_GrabHandleButton, { onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table })) : (jsx(Box, { sx: { width: '28px' } }))), enablePinning &&
+                            (column.getCanPin() ? (jsx(MRT_ColumnPinningButtons, { column: column, table: table })) : (jsx(Box, { sx: { width: '70px' } }))), enableHiding ? (jsx(FormControlLabel, { componentsProps: {
+                                typography: {
+                                    sx: {
+                                        mb: 0,
+                                        opacity: columnDefType !== 'display' ? 1 : 0.5,
+                                    },
+                                },
+                            }, checked: switchChecked, control: jsx(Tooltip, Object.assign({ arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.toggleVisibility }, { children: jsx(Switch, {}) })), disabled: !column.getCanHide(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (jsx(Typography, Object.assign({ sx: { alignSelf: 'center' } }, { children: columnDef.header })))] })) })), (_a = column.columns) === null || _a === void 0 ? void 0 : _a.map((c, i) => (jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: c, hoveredColumn: hoveredColumn, setHoveredColumn: setHoveredColumn, table: table }, `${i}-${c.id}`)))] }));
 };
 
 const MRT_ShowHideColumnsMenu = ({ anchorEl, setAnchorEl, table, }) => {
@@ -1270,21 +1242,14 @@ const MRT_ShowHideColumnsMenu = ({ anchorEl, setAnchorEl, table, }) => {
         getRightLeafColumns(),
     ]);
     const [hoveredColumn, setHoveredColumn] = useState(null);
-    return (React.createElement(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
+    return (jsxs(Menu, Object.assign({ anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
             dense: density === 'compact',
-        } },
-        React.createElement(Box, { sx: {
-                display: 'flex',
-                justifyContent: 'space-between',
-                p: '0.5rem',
-                pt: 0,
-            } },
-            enableHiding && (React.createElement(Button, { disabled: !getIsSomeColumnsVisible(), onClick: hideAllColumns }, localization.hideAll)),
-            enableColumnOrdering && (React.createElement(Button, { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options)) }, localization.resetOrder)),
-            enablePinning && (React.createElement(Button, { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true) }, localization.unpinAll)),
-            enableHiding && (React.createElement(Button, { disabled: getIsAllColumnsVisible(), onClick: () => toggleAllColumnsVisible(true) }, localization.showAll))),
-        React.createElement(Divider, null),
-        allColumns.map((column, index) => (React.createElement(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, key: `${index}-${column.id}`, setHoveredColumn: setHoveredColumn, table: table })))));
+        } }, { children: [jsxs(Box, Object.assign({ sx: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    p: '0.5rem',
+                    pt: 0,
+                } }, { children: [enableHiding && (jsx(Button, Object.assign({ disabled: !getIsSomeColumnsVisible(), onClick: hideAllColumns }, { children: localization.hideAll }))), enableColumnOrdering && (jsx(Button, Object.assign({ onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options)) }, { children: localization.resetOrder }))), enablePinning && (jsx(Button, Object.assign({ disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true) }, { children: localization.unpinAll }))), enableHiding && (jsx(Button, Object.assign({ disabled: getIsAllColumnsVisible(), onClick: () => toggleAllColumnsVisible(true) }, { children: localization.showAll })))] })), jsx(Divider, {}), allColumns.map((column, index) => (jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, setHoveredColumn: setHoveredColumn, table: table }, `${index}-${column.id}`)))] })));
 };
 
 const MRT_ShowHideColumnsButton = (_a) => {
@@ -1295,11 +1260,7 @@ const MRT_ShowHideColumnsButton = (_a) => {
     const handleClick = (event) => {
         setAnchorEl(event.currentTarget);
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideColumns },
-            React.createElement(IconButton, Object.assign({ "aria-label": localization.showHideColumns, onClick: handleClick }, rest, { title: undefined }),
-                React.createElement(ViewColumnIcon, null))),
-        anchorEl && (React.createElement(MRT_ShowHideColumnsMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table }))));
+    return (jsxs(Fragment, { children: [jsx(Tooltip, Object.assign({ arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideColumns }, { children: jsx(IconButton, Object.assign({ "aria-label": localization.showHideColumns, onClick: handleClick }, rest, { title: undefined }, { children: jsx(ViewColumnIcon, {}) })) })), anchorEl && (jsx(MRT_ShowHideColumnsMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table }))] }));
 };
 
 const MRT_ToggleDensePaddingButton = (_a) => {
@@ -1315,8 +1276,7 @@ const MRT_ToggleDensePaddingButton = (_a) => {
                 : 'comfortable';
         setDensity(nextDensity);
     };
-    return (React.createElement(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleDensity },
-        React.createElement(IconButton, Object.assign({ "aria-label": localization.toggleDensity, onClick: handleToggleDensePadding }, rest, { title: undefined }), density === 'compact' ? (React.createElement(DensitySmallIcon, null)) : density === 'comfortable' ? (React.createElement(DensityMediumIcon, null)) : (React.createElement(DensityLargeIcon, null)))));
+    return (jsx(Tooltip, Object.assign({ arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleDensity }, { children: jsx(IconButton, Object.assign({ "aria-label": localization.toggleDensity, onClick: handleToggleDensePadding }, rest, { title: undefined }, { children: density === 'compact' ? (jsx(DensitySmallIcon, {})) : density === 'comfortable' ? (jsx(DensityMediumIcon, {})) : (jsx(DensityLargeIcon, {})) })) })));
 };
 
 const MRT_ToggleFiltersButton = (_a) => {
@@ -1327,8 +1287,7 @@ const MRT_ToggleFiltersButton = (_a) => {
     const handleToggleShowFilters = () => {
         setShowColumnFilters(!showColumnFilters);
     };
-    return (React.createElement(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideFilters },
-        React.createElement(IconButton, Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleShowFilters }, rest, { title: undefined }), showColumnFilters ? React.createElement(FilterListOffIcon, null) : React.createElement(FilterListIcon, null))));
+    return (jsx(Tooltip, Object.assign({ arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideFilters }, { children: jsx(IconButton, Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleShowFilters }, rest, { title: undefined }, { children: showColumnFilters ? jsx(FilterListOffIcon, {}) : jsx(FilterListIcon, {}) })) })));
 };
 
 const MRT_ToggleGlobalFilterButton = (_a) => {
@@ -1340,27 +1299,21 @@ const MRT_ToggleGlobalFilterButton = (_a) => {
         setShowGlobalFilter(!showGlobalFilter);
         queueMicrotask(() => { var _a; return (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
     };
-    return (React.createElement(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideSearch },
-        React.createElement(IconButton, 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.createElement(SearchOffIcon, null) : React.createElement(SearchIcon, null))));
+    return (jsx(Tooltip, Object.assign({ arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideSearch }, { children: jsx(IconButton, 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 ? jsx(SearchOffIcon, {}) : jsx(SearchIcon, {}) })) })));
 };
 
 const MRT_ToolbarInternalButtons = ({ table, }) => {
     var _a;
     const { options: { enableColumnFilters, enableColumnOrdering, enableDensityToggle, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, enablePinning, initialState, renderToolbarInternalActions, }, } = table;
-    return (React.createElement(Box, { sx: {
+    return (jsx(Box, 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.createElement(React.Fragment, null,
-        enableFilters &&
-            enableGlobalFilter &&
-            !(initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) && (React.createElement(MRT_ToggleGlobalFilterButton, { table: table })),
-        enableFilters && enableColumnFilters && (React.createElement(MRT_ToggleFiltersButton, { table: table })),
-        (enableHiding || enableColumnOrdering || enablePinning) && (React.createElement(MRT_ShowHideColumnsButton, { table: table })),
-        enableDensityToggle && (React.createElement(MRT_ToggleDensePaddingButton, { table: table })),
-        enableFullScreenToggle && (React.createElement(MRT_FullScreenToggleButton, { table: table }))))));
+        } }, { children: (_a = renderToolbarInternalActions === null || renderToolbarInternalActions === void 0 ? void 0 : renderToolbarInternalActions({
+            table,
+        })) !== null && _a !== void 0 ? _a : (jsxs(Fragment, { children: [enableFilters &&
+                    enableGlobalFilter &&
+                    !(initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) && (jsx(MRT_ToggleGlobalFilterButton, { table: table })), enableFilters && enableColumnFilters && (jsx(MRT_ToggleFiltersButton, { table: table })), (enableHiding || enableColumnOrdering || enablePinning) && (jsx(MRT_ShowHideColumnsButton, { table: table })), enableDensityToggle && (jsx(MRT_ToggleDensePaddingButton, { table: table })), enableFullScreenToggle && (jsx(MRT_FullScreenToggleButton, { table: table }))] })) })));
 };
 
 const MRT_ToolbarDropZone = ({ table, }) => {
@@ -1379,8 +1332,7 @@ const MRT_ToolbarDropZone = ({ table, }) => {
                 !grouping.includes(draggingColumn.id));
         }
     }, [enableGrouping, draggingColumn, grouping]);
-    return (React.createElement(Fade, { in: showToolbarDropZone },
-        React.createElement(Box, { className: "Mui-ToolbarDropZone", sx: (theme) => ({
+    return (jsx(Fade, Object.assign({ in: showToolbarDropZone }, { children: jsx(Box, Object.assign({ className: "Mui-ToolbarDropZone", sx: (theme) => ({
                 alignItems: 'center',
                 backgroundColor: alpha(theme.palette.info.main, (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone' ? 0.2 : 0.1),
                 backdropFilter: 'blur(4px)',
@@ -1392,8 +1344,7 @@ const MRT_ToolbarDropZone = ({ table, }) => {
                 position: 'absolute',
                 width: '100%',
                 zIndex: 4,
-            }), onDragEnter: handleDragEnter },
-            React.createElement(Typography, { 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: jsx(Typography, 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 }) => ({
@@ -1417,7 +1368,7 @@ const MRT_TopToolbar = ({ table, }) => {
         ? muiTopToolbarProps({ table })
         : muiTopToolbarProps;
     const stackAlertBanner = isMobile || !!renderTopToolbarCustomActions || showGlobalFilter;
-    return (React.createElement(Toolbar, Object.assign({ variant: "dense" }, toolbarProps, { ref: (ref) => {
+    return (jsxs(Toolbar, Object.assign({ variant: "dense" }, toolbarProps, { ref: (ref) => {
             topToolbarRef.current = ref;
             if (toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.ref) {
                 // @ts-ignore
@@ -1425,32 +1376,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.createElement(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })),
-        ['both', 'top'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (React.createElement(MRT_ToolbarDropZone, { table: table })),
-        React.createElement(Box, { 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.createElement(MRT_GlobalFilterTextField, { table: table })), (_a = renderTopToolbarCustomActions === null || renderTopToolbarCustomActions === void 0 ? void 0 : renderTopToolbarCustomActions({ table })) !== null && _a !== void 0 ? _a : React.createElement("span", null),
-            enableToolbarInternalActions ? (React.createElement(Box, { sx: {
+            : toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx))) }, { children: [positionToolbarAlertBanner === 'top' && (jsx(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })), ['both', 'top'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (jsx(MRT_ToolbarDropZone, { table: table })), jsxs(Box, Object.assign({ sx: {
+                    alignItems: 'flex-start',
+                    boxSizing: 'border-box',
                     display: 'flex',
-                    flexWrap: 'wrap-reverse',
-                    justifyContent: 'flex-end',
-                } },
-                enableGlobalFilter && positionGlobalFilter === 'right' && (React.createElement(MRT_GlobalFilterTextField, { table: table })),
-                React.createElement(MRT_ToolbarInternalButtons, { table: table }))) : (enableGlobalFilter &&
-                positionGlobalFilter === 'right' && (React.createElement(MRT_GlobalFilterTextField, { table: table })))),
-        enablePagination &&
-            ['top', 'both'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (React.createElement(MRT_TablePagination, { table: table, position: "top" })),
-        React.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' && (jsx(MRT_GlobalFilterTextField, { table: table })), (_a = renderTopToolbarCustomActions === null || renderTopToolbarCustomActions === void 0 ? void 0 : renderTopToolbarCustomActions({ table })) !== null && _a !== void 0 ? _a : jsx("span", {}), enableToolbarInternalActions ? (jsxs(Box, Object.assign({ sx: {
+                            display: 'flex',
+                            flexWrap: 'wrap-reverse',
+                            justifyContent: 'flex-end',
+                        } }, { children: [enableGlobalFilter && positionGlobalFilter === 'right' && (jsx(MRT_GlobalFilterTextField, { table: table })), jsx(MRT_ToolbarInternalButtons, { table: table })] }))) : (enableGlobalFilter &&
+                        positionGlobalFilter === 'right' && (jsx(MRT_GlobalFilterTextField, { table: table })))] })), enablePagination &&
+                ['top', 'both'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (jsx(MRT_TablePagination, { table: table, position: "top" })), jsx(MRT_LinearProgressBar, { isTopToolbar: true, table: table })] })));
 };
 
 const MRT_BottomToolbar = ({ table, }) => {
@@ -1461,7 +1403,7 @@ const MRT_BottomToolbar = ({ table, }) => {
         ? muiBottomToolbarProps({ table })
         : muiBottomToolbarProps;
     const stackAlertBanner = isMobile || !!renderBottomToolbarCustomActions;
-    return (React.createElement(Toolbar, Object.assign({ variant: "dense" }, toolbarProps, { ref: (node) => {
+    return (jsxs(Toolbar, Object.assign({ variant: "dense" }, toolbarProps, { ref: (node) => {
             if (node) {
                 bottomToolbarRef.current = node;
                 if (toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.ref) {
@@ -1471,27 +1413,21 @@ const MRT_BottomToolbar = ({ table, }) => {
             }
         }, sx: (theme) => (Object.assign(Object.assign(Object.assign({}, commonToolbarStyles({ theme })), { bottom: isFullScreen ? '0' : undefined, boxShadow: `0 1px 2px -1px ${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.createElement(MRT_LinearProgressBar, { isTopToolbar: false, table: table }),
-        positionToolbarAlertBanner === 'bottom' && (React.createElement(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })),
-        ['both', 'bottom'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (React.createElement(MRT_ToolbarDropZone, { table: table })),
-        React.createElement(Box, { sx: {
-                alignItems: 'center',
-                boxSizing: 'border-box',
-                display: 'flex',
-                justifyContent: 'space-between',
-                p: '0.5rem',
-                width: '100%',
-            } },
-            renderBottomToolbarCustomActions ? (renderBottomToolbarCustomActions({ table })) : (React.createElement("span", null)),
-            React.createElement(Box, { sx: {
+            : toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx))) }, { children: [jsx(MRT_LinearProgressBar, { isTopToolbar: false, table: table }), positionToolbarAlertBanner === 'bottom' && (jsx(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })), ['both', 'bottom'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (jsx(MRT_ToolbarDropZone, { table: table })), jsxs(Box, 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.createElement(MRT_TablePagination, { table: table, position: "bottom" }))))));
+                    justifyContent: 'space-between',
+                    p: '0.5rem',
+                    width: '100%',
+                } }, { children: [renderBottomToolbarCustomActions ? (renderBottomToolbarCustomActions({ table })) : (jsx("span", {})), jsx(Box, 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 : '') && (jsx(MRT_TablePagination, { table: table, position: "bottom" })) }))] }))] })));
 };
 
 const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
@@ -1515,15 +1451,11 @@ const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
         })
         : columnDef.muiTableHeadCellColumnActionsButtonProps;
     const iconButtonProps = Object.assign(Object.assign({}, mTableHeadCellColumnActionsButtonProps), mcTableHeadCellColumnActionsButtonProps);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Tooltip, { 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.createElement(IconButton, 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.createElement(MoreVertIcon, null))),
-        anchorEl && (React.createElement(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table }))));
+    return (jsxs(Fragment, { children: [jsx(Tooltip, 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: jsx(IconButton, 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: jsx(MoreVertIcon, {}) })) })), anchorEl && (jsx(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table }))] }));
 };
 
 const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
@@ -1646,100 +1578,83 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
         isMounted.current = true;
     }, [column.getFilterValue()]);
     if (columnDef.Filter) {
-        return (React.createElement(React.Fragment, null, (_f = columnDef.Filter) === null || _f === void 0 ? void 0 : _f.call(columnDef, { column, header, rangeFilterIndex, table })));
+        return (jsx(Fragment, { children: (_f = columnDef.Filter) === null || _f === void 0 ? void 0 : _f.call(columnDef, { column, header, rangeFilterIndex, table }) }));
     }
-    return (React.createElement(React.Fragment, null,
-        React.createElement(TextField, Object.assign({ fullWidth: true, inputProps: {
-                disabled: !!filterChipLabel,
-                sx: {
-                    textOverflow: 'ellipsis',
-                    width: filterChipLabel ? 0 : undefined,
-                },
-                title: filterPlaceholder,
-            }, helperText: showChangeModeButton ? (React.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.createElement(InputAdornment, { position: "start" },
-                    React.createElement(Tooltip, { arrow: true, title: localization.changeFilterMode },
-                        React.createElement("span", null,
-                            React.createElement(IconButton, { "aria-label": localization.changeFilterMode, onClick: handleFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' } },
-                                React.createElement(FilterListIcon, null)))),
-                    filterChipLabel && (React.createElement(Chip, { onDelete: handleClearEmptyFilterChip, label: filterChipLabel })))) : null,
-                endAdornment: !filterChipLabel && (React.createElement(InputAdornment, { position: "end" },
-                    React.createElement(Tooltip, { arrow: true, placement: "right", title: (_h = localization.clearFilter) !== null && _h !== void 0 ? _h : '' },
-                        React.createElement("span", null,
-                            React.createElement(IconButton, { "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.createElement(CloseIcon, null)))))),
-            }, SelectProps: {
-                displayEmpty: true,
-                multiple: isMultiSelectFilter,
-                renderValue: isMultiSelectFilter
-                    ? (selected) => !(selected === null || selected === void 0 ? void 0 : selected.length) ? (React.createElement(Box, { sx: { opacity: 0.5 } }, filterPlaceholder)) : (React.createElement(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: '2px' } }, selected === null || selected === void 0 ? void 0 : selected.map((value) => {
+    return (jsxs(Fragment, { children: [jsxs(TextField, Object.assign({ fullWidth: true, inputProps: {
+                    disabled: !!filterChipLabel,
+                    sx: {
+                        textOverflow: 'ellipsis',
+                        width: filterChipLabel ? 0 : undefined,
+                    },
+                    title: filterPlaceholder,
+                }, helperText: showChangeModeButton ? (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 ? (jsxs(InputAdornment, Object.assign({ position: "start" }, { children: [jsx(Tooltip, Object.assign({ arrow: true, title: localization.changeFilterMode }, { children: jsx("span", { children: jsx(IconButton, Object.assign({ "aria-label": localization.changeFilterMode, onClick: handleFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' } }, { children: jsx(FilterListIcon, {}) })) }) })), filterChipLabel && (jsx(Chip, { onDelete: handleClearEmptyFilterChip, label: filterChipLabel }))] }))) : null,
+                    endAdornment: !filterChipLabel && (jsx(InputAdornment, Object.assign({ position: "end" }, { children: jsx(Tooltip, Object.assign({ arrow: true, placement: "right", title: (_h = localization.clearFilter) !== null && _h !== void 0 ? _h : '' }, { children: jsx("span", { children: jsx(IconButton, 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: jsx(CloseIcon, {}) })) }) })) }))),
+                }, SelectProps: {
+                    displayEmpty: true,
+                    multiple: isMultiSelectFilter,
+                    renderValue: isMultiSelectFilter
+                        ? (selected) => !(selected === null || selected === void 0 ? void 0 : selected.length) ? (jsx(Box, Object.assign({ sx: { opacity: 0.5 } }, { children: filterPlaceholder }))) : (jsx(Box, 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 (jsx(Chip, { 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) && (jsx(MenuItem, Object.assign({ divider: true, disabled: true, hidden: true, value: "" }, { children: jsx(Box, 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.createElement(Chip, { 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.createElement(MenuItem, { divider: true, disabled: true, hidden: true, value: "" },
-                React.createElement(Box, { 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.createElement(MenuItem, { key: value, sx: {
-                    display: 'flex',
-                    m: 0,
-                    alignItems: 'center',
-                    gap: '0.5rem',
-                }, value: value },
-                isMultiSelectFilter && (React.createElement(Checkbox, { checked: ((_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : []).includes(value), sx: { mr: '0.5rem' } })),
-                text));
-        })),
-        React.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 (jsxs(MenuItem, Object.assign({ sx: {
+                                display: 'flex',
+                                m: 0,
+                                alignItems: 'center',
+                                gap: '0.5rem',
+                            }, value: value }, { children: [isMultiSelectFilter && (jsx(Checkbox, { checked: ((_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : []).includes(value), sx: { mr: '0.5rem' } })), text] }), value));
+                    })] })), jsx(MRT_FilterOptionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table, setFilterValue: setFilterValue })] }));
 };
 
 const MRT_FilterRangeFields = ({ header, table }) => {
-    return (React.createElement(Box, { sx: { display: 'grid', gridTemplateColumns: '6fr 6fr', gap: '1rem' } },
-        React.createElement(MRT_FilterTextField, { header: header, rangeFilterIndex: 0, table: table }),
-        React.createElement(MRT_FilterTextField, { header: header, rangeFilterIndex: 1, table: table })));
+    return (jsxs(Box, Object.assign({ sx: { display: 'grid', gridTemplateColumns: '6fr 6fr', gap: '1rem' } }, { children: [jsx(MRT_FilterTextField, { header: header, rangeFilterIndex: 0, table: table }), jsx(MRT_FilterTextField, { header: header, rangeFilterIndex: 1, table: table })] })));
 };
 
 const MRT_FilterCheckbox = ({ column, table }) => {
@@ -1761,8 +1676,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.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_b = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _b !== void 0 ? _b : filterLabel },
-        React.createElement(FormControlLabel, { control: React.createElement(Checkbox, 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 (jsx(Tooltip, 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: jsx(FormControlLabel, { control: jsx(Checkbox, 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);
@@ -1776,7 +1690,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 }) => {
@@ -1784,8 +1698,8 @@ const MRT_TableHeadCellFilterContainer = ({ header, table }) => {
     const { showColumnFilters } = getState();
     const { column } = header;
     const { columnDef } = column;
-    return (React.createElement(Collapse, { in: showColumnFilters, mountOnEnter: true, unmountOnExit: true }, columnDef.filterVariant === 'checkbox' ? (React.createElement(MRT_FilterCheckbox, { column: column, table: table })) : columnDef.filterVariant === 'range' ||
-        ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn) ? (React.createElement(MRT_FilterRangeFields, { header: header, table: table })) : (React.createElement(MRT_FilterTextField, { header: header, table: table }))));
+    return (jsx(Collapse, Object.assign({ in: showColumnFilters, mountOnEnter: true, unmountOnExit: true }, { children: columnDef.filterVariant === 'checkbox' ? (jsx(MRT_FilterCheckbox, { column: column, table: table })) : columnDef.filterVariant === 'range' ||
+            ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn) ? (jsx(MRT_FilterRangeFields, { header: header, table: table })) : (jsx(MRT_FilterTextField, { header: header, table: table })) })));
 };
 
 const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
@@ -1806,12 +1720,9 @@ const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
         ? column.getFilterValue().join(`" ${isRangeFilter ? localization.and : localization.or} "`)
         : column.getFilterValue()}"`)
         .replace('" "', '');
-    return (React.createElement(Grow, { unmountOnExit: true, in: (!!column.getFilterValue() && !isRangeFilter) ||
+    return (jsx(Grow, 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.createElement(Box, { component: "span", sx: { flex: '0 0' } },
-            React.createElement(Tooltip, { arrow: true, placement: "top", title: filterTooltip },
-                React.createElement(IconButton, { 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: jsx(Box, Object.assign({ component: "span", sx: { flex: '0 0' } }, { children: jsx(Tooltip, Object.assign({ arrow: true, placement: "top", title: filterTooltip }, { children: jsx(IconButton, Object.assign({ disableRipple: true, onClick: (event) => {
                         setShowColumnFilters(true);
                         queueMicrotask(() => {
                             var _a, _b;
@@ -1826,8 +1737,7 @@ const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
                         p: '2px',
                         transform: 'scale(0.66)',
                         width: '12px',
-                    } },
-                    React.createElement(FilterAltIcon, null))))));
+                    } }, { children: jsx(FilterAltIcon, {}) })) })) })) })));
 };
 
 const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, }) => {
@@ -1861,7 +1771,7 @@ const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, }) => {
         setDraggingColumn(null);
         setHoveredColumn(null);
     };
-    return (React.createElement(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragStart: handleDragStart, onDragEnd: handleDragEnd, table: table }));
+    return (jsx(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragStart: handleDragStart, onDragEnd: handleDragEnd, table: table }));
 };
 
 const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
@@ -1869,7 +1779,7 @@ const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
     const { getState, options: { columnResizeMode }, setColumnSizingInfo, } = table;
     const { density } = getState();
     const { column } = header;
-    return (React.createElement(Box, { className: "Mui-TableHeadCell-ResizeHandle-Wrapper", onDoubleClick: () => {
+    return (jsx(Box, 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) => ({
@@ -1886,8 +1796,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.createElement(Divider, { className: "Mui-TableHeadCell-ResizeHandle-Divider", flexItem: true, orientation: "vertical", sx: {
+        } }, { children: jsx(Divider, { className: "Mui-TableHeadCell-ResizeHandle-Divider", flexItem: true, orientation: "vertical", sx: {
                 borderRadius: '2px',
                 borderWidth: '2px',
                 height: '24px',
@@ -1897,7 +1806,7 @@ const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
                     : 'all 150ms ease-in-out',
                 userSelect: 'none',
                 zIndex: 4,
-            } })));
+            } }) })));
 };
 
 const MRT_TableHeadCellSortLabel = ({ header, table, tableCellProps, }) => {
@@ -1910,9 +1819,7 @@ const MRT_TableHeadCellSortLabel = ({ header, table, tableCellProps, }) => {
             ? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
             : localization.sortedByColumnAsc.replace('{column}', columnDef.header)
         : localization.unsorted;
-    return (React.createElement(Tooltip, { arrow: true, placement: "top", title: sortTooltip },
-        React.createElement(Badge, { badgeContent: sorting.length > 1 ? column.getSortIndex() + 1 : 0, overlap: "circular" },
-            React.createElement(TableSortLabel, { "aria-label": sortTooltip, active: !!column.getIsSorted(), direction: column.getIsSorted()
+    return (jsx(Tooltip, Object.assign({ arrow: true, placement: "top", title: sortTooltip }, { children: jsx(Badge, Object.assign({ badgeContent: sorting.length > 1 ? column.getSortIndex() + 1 : 0, overlap: "circular" }, { children: jsx(TableSortLabel, { "aria-label": sortTooltip, active: !!column.getIsSorted(), direction: column.getIsSorted()
                     ? column.getIsSorted()
                     : undefined, sx: {
                     flex: '0 0',
@@ -1924,7 +1831,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 }) => {
@@ -1988,7 +1895,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.createElement(TableCell, Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: header.colSpan, onDragEnter: handleDragEnter, ref: (node) => {
+    return (jsxs(TableCell, Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: header.colSpan, onDragEnter: handleDragEnter, ref: (node) => {
             if (node) {
                 tableHeadCellRefs.current[column.id] = node;
             }
@@ -2018,49 +1925,39 @@ const MRT_TableHeadCell = ({ header, table }) => {
             table,
             tableCellProps,
             theme,
-        })), draggingBorders)) }),
-        header.isPlaceholder ? null : (React.createElement(Box, { 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.createElement(Box, { className: "Mui-TableHeadCell-Content-Labels", onClick: column.getToggleSortingHandler(), sx: {
+        })), draggingBorders)) }, { children: [header.isPlaceholder ? null : (jsxs(Box, 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.createElement(Box, { 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.createElement(MRT_TableHeadCellSortLabel, { header: header, table: table, tableCellProps: tableCellProps })),
-                column.getCanFilter() && (React.createElement(MRT_TableHeadCellFilterLabel, { header: header, table: table }))),
-            columnDefType !== 'group' && (React.createElement(Box, { className: "Mui-TableHeadCell-Content-Actions", sx: { whiteSpace: 'nowrap' } },
-                showDragHandle && (React.createElement(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: {
-                        current: tableHeadCellRefs.current[column.id],
-                    } })),
-                showColumnActions && (React.createElement(MRT_TableHeadCellColumnActionsButton, { header: header, table: table })))),
-            column.getCanResize() && (React.createElement(MRT_TableHeadCellResizeHandle, { header: header, table: table })))),
-        column.getCanFilter() && (React.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: [jsxs(Box, 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: [jsx(Box, 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() && (jsx(MRT_TableHeadCellSortLabel, { header: header, table: table, tableCellProps: tableCellProps })), column.getCanFilter() && (jsx(MRT_TableHeadCellFilterLabel, { header: header, table: table }))] })), columnDefType !== 'group' && (jsxs(Box, Object.assign({ className: "Mui-TableHeadCell-Content-Actions", sx: { whiteSpace: 'nowrap' } }, { children: [showDragHandle && (jsx(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: {
+                                    current: tableHeadCellRefs.current[column.id],
+                                } })), showColumnActions && (jsx(MRT_TableHeadCellColumnActionsButton, { header: header, table: table }))] }))), column.getCanResize() && (jsx(MRT_TableHeadCellResizeHandle, { header: header, table: table }))] }))), column.getCanFilter() && (jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }))] })));
 };
 
 const MRT_TableHeadRow = ({ headerGroup, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
@@ -2068,17 +1965,14 @@ const MRT_TableHeadRow = ({ headerGroup, table, virtualColumns, virtualPaddingLe
     const tableRowProps = muiTableHeadRowProps instanceof Function
         ? muiTableHeadRowProps({ headerGroup, table })
         : muiTableHeadRowProps;
-    return (React.createElement(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.04), boxShadow: `4px 0 8px ${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 (jsxs(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.04), boxShadow: `4px 0 8px ${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.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.createElement(MRT_TableHeadCell, { header: header, key: header.id, table: table }));
-        }),
-        virtualPaddingRight ? (React.createElement("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null));
+            : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx))) }, { children: [virtualPaddingLeft ? (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 (jsx(MRT_TableHeadCell, { header: header, table: table }, header.id));
+            }), virtualPaddingRight ? (jsx("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })));
 };
 
 const MRT_TableHead = ({ table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
@@ -2088,9 +1982,9 @@ const MRT_TableHead = ({ table, virtualColumns, virtualPaddingLeft, virtualPaddi
         ? muiTableHeadProps({ table })
         : muiTableHeadProps;
     const stickyHeader = enableStickyHeader || isFullScreen;
-    return (React.createElement(TableHead, 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 (jsx(TableHead, 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.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) => (jsx(MRT_TableHeadRow, { headerGroup: headerGroup, table: table, virtualColumns: virtualColumns, virtualPaddingLeft: virtualPaddingLeft, virtualPaddingRight: virtualPaddingRight }, headerGroup.id))) })));
 };
 
 const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
@@ -2140,9 +2034,9 @@ const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
         }
     };
     if (columnDef.Edit) {
-        return React.createElement(React.Fragment, null, (_a = columnDef.Edit) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table }));
+        return jsx(Fragment, { children: (_a = columnDef.Edit) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table }) });
     }
-    return (React.createElement(TextField, Object.assign({ disabled: (columnDef.enableEditing instanceof Function
+    return (jsx(TextField, Object.assign({ disabled: (columnDef.enableEditing instanceof Function
             ? columnDef.enableEditing(row)
             : columnDef.enableEditing) === false, fullWidth: true, inputRef: (inputRef) => {
             if (inputRef) {
@@ -2155,24 +2049,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.createElement(MenuItem, { 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 (jsx(MenuItem, Object.assign({ sx: {
+                    display: 'flex',
+                    m: 0,
+                    alignItems: 'center',
+                    gap: '0.5rem',
+                }, value: value }, { children: text }), value));
+        }) })));
 };
 
 const MRT_CopyButton = ({ cell, children, table, }) => {
@@ -2199,10 +2093,9 @@ const MRT_CopyButton = ({ cell, children, table, }) => {
         })
         : columnDef.muiTableBodyCellCopyButtonProps;
     const buttonProps = Object.assign(Object.assign({}, mTableBodyCellCopyButtonProps), mcTableBodyCellCopyButtonProps);
-    return (React.createElement(Tooltip, { 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.createElement(Button, 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 (jsx(Tooltip, 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: jsx(Button, 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 }) => {
@@ -2223,7 +2116,7 @@ const MRT_TableBodyRowGrabHandle = ({ cell, rowRef, table }) => {
         table.setDraggingRow(null);
         table.setHoveredRow(null);
     };
-    return (React.createElement(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragStart: handleDragStart, onDragEnd: handleDragEnd, table: table }));
+    return (jsx(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragStart: handleDragStart, onDragEnd: handleDragEnd, table: table }));
 };
 
 const allowedTypes = ['string', 'number'];
@@ -2271,16 +2164,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.createElement("span", { "aria-label": renderedCellValue, role: "note" }, (_c = chunks === null || chunks === void 0 ? void 0 : chunks.map(({ key, match, text }) => (React.createElement(Box, { "aria-hidden": "true", component: "span", key: key, sx: match
-                    ? {
-                        backgroundColor: (theme) => theme.palette.mode === 'dark'
-                            ? darken(theme.palette.warning.dark, 0.25)
-                            : 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 = (jsx("span", Object.assign({ "aria-label": renderedCellValue, role: "note" }, { children: (_c = chunks === null || chunks === void 0 ? void 0 : chunks.map(({ key, match, text }) => (jsx(Box, Object.assign({ "aria-hidden": "true", component: "span", sx: match
+                        ? {
+                            backgroundColor: (theme) => theme.palette.mode === 'dark'
+                                ? darken(theme.palette.warning.dark, 0.25)
+                                : 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) {
@@ -2292,7 +2185,7 @@ const MRT_TableBodyCellValue = ({ cell, table }) => {
             table,
         });
     }
-    return React.createElement(React.Fragment, null, renderedCellValue);
+    return jsx(Fragment, { children: renderedCellValue });
 };
 
 const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, table, virtualCell, }) => {
@@ -2387,7 +2280,7 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
             setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
         }
     };
-    return (React.createElement(TableCell, Object.assign({ "data-index": virtualCell === null || virtualCell === void 0 ? void 0 : virtualCell.index, ref: (node) => {
+    return (jsx(TableCell, 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);
             }
@@ -2419,26 +2312,19 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
             table,
             theme,
             tableCellProps,
-        })), draggingBorders)) }),
-        React.createElement(React.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.createElement(Skeleton, 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.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.createElement(MRT_EditCellTextField, { cell: cell, table: table })) : (enableClickToCopy || columnDef.enableClickToCopy) &&
-                columnDef.enableClickToCopy !== false ? (React.createElement(MRT_CopyButton, { cell: cell, table: table },
-                React.createElement(MRT_TableBodyCellValue, { cell: cell, table: table }))) : (React.createElement(MRT_TableBodyCellValue, { cell: cell, table: table })),
-            cell.getIsGrouped() && !columnDef.GroupedCell && (React.createElement(React.Fragment, null,
-                " (", (_d = row.subRows) === null || _d === void 0 ? void 0 :
-                _d.length,
-                ")")))));
+        })), draggingBorders)) }, { children: jsxs(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 ? (jsx(Skeleton, Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
+                    rowNumberMode === 'static' &&
+                    column.id === 'mrt-row-numbers' ? (rowIndex + 1) : column.id === 'mrt-row-drag' ? (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 ? (jsx(MRT_EditCellTextField, { cell: cell, table: table })) : (enableClickToCopy || columnDef.enableClickToCopy) &&
+                    columnDef.enableClickToCopy !== false ? (jsx(MRT_CopyButton, Object.assign({ cell: cell, table: table }, { children: jsx(MRT_TableBodyCellValue, { cell: cell, table: table }) }))) : (jsx(MRT_TableBodyCellValue, { cell: cell, table: table })), cell.getIsGrouped() && !columnDef.GroupedCell && (jsxs(Fragment, { children: [" (", (_d = row.subRows) === null || _d === void 0 ? void 0 : _d.length, ")"] }))] }) })));
 };
 const Memo_MRT_TableBodyCell = memo(MRT_TableBodyCell, (prev, next) => next.cell === prev.cell);
 
@@ -2456,7 +2342,7 @@ const MRT_TableDetailPanel = ({ parentRowRef, row, rowIndex, table, virtualRow,
     const tableCellProps = muiTableDetailPanelProps instanceof Function
         ? muiTableDetailPanelProps({ row, table })
         : muiTableDetailPanelProps;
-    return (React.createElement(TableRow, Object.assign({ className: "Mui-TableBodyCell-DetailPanel" }, tableRowProps, { sx: (theme) => {
+    return (jsx(TableRow, 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`
@@ -2465,12 +2351,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.createElement(TableCell, Object.assign({ className: "Mui-TableBodyCell-DetailPanel", colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ backgroundColor: virtualRow
+        } }, { children: jsx(TableCell, Object.assign({ className: "Mui-TableBodyCell-DetailPanel", colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ backgroundColor: virtualRow
                     ? 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.createElement(Collapse, { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true }, !isLoading && renderDetailPanel({ row, table }))))));
+                : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx))) }, { children: renderDetailPanel && (jsx(Collapse, 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, }) => {
@@ -2485,51 +2370,46 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, row, row
         }
     };
     const rowRef = useRef(null);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(TableRow, 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: 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()
-                            ? `${alpha(theme.palette.primary.main, 0.2)}`
-                            : theme.palette.mode === 'dark'
-                                ? `${lighten(theme.palette.background.default, 0.12)}`
-                                : `${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.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.createElement(Memo_MRT_TableBodyCell, Object.assign({}, props))) : (React.createElement(MRT_TableBodyCell, Object.assign({}, props)));
-            }),
-            virtualPaddingRight ? (React.createElement("td", { style: { display: 'flex', width: virtualPaddingRight } })) : null),
-        renderDetailPanel && !row.getIsGrouped() && (React.createElement(MRT_TableDetailPanel, { parentRowRef: rowRef, row: row, rowIndex: rowIndex, table: table, virtualRow: virtualRow }))));
+    return (jsxs(Fragment, { children: [jsxs(TableRow, 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: 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()
+                                ? `${alpha(theme.palette.primary.main, 0.2)}`
+                                : theme.palette.mode === 'dark'
+                                    ? `${lighten(theme.palette.background.default, 0.12)}`
+                                    : `${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 ? (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 ? (jsx(Memo_MRT_TableBodyCell, Object.assign({}, props))) : (jsx(MRT_TableBodyCell, Object.assign({}, props)));
+                    }), virtualPaddingRight ? (jsx("td", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })), renderDetailPanel && !row.getIsGrouped() && (jsx(MRT_TableDetailPanel, { parentRowRef: rowRef, row: row, rowIndex: rowIndex, table: table, virtualRow: virtualRow }))] }));
 };
 const Memo_MRT_TableBodyRow = memo(MRT_TableBodyRow, (prev, next) => prev.row === next.row && prev.rowIndex === next.rowIndex);
 
@@ -2596,43 +2476,42 @@ const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddin
     const virtualRows = rowVirtualizer
         ? rowVirtualizer.getVirtualItems()
         : undefined;
-    return (React.createElement(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group', height: rowVirtualizer
+    return (jsx(TableBody, 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.createElement("tr", { style: { display: layoutMode === 'grid' ? 'grid' : 'table-row' } },
-        React.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.createElement(Typography, { 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.createElement(React.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.createElement(Memo_MRT_TableBodyRow, Object.assign({}, props))) : (React.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 ? (jsx("tr", Object.assign({ style: { display: layoutMode === 'grid' ? 'grid' : 'table-row' } }, { children: 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 : (jsx(Typography, 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 }))) })) }))) : (jsx(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' ? (jsx(Memo_MRT_TableBodyRow, Object.assign({}, props))) : (jsx(MRT_TableBodyRow, Object.assign({}, props)));
+            }) }))) })));
 };
 const Memo_MRT_TableBody = memo(MRT_TableBody, (prev, next) => prev.table.options.data === next.table.options.data);
 
@@ -2650,7 +2529,7 @@ const MRT_TableFooterCell = ({ footer, table }) => {
         ? columnDef.muiTableFooterCellProps({ column, table })
         : columnDef.muiTableFooterCellProps;
     const tableCellProps = Object.assign(Object.assign({}, mTableFooterCellProps), mcTableFooterCellProps);
-    return (React.createElement(TableCell, 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 (jsx(TableCell, 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'
@@ -2659,16 +2538,15 @@ const MRT_TableFooterCell = ({ footer, table }) => {
             table,
             theme,
             tableCellProps,
-        }))) }),
-        React.createElement(React.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: jsx(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, }) => {
@@ -2682,17 +2560,14 @@ const MRT_TableFooterRow = ({ footerGroup, table, virtualColumns, virtualPadding
     const tableRowProps = muiTableFooterRowProps instanceof Function
         ? muiTableFooterRowProps({ footerGroup, table })
         : muiTableFooterRowProps;
-    return (React.createElement(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: 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 (jsxs(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: 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.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.createElement(MRT_TableFooterCell, { footer: footer, key: footer.id, table: table }));
-        }),
-        virtualPaddingRight ? (React.createElement("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null));
+            : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx))) }, { children: [virtualPaddingLeft ? (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 (jsx(MRT_TableFooterCell, { footer: footer, table: table }, footer.id));
+            }), virtualPaddingRight ? (jsx("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })));
 };
 
 const MRT_TableFooter = ({ table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
@@ -2702,13 +2577,13 @@ const MRT_TableFooter = ({ table, virtualColumns, virtualPaddingLeft, virtualPad
         ? muiTableFooterProps({ table })
         : muiTableFooterProps;
     const stickFooter = (isFullScreen || enableStickyFooter) && enableStickyFooter !== false;
-    return (React.createElement(TableFooter, 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 (jsx(TableFooter, 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.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) => (jsx(MRT_TableFooterRow, { footerGroup: footerGroup, table: table, virtualColumns: virtualColumns, virtualPaddingLeft: virtualPaddingLeft, virtualPaddingRight: virtualPaddingRight }, footerGroup.id))) })));
 };
 
 const MRT_Table = ({ table }) => {
@@ -2779,12 +2654,9 @@ const MRT_Table = ({ table }) => {
         virtualPaddingLeft,
         virtualPaddingRight,
     };
-    return (React.createElement(Table, 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 (jsxs(Table, 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.createElement(MRT_TableHead, Object.assign({}, props)),
-        memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (React.createElement(Memo_MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))) : (React.createElement(MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))),
-        enableTableFooter && React.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 && jsx(MRT_TableHead, Object.assign({}, props)), memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (jsx(Memo_MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))) : (jsx(MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))), enableTableFooter && jsx(MRT_TableFooter, Object.assign({}, props))] })));
 };
 
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
@@ -2805,7 +2677,7 @@ const MRT_TableContainer = ({ table }) => {
             : 0;
         setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
     });
-    return (React.createElement(TableContainer, Object.assign({}, tableContainerProps, { ref: (node) => {
+    return (jsx(TableContainer, Object.assign({}, tableContainerProps, { ref: (node) => {
             if (node) {
                 tableContainerRef.current = node;
                 if (tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.ref) {
@@ -2819,8 +2691,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.createElement(MRT_Table, { table: table })));
+                : undefined }, tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.style) }, { children: jsx(MRT_Table, { table: table }) })));
 };
 
 const MRT_TablePaper = ({ table }) => {
@@ -2829,7 +2700,7 @@ const MRT_TablePaper = ({ table }) => {
     const tablePaperProps = muiTablePaperProps instanceof Function
         ? muiTablePaperProps({ table })
         : muiTablePaperProps;
-    return (React.createElement(Paper, Object.assign({ elevation: 2 }, tablePaperProps, { ref: (ref) => {
+    return (jsxs(Paper, Object.assign({ elevation: 2 }, tablePaperProps, { ref: (ref) => {
             tablePaperRef.current = ref;
             if (tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.ref) {
                 //@ts-ignore
@@ -2846,35 +2717,26 @@ const MRT_TablePaper = ({ table }) => {
                 padding: 0,
                 width: '100vw',
             }
-            : {})) }),
-        enableTopToolbar &&
-            (renderTopToolbar instanceof Function
-                ? renderTopToolbar({ table })
-                : renderTopToolbar !== null && renderTopToolbar !== void 0 ? renderTopToolbar : React.createElement(MRT_TopToolbar, { table: table })),
-        React.createElement(MRT_TableContainer, { table: table }),
-        enableBottomToolbar &&
-            (renderBottomToolbar instanceof Function
-                ? renderBottomToolbar({ table })
-                : renderBottomToolbar !== null && renderBottomToolbar !== void 0 ? renderBottomToolbar : React.createElement(MRT_BottomToolbar, { table: table }))));
+            : {})) }, { children: [enableTopToolbar &&
+                (renderTopToolbar instanceof Function
+                    ? renderTopToolbar({ table })
+                    : renderTopToolbar !== null && renderTopToolbar !== void 0 ? renderTopToolbar : jsx(MRT_TopToolbar, { table: table })), jsx(MRT_TableContainer, { table: table }), enableBottomToolbar &&
+                (renderBottomToolbar instanceof Function
+                    ? renderBottomToolbar({ table })
+                    : renderBottomToolbar !== null && renderBottomToolbar !== void 0 ? renderBottomToolbar : jsx(MRT_BottomToolbar, { table: table }))] })));
 };
 
 const MRT_EditRowModal = ({ open, row, table, }) => {
     const { options: { localization }, } = table;
-    return (React.createElement(Dialog, { open: open },
-        React.createElement(DialogTitle, { textAlign: "center" }, localization.edit),
-        React.createElement(DialogContent, null,
-            React.createElement("form", { onSubmit: (e) => e.preventDefault() },
-                React.createElement(Stack, { 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.createElement(MRT_EditCellTextField, { cell: cell, key: cell.id, showLabel: true, table: table })))))),
-        React.createElement(DialogActions, { sx: { p: '1.25rem' } },
-            React.createElement(MRT_EditActionButtons, { row: row, table: table, variant: "text" }))));
+    return (jsxs(Dialog, Object.assign({ open: open }, { children: [jsx(DialogTitle, Object.assign({ textAlign: "center" }, { children: localization.edit })), jsx(DialogContent, { children: jsx("form", Object.assign({ onSubmit: (e) => e.preventDefault() }, { children: jsx(Stack, 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) => (jsx(MRT_EditCellTextField, { cell: cell, showLabel: true, table: table }, cell.id))) })) })) }), jsx(DialogActions, Object.assign({ sx: { p: '1.25rem' } }, { children: jsx(MRT_EditActionButtons, { row: row, table: table, variant: "text" }) }))] })));
 };
 
 const MRT_TableRoot = (props) => {
@@ -2922,13 +2784,13 @@ const MRT_TableRoot = (props) => {
         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.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 }) => (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.createElement(MRT_ExpandButton, { row: row, table: table })), Header: props.enableExpandAll
-                    ? () => React.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 }) => (jsx(MRT_ExpandButton, { row: row, table: table })), Header: props.enableExpandAll
+                    ? () => 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.createElement(MRT_SelectCheckbox, { row: row, table: table })), Header: props.enableSelectAll && props.enableMultiRowSelection
-                    ? () => React.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 }) => (jsx(MRT_SelectCheckbox, { row: row, table: table })), Header: props.enableSelectAll && props.enableMultiRowSelection
+                    ? () => 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);
@@ -3049,103 +2911,7 @@ const MRT_TableRoot = (props) => {
             table.setPageIndex(Math.floor(totalRowCount / pageSize));
         }
     }, [props.rowCount, table.getPrePaginationRowModel().rows.length]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Dialog, { PaperComponent: Box, TransitionComponent: !props.enableRowVirtualization ? Grow : undefined, disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => table.setIsFullScreen(false), open: table.getState().isFullScreen, transitionDuration: 400 },
-            React.createElement(MRT_TablePaper, { table: table })),
-        !table.getState().isFullScreen && (React.createElement(MRT_TablePaper, { table: table })),
-        editingRow && props.editingMode === 'modal' && (React.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 (jsxs(Fragment, { children: [jsx(Dialog, Object.assign({ PaperComponent: Box, TransitionComponent: !props.enableRowVirtualization ? Grow : undefined, disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => table.setIsFullScreen(false), open: table.getState().isFullScreen, transitionDuration: 400 }, { children: jsx(MRT_TablePaper, { table: table }) })), !table.getState().isFullScreen && (jsx(MRT_TablePaper, { table: table })), editingRow && props.editingMode === 'modal' && (jsx(MRT_EditRowModal, { row: editingRow, table: table, open: true }))] }));
 };
 
 const MaterialReactTable = (_a) => {
@@ -3173,8 +2939,8 @@ const MaterialReactTable = (_a) => {
         manualPagination = true;
         manualSorting = true;
     }
-    return (React.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 (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)));
 };
 
-export { MRT_AggregationFns, MRT_BottomToolbar, MRT_CopyButton, MRT_EditActionButtons, MRT_ExpandButton, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_ShowHideColumnsButton, MRT_SortingFns, MRT_TableHeadCellFilterContainer, MRT_TablePagination, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable as default };
+export { MRT_AggregationFns, MRT_BottomToolbar, MRT_CopyButton, MRT_EditActionButtons, MRT_ExpandButton, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_ShowHideColumnsButton, MRT_SortingFns, MRT_TableHeadCellFilterContainer, MRT_TablePagination, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, MaterialReactTable as default };
 //# sourceMappingURL=material-react-table.esm.js.map