material-react-table 1.9.4 → 1.10.0

package/dist/esm/types/MaterialReactTable.d.ts

@@ -567,6 +567,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> = Pr
     muiTableBodyRowProps?: TableRowProps | ((props: {
         isDetailPanel?: boolean;
         row: MRT_Row<TData>;
+        staticRowIndex: number;
         table: MRT_TableInstance<TData>;
     }) => TableRowProps);
     muiTableContainerProps?: TableContainerProps | ((props: {
@@ -691,6 +692,9 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> = Pr
         onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
         table: MRT_TableInstance<TData>;
     }) => ReactNode[];
+    renderEmptyRowsFallback?: (props: {
+        table: MRT_TableInstance<TData>;
+    }) => ReactNode;
     renderRowActionMenuItems?: (props: {
         closeMenu: () => void;
         row: MRT_Row<TData>;

package/dist/esm/types/body/MRT_TableDetailPanel.d.ts

@@ -4,8 +4,9 @@ import type { MRT_Row, MRT_TableInstance } from '..';
 interface Props {
     parentRowRef: React.RefObject<HTMLTableRowElement>;
     row: MRT_Row;
+    rowIndex: number;
     table: MRT_TableInstance;
     virtualRow?: VirtualItem;
 }
-export declare const MRT_TableDetailPanel: ({ parentRowRef, row, table, virtualRow, }: Props) => JSX.Element;
+export declare const MRT_TableDetailPanel: ({ parentRowRef, row, rowIndex, table, virtualRow, }: Props) => JSX.Element;
 export {};

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

@@ -103,7 +103,7 @@ export declare const prepareColumns: <TData extends Record<string, any> = {}>({
 export declare const reorderColumn: <TData extends Record<string, any> = {}>(draggedColumn: MRT_Column<TData>, targetColumn: MRT_Column<TData>, columnOrder: MRT_ColumnOrderState) => MRT_ColumnOrderState;
 export declare const showExpandColumn: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>, grouping?: MRT_GroupingState) => boolean;
 export declare const getLeadingDisplayColumnIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => MRT_DisplayColumnIds[];
-export declare const getTrailingDisplayColumnIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => (string | false | undefined)[];
+export declare const getTrailingDisplayColumnIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => MRT_DisplayColumnIds[];
 export declare const getDefaultColumnOrderIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => string[];
 export declare const getDefaultColumnFilterFn: <TData extends Record<string, any> = {}>(columnDef: MRT_ColumnDef<TData>) => MRT_FilterOption;
 export declare const getIsFirstColumn: (column: MRT_Column, table: MRT_TableInstance) => boolean;

package/dist/index.d.ts

@@ -688,6 +688,7 @@ type MaterialReactTableProps<TData extends Record<string, any> = {}> = Prettify<
     muiTableBodyRowProps?: TableRowProps | ((props: {
         isDetailPanel?: boolean;
         row: MRT_Row<TData>;
+        staticRowIndex: number;
         table: MRT_TableInstance<TData>;
     }) => TableRowProps);
     muiTableContainerProps?: TableContainerProps | ((props: {
@@ -812,6 +813,9 @@ type MaterialReactTableProps<TData extends Record<string, any> = {}> = Prettify<
         onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
         table: MRT_TableInstance<TData>;
     }) => ReactNode[];
+    renderEmptyRowsFallback?: (props: {
+        table: MRT_TableInstance<TData>;
+    }) => ReactNode;
     renderRowActionMenuItems?: (props: {
         closeMenu: () => void;
         row: MRT_Row<TData>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.9.4",
+  "version": "1.10.0",
   "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.",
@@ -48,9 +48,11 @@
     "build": "pnpm lib:build",
     "build-locales": "pnpm lib:build-locales",
     "build-no-locales": "pnpm lib:build-no-locales",
+    "dev": "pnpm lib:dev",
     "lib:build": "rm -rf dist && pnpm build-no-locales && pnpm build-locales",
-    "lib:build-locales": "rm -rf locales && rollup --config rollup-locales.config.mjs",
-    "lib:build-no-locales": "rm -rf dist && rollup --config rollup.config.mjs && size-limit",
+    "lib:build-locales": "rm -rf locales && rollup -c rollup-locales.config.mjs",
+    "lib:build-no-locales": "rm -rf dist && rollup -c rollup.config.mjs && size-limit",
+    "lib:dev": "rollup -c rollup.config.mjs --watch",
     "lint": "eslint .",
     "size": "size-limit"
   },

package/src/MaterialReactTable.tsx

@@ -776,6 +776,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
         | ((props: {
             isDetailPanel?: boolean;
             row: MRT_Row<TData>;
+            staticRowIndex: number;
             table: MRT_TableInstance<TData>;
           }) => TableRowProps);
       muiTableContainerProps?:
@@ -918,6 +919,9 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
         onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
         table: MRT_TableInstance<TData>;
       }) => ReactNode[];
+      renderEmptyRowsFallback?: (props: {
+        table: MRT_TableInstance<TData>;
+      }) => ReactNode;
       renderRowActionMenuItems?: (props: {
         closeMenu: () => void;
         row: MRT_Row<TData>;

package/src/body/MRT_TableBody.tsx

@@ -42,6 +42,7 @@ export const MRT_TableBody = ({
       manualSorting,
       memoMode,
       muiTableBodyProps,
+      renderEmptyRowsFallback,
       rowVirtualizerInstanceRef,
       rowVirtualizerProps,
       virtualizerInstanceRef,
@@ -163,24 +164,28 @@ export const MRT_TableBody = ({
           <tr style={{ display: layoutMode === 'grid' ? 'grid' : 'table-row' }}>
             <td
               colSpan={table.getVisibleLeafColumns().length}
-              style={{ display: layoutMode === 'grid' ? 'grid' : 'table-cell' }}
+              style={{
+                display: layoutMode === 'grid' ? 'grid' : 'table-cell',
+              }}
             >
-              <Typography
-                sx={{
-                  color: 'text.secondary',
-                  fontStyle: 'italic',
-                  maxWidth: `min(100vw, ${
-                    tablePaperRef.current?.clientWidth ?? 360
-                  }px)`,
-                  py: '2rem',
-                  textAlign: 'center',
-                  width: '100%',
-                }}
-              >
-                {globalFilter || columnFilters.length
-                  ? localization.noResultsFound
-                  : localization.noRecordsToDisplay}
-              </Typography>
+              {renderEmptyRowsFallback?.({ table }) ?? (
+                <Typography
+                  sx={{
+                    color: 'text.secondary',
+                    fontStyle: 'italic',
+                    maxWidth: `min(100vw, ${
+                      tablePaperRef.current?.clientWidth ?? 360
+                    }px)`,
+                    py: '2rem',
+                    textAlign: 'center',
+                    width: '100%',
+                  }}
+                >
+                  {globalFilter || columnFilters.length
+                    ? localization.noResultsFound
+                    : localization.noRecordsToDisplay}
+                </Typography>
+              )}
             </td>
           </tr>
         ) : (

package/src/body/MRT_TableBodyRow.tsx

@@ -47,7 +47,7 @@ export const MRT_TableBodyRow = ({
 
   const tableRowProps =
     muiTableBodyRowProps instanceof Function
-      ? muiTableBodyRowProps({ row, table })
+      ? muiTableBodyRowProps({ row, staticRowIndex: rowIndex, table })
       : muiTableBodyRowProps;
 
   const handleDragEnter = (_e: DragEvent) => {
@@ -136,6 +136,7 @@ export const MRT_TableBodyRow = ({
         <MRT_TableDetailPanel
           parentRowRef={rowRef}
           row={row}
+          rowIndex={rowIndex}
           table={table}
           virtualRow={virtualRow}
         />

package/src/body/MRT_TableDetailPanel.tsx

@@ -9,6 +9,7 @@ import type { MRT_Row, MRT_TableInstance } from '..';
 interface Props {
   parentRowRef: React.RefObject<HTMLTableRowElement>;
   row: MRT_Row;
+  rowIndex: number;
   table: MRT_TableInstance;
   virtualRow?: VirtualItem;
 }
@@ -16,6 +17,7 @@ interface Props {
 export const MRT_TableDetailPanel = ({
   parentRowRef,
   row,
+  rowIndex,
   table,
   virtualRow,
 }: Props) => {
@@ -33,7 +35,7 @@ export const MRT_TableDetailPanel = ({
 
   const tableRowProps =
     muiTableBodyRowProps instanceof Function
-      ? muiTableBodyRowProps({ isDetailPanel: true, row, table })
+      ? muiTableBodyRowProps({ isDetailPanel: true, row, staticRowIndex: rowIndex, table })
       : muiTableBodyRowProps;
 
   const tableCellProps =

package/src/column.utils.ts

@@ -164,29 +164,34 @@ export const getTrailingDisplayColumnIds = <
   TData extends Record<string, any> = {},
 >(
   props: MaterialReactTableProps<TData>,
-) => [
-  props.positionActionsColumn === 'last' &&
-    (props.enableRowActions ||
-      (props.enableEditing &&
-        ['row', 'modal'].includes(props.editingMode ?? ''))) &&
-    'mrt-row-actions',
-  props.positionExpandColumn === 'last' &&
-    showExpandColumn(props) &&
-    'mrt-row-expand',
-];
+) =>
+  [
+    props.positionActionsColumn === 'last' &&
+      (props.enableRowActions ||
+        (props.enableEditing &&
+          ['row', 'modal'].includes(props.editingMode ?? ''))) &&
+      'mrt-row-actions',
+    props.positionExpandColumn === 'last' &&
+      showExpandColumn(props) &&
+      'mrt-row-expand',
+  ].filter(Boolean) as MRT_DisplayColumnIds[];
 
 export const getDefaultColumnOrderIds = <
   TData extends Record<string, any> = {},
 >(
   props: MaterialReactTableProps<TData>,
-) =>
-  [
-    ...getLeadingDisplayColumnIds(props),
-    ...getAllLeafColumnDefs(props.columns).map((columnDef) =>
-      getColumnId(columnDef),
-    ),
-    ...getTrailingDisplayColumnIds(props),
-  ].filter(Boolean) as string[];
+) => {
+  const leadingDisplayCols: string[] = getLeadingDisplayColumnIds(props);
+  const trailingDisplayCols: string[] = getTrailingDisplayColumnIds(props);
+  const allLeafColumnDefs = getAllLeafColumnDefs(props.columns)
+    .map((columnDef) => getColumnId(columnDef))
+    .filter(
+      (columnId) =>
+        !leadingDisplayCols.includes(columnId) &&
+        !trailingDisplayCols.includes(columnId),
+    );
+  return [...leadingDisplayCols, ...allLeafColumnDefs, ...trailingDisplayCols];
+};
 
 export const getDefaultColumnFilterFn = <
   TData extends Record<string, any> = {},
@@ -250,72 +255,79 @@ export const getCommonCellStyles = ({
   table: MRT_TableInstance;
   tableCellProps: TableCellProps;
   theme: Theme;
-}) => ({
-  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,
-  display: table.options.layoutMode === 'grid' ? 'flex' : 'table-cell',
-  flex:
-    table.options.layoutMode === 'grid'
-      ? `var(--${header ? 'header' : 'col'}-${parseCSSVarId(
-          header?.id ?? column.id,
-        )}-size) 0 auto`
-      : undefined,
-  left:
-    column.getIsPinned() === 'left'
-      ? `${column.getStart('left')}px`
-      : undefined,
-  ml:
-    table.options.enableColumnVirtualization &&
-    column.getIsPinned() === 'left' &&
-    column.getPinnedIndex() === 0
-      ? `-${
-          column.getSize() * (table.getState().columnPinning.left?.length ?? 1)
-        }px`
-      : undefined,
-  mr:
-    table.options.enableColumnVirtualization &&
-    column.getIsPinned() === 'right' &&
-    column.getPinnedIndex() === table.getVisibleLeafColumns().length - 1
-      ? `-${
-          column.getSize() *
-          (table.getState().columnPinning.right?.length ?? 1) *
-          1.2
-        }px`
-      : undefined,
-  opacity:
-    table.getState().draggingColumn?.id === column.id ||
-    table.getState().hoveredColumn?.id === column.id
-      ? 0.5
-      : 1,
-  position:
-    column.getIsPinned() && column.columnDef.columnDefType !== 'group'
-      ? 'sticky'
-      : undefined,
-  right:
-    column.getIsPinned() === 'right'
-      ? `${getTotalRight(table, column)}px`
+}) => {
+  const widthStyles = {
+    minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
+      header?.id ?? column.id,
+    )}-size) * 1px), ${column.columnDef.minSize ?? 30}px)`,
+    width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
+      header?.id ?? column.id,
+    )}-size) * 1px)`,
+  };
+  return {
+    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,
-  transition: table.options.enableColumnVirtualization
-    ? 'none'
-    : `padding 150ms ease-in-out`,
-  ...(tableCellProps?.sx instanceof Function
-    ? tableCellProps.sx(theme)
-    : (tableCellProps?.sx as any)),
-  minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
-    header?.id ?? column.id,
-  )}-size) * 1px), ${column.columnDef.minSize ?? 30}px)`,
-  width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
-    header?.id ?? column.id,
-  )}-size) * 1px)`,
-});
+    display: table.options.layoutMode === 'grid' ? 'flex' : 'table-cell',
+    flex:
+      table.options.layoutMode === 'grid'
+        ? `var(--${header ? 'header' : 'col'}-${parseCSSVarId(
+            header?.id ?? column.id,
+          )}-size) 0 auto`
+        : undefined,
+    left:
+      column.getIsPinned() === 'left'
+        ? `${column.getStart('left')}px`
+        : undefined,
+    ml:
+      table.options.enableColumnVirtualization &&
+      column.getIsPinned() === 'left' &&
+      column.getPinnedIndex() === 0
+        ? `-${
+            column.getSize() *
+            (table.getState().columnPinning.left?.length ?? 1)
+          }px`
+        : undefined,
+    mr:
+      table.options.enableColumnVirtualization &&
+      column.getIsPinned() === 'right' &&
+      column.getPinnedIndex() === table.getVisibleLeafColumns().length - 1
+        ? `-${
+            column.getSize() *
+            (table.getState().columnPinning.right?.length ?? 1) *
+            1.2
+          }px`
+        : undefined,
+    opacity:
+      table.getState().draggingColumn?.id === column.id ||
+      table.getState().hoveredColumn?.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: table.options.enableColumnVirtualization
+      ? 'none'
+      : `padding 150ms ease-in-out`,
+    ...(!table.options.enableColumnResizing && widthStyles), //let devs pass in width styles if column resizing is disabled
+    ...(tableCellProps?.sx instanceof Function
+      ? tableCellProps.sx(theme)
+      : (tableCellProps?.sx as any)),
+    ...(table.options.enableColumnResizing && widthStyles), //don't let devs pass in width styles if column resizing is enabled
+  };
+};
 
 export const MRT_DefaultColumn = {
   filterVariant: 'text',

package/src/toolbar/MRT_ToolbarDropZone.tsx

@@ -31,6 +31,7 @@ export const MRT_ToolbarDropZone = <TData extends Record<string, any> = {}>({
       setShowToolbarDropZone(
         !!enableGrouping &&
           !!draggingColumn &&
+          draggingColumn.columnDef.enableGrouping !== false &&
           !grouping.includes(draggingColumn.id),
       );
     }