material-react-table 0.3.0 → 0.3.4

package/dist/menus/MRT_ColumnActionMenu.d.ts

@@ -1,8 +1,8 @@
 import { FC } from 'react';
-import { ColumnInstance } from 'react-table';
+import { HeaderGroup } from 'react-table';
 interface Props {
     anchorEl: HTMLElement | null;
-    column: ColumnInstance;
+    column: HeaderGroup;
     setAnchorEl: (anchorEl: HTMLElement | null) => void;
 }
 export declare const MRT_ColumnActionMenu: FC<Props>;

package/dist/menus/MRT_RowActionMenu.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { Row } from 'react-table';
+interface Props {
+    anchorEl: HTMLElement | null;
+    row: Row;
+    setAnchorEl: (anchorEl: HTMLElement | null) => void;
+    handleEdit: () => void;
+}
+export declare const MRT_RowActionMenu: FC<Props>;
+export {};

package/dist/table/MRT_TableButtonCell.d.ts

@@ -0,0 +1,3 @@
+export declare const MRT_TableButtonCell: import("@emotion/styled").StyledComponent<import("@mui/material").TableCellProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    densePadding?: boolean | undefined;
+}, {}, {}>;

package/dist/toolbar/MRT_ToolbarBottom.d.ts

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

package/dist/toolbar/MRT_ToolbarButtons.d.ts

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

package/dist/toolbar/{MRT_Toolbar.d.ts → MRT_ToolbarTop.d.ts}

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

package/dist/useMaterialReactTable.d.ts

@@ -1,9 +1,17 @@
 import React, { PropsWithChildren } from 'react';
-import { TableInstance } from 'react-table';
+import { Row, TableInstance } from 'react-table';
 import { MaterialReactTableProps } from './MaterialReactTable';
 import { UseMRTCalcs } from './utils/useMRTCalcs';
 export interface UseMaterialReactTable<D extends {}> extends MaterialReactTableProps<D>, UseMRTCalcs {
+    currentEditingRow: Row<D> | null;
+    densePadding: boolean;
+    setCurrentEditingRow: (currentRowEditingId: Row<D> | null) => void;
+    setDensePadding: (densePadding: boolean) => void;
+    setShowFilters: (showFilters: boolean) => void;
+    setShowSearch: (showSearch: boolean) => void;
+    showFilters: boolean;
+    showSearch: boolean;
     tableInstance: TableInstance<D>;
 }
-export declare const MaterialReactTableProvider: <D extends {}>({ children, columns, data, defaultColumn, getRowId, getSubRows, initialState, stateReducer, surpressoverrideWarnings, ...rest }: React.PropsWithChildren<MaterialReactTableProps<D>>) => JSX.Element;
+export declare const MaterialReactTableProvider: <D extends {}>(props: React.PropsWithChildren<MaterialReactTableProps<D>>) => JSX.Element;
 export declare const useMaterialReactTable: <D extends {}>() => UseMaterialReactTable<D>;

package/dist/utils/localization.d.ts

@@ -1,17 +1,28 @@
 export interface MRT_Localization {
-    columnActionMenuButtonTitle?: string;
-    columnActionMenuItemHideColumn?: string;
-    columnActionMenuItemSortAsc?: string;
-    columnActionMenuItemClearSort?: string;
-    columnActionMenuItemSortDesc?: string;
-    columnActionMenuItemGroupBy?: string;
-    columnActionMenuItemUnGroupBy?: string;
-    expandAllButtonTitle?: string;
-    expandButtonTitle?: string;
-    filterTextFieldClearButtonTitle?: string;
-    filterTextFieldPlaceholder?: string;
-    searchTextFieldClearButtonTitle?: string;
-    searchTextFieldPlaceholder?: string;
-    showHideColumnsButtonTitle?: string;
+    actionsHeadColumnTitle: string;
+    columnActionMenuButtonTitle: string;
+    columnActionMenuItemClearSort: string;
+    columnActionMenuItemGroupBy: string;
+    columnActionMenuItemHideColumn: string;
+    columnActionMenuItemSortAsc: string;
+    columnActionMenuItemSortDesc: string;
+    columnActionMenuItemUnGroupBy: string;
+    expandAllButtonTitle: string;
+    expandButtonTitle: string;
+    filterTextFieldClearButtonTitle: string;
+    filterTextFieldPlaceholder: string;
+    rowActionButtonCancel: string;
+    rowActionButtonSave: string;
+    rowActionMenuButtonTitle: string;
+    rowActionMenuItemEdit: string;
+    rowActionsColumnTitle: string;
+    searchTextFieldClearButtonTitle: string;
+    searchTextFieldPlaceholder: string;
+    selectAllCheckboxTitle: string;
+    selectCheckboxTitle: string;
+    showHideColumnsButtonTitle: string;
+    toggleDensePaddingSwitchTitle: string;
+    toggleFilterButtonTitle: string;
+    toggleSearchButtonTitle: string;
 }
 export declare const defaultLocalization: MRT_Localization;

package/dist/utils/useMRTCalcs.d.ts

@@ -7,5 +7,5 @@ export interface UseMRTCalcs {
 interface Props<D extends {}> {
     tableInstance: TableInstance<D>;
 }
-export declare const useMRTCalcs: <D extends {}>({ tableInstance, }: Props<D>) => UseMRTCalcs;
+export declare const useMRTCalcs: <D extends {}>({ tableInstance }: Props<D>) => UseMRTCalcs;
 export {};

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.3.0",
+  "version": "0.3.4",
   "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.",
@@ -13,7 +13,7 @@
     "type": "git",
     "url": "https://github.com/KevinVandy/material-react-table"
   },
-  "homepage": "https://github.com/KevinVandy/material-react-table#readme",
+  "homepage": "https://www.material-react-table.com/",
   "bugs": {
     "url": "https://github.com/KevinVandy/material-react-table/issues"
   },
@@ -24,22 +24,24 @@
     "src"
   ],
   "engines": {
-    "node": ">=14"
+    "node": ">=12"
   },
   "scripts": {
-    "start": "tsdx watch",
+    "analyze": "size-limit --why",
     "build": "tsdx build && size-limit",
-    "test": "tsdx test --passWithNoTests",
+    "build-storybook": "build-storybook",
+    "format": "prettier -w .",
     "lint": "tsdx lint",
     "prepare": "tsdx build",
     "size": "size-limit",
-    "analyze": "size-limit --why",
+    "start": "tsdx watch",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "test": "tsdx test --passWithNoTests",
+    "upgrade": "ncu -u && npm i"
   },
   "husky": {
     "hooks": {
-      "pre-commit": "tsdx lint"
+      "pre-commit": "tsdx lint && format"
     }
   },
   "module": "dist/material-react-table.esm.js",
@@ -54,24 +56,25 @@
     }
   ],
   "devDependencies": {
-    "@babel/core": "^7.16.10",
+    "@babel/core": "^7.17.0",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@faker-js/faker": "^6.0.0-alpha.3",
-    "@mui/icons-material": "^5.3.0",
-    "@mui/material": "^5.3.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.13",
-    "@storybook/addon-actions": "^6.4.13",
+    "@storybook/addon-a11y": "^6.4.18",
+    "@storybook/addon-actions": "^6.4.18",
     "@storybook/addon-console": "^1.2.3",
-    "@storybook/addon-essentials": "^6.4.13",
+    "@storybook/addon-essentials": "^6.4.18",
     "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.4.13",
-    "@storybook/addon-storysource": "^6.4.13",
-    "@storybook/addons": "^6.4.13",
-    "@storybook/react": "^6.4.13",
+    "@storybook/addon-links": "^6.4.18",
+    "@storybook/addon-storysource": "^6.4.18",
+    "@storybook/addons": "^6.4.18",
+    "@storybook/react": "^6.4.18",
     "@types/faker": "^6.6.8",
-    "@types/react": "^17.0.38",
+    "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
     "@types/react-table": "^7.7.9",
     "babel-loader": "^8.2.3",
@@ -82,7 +85,9 @@
     "react-is": "^17.0.2",
     "react-table": "^7.7.0",
     "size-limit": "^7.0.5",
+    "storybook-addon-paddings": "^4.2.1",
     "storybook-addon-performance": "^0.16.1",
+    "storybook-dark-mode": "^1.0.8",
     "tsdx": "^0.14.1",
     "tslib": "^2.3.1",
     "typescript": "^4.5.5"
@@ -91,7 +96,7 @@
     "@emotion/react": ">=11",
     "@mui/icons-material": ">=5",
     "@mui/material": ">=5",
-    "react": ">=17",
+    "react": ">=16.8",
     "react-table": ">=7"
   }
 }

package/src/@types/faker.d.ts

@@ -0,0 +1,4 @@
+declare module '@faker-js/faker' {
+  import faker from 'faker';
+  export default faker;
+}

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

@@ -0,0 +1,131 @@
+import { ChangeEvent, ReactNode } from 'react';
+import { TableCellProps, TextFieldProps } from '@mui/material';
+import {
+  UseColumnOrderInstanceProps,
+  UseColumnOrderState,
+  UseExpandedHooks,
+  UseExpandedInstanceProps,
+  UseExpandedOptions,
+  UseExpandedRowProps,
+  UseExpandedState,
+  UseFiltersColumnOptions,
+  UseFiltersColumnProps,
+  UseFiltersInstanceProps,
+  UseFiltersOptions,
+  UseFiltersState,
+  UseGlobalFiltersColumnOptions,
+  UseGlobalFiltersInstanceProps,
+  UseGlobalFiltersOptions,
+  UseGlobalFiltersState,
+  UseGroupByCellProps,
+  UseGroupByColumnOptions,
+  UseGroupByColumnProps,
+  UseGroupByHooks,
+  UseGroupByInstanceProps,
+  UseGroupByOptions,
+  UseGroupByRowProps,
+  UseGroupByState,
+  UsePaginationInstanceProps,
+  UsePaginationOptions,
+  UsePaginationState,
+  UseResizeColumnsColumnOptions,
+  UseResizeColumnsColumnProps,
+  UseResizeColumnsOptions,
+  UseResizeColumnsState,
+  UseRowSelectHooks,
+  UseRowSelectInstanceProps,
+  UseRowSelectOptions,
+  UseRowSelectRowProps,
+  UseRowSelectState,
+  UseRowStateCellProps,
+  UseRowStateInstanceProps,
+  UseRowStateOptions,
+  UseRowStateRowProps,
+  UseRowStateState,
+  UseSortByColumnOptions,
+  UseSortByColumnProps,
+  UseSortByHooks,
+  UseSortByInstanceProps,
+  UseSortByOptions,
+  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;
+  };
+
+declare module 'react-table' {
+  export interface TableOptions<D extends Record<string, unknown>>
+    extends UseExpandedOptions<D>,
+      UseFiltersOptions<D>,
+      UseGlobalFiltersOptions<D>,
+      UseGroupByOptions<D>,
+      UsePaginationOptions<D>,
+      UseResizeColumnsOptions<D>,
+      UseRowSelectOptions<D>,
+      UseRowStateOptions<D>,
+      UseSortByOptions<D>,
+      Record<string, any> {}
+
+  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>,
+      UseExpandedInstanceProps<D>,
+      UseFiltersInstanceProps<D>,
+      UseGlobalFiltersInstanceProps<D>,
+      UseGroupByInstanceProps<D>,
+      UsePaginationInstanceProps<D>,
+      UseRowSelectInstanceProps<D>,
+      UseRowStateInstanceProps<D>,
+      UseSortByInstanceProps<D> {}
+
+  export interface TableState<D extends Record<string, unknown> = Record<string, unknown>>
+    extends UseColumnOrderState<D>,
+      UseExpandedState<D>,
+      UseFiltersState<D>,
+      UseGlobalFiltersState<D>,
+      UseGroupByState<D>,
+      UsePaginationState<D>,
+      UseResizeColumnsState<D>,
+      UseRowSelectState<D>,
+      UseRowStateState<D>,
+      UseSortByState<D> {}
+
+  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>,
+      UseGroupByColumnProps<D>,
+      UseResizeColumnsColumnProps<D>,
+      UseSortByColumnProps<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>,
+      UseGroupByRowProps<D>,
+      UseRowSelectRowProps<D>,
+      UseRowStateRowProps<D> {}
+}

package/src/MaterialReactTable.tsx

@@ -7,131 +7,122 @@ import {
   TableHeadProps,
   TablePaginationProps,
   TableProps,
+  TableRowProps,
   TextFieldProps,
   ToolbarProps,
-  TypographyProps,
 } from '@mui/material';
 import {
   Cell,
+  Column,
   HeaderGroup,
   Row,
   TableInstance,
   TableOptions,
+  UseExpandedOptions,
+  UseFiltersOptions,
+  UseGlobalFiltersOptions,
+  UseGroupByOptions,
+  UsePaginationOptions,
+  UseResizeColumnsOptions,
+  UseRowSelectOptions,
+  UseRowStateOptions,
+  UseSortByOptions,
+  UseTableOptions,
 } from 'react-table';
 import { MaterialReactTableProvider } from './useMaterialReactTable';
 import { MRT_TableContainer } from './table/MRT_TableContainer';
 import { defaultLocalization, MRT_Localization } from './utils/localization';
+import { MRT_ColumnInterface } from './@types/react-table-config';
 
-export interface MaterialReactTableProps<D extends {} = {}>
-  extends TableOptions<D> {
-  enableColumnActions?: boolean;
-  enableColumnGrouping?: boolean;
-  enableColumnHiding?: boolean;
-  enableColumnReordering?: boolean;
-  enableColumnResizing?: boolean;
-  enableExpandAll?: boolean;
-  enableFiltering?: boolean;
-  enablePagination?: boolean;
-  enableSearch?: boolean;
-  enableSelectAll?: boolean;
-  enableSelection?: boolean;
-  enableSorting?: boolean;
-  enableSubRowTree?: boolean;
-  isFetching?: boolean;
-  isLoading?: boolean;
-  localization?: Partial<MRT_Localization>;
-  onCellClick?: (
-    event: MouseEvent<HTMLTableCellElement>,
-    cell: Cell<D>,
-  ) => void;
-  onRowClick?: (event: MouseEvent<HTMLTableRowElement>, row: Row<D>) => void;
-  onRowExpandChange?: (
-    event: MouseEvent<HTMLButtonElement>,
-    row: Row<D>,
-  ) => void;
-  onRowSelectChange?: (
-    event: ChangeEvent,
-    row: Row<D>,
-    selectedRows: Row<D>[],
-  ) => void;
-  onSearchChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-  overrideTableBodyCellComponent?(
-    cell: Cell<D>,
-    tableInstance: TableInstance<D>,
-  ): ReactNode;
-  overrideTableBodyComponent?(tableInstance: TableInstance<D>): ReactNode;
-  overrideTableBodyRowComponent?(
-    row: Row<D>,
-    tableInstance: TableInstance<D>,
-  ): ReactNode;
-  overrideTableDetailPanelComponent?(
-    row: Row<D>,
-    tableInstance: TableInstance<D>,
-  ): ReactNode;
-  overrideTableFooterCellComponent?(
-    column: HeaderGroup<D>,
-    tableInstance: TableInstance<D>,
-  ): ReactNode;
-  overrideTableFooterComponent?(tableInstance: TableInstance<D>): ReactNode;
-  overrideTableFooterRowComponent?(
-    footerGroup: HeaderGroup<D>,
-    tableInstance: TableInstance<D>,
-  ): ReactNode;
-  overrideTableHeadCellComponent?(
-    column: HeaderGroup<D>,
-    tableInstance: TableInstance<D>,
-  ): ReactNode;
-  overrideTableHeadComponent?(tableInstance: TableInstance<D>): ReactNode;
-  overrideTableHeadRowComponent?(
-    headerGroup: HeaderGroup<D>,
-    tableInstance: TableInstance<D>,
-  ): ReactNode;
-  overrideTablePaginationComponent?(tableInstance: TableInstance<D>): ReactNode;
-  overrideTableToolbarComponent?(tableInstance: TableInstance<D>): ReactNode;
-  positionPagination?: 'bottom' | 'top' | 'both';
-  renderDetailPanel?: (rowData: Row<D>) => ReactNode;
-  showFiltersInColumnHead?: boolean;
-  showFooter?: boolean;
-  showHead?: boolean;
-  showToolbar?: boolean;
-  surpressoverrideWarnings?: boolean;
-  tableBodyProps?: TableBodyProps;
-  tableContainerProps?: TableContainerProps;
-  tableDetailPanelProps?: TableCellProps;
-  tableFooterProps?: TableFooterProps;
-  tableHeadProps?: TableHeadProps;
-  tablePaginationProps?: TablePaginationProps;
-  tableProps?: TableProps;
-  tableSearchTextfieldProps?: TextFieldProps;
-  tableTitleProps?: TypographyProps;
-  tableToolbarProps?: ToolbarProps;
-  title?: string | ReactNode;
-}
+export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
+  UseTableOptions<D> &
+  UseExpandedOptions<D> &
+  UseFiltersOptions<D> &
+  UseGlobalFiltersOptions<D> &
+  UseGroupByOptions<D> &
+  UsePaginationOptions<D> &
+  UseResizeColumnsOptions<D> &
+  UseRowSelectOptions<D> &
+  UseRowStateOptions<D> &
+  UseSortByOptions<D> & {
+    columns: (Column<D> & MRT_ColumnInterface)[];
+    defaultDensePadding?: boolean;
+    defaultShowFilters?: boolean;
+    defaultShowSearchTextField?: boolean;
+    disableColumnActions?: boolean;
+    disableColumnHiding?: boolean;
+    disableDensePaddingToggle?: boolean;
+    disableExpandAll?: boolean;
+    disableSelectAll?: boolean;
+    disableSubRowTree?: boolean;
+    enableColumnGrouping?: boolean;
+    enableColumnResizing?: boolean;
+    enableRowActions?: boolean;
+    enableRowEditing?: boolean;
+    enableSelection?: boolean;
+    hideTableFooter?: boolean;
+    hideTableHead?: boolean;
+    hideToolbarActions?: boolean;
+    hideToolbarBottom?: boolean;
+    hideToolbarTop?: boolean;
+    isFetching?: boolean;
+    isLoading?: boolean;
+    localization?: Partial<MRT_Localization>;
+    muiSearchTextFieldProps?: TextFieldProps;
+    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);
+    muiTableFooterProps?: TableFooterProps;
+    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);
+    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;
+    onColumnHide?: (column: Column<D>, visibleColumns: Column<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;
+    positionActionsColumn?: 'first' | 'last';
+    positionPagination?: 'bottom' | 'top' | 'both';
+    positionToolbarActions?: '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;
+  };
 
-export const MaterialReactTable = <D extends {}>({
+export default <D extends {}>({
   defaultColumn = { minWidth: 50, maxWidth: 1000 },
-  enablePagination = true,
-  enableSorting = true,
-  enableSubRowTree = true,
   localization = defaultLocalization,
+  positionActionsColumn = 'first',
   positionPagination = 'bottom',
-  showFiltersInColumnHead = true,
-  showFooter = true,
-  showHead = true,
-  showToolbar = true,
+  positionToolbarActions = 'top',
   ...rest
 }: MaterialReactTableProps<D>) => (
   <MaterialReactTableProvider
     defaultColumn={defaultColumn}
-    enablePagination={enablePagination}
-    enableSorting={enableSorting}
-    enableSubRowTree={enableSubRowTree}
     localization={{ ...defaultLocalization, ...localization }}
     positionPagination={positionPagination}
-    showFiltersInColumnHead={showFiltersInColumnHead}
-    showFooter={showFooter}
-    showHead={showHead}
-    showToolbar={showToolbar}
+    positionActionsColumn={positionActionsColumn}
+    positionToolbarActions={positionToolbarActions}
     {...rest}
   >
     <MRT_TableContainer />