material-react-table 1.1.0-beta.0 → 1.1.0-beta.1

package/dist/cjs/table/MRT_TableRoot.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { MRT_Cell, MRT_Column, MRT_ColumnDef, MRT_FilterOption, MRT_Row, MRT_TableInstance, MRT_TableState, MaterialReactTableProps, MRT_Localization } from '..';
-export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(props: Omit<Partial<import("@tanstack/table-core").TableOptions<TData>>, "state" | "data" | "onStateChange" | "initialState" | "columns" | "defaultColumn" | "enableRowSelection" | "expandRowsFn"> & {
+export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(props: Omit<Partial<import("@tanstack/table-core").TableOptions<TData>>, "initialState" | "state" | "onStateChange" | "data" | "columns" | "defaultColumn" | "enableRowSelection" | "expandRowsFn"> & {
     columnFilterModeOptions?: (string | (string & Record<never, never>))[] | null | undefined;
     columns: MRT_ColumnDef<TData>[];
     data: TData[];
@@ -13,7 +13,7 @@ export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(pro
         "mrt-row-select": Partial<MRT_ColumnDef<{}>>;
         "mrt-row-numbers": Partial<MRT_ColumnDef<{}>>;
     }> | undefined;
-    editingMode?: "cell" | "row" | "table" | "modal" | undefined;
+    editingMode?: "row" | "cell" | "table" | "modal" | undefined;
     enableBottomToolbar?: boolean | undefined;
     enableClickToCopy?: boolean | undefined;
     enableColumnActions?: boolean | undefined;
@@ -45,7 +45,7 @@ export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(pro
     icons?: Partial<import("..").MRT_Icons> | undefined;
     initialState?: Partial<MRT_TableState<TData>> | undefined;
     localization?: Partial<MRT_Localization> | undefined;
-    memoMode?: "cell" | "row" | "table-body" | undefined;
+    memoMode?: "row" | "cell" | "table-body" | undefined;
     muiBottomToolbarProps?: import("@mui/material").ToolbarProps<"div", {}> | (({ table }: {
         table: MRT_TableInstance<TData>;
     }) => import("@mui/material").ToolbarProps<"div", {}>) | undefined;

package/dist/esm/MaterialReactTable.d.ts

@@ -2,8 +2,8 @@ import { Dispatch, MutableRefObject, ReactNode, SetStateAction } from 'react';
 import type { AlertProps, ButtonProps, CheckboxProps, ChipProps, IconButtonProps, LinearProgressProps, PaperProps, RadioProps, SkeletonProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TextFieldProps, ToolbarProps } from '@mui/material';
 import type { Cell, Column, ColumnDef, DeepKeys, FilterFn, Header, HeaderGroup, OnChangeFn, Row, SortingFn, Table, TableOptions, TableState } from '@tanstack/react-table';
 import type { Options as VirtualizerOptions, VirtualItem } from 'react-virtual';
-import { MRT_Icons } from './icons';
 import { MRT_FilterFns } from './filterFns';
+import { MRT_Icons } from './icons';
 import { MRT_SortingFns } from './sortingFns';
 /**
  * Most of this file is just TypeScript types
@@ -329,7 +329,7 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
         onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
         table: MRT_TableInstance<TData>;
     }) => ReactNode[];
-    sortingFn?: MRT_SortingFn;
+    sortingFn?: MRT_SortingFn<TData>;
 };
 export declare type MRT_DefinedColumnDef<TData extends Record<string, any> = {}> = Omit<MRT_ColumnDef<TData>, 'id' | 'defaultDisplayColumn'> & {
     defaultDisplayColumn: Partial<MRT_ColumnDef<TData>>;

package/dist/esm/_locales/ja.d.ts

@@ -0,0 +1,2 @@
+import { MRT_Localization } from '../MaterialReactTable';
+export declare const MRT_Localization_JA: MRT_Localization;

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

@@ -1,8 +1,8 @@
 import React, { useMemo, useRef, useState, useCallback, useEffect, Fragment, memo, useLayoutEffect } from 'react';
 import { aggregationFns, filterFns, sortingFns, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
-import { ArrowRight, Cancel, CheckBox, ClearAll, Close, DensityLarge, DensityMedium, DensitySmall, DragHandle, DynamicFeed, Edit, ExpandLess, ExpandMore, FilterAlt, FilterAltOff, FilterList, FilterListOff, FullscreenExit, Fullscreen, KeyboardDoubleArrowDown, MoreHoriz, MoreVert, PushPin, RestartAlt, Save, Search, SearchOff, Sort, ViewColumn, VisibilityOff } from '@mui/icons-material';
+import { alpha, lighten, Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Typography, Button, Divider, ListItemIcon, Radio, Checkbox, debounce, Collapse, TextField, InputAdornment, LinearProgress, TablePagination, Chip, Alert, AlertTitle, Fade, useMediaQuery, Toolbar, Grow, TableSortLabel, useTheme, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog, DialogTitle, DialogContent, Stack, DialogActions } from '@mui/material';
 import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
-import { Tooltip, IconButton, Menu, MenuItem, Box, alpha, lighten, FormControlLabel, Switch, Typography, Button, Divider, ListItemIcon, Radio, Checkbox, debounce, Collapse, TextField, InputAdornment, LinearProgress, TablePagination, Chip, Alert, AlertTitle, Fade, useMediaQuery, Toolbar, Grow, TableSortLabel, useTheme, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog, DialogTitle, DialogContent, Stack, DialogActions } from '@mui/material';
+import { ArrowRight, Cancel, CheckBox, ClearAll, Close, DensityLarge, DensityMedium, DensitySmall, DragHandle, DynamicFeed, Edit, ExpandLess, ExpandMore, FilterAlt, FilterAltOff, FilterList, FilterListOff, FullscreenExit, Fullscreen, KeyboardDoubleArrowDown, MoreHoriz, MoreVert, PushPin, RestartAlt, Save, Search, SearchOff, Sort, ViewColumn, VisibilityOff } from '@mui/icons-material';
 import { useVirtual } from 'react-virtual';
 
 /******************************************************************************
@@ -34,37 +34,161 @@ function __rest(s, e) {
 
 const MRT_AggregationFns = Object.assign({}, aggregationFns);
 
-const MRT_Default_Icons = {
-    ArrowRightIcon: ArrowRight,
-    CancelIcon: Cancel,
-    CheckBoxIcon: CheckBox,
-    ClearAllIcon: ClearAll,
-    CloseIcon: Close,
-    DensityLargeIcon: DensityLarge,
-    DensityMediumIcon: DensityMedium,
-    DensitySmallIcon: DensitySmall,
-    DragHandleIcon: DragHandle,
-    DynamicFeedIcon: DynamicFeed,
-    EditIcon: Edit,
-    ExpandLessIcon: ExpandLess,
-    ExpandMoreIcon: ExpandMore,
-    FilterAltIcon: FilterAlt,
-    FilterAltOffIcon: FilterAltOff,
-    FilterListIcon: FilterList,
-    FilterListOffIcon: FilterListOff,
-    FullscreenExitIcon: FullscreenExit,
-    FullscreenIcon: Fullscreen,
-    KeyboardDoubleArrowDownIcon: KeyboardDoubleArrowDown,
-    MoreHorizIcon: MoreHoriz,
-    MoreVertIcon: MoreVert,
-    PushPinIcon: PushPin,
-    RestartAltIcon: RestartAlt,
-    SaveIcon: Save,
-    SearchIcon: Search,
-    SearchOffIcon: SearchOff,
-    SortIcon: Sort,
-    ViewColumnIcon: ViewColumn,
-    VisibilityOffIcon: VisibilityOff,
+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 = [];
+    const getLeafColumns = (cols) => {
+        cols.forEach((col) => {
+            if (col.columns) {
+                getLeafColumns(col.columns);
+            }
+            else {
+                allLeafColumnDefs.push(col);
+            }
+        });
+    };
+    getLeafColumns(columns);
+    return allLeafColumnDefs;
+};
+const prepareColumns = ({ columnDefs, columnFilterFns, defaultDisplayColumn, filterFns, sortingFns, }) => columnDefs.map((columnDef) => {
+    var _a, _b;
+    if (!columnDef.id)
+        columnDef.id = getColumnId(columnDef);
+    if (process.env.NODE_ENV !== 'production' && !columnDef.id) {
+        console.error('Column definitions must have a valid `accessorKey` or `id` property');
+    }
+    if (!columnDef.columnDefType)
+        columnDef.columnDefType = 'data';
+    if (!!((_a = columnDef.columns) === null || _a === void 0 ? void 0 : _a.length)) {
+        columnDef.columnDefType = 'group';
+        columnDef.columns = prepareColumns({
+            columnDefs: columnDef.columns,
+            columnFilterFns,
+            defaultDisplayColumn,
+            filterFns,
+            sortingFns,
+        });
+    }
+    else if (columnDef.columnDefType === 'data') {
+        if (Object.keys(filterFns).includes(columnFilterFns[columnDef.id])) {
+            columnDef.filterFn =
+                (_b = filterFns[columnFilterFns[columnDef.id]]) !== null && _b !== void 0 ? _b : filterFns.fuzzy;
+            columnDef._filterFn =
+                columnFilterFns[columnDef.id];
+        }
+        if (Object.keys(sortingFns).includes(columnDef.sortingFn)) {
+            // @ts-ignore
+            columnDef.sortingFn = sortingFns[columnDef.sortingFn];
+        }
+    }
+    else if (columnDef.columnDefType === 'display') {
+        columnDef = Object.assign(Object.assign({}, defaultDisplayColumn), columnDef);
+    }
+    return columnDef;
+});
+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 showExpandColumn = (props, grouping) => !!(props.enableExpanding ||
+    (props.enableGrouping && (grouping === undefined || (grouping === null || grouping === void 0 ? void 0 : grouping.length))) ||
+    props.renderDetailPanel);
+const getLeadingDisplayColumnIds = (props) => {
+    var _a;
+    return [
+        (props.enableRowDragging || props.enableRowOrdering) && 'mrt-row-drag',
+        props.positionActionsColumn === 'first' &&
+            (props.enableRowActions ||
+                (props.enableEditing &&
+                    ['row', 'modal'].includes((_a = props.editingMode) !== null && _a !== void 0 ? _a : ''))) &&
+            'mrt-row-actions',
+        props.positionExpandColumn === 'first' &&
+            showExpandColumn(props) &&
+            'mrt-row-expand',
+        props.enableRowSelection && 'mrt-row-select',
+        props.enableRowNumbers && 'mrt-row-numbers',
+    ].filter(Boolean);
+};
+const getTrailingDisplayColumnIds = (props) => {
+    var _a;
+    return [
+        props.positionActionsColumn === 'last' &&
+            (props.enableRowActions ||
+                (props.enableEditing &&
+                    ['row', 'modal'].includes((_a = props.editingMode) !== null && _a !== void 0 ? _a : ''))) &&
+            'mrt-row-actions',
+        props.positionExpandColumn === 'last' &&
+            showExpandColumn(props) &&
+            'mrt-row-expand',
+    ];
+};
+const getDefaultColumnOrderIds = (props) => [
+    ...getLeadingDisplayColumnIds(props),
+    ...getAllLeafColumnDefs(props.columns).map((columnDef) => getColumnId(columnDef)),
+    ...getTrailingDisplayColumnIds(props),
+].filter(Boolean);
+const getDefaultColumnFilterFn = (columnDef) => {
+    if (columnDef.filterVariant === 'multi-select')
+        return 'arrIncludesSome';
+    if (columnDef.filterVariant === 'range')
+        return 'betweenInclusive';
+    if (columnDef.filterVariant === 'select' ||
+        columnDef.filterVariant === 'checkbox')
+        return 'equals';
+    return 'fuzzy';
+};
+const getIsLastLeftPinnedColumn = (table, column) => {
+    return (column.getIsPinned() === 'left' &&
+        table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex());
+};
+const getIsFirstRightPinnedColumn = (column) => {
+    return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
+};
+const getTotalRight = (table, column) => {
+    return ((table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 160);
+};
+const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, }) => {
+    var _a, _b, _c, _d;
+    return (Object.assign(Object.assign({ backgroundColor: column.getIsPinned() && column.columnDef.columnDefType !== 'group'
+            ? alpha(lighten(theme.palette.background.default, 0.04), 0.97)
+            : 'inherit', backgroundImage: 'inherit', boxShadow: getIsLastLeftPinnedColumn(table, column)
+            ? `-4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
+            : getIsFirstRightPinnedColumn(column)
+                ? `4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
+                : undefined, left: column.getIsPinned() === 'left'
+            ? `${column.getStart('left')}px`
+            : undefined, opacity: ((_a = table.getState().draggingColumn) === null || _a === void 0 ? void 0 : _a.id) === column.id ||
+            ((_b = table.getState().hoveredColumn) === null || _b === void 0 ? void 0 : _b.id) === column.id
+            ? 0.5
+            : 1, position: column.getIsPinned() && column.columnDef.columnDefType !== 'group'
+            ? 'sticky'
+            : undefined, right: column.getIsPinned() === 'right'
+            ? `${getTotalRight(table, column)}px`
+            : undefined, transition: `all ${column.getIsResizing() ? 0 : '150ms'} ease-in-out` }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
+        ? tableCellProps.sx(theme)
+        : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx)), { maxWidth: `min(${column.getSize()}px, fit-content)`, minWidth: `max(${column.getSize()}px, ${(_c = column.columnDef.minSize) !== null && _c !== void 0 ? _c : 30}px)`, width: (_d = header === null || header === void 0 ? void 0 : header.getSize()) !== null && _d !== void 0 ? _d : column.getSize() }));
+};
+const MRT_DefaultColumn = {
+    minSize: 40,
+    maxSize: 1000,
+    size: 180,
+};
+const MRT_DefaultDisplayColumn = {
+    columnDefType: 'display',
+    enableClickToCopy: false,
+    enableColumnActions: false,
+    enableColumnDragging: false,
+    enableColumnFilter: false,
+    enableColumnOrdering: false,
+    enableEditing: false,
+    enableGlobalFilter: false,
+    enableGrouping: false,
+    enableHiding: false,
+    enableResizing: false,
+    enableSorting: false,
 };
 
 const fuzzy$1 = (row, columnId, filterValue, addMeta) => {
@@ -151,94 +275,37 @@ const MRT_FilterFns = Object.assign(Object.assign({}, filterFns), { between,
     notEquals,
     startsWith });
 
-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',
-    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_Default_Icons = {
+    ArrowRightIcon: ArrowRight,
+    CancelIcon: Cancel,
+    CheckBoxIcon: CheckBox,
+    ClearAllIcon: ClearAll,
+    CloseIcon: Close,
+    DensityLargeIcon: DensityLarge,
+    DensityMediumIcon: DensityMedium,
+    DensitySmallIcon: DensitySmall,
+    DragHandleIcon: DragHandle,
+    DynamicFeedIcon: DynamicFeed,
+    EditIcon: Edit,
+    ExpandLessIcon: ExpandLess,
+    ExpandMoreIcon: ExpandMore,
+    FilterAltIcon: FilterAlt,
+    FilterAltOffIcon: FilterAltOff,
+    FilterListIcon: FilterList,
+    FilterListOffIcon: FilterListOff,
+    FullscreenExitIcon: FullscreenExit,
+    FullscreenIcon: Fullscreen,
+    KeyboardDoubleArrowDownIcon: KeyboardDoubleArrowDown,
+    MoreHorizIcon: MoreHoriz,
+    MoreVertIcon: MoreVert,
+    PushPinIcon: PushPin,
+    RestartAltIcon: RestartAlt,
+    SaveIcon: Save,
+    SearchIcon: Search,
+    SearchOffIcon: SearchOff,
+    SortIcon: Sort,
+    ViewColumnIcon: ViewColumn,
+    VisibilityOffIcon: VisibilityOff,
 };
 
 const fuzzy = (rowA, rowB, columnId) => {
@@ -500,163 +567,6 @@ const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table,
             React.createElement(DragHandleIcon, null))));
 };
 
-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 = [];
-    const getLeafColumns = (cols) => {
-        cols.forEach((col) => {
-            if (col.columns) {
-                getLeafColumns(col.columns);
-            }
-            else {
-                allLeafColumnDefs.push(col);
-            }
-        });
-    };
-    getLeafColumns(columns);
-    return allLeafColumnDefs;
-};
-const prepareColumns = ({ columnDefs, columnFilterFns, defaultDisplayColumn, filterFns, sortingFns, }) => columnDefs.map((columnDef) => {
-    var _a, _b;
-    if (!columnDef.id)
-        columnDef.id = getColumnId(columnDef);
-    if (process.env.NODE_ENV !== 'production' && !columnDef.id) {
-        console.error('Column definitions must have a valid `accessorKey` or `id` property');
-    }
-    if (!columnDef.columnDefType)
-        columnDef.columnDefType = 'data';
-    if (!!((_a = columnDef.columns) === null || _a === void 0 ? void 0 : _a.length)) {
-        columnDef.columnDefType = 'group';
-        columnDef.columns = prepareColumns({
-            columnDefs: columnDef.columns,
-            columnFilterFns,
-            defaultDisplayColumn,
-            filterFns,
-            sortingFns,
-        });
-    }
-    else if (columnDef.columnDefType === 'data') {
-        if (Object.keys(filterFns).includes(columnFilterFns[columnDef.id])) {
-            columnDef.filterFn =
-                (_b = filterFns[columnFilterFns[columnDef.id]]) !== null && _b !== void 0 ? _b : filterFns.fuzzy;
-            columnDef._filterFn =
-                columnFilterFns[columnDef.id];
-        }
-        if (Object.keys(sortingFns).includes(columnDef.sortingFn)) {
-            // @ts-ignore
-            columnDef.sortingFn = sortingFns[columnDef.sortingFn];
-        }
-    }
-    else if (columnDef.columnDefType === 'display') {
-        columnDef = Object.assign(Object.assign({}, defaultDisplayColumn), columnDef);
-    }
-    return columnDef;
-});
-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 showExpandColumn = (props, grouping) => !!(props.enableExpanding ||
-    (props.enableGrouping && (grouping === undefined || (grouping === null || grouping === void 0 ? void 0 : grouping.length))) ||
-    props.renderDetailPanel);
-const getLeadingDisplayColumnIds = (props) => {
-    var _a;
-    return [
-        (props.enableRowDragging || props.enableRowOrdering) && 'mrt-row-drag',
-        props.positionActionsColumn === 'first' &&
-            (props.enableRowActions ||
-                (props.enableEditing &&
-                    ['row', 'modal'].includes((_a = props.editingMode) !== null && _a !== void 0 ? _a : ''))) &&
-            'mrt-row-actions',
-        props.positionExpandColumn === 'first' &&
-            showExpandColumn(props) &&
-            'mrt-row-expand',
-        props.enableRowSelection && 'mrt-row-select',
-        props.enableRowNumbers && 'mrt-row-numbers',
-    ].filter(Boolean);
-};
-const getTrailingDisplayColumnIds = (props) => {
-    var _a;
-    return [
-        props.positionActionsColumn === 'last' &&
-            (props.enableRowActions ||
-                (props.enableEditing &&
-                    ['row', 'modal'].includes((_a = props.editingMode) !== null && _a !== void 0 ? _a : ''))) &&
-            'mrt-row-actions',
-        props.positionExpandColumn === 'last' &&
-            showExpandColumn(props) &&
-            'mrt-row-expand',
-    ];
-};
-const getDefaultColumnOrderIds = (props) => [
-    ...getLeadingDisplayColumnIds(props),
-    ...getAllLeafColumnDefs(props.columns).map((columnDef) => getColumnId(columnDef)),
-    ...getTrailingDisplayColumnIds(props),
-].filter(Boolean);
-const getDefaultColumnFilterFn = (columnDef) => {
-    if (columnDef.filterVariant === 'multi-select')
-        return 'arrIncludesSome';
-    if (columnDef.filterVariant === 'range')
-        return 'betweenInclusive';
-    if (columnDef.filterVariant === 'select' ||
-        columnDef.filterVariant === 'checkbox')
-        return 'equals';
-    return 'fuzzy';
-};
-const getIsLastLeftPinnedColumn = (table, column) => {
-    return (column.getIsPinned() === 'left' &&
-        table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex());
-};
-const getIsFirstRightPinnedColumn = (column) => {
-    return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
-};
-const getTotalRight = (table, column) => {
-    return ((table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 160);
-};
-const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, }) => {
-    var _a, _b, _c, _d;
-    return (Object.assign(Object.assign({ backgroundColor: column.getIsPinned() && column.columnDef.columnDefType !== 'group'
-            ? alpha(lighten(theme.palette.background.default, 0.04), 0.97)
-            : 'inherit', backgroundImage: 'inherit', boxShadow: getIsLastLeftPinnedColumn(table, column)
-            ? `-4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
-            : getIsFirstRightPinnedColumn(column)
-                ? `4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
-                : undefined, left: column.getIsPinned() === 'left'
-            ? `${column.getStart('left')}px`
-            : undefined, opacity: ((_a = table.getState().draggingColumn) === null || _a === void 0 ? void 0 : _a.id) === column.id ||
-            ((_b = table.getState().hoveredColumn) === null || _b === void 0 ? void 0 : _b.id) === column.id
-            ? 0.5
-            : 1, position: column.getIsPinned() && column.columnDef.columnDefType !== 'group'
-            ? 'sticky'
-            : undefined, right: column.getIsPinned() === 'right'
-            ? `${getTotalRight(table, column)}px`
-            : undefined, transition: `all ${column.getIsResizing() ? 0 : '150ms'} ease-in-out` }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
-        ? tableCellProps.sx(theme)
-        : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx)), { maxWidth: `min(${column.getSize()}px, fit-content)`, minWidth: `max(${column.getSize()}px, ${(_c = column.columnDef.minSize) !== null && _c !== void 0 ? _c : 30}px)`, width: (_d = header === null || header === void 0 ? void 0 : header.getSize()) !== null && _d !== void 0 ? _d : column.getSize() }));
-};
-const MRT_DefaultColumn = {
-    minSize: 40,
-    maxSize: 1000,
-    size: 180,
-};
-const MRT_DefaultDisplayColumn = {
-    columnDefType: 'display',
-    enableClickToCopy: false,
-    enableColumnActions: false,
-    enableColumnDragging: false,
-    enableColumnFilter: false,
-    enableColumnOrdering: false,
-    enableEditing: false,
-    enableGlobalFilter: false,
-    enableGrouping: false,
-    enableHiding: false,
-    enableResizing: false,
-    enableSorting: false,
-};
-
 const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredColumn, column, isSubMenu, table, }) => {
     var _a;
     const { getState, options: { enableColumnOrdering, enableHiding, enablePinning, localization, }, setColumnOrder, } = table;
@@ -2711,6 +2621,96 @@ const MRT_TableRoot = (props) => {
         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',
+    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 MaterialReactTable = (_a) => {
     var { aggregationFns, autoResetExpanded = false, columnResizeMode = 'onEnd', defaultColumn, defaultDisplayColumn, editingMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enablePinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, localization, positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'original', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnResizeMode", "defaultColumn", "defaultDisplayColumn", "editingMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "localization", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "selectAllMode", "sortingFns"]);
     const _icons = useMemo(() => (Object.assign(Object.assign({}, MRT_Default_Icons), icons)), []);