material-react-table 1.2.1 → 1.2.3

package/dist/esm/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/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.1",
+  "version": "1.2.3",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",

package/src/body/MRT_TableDetailPanel.tsx

@@ -46,12 +46,8 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row, table }) => {
         })}
       >
         {renderDetailPanel && (
-          <Collapse
-            in={!isLoading && row.getIsExpanded()}
-            mountOnEnter
-            unmountOnExit
-          >
-            {renderDetailPanel({ row, table })}
+          <Collapse in={row.getIsExpanded()} mountOnEnter unmountOnExit>
+            {!isLoading && renderDetailPanel({ row, table })}
           </Collapse>
         )}
       </TableCell>

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -20,7 +20,7 @@ export const MRT_ExpandAllButton: FC<Props> = ({ table }) => {
     },
     toggleAllRowsExpanded,
   } = table;
-  const { density } = getState();
+  const { density, isLoading } = getState();
 
   const iconButtonProps =
     muiExpandAllButtonProps instanceof Function
@@ -37,7 +37,9 @@ export const MRT_ExpandAllButton: FC<Props> = ({ table }) => {
       <span>
         <IconButton
           aria-label={localization.expandAll}
-          disabled={!getCanSomeRowsExpand() && !renderDetailPanel}
+          disabled={
+            isLoading || (!renderDetailPanel && !getCanSomeRowsExpand())
+          }
           onClick={() => toggleAllRowsExpanded(!getIsAllRowsExpanded())}
           {...iconButtonProps}
           sx={(theme) => ({

package/src/column.utils.ts

@@ -1,6 +1,8 @@
 import { ColumnOrderState, GroupingState } from '@tanstack/react-table';
 import { alpha, lighten, TableCellProps, Theme } from '@mui/material';
-import {
+import { MRT_FilterFns } from './filterFns';
+import { MRT_SortingFns } from './sortingFns';
+import type {
   MaterialReactTableProps,
   MRT_Column,
   MRT_ColumnDef,
@@ -10,8 +12,6 @@ import {
   MRT_Header,
   MRT_TableInstance,
 } from '.';
-import { MRT_FilterFns } from './filterFns';
-import { MRT_SortingFns } from './sortingFns';
 
 export const getColumnId = <TData extends Record<string, any> = {}>(
   columnDef: MRT_ColumnDef<TData>,

package/src/head/MRT_TableHeadCell.tsx

@@ -198,7 +198,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
               display: 'flex',
               flexDirection:
                 tableCellProps?.align === 'right' ? 'row-reverse' : 'row',
-              overflow: 'hidden',
+              overflow: columnDefType === 'data' ? 'hidden' : undefined,
               pl:
                 tableCellProps?.align === 'center'
                   ? `${headerPL}rem`
@@ -208,12 +208,12 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
             <Box
               className="Mui-TableHeadCell-Content-Wrapper"
               sx={{
-                overflow: 'hidden',
+                overflow: columnDefType === 'data' ? 'hidden' : undefined,
                 textOverflow: 'ellipsis',
                 whiteSpace:
                   (columnDef.header?.length ?? 0) < 20 ? 'nowrap' : 'normal',
               }}
-              title={columnDef.header}
+              title={columnDefType === 'data' ? columnDef.header : undefined}
             >
               {headerElement}
             </Box>

package/src/icons.ts

@@ -1,35 +1,33 @@
-import {
-  ArrowRight,
-  Cancel,
-  CheckBox,
-  ClearAll,
-  Close,
-  DensityLarge,
-  DensityMedium,
-  DensitySmall,
-  DragHandle,
-  DynamicFeed,
-  Edit,
-  ExpandLess,
-  ExpandMore,
-  FilterAlt,
-  FilterAltOff,
-  FilterList,
-  FilterListOff,
-  Fullscreen,
-  FullscreenExit,
-  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';
 
 export interface MRT_Icons {
   ArrowRightIcon: any;
@@ -65,34 +63,34 @@ export interface MRT_Icons {
 }
 
 export const MRT_Default_Icons: MRT_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,
 };

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -19,7 +19,7 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, table }) => {
       selectAllMode,
     },
   } = table;
-  const { density } = getState();
+  const { density, isLoading } = getState();
 
   const checkboxProps = !row
     ? muiSelectAllCheckboxProps instanceof Function
@@ -35,6 +35,7 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, table }) => {
         ? table.getIsAllPageRowsSelected()
         : table.getIsAllRowsSelected()
       : row?.getIsSelected(),
+    disabled: isLoading,
     inputProps: {
       'aria-label': selectAll
         ? localization.toggleSelectAll