material-react-table 1.2.1 → 1.2.3

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>>, "initialState" | "state" | "onStateChange" | "data" | "columns" | "defaultColumn" | "enableRowSelection" | "expandRowsFn"> & {
+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"> & {
     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?: "row" | "cell" | "table" | "modal" | undefined;
+    editingMode?: "cell" | "row" | "table" | "modal" | undefined;
     enableBottomToolbar?: boolean | undefined;
     enableClickToCopy?: boolean | undefined;
     enableColumnActions?: boolean | undefined;

package/dist/esm/column.utils.d.ts

@@ -1,8 +1,8 @@
 import { ColumnOrderState, GroupingState } from '@tanstack/react-table';
 import { TableCellProps, Theme } from '@mui/material';
-import { MaterialReactTableProps, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterOption, MRT_Header, MRT_TableInstance } from '.';
 import { MRT_FilterFns } from './filterFns';
 import { MRT_SortingFns } from './sortingFns';
+import type { MaterialReactTableProps, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterOption, MRT_Header, MRT_TableInstance } from '.';
 export declare const getColumnId: <TData extends Record<string, any> = {}>(columnDef: MRT_ColumnDef<TData>) => string;
 export declare const getAllLeafColumnDefs: <TData extends Record<string, any> = {}>(columns: MRT_ColumnDef<TData>[]) => MRT_ColumnDef<TData>[];
 export declare const prepareColumns: <TData extends Record<string, any> = {}>({ columnDefs, columnFilterFns, defaultDisplayColumn, filterFns, sortingFns, }: {

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

@@ -2,7 +2,36 @@ import React, { useMemo, useRef, useState, useCallback, useEffect, Fragment, mem
 import { aggregationFns, filterFns, sortingFns, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
 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 { 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 ArrowRightIcon from '@mui/icons-material/ArrowRight';
+import CancelIcon from '@mui/icons-material/Cancel';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import ClearAllIcon from '@mui/icons-material/ClearAll';
+import CloseIcon from '@mui/icons-material/Close';
+import DensityLargeIcon from '@mui/icons-material/DensityLarge';
+import DensityMediumIcon from '@mui/icons-material/DensityMedium';
+import DensitySmallIcon from '@mui/icons-material/DensitySmall';
+import DragHandleIcon from '@mui/icons-material/DragHandle';
+import DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
+import EditIcon from '@mui/icons-material/Edit';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import FilterAltIcon from '@mui/icons-material/FilterAlt';
+import FilterAltOffIcon from '@mui/icons-material/FilterAltOff';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import FilterListOffIcon from '@mui/icons-material/FilterListOff';
+import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
+import FullscreenIcon from '@mui/icons-material/Fullscreen';
+import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import PushPinIcon from '@mui/icons-material/PushPin';
+import RestartAltIcon from '@mui/icons-material/RestartAlt';
+import SaveIcon from '@mui/icons-material/Save';
+import SearchIcon from '@mui/icons-material/Search';
+import SearchOffIcon from '@mui/icons-material/SearchOff';
+import SortIcon from '@mui/icons-material/Sort';
+import ViewColumnIcon from '@mui/icons-material/ViewColumn';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import { useVirtual } from 'react-virtual';
 
 /******************************************************************************
@@ -276,36 +305,36 @@ const MRT_FilterFns = Object.assign(Object.assign({}, filterFns), { between,
     startsWith });
 
 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,
+    ArrowRightIcon,
+    CancelIcon,
+    CheckBoxIcon,
+    ClearAllIcon,
+    CloseIcon,
+    DensityLargeIcon,
+    DensityMediumIcon,
+    DensitySmallIcon,
+    DragHandleIcon,
+    DynamicFeedIcon,
+    EditIcon,
+    ExpandLessIcon,
+    ExpandMoreIcon,
+    FilterAltIcon,
+    FilterAltOffIcon,
+    FilterListIcon,
+    FilterListOffIcon,
+    FullscreenExitIcon,
+    FullscreenIcon,
+    KeyboardDoubleArrowDownIcon,
+    MoreHorizIcon,
+    MoreVertIcon,
+    PushPinIcon,
+    RestartAltIcon,
+    SaveIcon,
+    SearchIcon,
+    SearchOffIcon,
+    SortIcon,
+    ViewColumnIcon,
+    VisibilityOffIcon,
 };
 
 const fuzzy = (rowA, rowB, columnId) => {
@@ -325,13 +354,13 @@ const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFil
 const MRT_ExpandAllButton = ({ table }) => {
     var _a;
     const { getIsAllRowsExpanded, getIsSomeRowsExpanded, getCanSomeRowsExpand, getState, options: { icons: { KeyboardDoubleArrowDownIcon }, localization, muiExpandAllButtonProps, renderDetailPanel, }, toggleAllRowsExpanded, } = table;
-    const { density } = getState();
+    const { density, isLoading } = getState();
     const iconButtonProps = muiExpandAllButtonProps instanceof Function
         ? muiExpandAllButtonProps({ table })
         : muiExpandAllButtonProps;
     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 : localization.expandAll },
         React.createElement("span", null,
-            React.createElement(IconButton, Object.assign({ "aria-label": localization.expandAll, disabled: !getCanSomeRowsExpand() && !renderDetailPanel, onClick: () => toggleAllRowsExpanded(!getIsAllRowsExpanded()) }, 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
+            React.createElement(IconButton, Object.assign({ "aria-label": localization.expandAll, disabled: isLoading || (!renderDetailPanel && !getCanSomeRowsExpand()), onClick: () => toggleAllRowsExpanded(!getIsAllRowsExpanded()) }, 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 }),
                 React.createElement(KeyboardDoubleArrowDownIcon, { style: {
@@ -949,7 +978,7 @@ const MRT_ToggleRowActionMenuButton = ({ cell, row, table, }) => {
 const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
     var _a;
     const { getState, options: { localization, enableMultiRowSelection, muiSelectCheckboxProps, muiSelectAllCheckboxProps, selectAllMode, }, } = table;
-    const { density } = getState();
+    const { density, isLoading } = getState();
     const checkboxProps = !row
         ? muiSelectAllCheckboxProps instanceof Function
             ? muiSelectAllCheckboxProps({ table })
@@ -961,7 +990,7 @@ const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
             ? selectAllMode === 'page'
                 ? table.getIsAllPageRowsSelected()
                 : table.getIsAllRowsSelected()
-            : row === null || row === void 0 ? void 0 : row.getIsSelected(), inputProps: {
+            : row === null || row === void 0 ? void 0 : row.getIsSelected(), disabled: isLoading, inputProps: {
             'aria-label': selectAll
                 ? localization.toggleSelectAll
                 : localization.toggleSelectRow,
@@ -1851,16 +1880,16 @@ const MRT_TableHeadCell = ({ header, table }) => {
                         : undefined,
                     display: 'flex',
                     flexDirection: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'right' ? 'row-reverse' : 'row',
-                    overflow: 'hidden',
+                    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: {
-                        overflow: 'hidden',
+                        overflow: columnDefType === 'data' ? 'hidden' : undefined,
                         textOverflow: 'ellipsis',
                         whiteSpace: ((_d = (_c = columnDef.header) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) < 20 ? 'nowrap' : 'normal',
-                    }, title: columnDef.header }, headerElement),
+                    }, 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' } },
@@ -2154,7 +2183,7 @@ const MRT_TableDetailPanel = ({ row, table }) => {
     return (React.createElement(TableRow, Object.assign({}, tableRowProps),
         React.createElement(TableCell, Object.assign({ colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ borderBottom: !row.getIsExpanded() ? 'none' : undefined, 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: !isLoading && row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true }, renderDetailPanel({ row, table }))))));
+                : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx))) }), renderDetailPanel && (React.createElement(Collapse, { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true }, !isLoading && renderDetailPanel({ row, table }))))));
 };
 
 const MRT_TableBodyRow = ({ numRows, row, rowIndex, table, virtualRow, }) => {