make utility for instance of, lower bundle size

apps/material-react-table-docs/components/mdx/HomeCards.tsx

@@ -51,8 +51,8 @@ export const HomeCards = () => {
               />
             </Box>
             <Typography>
-              Combine TanStack Table&apos;s Extensive API With Material UI&apos;s
-              Awesome Pre-Built Components!
+              Combine TanStack Table&apos;s Extensive API With Material
+              UI&apos;s Awesome Pre-Built Components!
             </Typography>
           </Card>
           <Card sx={{ p: '1rem' }}>
@@ -137,8 +137,8 @@ export const HomeCards = () => {
             Powerful Features
           </Typography>
           <Typography>
-            Material React Table has most of the features you would expect from a
-            modern table library including{' '}
+            Material React Table has most of the features you would expect from
+            a modern table library including{' '}
             <AnchorLink href="/docs/guides/pagination">Pagination</AnchorLink>,{' '}
             <AnchorLink href="/docs/guides/sorting">Sorting</AnchorLink>,{' '}
             <AnchorLink href="/docs/guides/column-filtering">
@@ -163,8 +163,8 @@ export const HomeCards = () => {
             , etc.
           </Typography>
           <Typography>
-            However, Material React Table also has advanced features that you may
-            not find in other table libraries such as{' '}
+            However, Material React Table also has advanced features that you
+            may not find in other table libraries such as{' '}
             <AnchorLink href="/docs/guides/virtualization">
               Virtualization
             </AnchorLink>

apps/material-react-table-docs/examples/editing-crud/sandbox/src/TS.tsx

@@ -303,10 +303,12 @@ function useUpdateUser() {
     },
     //client side optimistic update
     onMutate: (newUserInfo: User) => {
-      queryClient.setQueryData(['users'], (prevUsers: any) =>
-        prevUsers?.map((prevUser: User) =>
-          prevUser.id === newUserInfo.id ? newUserInfo : prevUser,
-        ),
+      queryClient.setQueryData(
+        ['users'],
+        (prevUsers: any) =>
+          prevUsers?.map((prevUser: User) =>
+            prevUser.id === newUserInfo.id ? newUserInfo : prevUser,
+          ),
       );
     },
     // onSettled: () => queryClient.invalidateQueries({ queryKey: ['users'] }), //refetch users after mutation, disabled for demo
@@ -324,8 +326,10 @@ function useDeleteUser() {
     },
     //client side optimistic update
     onMutate: (userId: string) => {
-      queryClient.setQueryData(['users'], (prevUsers: any) =>
-        prevUsers?.filter((user: User) => user.id !== userId),
+      queryClient.setQueryData(
+        ['users'],
+        (prevUsers: any) =>
+          prevUsers?.filter((user: User) => user.id !== userId),
       );
     },
     // onSettled: () => queryClient.invalidateQueries({ queryKey: ['users'] }), //refetch users after mutation, disabled for demo

apps/material-react-table-docs/examples/export-to-csv/sandbox/src/Legacy.tsx

@@ -69,49 +69,49 @@ const Example = () => {
       positionToolbarAlertBanner="bottom"
       renderTopToolbarCustomActions={({ table }) => (
         <Box
-        sx={{
-          display: 'flex',
-          gap: '16px',
-          padding: '8px',
-          flexWrap: 'wrap',
-        }}
-      >
-        <Button
-          //export all data that is currently in the table (ignore pagination, sorting, filtering, etc.)
-          onClick={handleExportData}
-          startIcon={<FileDownloadIcon />}
+          sx={{
+            display: 'flex',
+            gap: '16px',
+            padding: '8px',
+            flexWrap: 'wrap',
+          }}
         >
-          Export All Data
-        </Button>
-        <Button
-          disabled={table.getPrePaginationRowModel().rows.length === 0}
-          //export all rows, including from the next page, (still respects filtering and sorting)
-          onClick={() =>
-            handleExportRows(table.getPrePaginationRowModel().rows)
-          }
-          startIcon={<FileDownloadIcon />}
-        >
-          Export All Rows
-        </Button>
-        <Button
-          disabled={table.getRowModel().rows.length === 0}
-          //export all rows as seen on the screen (respects pagination, sorting, filtering, etc.)
-          onClick={() => handleExportRows(table.getRowModel().rows)}
-          startIcon={<FileDownloadIcon />}
-        >
-          Export Page Rows
-        </Button>
-        <Button
-          disabled={
-            !table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()
-          }
-          //only export selected rows
-          onClick={() => handleExportRows(table.getSelectedRowModel().rows)}
-          startIcon={<FileDownloadIcon />}
-        >
-          Export Selected Rows
-        </Button>
-      </Box>
+          <Button
+            //export all data that is currently in the table (ignore pagination, sorting, filtering, etc.)
+            onClick={handleExportData}
+            startIcon={<FileDownloadIcon />}
+          >
+            Export All Data
+          </Button>
+          <Button
+            disabled={table.getPrePaginationRowModel().rows.length === 0}
+            //export all rows, including from the next page, (still respects filtering and sorting)
+            onClick={() =>
+              handleExportRows(table.getPrePaginationRowModel().rows)
+            }
+            startIcon={<FileDownloadIcon />}
+          >
+            Export All Rows
+          </Button>
+          <Button
+            disabled={table.getRowModel().rows.length === 0}
+            //export all rows as seen on the screen (respects pagination, sorting, filtering, etc.)
+            onClick={() => handleExportRows(table.getRowModel().rows)}
+            startIcon={<FileDownloadIcon />}
+          >
+            Export Page Rows
+          </Button>
+          <Button
+            disabled={
+              !table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()
+            }
+            //only export selected rows
+            onClick={() => handleExportRows(table.getSelectedRowModel().rows)}
+            startIcon={<FileDownloadIcon />}
+          >
+            Export Selected Rows
+          </Button>
+        </Box>
       )}
     />
   );

apps/material-react-table-docs/examples/export-to-pdf/sandbox/src/JS.js

@@ -6,7 +6,7 @@ import { Box, Button } from '@mui/material';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
 import { jsPDF } from 'jspdf'; //or use your library of choice here
 import autoTable from 'jspdf-autotable';
-import { data} from './makeData';
+import { data } from './makeData';
 
 const columns = [
   {

apps/material-react-table-docs/package.json

@@ -22,27 +22,27 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
-    "@mui/icons-material": "^5.14.9",
-    "@mui/material": "^5.14.10",
+    "@mui/icons-material": "^5.14.11",
+    "@mui/material": "^5.14.11",
     "@mui/x-date-pickers": "^6.15.0",
     "@next/mdx": "^13.5.3",
     "@tanstack/react-query": "^4.35.3",
-    "@types/mdx": "^2.0.7",
+    "@types/mdx": "^2.0.8",
     "dayjs": "^1.11.10",
     "export-to-csv": "^1.0.0",
     "jspdf": "^2.5.1",
     "jspdf-autotable": "^3.6.0",
     "material-react-table": "workspace:*",
     "next": "13.5.3",
     "next-sitemap": "^4.2.3",
-    "prism-react-renderer": "^2.0.6",
+    "prism-react-renderer": "^2.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@types/node": "^20.7.0",
-    "@types/react": "^18.2.22",
-    "@types/react-dom": "^18.2.7",
+    "@types/node": "^20.7.1",
+    "@types/react": "^18.2.23",
+    "@types/react-dom": "^18.2.8",
     "@typescript-eslint/eslint-plugin": "^6.7.3",
     "@typescript-eslint/parser": "^6.7.3",
     "eslint": "8.50.0",

apps/material-react-table-docs/pages/api/data.ts

@@ -28,11 +28,12 @@ export default function handler(req: NextApiRequest, res: NextApiResponse) {
 
   if (globalFilter) {
     dbData = dbData.filter((row) =>
-      Object.keys(row).some((columnId) =>
-        row[columnId]
-          ?.toString()
-          ?.toLowerCase()
-          ?.includes?.((globalFilter as string).toLowerCase()),
+      Object.keys(row).some(
+        (columnId) =>
+          row[columnId]
+            ?.toString()
+            ?.toLowerCase()
+            ?.includes?.((globalFilter as string).toLowerCase()),
       ),
     );
   }

packages/material-react-table/package.json

@@ -65,8 +65,8 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@faker-js/faker": "^8.1.0",
-    "@mui/icons-material": "^5.14.9",
-    "@mui/material": "^5.14.10",
+    "@mui/icons-material": "^5.14.11",
+    "@mui/material": "^5.14.11",
     "@mui/x-date-pickers": "^6.15.0",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-node-resolve": "^15.2.1",
@@ -81,9 +81,9 @@
     "@storybook/react": "^7.4.5",
     "@storybook/react-vite": "^7.4.5",
     "@storybook/testing-library": "^0.2.1",
-    "@types/node": "^20.7.0",
-    "@types/react": "^18.2.22",
-    "@types/react-dom": "^18.2.7",
+    "@types/node": "^20.7.1",
+    "@types/react": "^18.2.23",
+    "@types/react-dom": "^18.2.8",
     "@typescript-eslint/eslint-plugin": "^6.7.3",
     "@typescript-eslint/parser": "^6.7.3",
     "@vitejs/plugin-react": "^4.1.0",
@@ -116,7 +116,7 @@
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.8.4",
     "@tanstack/react-table": "8.10.3",
-    "@tanstack/react-virtual": "3.0.0-beta.60",
+    "@tanstack/react-virtual": "3.0.0-beta.61",
     "highlight-words": "1.2.2"
   }
 }

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

@@ -9,6 +9,7 @@ import Typography from '@mui/material/Typography';
 import { Memo_MRT_TableBodyRow, MRT_TableBodyRow } from './MRT_TableBodyRow';
 import { rankGlobalFuzzy } from '../sortingFns';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
 
 interface Props<TData extends Record<string, any>> {
   columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
@@ -58,15 +59,10 @@ export const MRT_TableBody = <TData extends Record<string, any>>({
     sorting,
   } = getState();
 
-  const tableBodyProps =
-    muiTableBodyProps instanceof Function
-      ? muiTableBodyProps({ table })
-      : muiTableBodyProps;
-
-  const vProps =
-    rowVirtualizerOptions instanceof Function
-      ? rowVirtualizerOptions({ table })
-      : rowVirtualizerOptions;
+  const tableBodyProps = parseFromValuesOrFunc(muiTableBodyProps, { table });
+  const rowVirtualizerProps = parseFromValuesOrFunc(rowVirtualizerOptions, {
+    table,
+  });
 
   const shouldRankResults = useMemo(
     () =>
@@ -123,7 +119,7 @@ export const MRT_TableBody = <TData extends Record<string, any>>({
             ? (element) => element?.getBoundingClientRect().height
             : undefined,
         overscan: 4,
-        ...vProps,
+        ...rowVirtualizerProps,
       })
     : undefined;
 
@@ -145,9 +141,7 @@ export const MRT_TableBody = <TData extends Record<string, any>>({
           : 'inherit',
         minHeight: !rows.length ? '100px' : undefined,
         position: 'relative',
-        ...(tableBodyProps?.sx instanceof Function
-          ? tableBodyProps?.sx(theme)
-          : (tableBodyProps?.sx as any)),
+        ...(parseFromValuesOrFunc(tableBodyProps?.sx, theme) as any),
       })}
     >
       {tableBodyProps?.children ??

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

@@ -18,6 +18,7 @@ import {
   getCommonCellStyles,
   getIsFirstColumn,
   getIsLastColumn,
+  parseFromValuesOrFunc,
 } from '../column.utils';
 import { type VirtualItem } from '@tanstack/react-virtual';
 import { type MRT_Cell, type MRT_TableInstance } from '../types';
@@ -77,25 +78,27 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
   const { columnDef } = column;
   const { columnDefType } = columnDef;
 
-  const mTableCellBodyProps =
-    muiTableBodyCellProps instanceof Function
-      ? muiTableBodyCellProps({ cell, column, row, table })
-      : muiTableBodyCellProps;
-
-  const mcTableCellBodyProps =
-    columnDef.muiTableBodyCellProps instanceof Function
-      ? columnDef.muiTableBodyCellProps({ cell, column, row, table })
-      : columnDef.muiTableBodyCellProps;
-
   const tableCellProps = {
-    ...mTableCellBodyProps,
-    ...mcTableCellBodyProps,
+    ...parseFromValuesOrFunc(muiTableBodyCellProps, {
+      cell,
+      column,
+      row,
+      table,
+    }),
+    ...parseFromValuesOrFunc(columnDef.muiTableBodyCellProps, {
+      cell,
+      column,
+      row,
+      table,
+    }),
   };
 
-  const skeletonProps =
-    muiSkeletonProps instanceof Function
-      ? muiSkeletonProps({ cell, column, row, table })
-      : muiSkeletonProps;
+  const skeletonProps = parseFromValuesOrFunc(muiSkeletonProps, {
+    cell,
+    column,
+    row,
+    table,
+  });
 
   const [skeletonWidth, setSkeletonWidth] = useState(100);
   useEffect(() => {
@@ -148,10 +151,8 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
   }, [draggingColumn, draggingRow, hoveredColumn, hoveredRow, rowIndex]);
 
   const isEditable =
-    (enableEditing instanceof Function ? enableEditing(row) : enableEditing) &&
-    (columnDef.enableEditing instanceof Function
-      ? columnDef.enableEditing(row)
-      : columnDef.enableEditing) !== false;
+    parseFromValuesOrFunc(enableEditing, row) &&
+    parseFromValuesOrFunc(columnDef.enableEditing, row) !== false;
 
   const isEditing =
     isEditable &&

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

@@ -4,6 +4,7 @@ import { type Theme, alpha, darken, lighten } from '@mui/material/styles';
 import { Memo_MRT_TableBodyCell, MRT_TableBodyCell } from './MRT_TableBodyCell';
 import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
 import { type VirtualItem, type Virtualizer } from '@tanstack/react-virtual';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_Cell, type MRT_Row, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -45,10 +46,11 @@ export const MRT_TableBodyRow = <TData extends Record<string, any>>({
   const { draggingColumn, draggingRow, editingCell, editingRow, hoveredRow } =
     getState();
 
-  const tableRowProps =
-    muiTableBodyRowProps instanceof Function
-      ? muiTableBodyRowProps({ row, staticRowIndex: rowIndex, table })
-      : muiTableBodyRowProps;
+  const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
+    row,
+    staticRowIndex: rowIndex,
+    table,
+  });
 
   const handleDragEnter = (_e: DragEvent) => {
     if (enableRowOrdering && draggingRow) {
@@ -91,9 +93,7 @@ export const MRT_TableBodyRow = <TData extends Record<string, any>>({
                   : `${darken(theme.palette.background.default, 0.05)}`
                 : undefined,
           },
-          ...(tableRowProps?.sx instanceof Function
-            ? tableRowProps.sx(theme)
-            : (tableRowProps?.sx as any)),
+          ...(parseFromValuesOrFunc(tableRowProps?.sx, theme) as any),
         })}
         style={{
           transform: virtualRow