material-react-table 1.0.0-beta.4 → 1.0.0-beta.5

package/dist/index.d.ts

@@ -154,6 +154,8 @@ interface MRT_Localization {
     max: string;
     min: string;
     move: string;
+    noRecordsToDisplay: string;
+    noResultsFound: string;
     or: string;
     pinToLeft: string;
     pinToRight: string;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.5",
   "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_TableBody.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useMemo } from 'react';
 import { useVirtual } from 'react-virtual'; //stuck on v2 for now
 // import { useVirtualizer, Virtualizer } from '@tanstack/react-virtual';
-import { TableBody } from '@mui/material';
+import { Box, TableBody, TableCell, TableRow } from '@mui/material';
 import { MRT_TableBodyRow } from './MRT_TableBodyRow';
 import { rankGlobalFuzzy } from '../sortingFns';
 import type { MRT_Row, MRT_TableInstance } from '..';
@@ -19,6 +19,7 @@ export const MRT_TableBody: FC<Props> = ({ table }) => {
       enableGlobalFilterRankedResults,
       enablePagination,
       enableRowVirtualization,
+      localization,
       manualFiltering,
       manualSorting,
       muiTableBodyProps,
@@ -27,7 +28,7 @@ export const MRT_TableBody: FC<Props> = ({ table }) => {
     },
     refs: { tableContainerRef },
   } = table;
-  const { globalFilter, pagination, sorting } = getState();
+  const { columnFilters, globalFilter, pagination, sorting } = getState();
 
   const tableBodyProps =
     muiTableBodyProps instanceof Function
@@ -116,33 +117,54 @@ export const MRT_TableBody: FC<Props> = ({ table }) => {
 
   return (
     <TableBody {...tableBodyProps}>
-      {enableRowVirtualization && paddingTop > 0 && (
-        <tr>
-          <td style={{ height: `${paddingTop}px` }} />
-        </tr>
-      )}
-      {(enableRowVirtualization ? virtualRows : rows).map(
-        (rowOrVirtualRow: any, rowIndex: number) => {
-          const row = enableRowVirtualization
-            ? (rows[rowOrVirtualRow.index] as MRT_Row)
-            : (rowOrVirtualRow as MRT_Row);
-          return (
-            <MRT_TableBodyRow
-              key={row.id}
-              row={row}
-              rowIndex={
-                enableRowVirtualization ? rowOrVirtualRow.index : rowIndex
-              }
-              table={table}
-              virtualRow={enableRowVirtualization ? rowOrVirtualRow : null}
-            />
-          );
-        },
-      )}
-      {enableRowVirtualization && paddingBottom > 0 && (
-        <tr>
-          <td style={{ height: `${paddingBottom}px` }} />
-        </tr>
+      {!rows.length ? (
+        <TableRow>
+          <TableCell colSpan={table.getVisibleLeafColumns().length}>
+            <Box
+              sx={{
+                maxWidth: '100vw',
+                py: '2rem',
+                textAlign: 'center',
+                width: '100%',
+              }}
+            >
+              {globalFilter || columnFilters.length
+                ? localization.noResultsFound
+                : localization.noRecordsToDisplay}
+            </Box>
+          </TableCell>
+        </TableRow>
+      ) : (
+        <>
+          {enableRowVirtualization && paddingTop > 0 && (
+            <tr>
+              <td style={{ height: `${paddingTop}px` }} />
+            </tr>
+          )}
+          {(enableRowVirtualization ? virtualRows : rows).map(
+            (rowOrVirtualRow: any, rowIndex: number) => {
+              const row = enableRowVirtualization
+                ? (rows[rowOrVirtualRow.index] as MRT_Row)
+                : (rowOrVirtualRow as MRT_Row);
+              return (
+                <MRT_TableBodyRow
+                  key={row.id}
+                  row={row}
+                  rowIndex={
+                    enableRowVirtualization ? rowOrVirtualRow.index : rowIndex
+                  }
+                  table={table}
+                  virtualRow={enableRowVirtualization ? rowOrVirtualRow : null}
+                />
+              );
+            },
+          )}
+          {enableRowVirtualization && paddingBottom > 0 && (
+            <tr>
+              <td style={{ height: `${paddingBottom}px` }} />
+            </tr>
+          )}
+        </>
       )}
     </TableBody>
   );

package/src/localization.ts

@@ -47,6 +47,8 @@ export interface MRT_Localization {
   max: string;
   min: string;
   move: string;
+  noRecordsToDisplay: string;
+  noResultsFound: string;
   or: string;
   pinToLeft: string;
   pinToRight: string;
@@ -129,6 +131,8 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   max: 'Max',
   min: 'Min',
   move: 'Move',
+  noRecordsToDisplay: 'No records to display',
+  noResultsFound: 'No results found',
   or: 'or',
   pinToLeft: 'Pin to left',
   pinToRight: 'Pin to right',