material-react-table 0.13.3 → 0.14.2

package/dist/toolbar/MRT_TablePagination.d.ts

@@ -2,6 +2,7 @@ import { FC } from 'react';
 import { MRT_TableInstance } from '..';
 interface Props {
     instance: MRT_TableInstance;
+    position: 'top' | 'bottom';
 }
 export declare const MRT_TablePagination: FC<Props>;
 export {};

package/dist/toolbar/MRT_ToolbarTop.d.ts

@@ -11,7 +11,6 @@ export declare const commonToolbarStyles: ({ theme }: {
     overflow: string;
     p: string;
     transition: string;
-    width: string;
     zIndex: number;
 };
 interface Props {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.13.3",
+  "version": "0.14.2",
   "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/MaterialReactTable.tsx

@@ -762,7 +762,6 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     positionActionsColumn?: 'first' | 'last';
     positionGlobalFilter?: 'left' | 'right';
     positionPagination?: 'bottom' | 'top' | 'both';
-    positionToolbarActions?: 'bottom' | 'top';
     positionToolbarAlertBanner?: 'bottom' | 'top';
     renderDetailPanel?: ({
       row,
@@ -787,7 +786,12 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       row: MRT_Row<D>;
       instance: MRT_TableInstance<D>;
     }) => ReactNode;
-    renderToolbarCustomActions?: ({
+    renderToolbarBottomCustomActions?: ({
+      instance,
+    }: {
+      instance: MRT_TableInstance<D>;
+    }) => ReactNode;
+    renderToolbarTopCustomActions?: ({
       instance,
     }: {
       instance: MRT_TableInstance<D>;
@@ -857,7 +861,6 @@ export default <D extends Record<string, any> = {}>({
   positionActionsColumn = 'first',
   positionGlobalFilter = 'right',
   positionPagination = 'bottom',
-  positionToolbarActions = 'top',
   positionToolbarAlertBanner = 'top',
   rowNumberMode = 'original',
   selectAllMode = 'all',
@@ -897,7 +900,6 @@ export default <D extends Record<string, any> = {}>({
     positionActionsColumn={positionActionsColumn}
     positionGlobalFilter={positionGlobalFilter}
     positionPagination={positionPagination}
-    positionToolbarActions={positionToolbarActions}
     positionToolbarAlertBanner={positionToolbarAlertBanner}
     rowNumberMode={rowNumberMode}
     selectAllMode={selectAllMode}

package/src/body/MRT_TableBodyCell.tsx

@@ -30,6 +30,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
       muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps,
       onCellClick,
+      onRowClick,
       rowNumberMode,
       tableId,
     },
@@ -146,7 +147,10 @@ export const MRT_TableBodyCell: FC<Props> = ({
           : getIsFirstRightPinnedColumn()
           ? `-4px 0 4px -2px ${alpha(theme.palette.common.black, 0.1)}`
           : undefined,
-        cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'text',
+        cursor:
+          (isEditable && editingMode === 'cell') || onRowClick || onCellClick
+            ? 'pointer'
+            : 'text',
         left:
           column.getIsPinned() === 'left'
             ? `${column.getStart('left')}px`

package/src/head/MRT_TableHeadCell.tsx

@@ -5,7 +5,7 @@ import { MRT_TableHeadCellFilterLabel } from './MRT_TableHeadCellFilterLabel';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 import { MRT_TableHeadCellResizeHandle } from './MRT_TableHeadCellResizeHandle';
 import { MRT_TableHeadCellSortLabel } from './MRT_TableHeadCellSortLabel';
-import { MRT_ToggleColumnActionMenuButton } from '../buttons/MRT_ToggleColumnActionMenuButton';
+import { MRT_TableHeadCellColumnActionsButton } from './MRT_TableHeadCellColumnActionsButton';
 import type { MRT_Header, MRT_TableInstance } from '..';
 
 interface Props {
@@ -162,6 +162,7 @@ export const MRT_TableHeadCell: FC<Props> = ({
             justifyContent:
               columnDefType === 'group' ? 'center' : 'space-between',
             opacity: isDragging ? 0.5 : 1,
+            position: 'relative',
             width: '100%',
           }}
         >
@@ -205,7 +206,7 @@ export const MRT_TableHeadCell: FC<Props> = ({
             {(enableColumnActions || columnDef.enableColumnActions) &&
               columnDef.enableColumnActions !== false &&
               columnDefType !== 'group' && (
-                <MRT_ToggleColumnActionMenuButton
+                <MRT_TableHeadCellColumnActionsButton
                   header={header}
                   instance={instance}
                 />

package/src/{buttons/MRT_ToggleColumnActionMenuButton.tsx → head/MRT_TableHeadCellColumnActionsButton.tsx}

@@ -8,7 +8,7 @@ interface Props {
   instance: MRT_TableInstance;
 }
 
-export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({
+export const MRT_TableHeadCellColumnActionsButton: FC<Props> = ({
   header,
   instance,
 }) => {
@@ -66,7 +66,6 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({
           {...iconButtonProps}
           sx={{
             height: '2rem',
-            mr: '2px',
             mt: '-0.2rem',
             opacity: 0.5,
             transition: 'opacity 0.2s',

package/src/head/MRT_TableHeadCellFilterLabel.tsx

@@ -72,6 +72,7 @@ export const MRT_TableHeadCellFilterLabel: FC<Props> = ({
             backgroundColor: 'transparent',
             opacity: 0.8,
           },
+          width: '1.5ch',
         }}
       >
         {showFilters && !column.getFilterValue() ? (

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -31,6 +31,7 @@ export const MRT_TableHeadCellResizeHandle: FC<Props> = ({
         height: showFilters && columnDefType === 'data' ? '4rem' : '2rem',
         opacity: 0.8,
         position: 'absolute',
+        mr: '-1rem',
         right: '1px',
         touchAction: 'none',
         transition: column.getIsResizing() ? undefined : 'all 0.2s ease-in-out',

package/src/head/MRT_TableHeadCellSortLabel.tsx

@@ -32,6 +32,10 @@ export const MRT_TableHeadCellSortLabel: FC<Props> = ({ header, instance }) => {
             ? (column.getIsSorted() as 'asc' | 'desc')
             : undefined
         }
+        sx={{
+          width: '2ch',
+          transform: 'translateX(-0.5ch)',
+        }}
       />
     </Tooltip>
   );

package/src/inputs/MRT_SearchTextField.tsx

@@ -79,16 +79,14 @@ export const MRT_SearchTextField: FC<Props> = ({ instance }) => {
           startAdornment: (
             <InputAdornment position="start">
               <Tooltip arrow title={localization.changeSearchMode}>
-                <span>
-                  <IconButton
-                    aria-label={localization.changeSearchMode}
-                    onClick={handleGlobalFilterMenuOpen}
-                    size="small"
-                    sx={{ height: '1.75rem', width: '1.75rem' }}
-                  >
-                    <SearchIcon />
-                  </IconButton>
-                </span>
+                <IconButton
+                  aria-label={localization.changeSearchMode}
+                  onClick={handleGlobalFilterMenuOpen}
+                  size="small"
+                  sx={{ height: '1.75rem', width: '1.75rem' }}
+                >
+                  <SearchIcon />
+                </IconButton>
               </Tooltip>
             </InputAdornment>
           ),
@@ -107,7 +105,6 @@ export const MRT_SearchTextField: FC<Props> = ({ instance }) => {
           ),
         }}
         {...textFieldProps}
-        sx={{ justifySelf: 'end', ...textFieldProps?.sx }}
       />
       <MRT_FilterOptionMenu
         anchorEl={anchorEl}

package/src/toolbar/MRT_TablePagination.tsx

@@ -4,19 +4,21 @@ import { MRT_TableInstance } from '..';
 
 interface Props {
   instance: MRT_TableInstance;
+  position: 'top' | 'bottom';
 }
 
-export const MRT_TablePagination: FC<Props> = ({ instance }) => {
+export const MRT_TablePagination: FC<Props> = ({ instance, position }) => {
   const {
     getPrePaginationRowModel,
     getState,
     setPageIndex,
     setPageSize,
-    options: { muiTablePaginationProps },
+    options: { muiTablePaginationProps, enableToolbarInternalActions },
   } = instance;
 
   const {
     pagination: { pageSize = 10, pageIndex = 0 },
+    showGlobalFilter,
   } = getState();
 
   const tablePaginationProps =
@@ -49,6 +51,12 @@ export const MRT_TablePagination: FC<Props> = ({ instance }) => {
       {...tablePaginationProps}
       sx={{
         m: '0 0.5rem',
+        mt:
+          position === 'top' &&
+          enableToolbarInternalActions &&
+          !showGlobalFilter
+            ? '3.5rem'
+            : undefined,
         position: 'relative',
         zIndex: 2,
         ...tablePaginationProps?.sx,

package/src/toolbar/MRT_ToolbarBottom.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from 'react';
 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';
 import { MRT_LinearProgressBar } from './MRT_LinearProgressBar';
 import { commonToolbarStyles } from './MRT_ToolbarTop';
@@ -15,14 +14,12 @@ export const MRT_ToolbarBottom: FC<Props> = ({ instance }) => {
   const {
     getState,
     options: {
-      enableToolbarInternalActions,
-      tableId,
       enablePagination,
       muiTableToolbarBottomProps,
       positionPagination,
-      positionToolbarActions,
       positionToolbarAlertBanner,
-      renderToolbarCustomActions,
+      renderToolbarBottomCustomActions,
+      tableId,
     },
   } = instance;
 
@@ -38,10 +35,7 @@ export const MRT_ToolbarBottom: FC<Props> = ({ instance }) => {
   const stackAlertBanner =
     isMobile ||
     (positionToolbarAlertBanner === 'bottom' &&
-      positionToolbarActions === 'bottom') ||
-    (positionToolbarAlertBanner === 'bottom' &&
-      !!renderToolbarCustomActions &&
-      positionToolbarActions === 'bottom');
+      !!renderToolbarBottomCustomActions);
 
   return (
     <Toolbar
@@ -67,20 +61,29 @@ export const MRT_ToolbarBottom: FC<Props> = ({ instance }) => {
           display: 'flex',
           justifyContent: 'space-between',
           width: '100%',
-          position: stackAlertBanner ? 'relative' : 'absolute',
-          right: 0,
-          top: 0,
         }}
       >
-        {enableToolbarInternalActions && positionToolbarActions === 'bottom' ? (
-          <MRT_ToolbarInternalButtons instance={instance} />
+        {renderToolbarBottomCustomActions ? (
+          <Box sx={{ p: '0.5rem' }}>
+            {renderToolbarBottomCustomActions({ instance })}
+          </Box>
         ) : (
           <span />
         )}
-        {enablePagination &&
-          ['bottom', 'both'].includes(positionPagination ?? '') && (
-            <MRT_TablePagination instance={instance} />
-          )}
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'flex-end',
+            position: stackAlertBanner ? 'relative' : 'absolute',
+            right: 0,
+            top: 0,
+          }}
+        >
+          {enablePagination &&
+            ['bottom', 'both'].includes(positionPagination ?? '') && (
+              <MRT_TablePagination instance={instance} position="bottom" />
+            )}
+        </Box>
       </Box>
     </Toolbar>
   );

package/src/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -29,8 +29,8 @@ export const MRT_ToolbarInternalButtons: FC<Props> = ({ instance }) => {
   return (
     <Box
       sx={{
-        display: 'flex',
         alignItems: 'center',
+        display: 'flex',
         zIndex: 3,
       }}
     >

package/src/toolbar/MRT_ToolbarTop.tsx

@@ -15,7 +15,6 @@ export const commonToolbarStyles = ({ theme }: { theme: Theme }) => ({
   overflow: 'hidden',
   p: '0 !important',
   transition: 'all 0.2s ease-in-out',
-  width: '100%',
   zIndex: 1,
 });
 
@@ -30,13 +29,12 @@ export const MRT_ToolbarTop: FC<Props> = ({ instance }) => {
       enableGlobalFilter,
       enablePagination,
       enableToolbarInternalActions,
-      tableId,
       muiTableToolbarTopProps,
-      positionPagination,
       positionGlobalFilter,
-      positionToolbarActions,
+      positionPagination,
       positionToolbarAlertBanner,
-      renderToolbarCustomActions,
+      renderToolbarTopCustomActions,
+      tableId,
     },
   } = instance;
 
@@ -52,7 +50,7 @@ export const MRT_ToolbarTop: FC<Props> = ({ instance }) => {
   const stackAlertBanner =
     isMobile ||
     (positionToolbarAlertBanner === 'top' &&
-      (!!renderToolbarCustomActions || showGlobalFilter));
+      (!!renderToolbarTopCustomActions || showGlobalFilter));
 
   return (
     <Toolbar
@@ -77,29 +75,34 @@ export const MRT_ToolbarTop: FC<Props> = ({ instance }) => {
       <Box
         sx={{
           alignItems: 'flex-start',
+          boxSizing: 'border-box',
           display: 'flex',
           justifyContent: 'space-between',
           p: '0.5rem',
           position: stackAlertBanner ? 'relative' : 'absolute',
           right: 0,
           top: 0,
-          width: renderToolbarCustomActions ? '100%' : undefined,
+          width: '100%',
         }}
       >
         {enableGlobalFilter && positionGlobalFilter === 'left' && (
           <MRT_SearchTextField instance={instance} />
         )}
-        {renderToolbarCustomActions?.({ instance }) ?? <span />}
-        {enableToolbarInternalActions && positionToolbarActions === 'top' && (
+
+        {renderToolbarTopCustomActions?.({ instance }) ?? <span />}
+        {enableToolbarInternalActions ? (
           <MRT_ToolbarInternalButtons instance={instance} />
+        ) : (
+          enableGlobalFilter &&
+          positionGlobalFilter === 'right' && (
+            <MRT_SearchTextField instance={instance} />
+          )
         )}
       </Box>
-      <div>
-        {enablePagination &&
-          ['top', 'both'].includes(positionPagination ?? '') && (
-            <MRT_TablePagination instance={instance} />
-          )}
-      </div>
+      {enablePagination &&
+        ['top', 'both'].includes(positionPagination ?? '') && (
+          <MRT_TablePagination instance={instance} position="top" />
+        )}
       <MRT_LinearProgressBar alignTo="bottom" instance={instance} />
     </Toolbar>
   );