release v1.10.0 - render fallback feature

CONTRIBUTING.md

@@ -28,10 +28,16 @@ pnpm i
 
 ### 3. Run the project(s)
 
+#### Run the Library for Local Development
+
+```bash
+pnpm lib:dev
+```
+
 #### Run the Storybook for Local Development
 
 ```bash
-pnpm storybook
+pnpm storybook:dev
 ```
 
 The Storybook site will open on `port 6006` by default.
@@ -44,9 +50,9 @@ pnpm docs:dev
 
 The Docs site will open on `port 3000` by default.
 
-> Note: If you are contributing a new locale and are trying to test it in the docs site, you will need to run `pnpm lib:build` and then `pnpm docs:dev` before it can be imported.
+> Note: If you are contributing a new locale and are trying to test it in the docs site, you will need to run `pnpm lib:build-locales` and then `pnpm docs:dev` before it can be imported.
 
-#### Build the Library
+#### Fully Build the Library
 
 ```bash
 pnpm lib:build

apps/material-react-table-docs/components/prop-tables/rootProps.ts

@@ -1743,6 +1743,16 @@ export const rootProps: PropRow[] = [
     source: '',
     type: '({ internalFilterOptions, onSelectFilterMode, table }) => ReactNode[]',
   },
+  {
+    propName: 'renderEmptyRowsFallback',
+    defaultValue: '',
+    description: '',
+    link: '',
+    linkText: '',
+    required: false,
+    source: '',
+    type: '({ table }) => ReactNode',
+  },
   {
     propName: 'renderRowActionMenuItems',
     defaultValue: '',

apps/material-react-table-docs/pages/changelog.mdx

@@ -12,6 +12,14 @@ import Head from 'next/head';
 
 ### Version 1 (Latest)
 
+#### v1.10.0 (2023-04-16)
+
+- New highly requested `renderEmptyRowsFallback` prop for rendering custom JSX when there are no rows to display
+- Added `staticRowIndex` param to `muiTableBodyRowProps` to make styling striped virtual rows easier
+- Now allowing table head, body, and footer cell widths to be specified in `sx` prop when `enableColumnRisizing` is disabled. BUT YOU SHOULD STILL USE THE `size` COLUMN OPTION INSTEAD!
+- Fixed issue with "Reset Order" button not always being accurate when position props === "last"
+- Fixed issue with draggable columns with grouping disabled still being allowed to be dragged to dropzone.
+
 #### v1.9.4 (2023-04-15)
 
 - Fixed row actions and row menu actions async memo issues

apps/material-react-table-storybook/stories/styling/CustomTableBody.stories.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Meta } from '@storybook/react';
 import MaterialReactTable, { type MRT_ColumnDef } from 'material-react-table';
 import { faker } from '@faker-js/faker';
+import { Typography } from '@mui/material';
 
 const meta: Meta = {
   title: 'Styling/Custom Table Body Examples',
@@ -54,3 +55,13 @@ export const CustomTableBody = () => (
     }}
   />
 );
+
+export const CustomEmptyRowsJSX = () => (
+  <MaterialReactTable
+    columns={columns}
+    data={[]}
+    renderEmptyRowsFallback={() => (
+      <Typography>OMG THERE ARE NO ROWS 😳</Typography>
+    )}
+  />
+);

packages/material-react-table/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 -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"
   },

packages/material-react-table/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>;

packages/material-react-table/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>
         ) : (

packages/material-react-table/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}
         />

packages/material-react-table/src/body/MRT_TableDetailPanel.tsx

@@ -9,13 +9,15 @@ import type { MRT_Row, MRT_TableInstance } from '..';
 interface Props {
   parentRowRef: React.RefObject<HTMLTableRowElement>;
   row: MRT_Row;
+  rowIndex: number;
   table: MRT_TableInstance;
   virtualRow?: VirtualItem;
 }
 
 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 =