material-react-table 0.3.4 → 0.4.2

package/dist/toolbar/MRT_ToolbarAlertBanner.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+interface Props {
+}
+export declare const MRT_ToolbarAlertBanner: FC<Props>;
+export {};

package/dist/toolbar/MRT_ToolbarInternalButtons.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+interface Props {
+}
+export declare const MRT_ToolbarInternalButtons: FC<Props>;
+export {};

package/dist/{useMaterialReactTable.d.ts → useMRT.d.ts}

@@ -1,12 +1,15 @@
 import React, { PropsWithChildren } from 'react';
 import { Row, TableInstance } from 'react-table';
 import { MaterialReactTableProps } from './MaterialReactTable';
-import { UseMRTCalcs } from './utils/useMRTCalcs';
-export interface UseMaterialReactTable<D extends {}> extends MaterialReactTableProps<D>, UseMRTCalcs {
+export interface UseMRT<D extends {} = {}> extends MaterialReactTableProps<D> {
+    anyRowsCanExpand: boolean;
+    anyRowsExpanded: boolean;
     currentEditingRow: Row<D> | null;
     densePadding: boolean;
+    fullScreen: boolean;
     setCurrentEditingRow: (currentRowEditingId: Row<D> | null) => void;
     setDensePadding: (densePadding: boolean) => void;
+    setFullScreen: (fullScreen: boolean) => void;
     setShowFilters: (showFilters: boolean) => void;
     setShowSearch: (showSearch: boolean) => void;
     showFilters: boolean;
@@ -14,4 +17,4 @@ export interface UseMaterialReactTable<D extends {}> extends MaterialReactTableP
     tableInstance: TableInstance<D>;
 }
 export declare const MaterialReactTableProvider: <D extends {}>(props: React.PropsWithChildren<MaterialReactTableProps<D>>) => JSX.Element;
-export declare const useMaterialReactTable: <D extends {}>() => UseMaterialReactTable<D>;
+export declare const useMRT: <D extends {}>() => UseMRT<D>;

package/dist/utils/localization.d.ts

@@ -7,6 +7,8 @@ export interface MRT_Localization {
     columnActionMenuItemSortAsc: string;
     columnActionMenuItemSortDesc: string;
     columnActionMenuItemUnGroupBy: string;
+    columnShowHideMenuHideAll: string;
+    columnShowHideMenuShowAll: string;
     expandAllButtonTitle: string;
     expandButtonTitle: string;
     filterTextFieldClearButtonTitle: string;
@@ -23,6 +25,10 @@ export interface MRT_Localization {
     showHideColumnsButtonTitle: string;
     toggleDensePaddingSwitchTitle: string;
     toggleFilterButtonTitle: string;
+    toggleFullScreenButtonTitle: string;
     toggleSearchButtonTitle: string;
+    toolbarAlertSelectionMessage: string;
+    toolbarAlertGroupedByMessage: string;
+    toolbarAlertGroupedThenByMessage: string;
 }
 export declare const defaultLocalization: MRT_Localization;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.3.4",
+  "version": "0.4.2",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material-UI implementation of react-table, inspired by material-table and the mui DataGrid, written from the ground up in TypeScript.",
@@ -56,23 +56,23 @@
     }
   ],
   "devDependencies": {
-    "@babel/core": "^7.17.0",
+    "@babel/core": "^7.17.4",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@etchteam/storybook-addon-status": "^4.2.0",
-    "@faker-js/faker": "^6.0.0-alpha.5",
-    "@mui/icons-material": "^5.3.1",
-    "@mui/material": "^5.4.0",
-    "@size-limit/preset-small-lib": "^7.0.5",
-    "@storybook/addon-a11y": "^6.4.18",
-    "@storybook/addon-actions": "^6.4.18",
+    "@faker-js/faker": "^6.0.0-alpha.6",
+    "@mui/icons-material": "^5.4.2",
+    "@mui/material": "^5.4.2",
+    "@size-limit/preset-small-lib": "^7.0.8",
+    "@storybook/addon-a11y": "^6.4.19",
+    "@storybook/addon-actions": "^6.4.19",
     "@storybook/addon-console": "^1.2.3",
-    "@storybook/addon-essentials": "^6.4.18",
+    "@storybook/addon-essentials": "^6.4.19",
     "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.4.18",
-    "@storybook/addon-storysource": "^6.4.18",
-    "@storybook/addons": "^6.4.18",
-    "@storybook/react": "^6.4.18",
+    "@storybook/addon-links": "^6.4.19",
+    "@storybook/addon-storysource": "^6.4.19",
+    "@storybook/addons": "^6.4.19",
+    "@storybook/react": "^6.4.19",
     "@types/faker": "^6.6.8",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
@@ -84,7 +84,7 @@
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",
     "react-table": "^7.7.0",
-    "size-limit": "^7.0.5",
+    "size-limit": "^7.0.8",
     "storybook-addon-paddings": "^4.2.1",
     "storybook-addon-performance": "^0.16.1",
     "storybook-dark-mode": "^1.0.8",

package/src/@types/react-table-config.d.ts

@@ -50,23 +50,40 @@ import {
   UseSortByState,
 } from 'react-table';
 
-export type MRT_ColumnInterface<D extends {} = {}> = UseFiltersColumnOptions<D> &
-  UseGlobalFiltersColumnOptions<D> &
-  UseGroupByColumnOptions<D> &
-  UseResizeColumnsColumnOptions<D> &
-  UseSortByColumnOptions<D> & {
-    disableFilters?: boolean;
-    Filter?: ({ column }: { column: HeaderGroup<D> }) => ReactNode;
-    editable?: boolean;
-    Edit?: ({ cell, onChange }: { cell: Cell<D> }) => ReactNode;
-    muiTableBodyCellProps?: TableCellProps | ((cell: Cell<D>) => TableCellProps);
-    muiTableHeadCellProps?: TableCellProps | ((column: Column<D>) => TableCellProps);
-    muiTableFooterCellProps?: TableCellProps | ((column: Column<D>) => TableCellProps);
-    muiTableBodyCellEditTextFieldProps?: TextFieldProps | ((cell: Cell<D>) => TextFieldProps);
-    muiTableHeadCellFilterTextFieldProps?: TextFieldProps | ((column: Column<D>) => TextFieldProps);
-    onCellEditChange?: (event: ChangeEvent<HTMLInputElement>, cell: Cell<D>) => void;
-    onFilterChange?: (event: ChangeEvent<HTMLInputElement>, filterValue: any) => void;
-  };
+export type MRT_ColumnInterface<D extends {} = {}> =
+  UseFiltersColumnOptions<D> &
+    UseGlobalFiltersColumnOptions<D> &
+    UseGroupByColumnOptions<D> &
+    UseResizeColumnsColumnOptions<D> &
+    UseSortByColumnOptions<D> & {
+      disableFilters?: boolean;
+      Filter?: ({ column }: { column: HeaderGroup<D> }) => ReactNode;
+      editable?: boolean;
+      Edit?: ({ cell, onChange }: { cell: Cell<D> }) => ReactNode;
+      muiTableBodyCellProps?:
+        | TableCellProps
+        | ((cell: Cell<D>) => TableCellProps);
+      muiTableHeadCellProps?:
+        | TableCellProps
+        | ((column: Column<D>) => TableCellProps);
+      muiTableFooterCellProps?:
+        | TableCellProps
+        | ((column: Column<D>) => TableCellProps);
+      muiTableBodyCellEditTextFieldProps?:
+        | TextFieldProps
+        | ((cell: Cell<D>) => TextFieldProps);
+      muiTableHeadCellFilterTextFieldProps?:
+        | TextFieldProps
+        | ((column: Column<D>) => TextFieldProps);
+      onCellEditChange?: (
+        event: ChangeEvent<HTMLInputElement>,
+        cell: Cell<D>,
+      ) => void;
+      onFilterChange?: (
+        event: ChangeEvent<HTMLInputElement>,
+        filterValue: any,
+      ) => void;
+    };
 
 declare module 'react-table' {
   export interface TableOptions<D extends Record<string, unknown>>
@@ -81,14 +98,16 @@ declare module 'react-table' {
       UseSortByOptions<D>,
       Record<string, any> {}
 
-  export interface Hooks<D extends Record<string, unknown> = Record<string, unknown>>
-    extends UseExpandedHooks<D>,
+  export interface Hooks<
+    D extends Record<string, unknown> = Record<string, unknown>,
+  > extends UseExpandedHooks<D>,
       UseGroupByHooks<D>,
       UseRowSelectHooks<D>,
       UseSortByHooks<D> {}
 
-  export interface TableInstance<D extends Record<string, unknown> = Record<string, unknown>>
-    extends UseColumnOrderInstanceProps<D>,
+  export interface TableInstance<
+    D extends Record<string, unknown> = Record<string, unknown>,
+  > extends UseColumnOrderInstanceProps<D>,
       UseExpandedInstanceProps<D>,
       UseFiltersInstanceProps<D>,
       UseGlobalFiltersInstanceProps<D>,
@@ -98,8 +117,9 @@ declare module 'react-table' {
       UseRowStateInstanceProps<D>,
       UseSortByInstanceProps<D> {}
 
-  export interface TableState<D extends Record<string, unknown> = Record<string, unknown>>
-    extends UseColumnOrderState<D>,
+  export interface TableState<
+    D extends Record<string, unknown> = Record<string, unknown>,
+  > extends UseColumnOrderState<D>,
       UseExpandedState<D>,
       UseFiltersState<D>,
       UseGlobalFiltersState<D>,
@@ -110,21 +130,26 @@ declare module 'react-table' {
       UseRowStateState<D>,
       UseSortByState<D> {}
 
-  export interface ColumnInterface<D extends Record<string, unknown> = Record<string, unknown>>
-    extends MRT_ColumnInterface {}
+  export interface ColumnInterface<
+    D extends Record<string, unknown> = Record<string, unknown>,
+  > extends MRT_ColumnInterface {}
 
-  export interface ColumnInstance<D extends Record<string, unknown> = Record<string, unknown>>
-    extends UseFiltersColumnProps<D>,
+  export interface ColumnInstance<
+    D extends Record<string, unknown> = Record<string, unknown>,
+  > extends UseFiltersColumnProps<D>,
       UseGroupByColumnProps<D>,
       UseResizeColumnsColumnProps<D>,
       UseSortByColumnProps<D> {}
 
-  export interface Cell<D extends Record<string, unknown> = Record<string, unknown>, V = any>
-    extends UseGroupByCellProps<D>,
+  export interface Cell<
+    D extends Record<string, unknown> = Record<string, unknown>,
+    V = any,
+  > extends UseGroupByCellProps<D>,
       UseRowStateCellProps<D> {}
 
-  export interface Row<D extends Record<string, unknown> = Record<string, unknown>>
-    extends UseExpandedRowProps<D>,
+  export interface Row<
+    D extends Record<string, unknown> = Record<string, unknown>,
+  > extends UseExpandedRowProps<D>,
       UseGroupByRowProps<D>,
       UseRowSelectRowProps<D>,
       UseRowStateRowProps<D> {}

package/src/MaterialReactTable.tsx

@@ -1,5 +1,6 @@
 import React, { ChangeEvent, MouseEvent, ReactNode } from 'react';
 import {
+  AlertProps,
   TableBodyProps,
   TableCellProps,
   TableContainerProps,
@@ -29,7 +30,7 @@ import {
   UseSortByOptions,
   UseTableOptions,
 } from 'react-table';
-import { MaterialReactTableProvider } from './useMaterialReactTable';
+import { MaterialReactTableProvider } from './useMRT';
 import { MRT_TableContainer } from './table/MRT_TableContainer';
 import { defaultLocalization, MRT_Localization } from './utils/localization';
 import { MRT_ColumnInterface } from './@types/react-table-config';
@@ -47,14 +48,17 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
   UseSortByOptions<D> & {
     columns: (Column<D> & MRT_ColumnInterface)[];
     defaultDensePadding?: boolean;
+    defaultFullScreen?: boolean;
     defaultShowFilters?: boolean;
     defaultShowSearchTextField?: boolean;
     disableColumnActions?: boolean;
     disableColumnHiding?: boolean;
     disableDensePaddingToggle?: boolean;
     disableExpandAll?: boolean;
+    disableFullScreenToggle?: boolean;
     disableSelectAll?: boolean;
     disableSubRowTree?: boolean;
+    enableRowNumbers?: boolean;
     enableColumnGrouping?: boolean;
     enableColumnResizing?: boolean;
     enableRowActions?: boolean;
@@ -69,44 +73,86 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
     isLoading?: boolean;
     localization?: Partial<MRT_Localization>;
     muiSearchTextFieldProps?: TextFieldProps;
-    muiTableBodyCellEditTextFieldProps?: TextFieldProps | ((cell?: Cell<D>) => TextFieldProps);
-    muiTableBodyCellProps?: TableCellProps | ((cell?: Cell<D>) => TableCellProps);
+    muiTableBodyCellEditTextFieldProps?:
+      | TextFieldProps
+      | ((cell?: Cell<D>) => TextFieldProps);
+    muiTableBodyCellProps?:
+      | TableCellProps
+      | ((cell?: Cell<D>) => TableCellProps);
     muiTableBodyProps?: TableBodyProps;
     muiTableBodyRowProps?: TableRowProps | ((row: Row<D>) => TableRowProps);
-    muiTableContainerProps?: TableContainerProps;
-    muiTableDetailPanelProps?: TableCellProps | ((row: Row<D>) => TableCellProps);
-    muiTableFooterCellProps?: TableCellProps | ((column: Column<D>) => TableCellProps);
+    muiTableContainerProps?:
+      | TableContainerProps
+      | ((table: TableInstance<D>) => TableContainerProps);
+    muiTableDetailPanelProps?:
+      | TableCellProps
+      | ((row: Row<D>) => TableCellProps);
+    muiTableFooterCellProps?:
+      | TableCellProps
+      | ((column: Column<D>) => TableCellProps);
     muiTableFooterProps?: TableFooterProps;
-    muiTableFooterRowProps?: TableRowProps | ((footerGroup: HeaderGroup<D>) => TableRowProps);
-    muiTableHeadCellFilterTextFieldProps?: TextFieldProps | ((column: Column<D>) => TextFieldProps);
-    muiTableHeadCellProps?: TableCellProps | ((column: Column<D>) => TableCellProps);
+    muiTableFooterRowProps?:
+      | TableRowProps
+      | ((footerGroup: HeaderGroup<D>) => TableRowProps);
+    muiTableHeadCellFilterTextFieldProps?:
+      | TextFieldProps
+      | ((column: Column<D>) => TextFieldProps);
+    muiTableHeadCellProps?:
+      | TableCellProps
+      | ((column: Column<D>) => TableCellProps);
     muiTableHeadProps?: TableHeadProps;
-    muiTableHeadRowProps?: TableRowProps | ((row: HeaderGroup<D>) => TableRowProps);
+    muiTableHeadRowProps?:
+      | TableRowProps
+      | ((row: HeaderGroup<D>) => TableRowProps);
     muiTablePaginationProps?:
       | Partial<TablePaginationProps>
       | ((tableInstance: TableInstance<D>) => Partial<TablePaginationProps>);
     muiTableProps?: TableProps;
-    muiTableToolbarBottomProps?: ToolbarProps | ((tableInstance: TableInstance<D>) => ToolbarProps);
-    muiTableToolbarTopProps?: ToolbarProps | ((tableInstance: TableInstance<D>) => ToolbarProps);
-    onCellClick?: (event: MouseEvent<HTMLTableCellElement>, cell: Cell<D>) => void;
+    muiTableToolbarAlertBannerProps?:
+      | AlertProps
+      | ((tableInstance: TableInstance<D>) => AlertProps);
+    muiTableToolbarBottomProps?:
+      | ToolbarProps
+      | ((tableInstance: TableInstance<D>) => ToolbarProps);
+    muiTableToolbarTopProps?:
+      | ToolbarProps
+      | ((tableInstance: TableInstance<D>) => ToolbarProps);
+    onCellClick?: (
+      event: MouseEvent<HTMLTableCellElement>,
+      cell: Cell<D>,
+    ) => void;
     onColumnHide?: (column: Column<D>, visibleColumns: Column<D>[]) => void;
-    onDetailPanelClick?: (event: MouseEvent<HTMLTableCellElement>, row: Row<D>) => void;
+    onDetailPanelClick?: (
+      event: MouseEvent<HTMLTableCellElement>,
+      row: Row<D>,
+    ) => void;
     onGlobalFilterChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     onRowClick?: (event: MouseEvent<HTMLTableRowElement>, row: Row<D>) => void;
     onRowEditSubmit?: (row: Row<D>) => Promise<void> | void;
-    onRowExpandChange?: (event: MouseEvent<HTMLButtonElement>, row: Row<D>) => void;
-    onRowSelectChange?: (event: ChangeEvent, row: Row<D>, selectedRows: Row<D>[]) => void;
+    onRowExpandChange?: (
+      event: MouseEvent<HTMLButtonElement>,
+      row: Row<D>,
+    ) => void;
+    onRowSelectChange?: (
+      event: ChangeEvent,
+      row: Row<D>,
+      selectedRows: Row<D>[],
+    ) => void;
     positionActionsColumn?: 'first' | 'last';
     positionPagination?: 'bottom' | 'top' | 'both';
     positionToolbarActions?: 'bottom' | 'top';
+    positionToolbarAlertBanner?: 'bottom' | 'top';
     renderDetailPanel?: (row: Row<D>) => ReactNode;
     renderRowActionMenuItems?: (
       rowData: Row<D>,
       tableInstance: TableInstance<D>,
       closeMenu: () => void,
     ) => ReactNode[];
-    renderRowActions?: (row: Row<D>, tableInstance: TableInstance<D>) => ReactNode;
-    renderToolbarActions?: (tableInstance: TableInstance<D>) => ReactNode;
+    renderRowActions?: (
+      row: Row<D>,
+      tableInstance: TableInstance<D>,
+    ) => ReactNode;
+    renderToolbarCustomActions?: (tableInstance: TableInstance<D>) => ReactNode;
   };
 
 export default <D extends {}>({
@@ -115,14 +161,16 @@ export default <D extends {}>({
   positionActionsColumn = 'first',
   positionPagination = 'bottom',
   positionToolbarActions = 'top',
+  positionToolbarAlertBanner = 'top',
   ...rest
 }: MaterialReactTableProps<D>) => (
   <MaterialReactTableProvider
     defaultColumn={defaultColumn}
     localization={{ ...defaultLocalization, ...localization }}
-    positionPagination={positionPagination}
     positionActionsColumn={positionActionsColumn}
+    positionPagination={positionPagination}
     positionToolbarActions={positionToolbarActions}
+    positionToolbarAlertBanner={positionToolbarAlertBanner}
     {...rest}
   >
     <MRT_TableContainer />

package/src/body/MRT_TableBody.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { styled, TableBody as MuiTableBody } from '@mui/material';
 import { MRT_TableBodyRow } from './MRT_TableBodyRow';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 
 const TableBody = styled(MuiTableBody)({
   overflowY: 'hidden',
@@ -10,7 +10,7 @@ const TableBody = styled(MuiTableBody)({
 interface Props {}
 
 export const MRT_TableBody: FC<Props> = () => {
-  const { tableInstance, muiTableBodyProps, manualPagination } = useMaterialReactTable();
+  const { tableInstance, muiTableBodyProps, manualPagination } = useMRT();
 
   const rows = manualPagination ? tableInstance.rows : tableInstance.page;
 

package/src/body/MRT_TableBodyCell.tsx

@@ -1,10 +1,10 @@
 import React, { FC, MouseEvent } from 'react';
 import { styled, TableCell as MuiTableCell } from '@mui/material';
 import { Cell } from 'react-table';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
 
-const TableCell = styled(MuiTableCell, {
+export const MRT_StyledTableBodyCell = styled(MuiTableCell, {
   shouldForwardProp: (prop) => prop !== 'densePadding',
 })<{ densePadding?: boolean }>(({ densePadding }) => ({
   padding: densePadding ? '0.5rem' : '1rem',
@@ -17,11 +17,17 @@ interface Props {
 }
 
 export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
-  const { onCellClick, muiTableBodyCellProps, densePadding, currentEditingRow } =
-    useMaterialReactTable();
+  const {
+    onCellClick,
+    muiTableBodyCellProps,
+    densePadding,
+    currentEditingRow,
+  } = useMRT();
 
   const mTableCellBodyProps =
-    muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps(cell) : muiTableBodyCellProps;
+    muiTableBodyCellProps instanceof Function
+      ? muiTableBodyCellProps(cell)
+      : muiTableBodyCellProps;
 
   const mcTableCellBodyProps =
     cell.column.muiTableBodyCellProps instanceof Function
@@ -40,9 +46,11 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
   };
 
   return (
-    <TableCell
+    <MRT_StyledTableBodyCell
       densePadding={densePadding}
-      onClick={(event: MouseEvent<HTMLTableCellElement>) => onCellClick?.(event, cell)}
+      onClick={(event: MouseEvent<HTMLTableCellElement>) =>
+        onCellClick?.(event, cell)
+      }
       {...tableCellProps}
     >
       {currentEditingRow?.id === cell.row.id ? (
@@ -56,7 +64,6 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
       ) : (
         cell.render('Cell')
       )}
-      {}
-    </TableCell>
+    </MRT_StyledTableBodyCell>
   );
 };

package/src/body/MRT_TableBodyRow.tsx

@@ -1,8 +1,11 @@
 import React, { FC, MouseEvent } from 'react';
 import { alpha, styled, TableRow as MuiTableRow } from '@mui/material';
 import { Row } from 'react-table';
-import { MRT_TableBodyCell } from './MRT_TableBodyCell';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import {
+  MRT_StyledTableBodyCell,
+  MRT_TableBodyCell,
+} from './MRT_TableBodyCell';
+import { useMRT } from '../useMRT';
 import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
 import { MRT_ExpandButton } from '../buttons/MRT_ExpandButton';
 import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
@@ -11,7 +14,9 @@ import { MRT_ToggleRowActionMenuButton } from '../buttons/MRT_ToggleRowActionMen
 export const TableRow = styled(MuiTableRow, {
   shouldForwardProp: (prop) => prop !== 'isSelected',
 })<{ isSelected?: boolean }>(({ isSelected, theme }) => ({
-  backgroundColor: isSelected ? alpha(theme.palette.primary.light, 0.1) : 'transparent',
+  backgroundColor: isSelected
+    ? alpha(theme.palette.primary.light, 0.1)
+    : 'transparent',
 }));
 
 interface Props {
@@ -22,15 +27,18 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
   const {
     anyRowsCanExpand,
     enableRowActions,
+    enableRowNumbers,
     enableSelection,
     muiTableBodyRowProps,
     onRowClick,
     positionActionsColumn,
     renderDetailPanel,
-  } = useMaterialReactTable();
+  } = useMRT();
 
   const mTableBodyRowProps =
-    muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps(row) : muiTableBodyRowProps;
+    muiTableBodyRowProps instanceof Function
+      ? muiTableBodyRowProps(row)
+      : muiTableBodyRowProps;
 
   const tableRowProps = {
     ...mTableBodyRowProps,
@@ -46,13 +54,20 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
       <TableRow
         isSelected={row.isSelected}
         hover
-        onClick={(event: MouseEvent<HTMLTableRowElement>) => onRowClick?.(event, row)}
+        onClick={(event: MouseEvent<HTMLTableRowElement>) =>
+          onRowClick?.(event, row)
+        }
         {...tableRowProps}
       >
+        {enableRowNumbers && (
+          <MRT_StyledTableBodyCell>{row.index + 1}</MRT_StyledTableBodyCell>
+        )}
         {enableRowActions && positionActionsColumn === 'first' && (
           <MRT_ToggleRowActionMenuButton row={row} />
         )}
-        {(anyRowsCanExpand || renderDetailPanel) && <MRT_ExpandButton row={row} />}
+        {(anyRowsCanExpand || renderDetailPanel) && (
+          <MRT_ExpandButton row={row} />
+        )}
         {enableSelection && <MRT_SelectCheckbox row={row} />}
         {row.cells.map((cell) => (
           <MRT_TableBodyCell key={cell.getCellProps().key} cell={cell} />

package/src/body/MRT_TableDetailPanel.tsx

@@ -1,7 +1,12 @@
 import React, { FC, MouseEvent } from 'react';
-import { Collapse, styled, TableCell as MuiTableCell, TableRow } from '@mui/material';
+import {
+  Collapse,
+  styled,
+  TableCell as MuiTableCell,
+  TableRow,
+} from '@mui/material';
 import { Row } from 'react-table';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 
 const TableCell = styled(MuiTableCell, {
   shouldForwardProp: (prop) => prop !== 'isExpanded',
@@ -23,10 +28,12 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row }) => {
     muiTableDetailPanelProps,
     muiTableBodyRowProps,
     onDetailPanelClick,
-  } = useMaterialReactTable();
+  } = useMRT();
 
   const mTableBodyRowProps =
-    muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps(row) : muiTableBodyRowProps;
+    muiTableBodyRowProps instanceof Function
+      ? muiTableBodyRowProps(row)
+      : muiTableBodyRowProps;
 
   const tableRowProps = {
     ...mTableBodyRowProps,
@@ -54,7 +61,9 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row }) => {
       <TableCell
         colSpan={tableInstance.visibleColumns.length + 10}
         isExpanded={row.isExpanded}
-        onClick={(event: MouseEvent<HTMLTableCellElement>) => onDetailPanelClick?.(event, row)}
+        onClick={(event: MouseEvent<HTMLTableCellElement>) =>
+          onDetailPanelClick?.(event, row)
+        }
         {...tableCellProps}
       >
         <Collapse in={row.isExpanded}>{renderDetailPanel?.(row)}</Collapse>

package/src/buttons/MRT_EditActionButtons.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import { IconButton, styled, Tooltip } from '@mui/material';
 import SaveIcon from '@mui/icons-material/Save';
 import CancelIcon from '@mui/icons-material/Cancel';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 import { Row } from 'react-table';
 
 const EditActionButtonWrappers = styled('div')({
@@ -15,8 +15,12 @@ interface Props {
 }
 
 export const MRT_EditActionButtons: FC<Props> = ({ row }) => {
-  const { localization, setCurrentEditingRow, onRowEditSubmit, currentEditingRow } =
-    useMaterialReactTable();
+  const {
+    localization,
+    setCurrentEditingRow,
+    onRowEditSubmit,
+    currentEditingRow,
+  } = useMRT();
 
   const handleCancel = () => {
     row.values = row.original;
@@ -31,7 +35,10 @@ export const MRT_EditActionButtons: FC<Props> = ({ row }) => {
   return (
     <EditActionButtonWrappers>
       <Tooltip arrow title={localization?.rowActionButtonCancel ?? ''}>
-        <IconButton aria-label={localization?.rowActionButtonCancel} onClick={handleCancel}>
+        <IconButton
+          aria-label={localization?.rowActionButtonCancel}
+          onClick={handleCancel}
+        >
           <CancelIcon />
         </IconButton>
       </Tooltip>

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { IconButton, styled } from '@mui/material';
 import MuiArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
 
 const ArrowRightIcon = styled(MuiArrowRightIcon, {
@@ -14,7 +14,8 @@ const ArrowRightIcon = styled(MuiArrowRightIcon, {
 interface Props {}
 
 export const MRT_ExpandAllButton: FC<Props> = () => {
-  const { tableInstance, localization, anyRowsExpanded, densePadding } = useMaterialReactTable();
+  const { tableInstance, localization, anyRowsExpanded, densePadding } =
+    useMRT();
 
   return (
     <MRT_TableButtonCell
@@ -28,7 +29,9 @@ export const MRT_ExpandAllButton: FC<Props> = () => {
       >
         <ArrowRightIcon
           fontSize="small"
-          rotation={tableInstance.isAllRowsExpanded ? -180 : anyRowsExpanded ? -90 : 0}
+          rotation={
+            tableInstance.isAllRowsExpanded ? -180 : anyRowsExpanded ? -90 : 0
+          }
         />
       </IconButton>
     </MRT_TableButtonCell>