material-react-table 0.3.4 → 0.4.2

package/src/buttons/MRT_ExpandButton.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import { IconButton, styled } from '@mui/material';
 import { Row } from 'react-table';
 import MuiExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
 
 const TableCell = styled(MRT_TableButtonCell, {
@@ -24,7 +24,7 @@ interface Props {
 }
 
 export const MRT_ExpandButton: FC<Props> = ({ row }) => {
-  const { localization, densePadding, renderDetailPanel } = useMaterialReactTable();
+  const { localization, densePadding, renderDetailPanel } = useMRT();
 
   return (
     <TableCell size="small" densePadding={densePadding} depth={row.depth}>
@@ -36,7 +36,13 @@ export const MRT_ExpandButton: FC<Props> = ({ row }) => {
       >
         <ExpandMoreIcon
           fontSize={row.canExpand || renderDetailPanel ? 'medium' : 'small'}
-          rotation={!row.canExpand && !renderDetailPanel ? -90 : row.isExpanded ? -180 : 0}
+          rotation={
+            !row.canExpand && !renderDetailPanel
+              ? -90
+              : row.isExpanded
+              ? -180
+              : 0
+          }
         />
       </IconButton>
     </TableCell>

package/src/buttons/MRT_FullScreenToggleButton.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from 'react';
+import { IconButton, Tooltip } from '@mui/material';
+import { useMRT } from '../useMRT';
+import FilterListIcon from '@mui/icons-material/Fullscreen';
+import FilterListOffIcon from '@mui/icons-material/FullscreenExit';
+
+type Props = {};
+
+export const MRT_FullScreenToggleButton: FC<Props> = () => {
+  const { localization, setFullScreen, fullScreen } = useMRT();
+
+  return (
+    <Tooltip arrow title={localization?.toggleFullScreenButtonTitle ?? ''}>
+      <IconButton
+        aria-label={localization?.toggleFilterButtonTitle}
+        onClick={() => setFullScreen(!fullScreen)}
+        size="small"
+      >
+        {fullScreen ? <FilterListOffIcon /> : <FilterListIcon />}
+      </IconButton>
+    </Tooltip>
+  );
+};

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -1,13 +1,26 @@
 import React, { FC, MouseEvent, useState } from 'react';
-import { IconButton, Menu, Tooltip } from '@mui/material';
+import {
+  Button,
+  IconButton,
+  Menu,
+  Tooltip,
+  styled,
+  Divider,
+} from '@mui/material';
 import ViewColumnIcon from '@mui/icons-material/ViewColumn';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
 
+const MenuButtons = styled('div')({
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: '0 0.5rem 0.5rem 0.5rem',
+});
+
 interface Props {}
 
 export const MRT_ShowHideColumnsButton: FC<Props> = () => {
-  const { tableInstance, localization } = useMaterialReactTable();
+  const { tableInstance, localization } = useMRT();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
@@ -26,9 +39,34 @@ export const MRT_ShowHideColumnsButton: FC<Props> = () => {
           <ViewColumnIcon />
         </IconButton>
       </Tooltip>
-      <Menu anchorEl={anchorEl} open={!!anchorEl} onClose={() => setAnchorEl(null)}>
+      <Menu
+        anchorEl={anchorEl}
+        open={!!anchorEl}
+        onClose={() => setAnchorEl(null)}
+      >
+        <MenuButtons>
+          <Button
+            disabled={
+              !tableInstance.getToggleHideAllColumnsProps().checked &&
+              !tableInstance.getToggleHideAllColumnsProps().indeterminate
+            }
+            onClick={() => tableInstance.toggleHideAllColumns(true)}
+          >
+            {localization?.columnShowHideMenuHideAll}
+          </Button>
+          <Button
+            disabled={tableInstance.getToggleHideAllColumnsProps().checked}
+            onClick={() => tableInstance.toggleHideAllColumns(false)}
+          >
+            {localization?.columnShowHideMenuShowAll}
+          </Button>
+        </MenuButtons>
+        <Divider />
         {tableInstance.columns.map((column, index) => (
-          <MRT_ShowHideColumnsMenu key={`${index}-${column.id}`} column={column} />
+          <MRT_ShowHideColumnsMenu
+            key={`${index}-${column.id}`}
+            column={column}
+          />
         ))}
       </Menu>
     </>

package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx

@@ -1,7 +1,7 @@
 import React, { FC, MouseEvent, useState } from 'react';
 import { IconButton as MuiIconButton, styled } from '@mui/material';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 import { MRT_ColumnActionMenu } from '../menus/MRT_ColumnActionMenu';
 import { HeaderGroup } from 'react-table';
 
@@ -21,7 +21,7 @@ interface Props {
 }
 
 export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({ column }) => {
-  const { localization } = useMaterialReactTable();
+  const { localization } = useMRT();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
@@ -41,7 +41,11 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({ column }) => {
       >
         <MoreVertIcon />
       </IconButton>
-      <MRT_ColumnActionMenu anchorEl={anchorEl} column={column} setAnchorEl={setAnchorEl} />
+      <MRT_ColumnActionMenu
+        anchorEl={anchorEl}
+        column={column}
+        setAnchorEl={setAnchorEl}
+      />
     </>
   );
 };

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -1,13 +1,13 @@
 import React, { FC } from 'react';
 import { IconButton, Tooltip } from '@mui/material';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 import FilterListIcon from '@mui/icons-material/FilterList';
 import FilterListOffIcon from '@mui/icons-material/FilterListOff';
 
 type Props = {};
 
 export const MRT_ToggleFiltersButton: FC<Props> = () => {
-  const { localization, setShowFilters, showFilters } = useMaterialReactTable();
+  const { localization, setShowFilters, showFilters } = useMRT();
 
   return (
     <Tooltip arrow title={localization?.toggleFilterButtonTitle ?? ''}>

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -2,7 +2,7 @@ import React, { FC, MouseEvent, useState } from 'react';
 import { IconButton as MuiIconButton, styled, Tooltip } from '@mui/material';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import EditIcon from '@mui/icons-material/Edit';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 import { Row } from 'react-table';
 import { MRT_RowActionMenu } from '../menus/MRT_RowActionMenu';
 import { MRT_EditActionButtons } from './MRT_EditActionButtons';
@@ -33,7 +33,7 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
     setCurrentEditingRow,
     renderRowActions,
     tableInstance,
-  } = useMaterialReactTable();
+  } = useMRT();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
@@ -55,7 +55,11 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
       ) : row.id === currentEditingRow?.id ? (
         <MRT_EditActionButtons row={row} />
       ) : !renderRowActionMenuItems && enableRowEditing ? (
-        <Tooltip placement="right" arrow title={localization?.rowActionMenuItemEdit ?? ''}>
+        <Tooltip
+          placement="right"
+          arrow
+          title={localization?.rowActionMenuItemEdit ?? ''}
+        >
           <IconButton onClick={handleEdit}>
             <EditIcon />
           </IconButton>

package/src/buttons/MRT_ToggleSearchButton.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { IconButton, Tooltip } from '@mui/material';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 import SearchIcon from '@mui/icons-material/Search';
 import SearchOffIcon from '@mui/icons-material/SearchOff';
 
@@ -8,13 +8,17 @@ type Props = {};
 
 export const MRT_ToggleSearchButton: FC<Props> = () => {
   const { localization, setShowSearch, showSearch, muiSearchTextFieldProps } =
-    useMaterialReactTable();
+    useMRT();
 
   const handleToggleSearch = () => {
     setShowSearch(!showSearch);
     setTimeout(
       () =>
-        document.getElementById(muiSearchTextFieldProps?.id ?? `global-search-text-field`)?.focus(),
+        document
+          .getElementById(
+            muiSearchTextFieldProps?.id ?? `global-search-text-field`,
+          )
+          ?.focus(),
       200,
     );
   };

package/src/footer/MRT_TableFooter.tsx

@@ -1,17 +1,20 @@
 import React, { FC } from 'react';
 import { TableFooter } from '@mui/material';
 import { MRT_TableFooterRow } from './MRT_TableFooterRow';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 
 interface Props {}
 
 export const MRT_TableFooter: FC<Props> = () => {
-  const { muiTableFooterProps, tableInstance } = useMaterialReactTable();
+  const { muiTableFooterProps, tableInstance } = useMRT();
 
   return (
     <TableFooter {...muiTableFooterProps}>
       {tableInstance.footerGroups.map((footerGroup) => (
-        <MRT_TableFooterRow key={footerGroup.getFooterGroupProps().key} footerGroup={footerGroup} />
+        <MRT_TableFooterRow
+          key={footerGroup.getFooterGroupProps().key}
+          footerGroup={footerGroup}
+        />
       ))}
     </TableFooter>
   );

package/src/footer/MRT_TableFooterCell.tsx

@@ -1,10 +1,11 @@
 import React, { FC } from 'react';
 import { styled, TableCell as MuiTableCell } from '@mui/material';
 import { HeaderGroup } from 'react-table';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 
 const TableCell = styled(MuiTableCell, {
-  shouldForwardProp: (prop) => prop !== 'densePadding' && prop !== 'enableColumnResizing',
+  shouldForwardProp: (prop) =>
+    prop !== 'densePadding' && prop !== 'enableColumnResizing',
 })<{ densePadding?: boolean; enableColumnResizing?: boolean }>(
   ({ densePadding, enableColumnResizing }) => ({
     fontWeight: 'bold',
@@ -19,7 +20,8 @@ interface Props {
 }
 
 export const MRT_TableFooterCell: FC<Props> = ({ column }) => {
-  const { muiTableFooterCellProps, densePadding, enableColumnResizing } = useMaterialReactTable();
+  const { muiTableFooterCellProps, densePadding, enableColumnResizing } =
+    useMRT();
 
   const isParentHeader = (column?.columns?.length ?? 0) > 0;
 

package/src/footer/MRT_TableFooterRow.tsx

@@ -3,7 +3,7 @@ import { TableRow } from '@mui/material';
 import { HeaderGroup } from 'react-table';
 import { MRT_TableFooterCell } from './MRT_TableFooterCell';
 import { MRT_TableSpacerCell } from '../table/MRT_TableSpacerCell';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 
 interface Props {
   footerGroup: HeaderGroup;
@@ -16,10 +16,11 @@ export const MRT_TableFooterRow: FC<Props> = ({ footerGroup }) => {
     anyRowsCanExpand,
     enableSelection,
     enableRowActions,
+    enableRowNumbers,
     positionActionsColumn,
     tableInstance,
     muiTableFooterRowProps,
-  } = useMaterialReactTable();
+  } = useMRT();
 
   //if no content in row, skip row
   if (!columns?.some((c) => c.Footer)) return null;
@@ -40,17 +41,27 @@ export const MRT_TableFooterRow: FC<Props> = ({ footerGroup }) => {
 
   return (
     <TableRow {...tableRowProps}>
-      {enableRowActions && positionActionsColumn === 'first' && <MRT_TableSpacerCell />}
+      {enableRowNumbers && <MRT_TableSpacerCell />}
+      {enableRowActions && positionActionsColumn === 'first' && (
+        <MRT_TableSpacerCell />
+      )}
       {(anyRowsCanExpand || renderDetailPanel) && (
         <MRT_TableSpacerCell
-          width={`${renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5}rem`}
+          width={`${
+            renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5
+          }rem`}
         />
       )}
       {enableSelection && <MRT_TableSpacerCell width="1rem" />}
       {footerGroup.headers.map((column) => (
-        <MRT_TableFooterCell key={column.getFooterProps().key} column={column} />
+        <MRT_TableFooterCell
+          key={column.getFooterProps().key}
+          column={column}
+        />
       ))}
-      {enableRowActions && positionActionsColumn === 'last' && <MRT_TableSpacerCell />}
+      {enableRowActions && positionActionsColumn === 'last' && (
+        <MRT_TableSpacerCell />
+      )}
     </TableRow>
   );
 };

package/src/head/MRT_TableHead.tsx

@@ -1,20 +1,25 @@
 import React, { FC } from 'react';
 import { TableHead } from '@mui/material';
 import { MRT_TableHeadRow } from './MRT_TableHeadRow';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 
 interface Props {}
 
 export const MRT_TableHead: FC<Props> = () => {
-  const { tableInstance, muiTableHeadProps } = useMaterialReactTable();
+  const { tableInstance, muiTableHeadProps } = useMRT();
 
   const tableHeadProps =
-    muiTableHeadProps instanceof Function ? muiTableHeadProps(tableInstance) : muiTableHeadProps;
+    muiTableHeadProps instanceof Function
+      ? muiTableHeadProps(tableInstance)
+      : muiTableHeadProps;
 
   return (
     <TableHead {...tableHeadProps}>
       {tableInstance.headerGroups.map((headerGroup) => (
-        <MRT_TableHeadRow key={headerGroup.getHeaderGroupProps().key} headerGroup={headerGroup} />
+        <MRT_TableHeadRow
+          key={headerGroup.getHeaderGroupProps().key}
+          headerGroup={headerGroup}
+        />
       ))}
     </TableHead>
   );

package/src/head/MRT_TableHeadCell.tsx

@@ -7,17 +7,19 @@ import {
   Collapse,
 } from '@mui/material';
 import { HeaderGroup } from 'react-table';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
 import { MRT_ToggleColumnActionMenuButton } from '../buttons/MRT_ToggleColumnActionMenuButton';
 
-export const StyledTableHeadCell = styled(MuiTableCell, {
-  shouldForwardProp: (prop) => prop !== 'densePadding' && prop !== 'enableColumnResizing',
+export const MRT_StyledTableHeadCell = styled(MuiTableCell, {
+  shouldForwardProp: (prop) =>
+    prop !== 'densePadding' && prop !== 'enableColumnResizing',
 })<{ densePadding?: boolean; enableColumnResizing?: boolean }>(
   ({ densePadding, enableColumnResizing }) => ({
     fontWeight: 'bold',
     height: '100%',
     padding: densePadding ? '0.5rem' : '1rem',
+    paddingTop: densePadding ? '0.75rem' : '1.25rem',
     transition: `all ${enableColumnResizing ? '10ms' : '0.2s'} ease-in-out`,
     verticalAlign: 'text-top',
   }),
@@ -62,7 +64,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
     muiTableHeadCellProps,
     showFilters,
     tableInstance,
-  } = useMaterialReactTable();
+  } = useMRT();
 
   const isParentHeader = (column?.columns?.length ?? 0) > 0;
 
@@ -88,14 +90,16 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
   };
 
   return (
-    <StyledTableHeadCell
+    <MRT_StyledTableHeadCell
       align={isParentHeader ? 'center' : 'left'}
       densePadding={densePadding}
       enableColumnResizing={enableColumnResizing}
       {...tableCellProps}
     >
       <TableCellWrapper>
-        <TableCellTopContents style={{ justifyContent: isParentHeader ? 'center' : undefined }}>
+        <TableCellTopContents
+          style={{ justifyContent: isParentHeader ? 'center' : undefined }}
+        >
           <CellFlexItem {...column.getSortByToggleProps()}>
             {column.render('Header')}
             {!isParentHeader && column.canSort && (
@@ -132,6 +136,6 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
           </Collapse>
         )}
       </TableCellWrapper>
-    </StyledTableHeadCell>
+    </MRT_StyledTableHeadCell>
   );
 };

package/src/head/MRT_TableHeadCellActions.tsx

@@ -0,0 +1,18 @@
+import React, { FC } from 'react';
+import { useMRT } from '../useMRT';
+import { MRT_StyledTableHeadCell } from './MRT_TableHeadCell';
+
+interface Props {}
+
+export const MRT_TableHeadCellActions: FC<Props> = () => {
+  const { densePadding, localization } = useMRT();
+
+  return (
+    <MRT_StyledTableHeadCell
+      densePadding={densePadding}
+      style={{ textAlign: 'center' }}
+    >
+      {localization?.actionsHeadColumnTitle}
+    </MRT_StyledTableHeadCell>
+  );
+};

package/src/head/MRT_TableHeadRow.tsx

@@ -1,11 +1,15 @@
 import React, { FC, useMemo } from 'react';
 import { TableRow } from '@mui/material';
 import { HeaderGroup } from 'react-table';
-import { MRT_TableHeadCell, StyledTableHeadCell } from './MRT_TableHeadCell';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import {
+  MRT_StyledTableHeadCell,
+  MRT_TableHeadCell,
+} from './MRT_TableHeadCell';
+import { useMRT } from '../useMRT';
 import { MRT_SelectAllCheckbox } from '../inputs/MRT_SelectAllCheckbox';
 import { MRT_ExpandAllButton } from '../buttons/MRT_ExpandAllButton';
 import { MRT_TableSpacerCell } from '../table/MRT_TableSpacerCell';
+import { MRT_TableHeadCellActions } from './MRT_TableHeadCellActions';
 
 interface Props {
   headerGroup: HeaderGroup;
@@ -14,16 +18,15 @@ interface Props {
 export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
   const {
     anyRowsCanExpand,
-    densePadding,
     disableExpandAll,
+    enableRowNumbers,
     enableRowActions,
     enableSelection,
-    localization,
     muiTableHeadRowProps,
     positionActionsColumn,
     renderDetailPanel,
     tableInstance,
-  } = useMaterialReactTable();
+  } = useMRT();
 
   const isParentHeader = useMemo(
     () => headerGroup.headers.some((h) => (h.columns?.length ?? 0) > 0),
@@ -46,21 +49,27 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
 
   return (
     <TableRow {...tableRowProps}>
+      {enableRowNumbers &&
+        (isParentHeader ? (
+          <MRT_TableSpacerCell />
+        ) : (
+          <MRT_StyledTableHeadCell>#</MRT_StyledTableHeadCell>
+        ))}
       {enableRowActions &&
         positionActionsColumn === 'first' &&
         (isParentHeader ? (
           <MRT_TableSpacerCell />
         ) : (
-          <StyledTableHeadCell style={{ textAlign: 'center' }}>
-            {localization?.actionsHeadColumnTitle}
-          </StyledTableHeadCell>
+          <MRT_TableHeadCellActions />
         ))}
       {anyRowsCanExpand || renderDetailPanel ? (
         !disableExpandAll && !isParentHeader ? (
           <MRT_ExpandAllButton />
         ) : (
           <MRT_TableSpacerCell
-            width={`${renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5}rem`}
+            width={`${
+              renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5
+            }rem`}
           />
         )
       ) : null}
@@ -79,9 +88,7 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
         (isParentHeader ? (
           <MRT_TableSpacerCell />
         ) : (
-          <StyledTableHeadCell densePadding={densePadding}>
-            {localization?.actionsHeadColumnTitle}
-          </StyledTableHeadCell>
+          <MRT_TableHeadCellActions />
         ))}
     </TableRow>
   );

package/src/inputs/MRT_DensePaddingSwitch.tsx

@@ -1,11 +1,11 @@
 import React, { FC } from 'react';
 import { Switch, Tooltip } from '@mui/material';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 
 interface Props {}
 
 export const MRT_DensePaddingSwitch: FC<Props> = () => {
-  const { densePadding, setDensePadding, localization } = useMaterialReactTable();
+  const { densePadding, setDensePadding, localization } = useMRT();
 
   return (
     <Tooltip arrow title={localization?.toggleDensePaddingSwitchTitle ?? ''}>

package/src/inputs/MRT_EditCellTextField.tsx

@@ -1,7 +1,7 @@
 import React, { ChangeEvent, FC } from 'react';
 import { TextField } from '@mui/material';
 import { Cell } from 'react-table';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 
 interface Props {
   cell: Cell;
@@ -13,7 +13,7 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell }) => {
     localization,
     muiTableBodyCellEditTextFieldProps,
     setCurrentEditingRow,
-  } = useMaterialReactTable();
+  } = useMRT();
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (currentEditingRow) {

package/src/inputs/MRT_FilterTextField.tsx

@@ -3,14 +3,14 @@ import { IconButton, InputAdornment, TextField, Tooltip } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import FilterIcon from '@mui/icons-material/FilterList';
 import { HeaderGroup, useAsyncDebounce } from 'react-table';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 
 interface Props {
   column: HeaderGroup;
 }
 
 export const MRT_FilterTextField: FC<Props> = ({ column }) => {
-  const { localization } = useMaterialReactTable();
+  const { localization } = useMRT();
 
   const [filterValue, setFilterValue] = useState('');
 
@@ -66,7 +66,10 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
         ),
         endAdornment: (
           <InputAdornment position="end">
-            <Tooltip arrow title={localization?.filterTextFieldClearButtonTitle ?? ''}>
+            <Tooltip
+              arrow
+              title={localization?.filterTextFieldClearButtonTitle ?? ''}
+            >
               <span>
                 <IconButton
                   aria-label={localization?.filterTextFieldClearButtonTitle}

package/src/inputs/MRT_SearchTextField.tsx

@@ -8,7 +8,7 @@ import {
 } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
 import CloseIcon from '@mui/icons-material/Close';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 import { useAsyncDebounce } from 'react-table';
 
 const TextField = styled(MuiTextField)({
@@ -18,15 +18,23 @@ const TextField = styled(MuiTextField)({
 interface Props {}
 
 export const MRT_SearchTextField: FC<Props> = () => {
-  const { showSearch, localization, muiSearchTextFieldProps, onGlobalFilterChange, tableInstance } =
-    useMaterialReactTable();
+  const {
+    showSearch,
+    localization,
+    muiSearchTextFieldProps,
+    onGlobalFilterChange,
+    tableInstance,
+  } = useMRT();
 
   const [searchValue, setSearchValue] = useState('');
 
-  const handleChange = useAsyncDebounce((event: ChangeEvent<HTMLInputElement>) => {
-    tableInstance.setGlobalFilter(event.target.value ?? undefined);
-    onGlobalFilterChange?.(event);
-  }, 200);
+  const handleChange = useAsyncDebounce(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      tableInstance.setGlobalFilter(event.target.value ?? undefined);
+      onGlobalFilterChange?.(event);
+    },
+    200,
+  );
 
   const handleClear = () => {
     setSearchValue('');

package/src/inputs/MRT_SelectAllCheckbox.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { Checkbox } from '@mui/material';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
 
 export const MRT_SelectAllCheckbox = () => {
-  const { tableInstance, disableSelectAll, densePadding, localization } = useMaterialReactTable();
+  const { tableInstance, disableSelectAll, densePadding, localization } =
+    useMRT();
 
   return (
     <MRT_TableButtonCell densePadding={densePadding} variant="head">

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -1,7 +1,7 @@
 import React, { ChangeEvent, FC } from 'react';
 import { Checkbox } from '@mui/material';
 import { Row } from 'react-table';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
 
 interface Props {
@@ -9,7 +9,8 @@ interface Props {
 }
 
 export const MRT_SelectCheckbox: FC<Props> = ({ row }) => {
-  const { tableInstance, onRowSelectChange, densePadding, localization } = useMaterialReactTable();
+  const { tableInstance, onRowSelectChange, densePadding, localization } =
+    useMRT();
 
   const onSelectChange = (event: ChangeEvent) => {
     row.getToggleRowSelectedProps()?.onChange?.(event);