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

package/dist/toolbar/MRT_ToolbarAlertBanner.d.ts

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 import { MRT_TableInstance } from '..';
 interface Props {
+    stackAlertBanner?: boolean;
     tableInstance: MRT_TableInstance;
 }
 export declare const MRT_ToolbarAlertBanner: FC<Props>;

package/dist/toolbar/MRT_ToolbarTop.d.ts

@@ -7,6 +7,8 @@ export declare const commonToolbarStyles: ({ theme }: {
     backgroundColor: string;
     backgroundImage: string;
     display: string;
+    minHeight: string;
+    overflow: string;
     p: string;
     transition: string;
     width: string;

package/package.json

@@ -1,13 +1,14 @@
 {
-  "version": "0.8.0-alpha.2",
+  "version": "0.8.0",
   "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.",
+  "description": "A fully featured Material UI implementation of Tanstack react-table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",
   "author": "Kevin Vandy",
   "keywords": [
     "react-table",
     "material-ui",
-    "material-table"
+    "material-table", 
+    "tanstack table"
   ],
   "repository": {
     "type": "git",
@@ -94,6 +95,6 @@
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "^8.0.0-alpha.83",
-    "@tanstack/react-table": "^8.0.0-beta.2"
+    "@tanstack/react-table": "^8.0.0-alpha.89"
   }
 }

package/src/MaterialReactTable.tsx

@@ -80,6 +80,7 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
   >,
   | 'getAllColumns'
   | 'getAllLeafColumns'
+  | 'getColumn'
   | 'getExpandedRowModel'
   | 'getPaginationRowModel'
   | 'getPrePaginationRowModel'
@@ -90,6 +91,7 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
 > & {
   getAllColumns: () => MRT_Column<D>[];
   getAllLeafColumns: () => MRT_Column<D>[];
+  getColumn: (columnId: string) => MRT_Column<D>;
   getExpandedRowModel: () => MRT_RowModel<D>;
   getPaginationRowModel: () => MRT_RowModel<D>;
   getPrePaginationRowModel: () => MRT_RowModel<D>;
@@ -757,6 +759,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
 export default <D extends Record<string, any> = {}>({
   autoResetExpanded = false,
   columnResizeMode = 'onEnd',
+  defaultColumn = { minSize: 50, maxSize: 1000, size: 150 },
   editingMode = 'row',
   enableColumnActions = true,
   enableColumnFilters = true,
@@ -790,6 +793,7 @@ export default <D extends Record<string, any> = {}>({
   <MRT_TableRoot
     autoResetExpanded={autoResetExpanded}
     columnResizeMode={columnResizeMode}
+    defaultColumn={defaultColumn}
     editingMode={editingMode}
     enableColumnActions={enableColumnActions}
     enableColumnFilters={enableColumnFilters}

package/src/body/MRT_TableBodyCell.tsx

@@ -132,8 +132,6 @@ export const MRT_TableBodyCell: FC<Props> = ({
           column.getIsPinned() === 'left'
             ? `${column.getStart('left')}px`
             : undefined,
-        maxWidth: `min(${column.getSize()}px, fit-content)`,
-        minWidth: `max${column.getSize()}px, ${column.minSize}px`,
         p: isDensePadding
           ? column.columnDefType === 'display'
             ? '0 0.5rem'
@@ -150,7 +148,6 @@ export const MRT_TableBodyCell: FC<Props> = ({
           column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined,
         transition: 'all 0.2s ease-in-out',
         whiteSpace: isDensePadding ? 'nowrap' : 'normal',
-        width: column.getSize(),
         zIndex: column.getIsPinned() ? 1 : undefined,
         '&:hover': {
           backgroundColor: enableHover
@@ -161,6 +158,11 @@ export const MRT_TableBodyCell: FC<Props> = ({
         },
         ...(tableCellProps?.sx as any),
       })}
+      style={{
+        maxWidth: `min(${column.getSize()}px, fit-content)`,
+        minWidth: `max(${column.getSize()}px, ${column.minSize ?? 30}px)`,
+        width: column.getSize(),
+      }}
     >
       <>
         {isLoading || showSkeletons ? (
@@ -192,7 +194,8 @@ export const MRT_TableBodyCell: FC<Props> = ({
           </>
         ) : (
           <>
-            {cell.column.columnDef?.Cell?.({ cell, tableInstance }) ?? cell.renderCell()}
+            {cell.column.columnDef?.Cell?.({ cell, tableInstance }) ??
+              cell.renderCell()}
             {row.getIsGrouped() && <> ({row.subRows?.length ?? ''})</>}
           </>
         )}

package/src/buttons/MRT_CopyButton.tsx

@@ -52,6 +52,8 @@ export const MRT_CopyButton: FC<Props> = ({
         aria-label={localization.clickToCopy}
         onClick={() => handleCopy(cell.getValue())}
         size="small"
+        type="button"
+        variant="text"
         {...buttonProps}
         sx={{
           backgroundColor: 'transparent',
@@ -67,7 +69,6 @@ export const MRT_CopyButton: FC<Props> = ({
           textTransform: 'inherit',
           ...buttonProps?.sx,
         }}
-        variant="text"
       >
         {children}
       </Button>

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -10,10 +10,12 @@ export const MRT_ExpandAllButton: FC<Props> = ({ tableInstance }) => {
   const {
     getIsAllRowsExpanded,
     getIsSomeRowsExpanded,
+    getCanSomeRowsExpand,
     getState,
     options: {
       icons: { DoubleArrowDownIcon },
       localization,
+      renderDetailPanel,
     },
     toggleAllRowsExpanded,
   } = tableInstance;
@@ -29,6 +31,7 @@ export const MRT_ExpandAllButton: FC<Props> = ({ tableInstance }) => {
     >
       <IconButton
         aria-label={localization.expandAll}
+        disabled={!getCanSomeRowsExpand() && !renderDetailPanel}
         onClick={() => toggleAllRowsExpanded(!getIsAllRowsExpanded())}
         sx={{
           height: isDensePadding ? '1.75rem' : '2.25rem',

package/src/footer/MRT_TableFooterCell.tsx

@@ -61,6 +61,7 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, tableInstance }) => {
               footer,
               tableInstance,
             }) ??
+            column.columnDef.footer ??
             footer.renderFooter() ??
             null}
       </>

package/src/head/MRT_TableHeadCell.tsx

@@ -141,8 +141,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
           column.getIsPinned() === 'left'
             ? `${column.getStart('left')}px`
             : undefined,
-        maxWidth: `min(${column.getSize()}px, fit-content)`,
-        minWidth: `max(${column.getSize()}px, ${column.minSize}px)`,
+
         overflow: 'visible',
         p: isDensePadding
           ? column.columnDefType === 'display'
@@ -166,7 +165,6 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
           column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined,
         transition: `all ${enableColumnResizing ? 0 : '0.2s'} ease-in-out`,
         verticalAlign: 'text-top',
-        width: header.getSize(),
         zIndex: column.getIsResizing()
           ? 3
           : column.getIsPinned() && column.columnDefType !== 'group'
@@ -174,6 +172,11 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
           : 1,
         ...(tableCellProps?.sx as any),
       })}
+      style={{
+        maxWidth: `min(${column.getSize()}px, fit-content)`,
+        minWidth: `max(${column.getSize()}px, ${column.minSize ?? 30}px)`,
+        width: header.getSize(),
+      }}
     >
       {header.isPlaceholder ? null : column.columnDefType === 'display' ? (
         headerElement
@@ -273,7 +276,9 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
                 position: 'absolute',
                 right: '1px',
                 touchAction: 'none',
-                transition: 'all 0.2s ease-in-out',
+                transition: column.getIsResizing()
+                  ? undefined
+                  : 'all 0.2s ease-in-out',
                 userSelect: 'none',
                 zIndex: 2000,
                 '&:active': {
@@ -281,10 +286,8 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, tableInstance }) => {
                   opacity: 1,
                 },
               })}
-              {...{
-                onMouseDown: header.getResizeHandler,
-                onTouchStart: header.getResizeHandler,
-              }}
+              onMouseDown={header.getResizeHandler()}
+              onTouchStart={header.getResizeHandler()}
               style={{
                 transform: column.getIsResizing()
                   ? `translateX(${getState().columnSizingInfo.deltaOffset}px)`

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -1,29 +1,25 @@
 import React, { FC, Fragment } from 'react';
-import { Alert, Box, Chip, Collapse, useMediaQuery } from '@mui/material';
+import { Alert, Box, Chip, Collapse } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
 interface Props {
+  stackAlertBanner?: boolean;
   tableInstance: MRT_TableInstance;
 }
 
-export const MRT_ToolbarAlertBanner: FC<Props> = ({ tableInstance }) => {
+export const MRT_ToolbarAlertBanner: FC<Props> = ({
+  stackAlertBanner,
+  tableInstance,
+}) => {
   const {
     getPrePaginationRowModel,
     getSelectedRowModel,
     getState,
-    options: {
-      localization,
-      muiTableToolbarAlertBannerProps,
-      positionToolbarActions,
-      positionToolbarAlertBanner,
-      renderToolbarCustomActions,
-    },
+    options: { localization, muiTableToolbarAlertBannerProps },
   } = tableInstance;
 
   const { grouping } = getState();
 
-  const isMobile = useMediaQuery('(max-width:720px)');
-
   const alertProps =
     muiTableToolbarAlertBannerProps instanceof Function
       ? muiTableToolbarAlertBannerProps({ tableInstance })
@@ -51,11 +47,7 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({ tableInstance }) => {
             {index > 0 ? localization.thenBy : ''}
             <Chip
               color="secondary"
-              label={
-                tableInstance
-                  .getAllColumns()
-                  .find((column) => column.id === columnId)?.header
-              }
+              label={tableInstance.getColumn(columnId).columnDef.header}
               onDelete={() =>
                 tableInstance.getColumn(columnId).toggleGrouping()
               }
@@ -65,17 +57,10 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({ tableInstance }) => {
       </span>
     ) : null;
 
-  const displayAbsolute = !(
-    isMobile ||
-    (positionToolbarAlertBanner === 'bottom' &&
-      positionToolbarActions === 'bottom') ||
-    (positionToolbarAlertBanner === 'top' && !!renderToolbarCustomActions)
-  );
-
   return (
     <Collapse
       in={!!selectMessage || !!groupedByMessage}
-      timeout={displayAbsolute ? 0 : 200}
+      timeout={stackAlertBanner ? 200 : 0}
     >
       <Alert
         color="info"
@@ -85,9 +70,8 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({ tableInstance }) => {
           fontSize: '1rem',
           left: 0,
           p: 0,
-          position: displayAbsolute ? 'absolute' : 'relative',
+          position: 'relative',
           right: 0,
-          minHeight: '3.5rem',
           top: 0,
           width: '100%',
           zIndex: 2,
@@ -97,7 +81,7 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({ tableInstance }) => {
       >
         <Box sx={{ p: '0.5rem 1rem' }}>
           {selectMessage}
-          <br />
+          {selectMessage && groupedByMessage && <br />}
           {groupedByMessage}
         </Box>
       </Alert>

package/src/toolbar/MRT_ToolbarBottom.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { alpha, Box, Toolbar } from '@mui/material';
+import { alpha, Box, Toolbar, useMediaQuery } from '@mui/material';
 import { MRT_TablePagination } from './MRT_TablePagination';
 import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
 import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
@@ -22,16 +22,27 @@ export const MRT_ToolbarBottom: FC<Props> = ({ tableInstance }) => {
       positionPagination,
       positionToolbarActions,
       positionToolbarAlertBanner,
+      renderToolbarCustomActions,
     },
   } = tableInstance;
 
   const { isFullScreen } = getState();
 
+  const isMobile = useMediaQuery('(max-width:720px)');
+
   const toolbarProps =
     muiTableToolbarBottomProps instanceof Function
       ? muiTableToolbarBottomProps({ tableInstance })
       : muiTableToolbarBottomProps;
 
+  const stackAlertBanner =
+    isMobile ||
+    (positionToolbarAlertBanner === 'bottom' &&
+      positionToolbarActions === 'bottom') ||
+    (positionToolbarAlertBanner === 'bottom' &&
+      !!renderToolbarCustomActions &&
+      positionToolbarActions === 'bottom');
+
   return (
     <Toolbar
       id={`mrt-${idPrefix}-toolbar-bottom`}
@@ -48,17 +59,24 @@ export const MRT_ToolbarBottom: FC<Props> = ({ tableInstance }) => {
       }
     >
       <MRT_LinearProgressBar tableInstance={tableInstance} />
+      {positionToolbarAlertBanner === 'bottom' && (
+        <MRT_ToolbarAlertBanner tableInstance={tableInstance} />
+      )}
       <Box
-        sx={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          width: '100%',
+          position: stackAlertBanner ? 'relative' : 'absolute',
+          right: 0,
+          top: 0,
+        }}
       >
         {enableToolbarInternalActions && positionToolbarActions === 'bottom' ? (
           <MRT_ToolbarInternalButtons tableInstance={tableInstance} />
         ) : (
           <span />
         )}
-        {positionToolbarAlertBanner === 'bottom' && (
-          <MRT_ToolbarAlertBanner tableInstance={tableInstance} />
-        )}
         {enablePagination &&
           ['bottom', 'both'].includes(positionPagination ?? '') && (
             <MRT_TablePagination tableInstance={tableInstance} />

package/src/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -6,6 +6,7 @@ import { MRT_ToggleDensePaddingButton } from '../buttons/MRT_ToggleDensePaddingB
 import { MRT_ToggleFiltersButton } from '../buttons/MRT_ToggleFiltersButton';
 import { MRT_ToggleGlobalFilterButton } from '../buttons/MRT_ToggleGlobalFilterButton';
 import { MRT_TableInstance } from '..';
+import { MRT_SearchTextField } from '../inputs/MRT_SearchTextField';
 
 interface Props {
   tableInstance: MRT_TableInstance;
@@ -24,42 +25,42 @@ export const MRT_ToolbarInternalButtons: FC<Props> = ({ tableInstance }) => {
     },
   } = tableInstance;
 
-  if (renderToolbarInternalActions) {
-    return (
-      <>
-        {renderToolbarInternalActions({
-          MRT_FullScreenToggleButton,
-          MRT_ShowHideColumnsButton,
-          MRT_ToggleDensePaddingButton,
-          MRT_ToggleFiltersButton,
-          MRT_ToggleGlobalFilterButton,
-          tableInstance,
-        })}
-      </>
-    );
-  }
-
   return (
     <Box
       sx={{
         display: 'flex',
         alignItems: 'center',
+        zIndex: 3,
       }}
     >
-      {enableFilters && enableGlobalFilter && (
-        <MRT_ToggleGlobalFilterButton tableInstance={tableInstance} />
-      )}
-      {enableFilters && enableColumnFilters && (
-        <MRT_ToggleFiltersButton tableInstance={tableInstance} />
-      )}
-      {enableHiding && (
-        <MRT_ShowHideColumnsButton tableInstance={tableInstance} />
-      )}
-      {enableDensePaddingToggle && (
-        <MRT_ToggleDensePaddingButton tableInstance={tableInstance} />
-      )}
-      {enableFullScreenToggle && (
-        <MRT_FullScreenToggleButton tableInstance={tableInstance} />
+      {renderToolbarInternalActions?.({
+        MRT_FullScreenToggleButton,
+        MRT_ShowHideColumnsButton,
+        MRT_ToggleDensePaddingButton,
+        MRT_ToggleFiltersButton,
+        MRT_ToggleGlobalFilterButton,
+        tableInstance,
+      }) ?? (
+        <>
+          {enableGlobalFilter && (
+            <MRT_SearchTextField tableInstance={tableInstance} />
+          )}
+          {enableFilters && enableGlobalFilter && (
+            <MRT_ToggleGlobalFilterButton tableInstance={tableInstance} />
+          )}
+          {enableFilters && enableColumnFilters && (
+            <MRT_ToggleFiltersButton tableInstance={tableInstance} />
+          )}
+          {enableHiding && (
+            <MRT_ShowHideColumnsButton tableInstance={tableInstance} />
+          )}
+          {enableDensePaddingToggle && (
+            <MRT_ToggleDensePaddingButton tableInstance={tableInstance} />
+          )}
+          {enableFullScreenToggle && (
+            <MRT_FullScreenToggleButton tableInstance={tableInstance} />
+          )}
+        </>
       )}
     </Box>
   );

package/src/toolbar/MRT_ToolbarTop.tsx

@@ -1,6 +1,5 @@
 import React, { FC } from 'react';
-import { Box, lighten, Theme, Toolbar } from '@mui/material';
-import { MRT_SearchTextField } from '../inputs/MRT_SearchTextField';
+import { Box, lighten, Theme, Toolbar, useMediaQuery } from '@mui/material';
 import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
 import { MRT_TablePagination } from './MRT_TablePagination';
 import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
@@ -11,6 +10,8 @@ export const commonToolbarStyles = ({ theme }: { theme: Theme }) => ({
   backgroundColor: lighten(theme.palette.background.default, 0.04),
   backgroundImage: 'none',
   display: 'grid',
+  minHeight: '3.5rem',
+  overflow: 'hidden',
   p: '0 !important',
   transition: 'all 0.2s ease-in-out',
   width: '100%',
@@ -25,7 +26,6 @@ export const MRT_ToolbarTop: FC<Props> = ({ tableInstance }) => {
   const {
     getState,
     options: {
-      enableGlobalFilter,
       enablePagination,
       enableToolbarInternalActions,
       idPrefix,
@@ -39,11 +39,17 @@ export const MRT_ToolbarTop: FC<Props> = ({ tableInstance }) => {
 
   const { isFullScreen } = getState();
 
+  const isMobile = useMediaQuery('(max-width:720px)');
+
   const toolbarProps =
     muiTableToolbarTopProps instanceof Function
       ? muiTableToolbarTopProps({ tableInstance })
       : muiTableToolbarTopProps;
 
+  const stackAlertBanner =
+    isMobile ||
+    (positionToolbarAlertBanner === 'top' && !!renderToolbarCustomActions);
+
   return (
     <Toolbar
       id={`mrt-${idPrefix}-toolbar-top`}
@@ -59,31 +65,26 @@ export const MRT_ToolbarTop: FC<Props> = ({ tableInstance }) => {
       }
     >
       {positionToolbarAlertBanner === 'top' && (
-        <MRT_ToolbarAlertBanner tableInstance={tableInstance} />
+        <MRT_ToolbarAlertBanner
+          stackAlertBanner={stackAlertBanner}
+          tableInstance={tableInstance}
+        />
       )}
       <Box
         sx={{
-          p: '0.5rem',
           display: 'flex',
           justifyContent: 'space-between',
+          p: '0.5rem',
+          position: stackAlertBanner ? 'relative' : 'absolute',
+          right: 0,
+          top: 0,
+          width: 'calc(100% - 1rem)',
         }}
       >
         {renderToolbarCustomActions?.({ tableInstance }) ?? <span />}
-        <Box
-          sx={{
-            display: 'flex',
-            gap: '0.5rem',
-            position: 'relative',
-            zIndex: 3,
-          }}
-        >
-          {enableGlobalFilter && (
-            <MRT_SearchTextField tableInstance={tableInstance} />
-          )}
-          {enableToolbarInternalActions && positionToolbarActions === 'top' && (
-            <MRT_ToolbarInternalButtons tableInstance={tableInstance} />
-          )}
-        </Box>
+        {enableToolbarInternalActions && positionToolbarActions === 'top' && (
+          <MRT_ToolbarInternalButtons tableInstance={tableInstance} />
+        )}
       </Box>
       <div>
         {enablePagination &&