material-react-table 0.8.0-alpha.1 → 0.8.0-alpha.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.8.0-alpha.1",
+  "version": "0.8.0-alpha.2",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI implementation of react-table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",
@@ -58,18 +58,15 @@
     "@babel/core": "^7.18.2",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@etchteam/storybook-addon-status": "^4.2.1",
-    "@faker-js/faker": "^7.1.0",
+    "@faker-js/faker": "^6.3.1",
     "@mui/icons-material": "^5.8.0",
     "@mui/material": "^5.8.1",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-a11y": "^6.5.5",
     "@storybook/addon-actions": "^6.5.5",
-    "@storybook/addon-console": "^1.2.3",
     "@storybook/addon-essentials": "^6.5.5",
     "@storybook/addon-info": "^5.3.21",
     "@storybook/addon-links": "^6.5.5",
-    "@storybook/addon-storysource": "^6.5.5",
     "@storybook/addons": "^6.5.5",
     "@storybook/react": "^6.5.5",
     "@types/react": "^18.0.9",
@@ -79,11 +76,10 @@
     "eslint-plugin-react-hooks": "^4.5.0",
     "husky": "^8.0.1",
     "prettier": "^2.6.2",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-is": "^18.1.0",
     "size-limit": "^7.0.8",
-    "storybook-addon-paddings": "^4.3.0",
     "storybook-dark-mode": "^1.1.0",
     "tsdx": "^0.14.1",
     "tslib": "^2.4.0",
@@ -98,6 +94,6 @@
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "^8.0.0-alpha.83",
-    "@tanstack/react-table": "^8.0.0-alpha.87"
+    "@tanstack/react-table": "^8.0.0-beta.2"
   }
 }

package/src/MaterialReactTable.tsx

@@ -280,6 +280,9 @@ export type MRT_Column<D extends Record<string, any> = {}> = Omit<
 > &
   MRT_ColumnDef<D> & {
     columns?: MRT_Column<D>[];
+    columnDef: MRT_ColumnDef<D>;
+    header: string;
+    footer: string;
   };
 
 export type MRT_Header<D extends Record<string, any> = {}> = Omit<

package/src/body/MRT_TableBodyCell.tsx

@@ -171,7 +171,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
             {...muiTableBodyCellSkeletonProps}
           />
         ) : column.columnDefType === 'display' ? (
-          column.Cell?.({ cell, tableInstance })
+          column.columnDef.Cell?.({ cell, tableInstance })
         ) : cell.getIsPlaceholder() ||
           (row.getIsGrouped() &&
             column.id !==
@@ -184,7 +184,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
           <>
             <MRT_CopyButton cell={cell} tableInstance={tableInstance}>
               <>
-                {cell.column?.Cell?.({ cell, tableInstance }) ??
+                {cell.column.columnDef?.Cell?.({ cell, tableInstance }) ??
                   cell.renderCell()}
               </>
             </MRT_CopyButton>
@@ -192,8 +192,8 @@ export const MRT_TableBodyCell: FC<Props> = ({
           </>
         ) : (
           <>
-            {cell.column?.Cell?.({ cell, tableInstance }) ?? cell.renderCell()}
-            {row.getIsGrouped() && <> ({row.subRows?.length})</>}
+            {cell.column.columnDef?.Cell?.({ cell, tableInstance }) ?? cell.renderCell()}
+            {row.getIsGrouped() && <> ({row.subRows?.length ?? ''})</>}
           </>
         )}
       </>

package/src/buttons/MRT_CopyButton.tsx

@@ -4,7 +4,7 @@ import { MRT_Cell, MRT_TableInstance } from '..';
 
 interface Props {
   cell: MRT_Cell;
-  children: ReactNode
+  children: ReactNode;
   tableInstance: MRT_TableInstance;
 }
 

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { IconButton } from '@mui/material';
+import { IconButton, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
 interface Props {
@@ -18,27 +18,32 @@ export const MRT_ExpandAllButton: FC<Props> = ({ tableInstance }) => {
     toggleAllRowsExpanded,
   } = tableInstance;
 
-  const { isDensePadding, isLoading } = getState();
+  const { isDensePadding } = getState();
 
   return (
-    <IconButton
-      aria-label={localization.expandAll}
-      disabled={isLoading}
+    <Tooltip
+      arrow
+      enterDelay={1000}
+      enterNextDelay={1000}
       title={localization.expandAll}
-      onClick={() => toggleAllRowsExpanded(!getIsAllRowsExpanded())}
-      sx={{
-        height: isDensePadding ? '1.75rem' : '2.25rem',
-        width: isDensePadding ? '1.75rem' : '2.25rem',
-      }}
     >
-      <DoubleArrowDownIcon
-        style={{
-          transform: `rotate(${
-            getIsAllRowsExpanded() ? -180 : getIsSomeRowsExpanded() ? -90 : 0
-          }deg)`,
-          transition: 'transform 0.2s',
+      <IconButton
+        aria-label={localization.expandAll}
+        onClick={() => toggleAllRowsExpanded(!getIsAllRowsExpanded())}
+        sx={{
+          height: isDensePadding ? '1.75rem' : '2.25rem',
+          width: isDensePadding ? '1.75rem' : '2.25rem',
         }}
-      />
-    </IconButton>
+      >
+        <DoubleArrowDownIcon
+          style={{
+            transform: `rotate(${
+              getIsAllRowsExpanded() ? -180 : getIsSomeRowsExpanded() ? -90 : 0
+            }deg)`,
+            transition: 'transform 0.2s',
+          }}
+        />
+      </IconButton>
+    </Tooltip>
   );
 };

package/src/buttons/MRT_ExpandButton.tsx

@@ -1,5 +1,5 @@
 import React, { FC, MouseEvent } from 'react';
-import { IconButton } from '@mui/material';
+import { IconButton, Tooltip } from '@mui/material';
 import type { MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
@@ -26,28 +26,34 @@ export const MRT_ExpandButton: FC<Props> = ({ row, tableInstance }) => {
   };
 
   return (
-    <IconButton
-      aria-label={localization.expand}
-      disabled={!row.getCanExpand() && !renderDetailPanel}
+    <Tooltip
+      arrow
+      enterDelay={1000}
+      enterNextDelay={1000}
       title={localization.expand}
-      onClick={handleToggleExpand}
-      sx={{
-        height: isDensePadding ? '1.75rem' : '2.25rem',
-        width: isDensePadding ? '1.75rem' : '2.25rem',
-      }}
     >
-      <ExpandMoreIcon
-        style={{
-          transform: `rotate(${
-            !row.getCanExpand() && !renderDetailPanel
-              ? -90
-              : row.getIsExpanded()
-              ? -180
-              : 0
-          }deg)`,
-          transition: 'transform 0.2s',
+      <IconButton
+        aria-label={localization.expand}
+        disabled={!row.getCanExpand() && !renderDetailPanel}
+        onClick={handleToggleExpand}
+        sx={{
+          height: isDensePadding ? '1.75rem' : '2.25rem',
+          width: isDensePadding ? '1.75rem' : '2.25rem',
         }}
-      />
-    </IconButton>
+      >
+        <ExpandMoreIcon
+          style={{
+            transform: `rotate(${
+              !row.getCanExpand() && !renderDetailPanel
+                ? -90
+                : row.getIsExpanded()
+                ? -180
+                : 0
+            }deg)`,
+            transition: 'transform 0.2s',
+          }}
+        />
+      </IconButton>
+    </Tooltip>
   );
 };

package/src/footer/MRT_TableFooterCell.tsx

@@ -54,14 +54,16 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, tableInstance }) => {
         ...(tableCellProps?.sx as any),
       })}
     >
-      {footer.isPlaceholder
-        ? null
-        : column.Footer?.({
-            footer,
-            tableInstance,
-          }) ??
-          column.footer ??
-          null}
+      <>
+        {footer.isPlaceholder
+          ? null
+          : column.columnDef.Footer?.({
+              footer,
+              tableInstance,
+            }) ??
+            footer.renderFooter() ??
+            null}
+      </>
     </TableCell>
   );
 };

package/src/footer/MRT_TableFooterRow.tsx

@@ -20,8 +20,9 @@ export const MRT_TableFooterRow: FC<Props> = ({
   if (
     !footerGroup.headers?.some(
       (h) =>
-        (typeof h.column.footer === 'string' && !!h.column.footer) ||
-        h.column.Footer,
+        (typeof h.column.columnDef.footer === 'string' &&
+          !!h.column.columnDef.footer) ||
+        h.column.columnDef.Footer,
     )
   )
     return null;

package/src/head/MRT_TableHeadCell.tsx

@@ -1,4 +1,4 @@
-import React, { FC, MouseEvent } from 'react';
+import React, { FC, MouseEvent, ReactNode } from 'react';
 import {
   Box,
   Collapse,
@@ -57,15 +57,21 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
 
   const sortTooltip = !!column.getIsSorted()
     ? column.getIsSorted() === 'desc'
-      ? localization.sortedByColumnDesc.replace('{column}', column.header)
-      : localization.sortedByColumnAsc.replace('{column}', column.header)
+      ? localization.sortedByColumnDesc.replace(
+          '{column}',
+          column.columnDef.header,
+        )
+      : localization.sortedByColumnAsc.replace(
+          '{column}',
+          column.columnDef.header,
+        )
     : localization.unsorted;
 
   const filterFn = getState()?.currentFilterFns?.[header.id];
 
   const filterTooltip = !!column.getFilterValue()
     ? localization.filteringByColumn
-        .replace('{column}', String(column.header))
+        .replace('{column}', String(column.columnDef.header))
         .replace(
           '{filterType}',
           filterFn instanceof Function
@@ -88,11 +94,10 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
         .replace('" "', '')
     : localization.showHideFilters;
 
-  const headerElement =
-    column?.Header?.({
-      header,
-      tableInstance,
-    }) ?? column.header;
+  const headerElement = (column.columnDef?.Header?.({
+    header,
+    tableInstance,
+  }) ?? header.renderHeader()) as ReactNode;
 
   const getIsLastLeftPinnedColumn = () => {
     return (
@@ -192,7 +197,10 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
                   : undefined,
               display: 'flex',
               flexWrap: 'nowrap',
-              whiteSpace: column.header.length < 24 ? 'nowrap' : 'normal',
+              whiteSpace:
+                (column.columnDef.header?.length ?? 0) < 24
+                  ? 'nowrap'
+                  : 'normal',
             }}
           >
             {headerElement}

package/src/inputs/MRT_EditCellTextField.tsx

@@ -73,7 +73,7 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
       onBlur={handleBlur}
       onChange={handleChange}
       onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
-      placeholder={column.header}
+      placeholder={column.columnDef.header}
       value={value}
       variant="standard"
       {...textFieldProps}

package/src/inputs/MRT_FilterTextField.tsx

@@ -130,7 +130,10 @@ export const MRT_FilterTextField: FC<Props> = ({
       : '';
   const filterPlaceholder =
     inputIndex === undefined
-      ? localization.filterByColumn?.replace('{column}', String(column.header))
+      ? localization.filterByColumn?.replace(
+          '{column}',
+          String(column.columnDef.header),
+        )
       : inputIndex === 0
       ? localization.min
       : inputIndex === 1

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -25,7 +25,7 @@ export const MRT_SelectCheckbox: FC<Props> = ({
     },
   } = tableInstance;
 
-  const { isDensePadding, isLoading } = getState();
+  const { isDensePadding } = getState();
 
   const handleSelectChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (selectAll) {
@@ -70,7 +70,6 @@ export const MRT_SelectCheckbox: FC<Props> = ({
             ? tableInstance.getIsAllRowsSelected()
             : row?.getIsSelected()
         }
-        disabled={isLoading}
         indeterminate={
           selectAll
             ? tableInstance.getIsSomeRowsSelected()

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -178,7 +178,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
               </ListItemIcon>
               {localization.sortByColumnAsc?.replace(
                 '{column}',
-                String(column.header),
+                String(column.columnDef.header),
               )}
             </Box>
           </MenuItem>,
@@ -195,7 +195,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
               </ListItemIcon>
               {localization.sortByColumnDesc?.replace(
                 '{column}',
-                String(column.header),
+                String(column.columnDef.header),
               )}
             </Box>
           </MenuItem>,
@@ -227,7 +227,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
               </ListItemIcon>
               {localization.filterByColumn?.replace(
                 '{column}',
-                String(column.header),
+                String(column.columnDef.header),
               )}
             </Box>
             {!column.filterSelectOptions && (
@@ -264,7 +264,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
               </ListItemIcon>
               {localization[
                 column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn'
-              ]?.replace('{column}', String(column.header))}
+              ]?.replace('{column}', String(column.columnDef.header))}
             </Box>
           </MenuItem>,
         ]}
@@ -339,7 +339,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             </ListItemIcon>
             {localization.hideColumn?.replace(
               '{column}',
-              String(column.header),
+              String(column.columnDef.header),
             )}
           </Box>
         </MenuItem>,
@@ -358,7 +358,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             </ListItemIcon>
             {localization.showAllColumns?.replace(
               '{column}',
-              String(column.header),
+              String(column.columnDef.header),
             )}
           </Box>
           <IconButton

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -63,7 +63,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
           checked={switchChecked}
           control={<Switch />}
           disabled={(isSubMenu && switchChecked) || !column.getCanHide()}
-          label={column.header}
+          label={column.columnDef.header}
           onChange={() => handleToggleColumnHidden(column)}
         />
       </MenuItem>

package/src/table/MRT_TableRoot.tsx

@@ -227,22 +227,14 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     //@ts-ignore
     ...useTableInstance(table, {
       filterFns: defaultFilterFNs,
-      //@ts-ignore
       getCoreRowModel: getCoreRowModel(),
-      //@ts-ignore
       getExpandedRowModel: getExpandedRowModel(),
-      //@ts-ignore
       getFacetedRowModel: getFacetedRowModel(),
-      //@ts-ignore
       getFilteredRowModel: getFilteredRowModel(),
-      //@ts-ignore
       getGroupedRowModel: getGroupedRowModel(),
-      //@ts-ignore
       getPaginationRowModel: getPaginationRowModel(),
-      //@ts-ignore
       getSortedRowModel: getSortedRowModel(),
-      //@ts-ignore
-      getSubRows: (row) => row?.subRows,
+      getSubRows: (row) => (row as MRT_Row)?.subRows,
       //@ts-ignore
       globalFilterFn: currentGlobalFilterFn,
       onPaginationChange: (updater: any) =>