material-react-table 0.26.0 → 0.26.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.26.0",
+  "version": "0.26.1",
   "license": "MIT",
   "name": "material-react-table",
   "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.",

package/src/body/MRT_TableBodyCell.tsx

@@ -224,7 +224,9 @@ export const MRT_TableBodyCell: FC<Props> = ({
                 : `${darken(theme.palette.background.default, 0.07)} !important`
               : undefined,
         },
-        ...(tableCellProps?.sx as any),
+        ...(tableCellProps?.sx instanceof Function
+          ? tableCellProps.sx(theme)
+          : (tableCellProps?.sx as any)),
         ...draggingBorders,
         maxWidth: `min(${column.getSize()}px, fit-content)`,
         minWidth: `max(${column.getSize()}px, ${columnDef.minSize ?? 30}px)`,

package/src/body/MRT_TableBodyRow.tsx

@@ -70,7 +70,9 @@ export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, table }) => {
                   : `${darken(theme.palette.background.default, 0.05)}`
                 : undefined,
           },
-          ...(tableRowProps?.sx as any),
+          ...(tableRowProps?.sx instanceof Function
+            ? tableRowProps.sx(theme)
+            : (tableRowProps?.sx as any)),
           ...draggingBorders,
         })}
       >

package/src/body/MRT_TableDetailPanel.tsx

@@ -32,14 +32,16 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row, table }) => {
       <TableCell
         colSpan={getVisibleLeafColumns().length}
         {...tableCellProps}
-        sx={{
+        sx={(theme) => ({
           borderBottom: !row.getIsExpanded() ? 'none' : undefined,
           pb: row.getIsExpanded() ? '1rem' : 0,
           pt: row.getIsExpanded() ? '1rem' : 0,
           transition: 'all 0.2s ease-in-out',
           width: `${table.getTotalSize()}px`,
-          ...tableCellProps?.sx,
-        }}
+          ...(tableCellProps?.sx instanceof Function
+            ? tableCellProps.sx(theme)
+            : (tableCellProps?.sx as any)),
+        })}
       >
         {renderDetailPanel && (
           <Collapse in={row.getIsExpanded()}>

package/src/buttons/MRT_CopyButton.tsx

@@ -55,7 +55,7 @@ export const MRT_CopyButton: FC<Props> = ({ cell, children, table }) => {
         type="button"
         variant="text"
         {...buttonProps}
-        sx={{
+        sx={(theme) => ({
           backgroundColor: 'transparent',
           border: 'none',
           color: 'inherit',
@@ -67,8 +67,10 @@ export const MRT_CopyButton: FC<Props> = ({ cell, children, table }) => {
           minWidth: 'unset',
           textAlign: 'inherit',
           textTransform: 'inherit',
-          ...buttonProps?.sx,
-        }}
+          ...(buttonProps?.sx instanceof Function
+            ? buttonProps.sx(theme)
+            : (buttonProps?.sx as any)),
+        })}
       >
         {children}
       </Button>

package/src/buttons/MRT_ExpandButton.tsx

@@ -41,11 +41,13 @@ export const MRT_ExpandButton: FC<Props> = ({ row, table }) => {
           disabled={!row.getCanExpand() && !renderDetailPanel}
           onClick={handleToggleExpand}
           {...iconButtonProps}
-          sx={{
+          sx={(theme) => ({
             height: density === 'compact' ? '1.75rem' : '2.25rem',
             width: density === 'compact' ? '1.75rem' : '2.25rem',
-            ...iconButtonProps?.sx,
-          }}
+            ...(iconButtonProps?.sx instanceof Function
+              ? iconButtonProps.sx(theme)
+              : (iconButtonProps?.sx as any)),
+          })}
         >
           <ExpandMoreIcon
             style={{

package/src/footer/MRT_TableFooterCell.tsx

@@ -56,7 +56,9 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, table }) => {
         transition: `all ${enableColumnResizing ? '10ms' : '0.2s'} ease-in-out`,
         width: column.getSize(),
         verticalAlign: 'text-top',
-        ...(tableCellProps?.sx as any),
+        ...(tableCellProps?.sx instanceof Function
+          ? tableCellProps.sx(theme)
+          : (tableCellProps?.sx as any)),
       })}
     >
       <>

package/src/head/MRT_TableHeadCell.tsx

@@ -162,7 +162,9 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
             : column.getIsPinned() && columnDefType !== 'group'
             ? 2
             : 1,
-        ...(tableCellProps?.sx as any),
+        ...(tableCellProps?.sx instanceof Function
+          ? tableCellProps.sx(theme)
+          : (tableCellProps?.sx as any)),
         ...draggingBorders,
         maxWidth: `min(${column.getSize()}px, fit-content)`,
         minWidth: `max(${column.getSize()}px, ${columnDef.minSize ?? 30}px)`,

package/src/head/MRT_TableHeadCellColumnActionsButton.tsx

@@ -62,7 +62,7 @@ export const MRT_TableHeadCellColumnActionsButton: FC<Props> = ({
           onClick={handleClick}
           size="small"
           {...iconButtonProps}
-          sx={{
+          sx={(theme) => ({
             height: '2rem',
             mt: '-0.2rem',
             opacity: 0.5,
@@ -71,8 +71,10 @@ export const MRT_TableHeadCellColumnActionsButton: FC<Props> = ({
             '&:hover': {
               opacity: 1,
             },
-            ...iconButtonProps.sx,
-          }}
+            ...(iconButtonProps?.sx instanceof Function
+              ? iconButtonProps.sx(theme)
+              : (iconButtonProps?.sx as any)),
+          })}
         >
           <MoreVertIcon />
         </IconButton>

package/src/inputs/MRT_FilterTextField.tsx

@@ -73,7 +73,10 @@ export const MRT_FilterTextField: FC<Props> = ({
 
   const handleChangeDebounced = useCallback(
     debounce((event: ChangeEvent<HTMLInputElement>) => {
-      let value = textFieldProps.type === 'date' ? new Date(event.target.value) : event.target.value
+      let value =
+        textFieldProps.type === 'date'
+          ? new Date(event.target.value)
+          : event.target.value;
       if (inputIndex !== undefined) {
         column.setFilterValue((old: [string, string | Date]) => {
           const newFilterValues = old ?? ['', ''];
@@ -256,7 +259,7 @@ export const MRT_FilterTextField: FC<Props> = ({
           ),
         }}
         {...textFieldProps}
-        sx={{
+        sx={(theme) => ({
           m: '-0.25rem',
           p: 0,
           minWidth: !filterChipLabel ? '8rem' : 'auto',
@@ -264,8 +267,10 @@ export const MRT_FilterTextField: FC<Props> = ({
           '&	.MuiSelect-icon': {
             mr: '1.5rem',
           },
-          ...textFieldProps?.sx,
-        }}
+          ...(textFieldProps?.sx instanceof Function
+            ? textFieldProps.sx(theme)
+            : (textFieldProps?.sx as any)),
+        })}
       >
         {isSelectFilter && (
           <MenuItem divider disabled={!filterValue} value="">

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -58,12 +58,14 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, table }) => {
         }
         size={density === 'compact' ? 'small' : 'medium'}
         {...checkboxProps}
-        sx={{
+        sx={(theme) => ({
           height: density === 'compact' ? '1.5rem' : '2rem',
           width: density === 'compact' ? '1.5rem' : '2rem',
           m: '-1re.m',
-          ...checkboxProps?.sx,
-        }}
+          ...(checkboxProps?.sx instanceof Function
+            ? checkboxProps.sx(theme)
+            : (checkboxProps?.sx as any)),
+        })}
       />
     </Tooltip>
   );

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -46,7 +46,7 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
           },
           {
             option: 'contains',
-            symbol: '[]',
+            symbol: '*',
             label: localization.filterContains,
             divider: false,
           },

package/src/table/MRT_Table.tsx

@@ -35,11 +35,13 @@ export const MRT_Table: FC<Props> = ({ tableContainerRef, table }) => {
         enableStickyHeader || enableRowVirtualization || isFullScreen
       }
       {...tableProps}
-      sx={{
+      sx={(theme) => ({
         tableLayout:
           enableColumnResizing || enableRowVirtualization ? 'fixed' : 'auto',
-        ...tableProps?.sx,
-      }}
+        ...(tableProps?.sx instanceof Function
+          ? tableProps.sx(theme)
+          : (tableProps?.sx as any)),
+      })}
     >
       {enableTableHead && <MRT_TableHead table={table} />}
       <MRT_TableBody tableContainerRef={tableContainerRef} table={table} />

package/src/table/MRT_TableContainer.tsx

@@ -51,15 +51,17 @@ export const MRT_TableContainer: FC<Props> = ({ table }) => {
     <TableContainer
       ref={tableContainerRef}
       {...tableContainerProps}
-      sx={{
+      sx={(theme) => ({
         maxWidth: '100%',
         maxHeight:
           enableStickyHeader || enableRowVirtualization
             ? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 9999px)`
             : undefined,
         overflow: 'auto',
-        ...tableContainerProps?.sx,
-      }}
+        ...(tableContainerProps?.sx instanceof Function
+          ? tableContainerProps.sx(theme)
+          : (tableContainerProps?.sx as any)),
+      })}
       style={{
         maxHeight: isFullScreen
           ? `calc(100vh - ${totalToolbarHeight}px)`

package/src/toolbar/MRT_TablePagination.tsx

@@ -52,7 +52,7 @@ export const MRT_TablePagination: FC<Props> = ({ table, position }) => {
       showFirstButton={showFirstLastPageButtons}
       showLastButton={showFirstLastPageButtons}
       {...tablePaginationProps}
-      sx={{
+      sx={(theme) => ({
         m: '0 0.5rem',
         mt:
           position === 'top' &&
@@ -62,8 +62,10 @@ export const MRT_TablePagination: FC<Props> = ({ table, position }) => {
             : undefined,
         position: 'relative',
         zIndex: 2,
-        ...tablePaginationProps?.sx,
-      }}
+        ...(tablePaginationProps?.sx instanceof Function
+          ? tablePaginationProps.sx(theme)
+          : (tablePaginationProps?.sx as any)),
+      })}
     />
   );
 };

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -63,7 +63,7 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({
         color="info"
         icon={false}
         {...alertProps}
-        sx={{
+        sx={(theme) => ({
           borderRadius: 0,
           fontSize: '1rem',
           left: 0,
@@ -73,8 +73,10 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({
           top: 0,
           width: '100%',
           zIndex: 2,
-          ...alertProps?.sx,
-        }}
+          ...(alertProps?.sx instanceof Function
+            ? alertProps.sx(theme)
+            : (alertProps?.sx as any)),
+        })}
       >
         {alertProps?.title && <AlertTitle>{alertProps.title}</AlertTitle>}
         <Box sx={{ p: '0.5rem 1rem' }}>

package/src/toolbar/MRT_ToolbarBottom.tsx

@@ -49,7 +49,9 @@ export const MRT_ToolbarBottom: FC<Props> = ({ table }) => {
           left: 0,
           position: isFullScreen ? 'fixed' : 'relative',
           right: 0,
-          ...toolbarProps?.sx,
+          ...(toolbarProps?.sx instanceof Function
+            ? toolbarProps.sx(theme)
+            : (toolbarProps?.sx as any)),
         } as any)
       }
     >

package/src/toolbar/MRT_ToolbarTop.tsx

@@ -62,7 +62,9 @@ export const MRT_ToolbarTop: FC<Props> = ({ table }) => {
           position: isFullScreen ? 'sticky' : undefined,
           top: isFullScreen ? '0' : undefined,
           ...commonToolbarStyles({ theme }),
-          ...toolbarProps?.sx,
+          ...(toolbarProps?.sx instanceof Function
+            ? toolbarProps.sx(theme)
+            : (toolbarProps?.sx as any)),
         } as any)
       }
     >