material-react-table 0.4.6 → 0.4.9

package/src/body/MRT_TableDetailPanel.tsx

@@ -5,8 +5,8 @@ import {
   TableCell as MuiTableCell,
   TableRow,
 } from '@mui/material';
-import { Row } from 'react-table';
 import { useMRT } from '../useMRT';
+import { MRT_Row } from '..';
 
 const TableCell = styled(MuiTableCell, {
   shouldForwardProp: (prop) => prop !== 'isExpanded',
@@ -18,16 +18,16 @@ const TableCell = styled(MuiTableCell, {
 }));
 
 interface Props {
-  row: Row;
+  row: MRT_Row;
 }
 
 export const MRT_TableDetailPanel: FC<Props> = ({ row }) => {
   const {
-    tableInstance,
-    renderDetailPanel,
-    muiTableDetailPanelProps,
     muiTableBodyRowProps,
+    muiTableDetailPanelProps,
     onDetailPanelClick,
+    renderDetailPanel,
+    tableInstance,
   } = useMRT();
 
   const mTableBodyRowProps =
@@ -37,27 +37,20 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row }) => {
 
   const tableRowProps = {
     ...mTableBodyRowProps,
-    ...row.getToggleRowExpandedProps(),
+    ...row.getRowProps(),
     style: {
-      ...row.getToggleRowExpandedProps().style,
+      ...row.getRowProps().style,
       ...(mTableBodyRowProps?.style ?? {}),
     },
   };
 
-  const mTableDetailPanelProps =
+  const tableCellProps =
     muiTableDetailPanelProps instanceof Function
       ? muiTableDetailPanelProps(row)
       : muiTableDetailPanelProps;
 
-  const tableCellProps = {
-    ...mTableDetailPanelProps,
-    style: {
-      ...(mTableDetailPanelProps?.style ?? {}),
-    },
-  };
-
   return (
-    <TableRow hover {...tableRowProps}>
+    <TableRow {...tableRowProps}>
       <TableCell
         colSpan={tableInstance.visibleColumns.length + 10}
         isExpanded={row.isExpanded}

package/src/buttons/MRT_EditActionButtons.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { IconButton, styled, Tooltip } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { Row } from 'react-table';
+import { MRT_Row } from '..';
 
 const EditActionButtonWrappers = styled('div')({
   display: 'flex',
@@ -9,7 +9,7 @@ const EditActionButtonWrappers = styled('div')({
 });
 
 interface Props {
-  row: Row;
+  row: MRT_Row;
 }
 
 export const MRT_EditActionButtons: FC<Props> = ({ row }) => {

package/src/buttons/MRT_ExpandButton.tsx

@@ -1,8 +1,8 @@
 import React, { FC } from 'react';
 import { IconButton, styled } from '@mui/material';
-import { Row } from 'react-table';
 import { useMRT } from '../useMRT';
 import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
+import { MRT_Row } from '..';
 
 const TableCell = styled(MRT_TableButtonCell, {
   shouldForwardProp: (prop) => prop !== 'depth',
@@ -12,7 +12,7 @@ const TableCell = styled(MRT_TableButtonCell, {
 }));
 
 interface Props {
-  row: Row;
+  row: MRT_Row;
 }
 
 export const MRT_ExpandButton: FC<Props> = ({ row }) => {

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -10,6 +10,7 @@ import {
 } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
+import { MRT_ColumnInstance } from '..';
 
 const MenuButtons = styled('div')({
   display: 'flex',
@@ -67,7 +68,7 @@ export const MRT_ShowHideColumnsButton: FC<Props> = ({ ...rest }) => {
           </Button>
         </MenuButtons>
         <Divider />
-        {tableInstance.columns.map((column, index) => (
+        {tableInstance.columns.map((column: MRT_ColumnInstance, index) => (
           <MRT_ShowHideColumnsMenu
             key={`${index}-${column.id}`}
             column={column}

package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx

@@ -2,7 +2,7 @@ import React, { FC, MouseEvent, useState } from 'react';
 import { IconButton as MuiIconButton, styled, Tooltip } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_ColumnActionMenu } from '../menus/MRT_ColumnActionMenu';
-import { HeaderGroup } from 'react-table';
+import { MRT_HeaderGroup } from '..';
 
 const IconButton = styled(MuiIconButton)({
   opacity: 0.5,
@@ -16,7 +16,7 @@ const IconButton = styled(MuiIconButton)({
 });
 
 interface Props {
-  column: HeaderGroup;
+  column: MRT_HeaderGroup;
 }
 
 export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({ column }) => {

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -1,10 +1,10 @@
 import React, { FC, MouseEvent, useState } from 'react';
 import { IconButton as MuiIconButton, styled, Tooltip } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { Row } from 'react-table';
 import { MRT_RowActionMenu } from '../menus/MRT_RowActionMenu';
 import { MRT_EditActionButtons } from './MRT_EditActionButtons';
 import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
+import { MRT_Row } from '..';
 
 const IconButton = styled(MuiIconButton)({
   opacity: 0.5,
@@ -18,7 +18,7 @@ const IconButton = styled(MuiIconButton)({
 });
 
 interface Props {
-  row: Row;
+  row: MRT_Row;
 }
 
 export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
@@ -26,7 +26,7 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
     currentEditingRow,
     densePadding,
     enableRowEditing,
-    icons: {EditIcon, MoreHorizIcon},
+    icons: { EditIcon, MoreHorizIcon },
     localization,
     renderRowActionMenuItems,
     renderRowActions,

package/src/footer/MRT_TableFooter.tsx

@@ -2,6 +2,7 @@ import React, { FC } from 'react';
 import { TableFooter } from '@mui/material';
 import { MRT_TableFooterRow } from './MRT_TableFooterRow';
 import { useMRT } from '../useMRT';
+import { MRT_HeaderGroup } from '..';
 
 interface Props {}
 
@@ -10,7 +11,7 @@ export const MRT_TableFooter: FC<Props> = () => {
 
   return (
     <TableFooter {...muiTableFooterProps}>
-      {tableInstance.footerGroups.map((footerGroup) => (
+      {tableInstance.footerGroups.map((footerGroup: MRT_HeaderGroup) => (
         <MRT_TableFooterRow
           key={footerGroup.getFooterGroupProps().key}
           footerGroup={footerGroup}

package/src/footer/MRT_TableFooterCell.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { styled, TableCell as MuiTableCell } from '@mui/material';
-import { HeaderGroup } from 'react-table';
 import { useMRT } from '../useMRT';
+import { MRT_HeaderGroup } from '..';
 
 const TableCell = styled(MuiTableCell, {
   shouldForwardProp: (prop) =>
@@ -16,7 +16,7 @@ const TableCell = styled(MuiTableCell, {
 );
 
 interface Props {
-  column: HeaderGroup;
+  column: MRT_HeaderGroup;
 }
 
 export const MRT_TableFooterCell: FC<Props> = ({ column }) => {

package/src/footer/MRT_TableFooterRow.tsx

@@ -1,12 +1,12 @@
 import React, { FC } from 'react';
 import { TableRow } from '@mui/material';
-import { HeaderGroup } from 'react-table';
 import { MRT_TableFooterCell } from './MRT_TableFooterCell';
 import { MRT_TableSpacerCell } from '../table/MRT_TableSpacerCell';
 import { useMRT } from '../useMRT';
+import { MRT_HeaderGroup } from '..';
 
 interface Props {
-  footerGroup: HeaderGroup;
+  footerGroup: MRT_HeaderGroup;
 }
 
 export const MRT_TableFooterRow: FC<Props> = ({ footerGroup }) => {
@@ -53,7 +53,7 @@ export const MRT_TableFooterRow: FC<Props> = ({ footerGroup }) => {
         />
       )}
       {enableSelection && <MRT_TableSpacerCell width="1rem" />}
-      {footerGroup.headers.map((column) => (
+      {footerGroup.headers.map((column: MRT_HeaderGroup) => (
         <MRT_TableFooterCell
           key={column.getFooterProps().key}
           column={column}

package/src/head/MRT_TableHead.tsx

@@ -2,6 +2,7 @@ import React, { FC } from 'react';
 import { TableHead } from '@mui/material';
 import { MRT_TableHeadRow } from './MRT_TableHeadRow';
 import { useMRT } from '../useMRT';
+import { MRT_HeaderGroup } from '..';
 
 interface Props {}
 
@@ -15,7 +16,7 @@ export const MRT_TableHead: FC<Props> = () => {
 
   return (
     <TableHead {...tableHeadProps}>
-      {tableInstance.headerGroups.map((headerGroup) => (
+      {tableInstance.headerGroups.map((headerGroup: MRT_HeaderGroup) => (
         <MRT_TableHeadRow
           key={headerGroup.getHeaderGroupProps().key}
           headerGroup={headerGroup}

package/src/head/MRT_TableHeadCell.tsx

@@ -7,10 +7,10 @@ import {
   Collapse,
   Tooltip,
 } from '@mui/material';
-import { HeaderGroup } from 'react-table';
 import { useMRT } from '../useMRT';
 import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
 import { MRT_ToggleColumnActionMenuButton } from '../buttons/MRT_ToggleColumnActionMenuButton';
+import { MRT_HeaderGroup } from '..';
 
 export const MRT_StyledTableHeadCell = styled(MuiTableCell, {
   shouldForwardProp: (prop) =>
@@ -52,7 +52,7 @@ const Divider = styled(MuiDivider)({
 });
 
 interface Props {
-  column: HeaderGroup;
+  column: MRT_HeaderGroup;
 }
 
 export const MRT_TableHeadCell: FC<Props> = ({ column }) => {

package/src/head/MRT_TableHeadRow.tsx

@@ -1,6 +1,5 @@
 import React, { FC, useMemo } from 'react';
 import { TableRow } from '@mui/material';
-import { HeaderGroup } from 'react-table';
 import {
   MRT_StyledTableHeadCell,
   MRT_TableHeadCell,
@@ -10,9 +9,10 @@ import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
 import { MRT_ExpandAllButton } from '../buttons/MRT_ExpandAllButton';
 import { MRT_TableSpacerCell } from '../table/MRT_TableSpacerCell';
 import { MRT_TableHeadCellActions } from './MRT_TableHeadCellActions';
+import { MRT_HeaderGroup } from '..';
 
 interface Props {
-  headerGroup: HeaderGroup;
+  headerGroup: MRT_HeaderGroup;
 }
 
 export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
@@ -81,7 +81,7 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
           <MRT_TableSpacerCell width="1rem" />
         )
       ) : null}
-      {headerGroup.headers.map((column: HeaderGroup) => (
+      {headerGroup.headers.map((column: MRT_HeaderGroup) => (
         <MRT_TableHeadCell key={column.getHeaderProps().key} column={column} />
       ))}
       {(enableRowActions || enableRowEditing) &&

package/src/index.tsx

@@ -1,3 +1,5 @@
 import MaterialReactTable from './MaterialReactTable';
 export default MaterialReactTable;
 export * from './MaterialReactTable';
+
+

package/src/inputs/MRT_EditCellTextField.tsx

@@ -1,10 +1,10 @@
 import React, { ChangeEvent, FC } from 'react';
 import { TextField } from '@mui/material';
-import { Cell } from 'react-table';
 import { useMRT } from '../useMRT';
+import { MRT_Cell } from '..';
 
 interface Props {
-  cell: Cell;
+  cell: MRT_Cell;
 }
 
 export const MRT_EditCellTextField: FC<Props> = ({ cell }) => {

package/src/inputs/MRT_FilterTextField.tsx

@@ -1,10 +1,11 @@
 import React, { ChangeEvent, FC, useState } from 'react';
 import { IconButton, InputAdornment, TextField, Tooltip } from '@mui/material';
-import { HeaderGroup, useAsyncDebounce } from 'react-table';
+import { useAsyncDebounce } from 'react-table';
 import { useMRT } from '../useMRT';
+import { MRT_HeaderGroup } from '..';
 
 interface Props {
-  column: HeaderGroup;
+  column: MRT_HeaderGroup;
 }
 
 export const MRT_FilterTextField: FC<Props> = ({ column }) => {

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -1,11 +1,11 @@
 import React, { ChangeEvent, FC } from 'react';
 import { Checkbox, Tooltip } from '@mui/material';
-import { Row } from 'react-table';
 import { useMRT } from '../useMRT';
 import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
+import { MRT_Row } from '..';
 
 interface Props {
-  row?: Row;
+  row?: MRT_Row;
   selectAll?: boolean;
 }
 
@@ -20,8 +20,8 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll }) => {
 
   const onSelectChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (selectAll) {
+      tableInstance?.getToggleAllRowsSelectedProps?.()?.onChange?.(event);
       onSelectAllChange?.(event, tableInstance.selectedFlatRows);
-      tableInstance.toggleAllRowsSelected(event.target.checked);
     } else if (row) {
       row?.getToggleRowSelectedProps()?.onChange?.(event);
       onRowSelectChange?.(event, row, tableInstance.selectedFlatRows);

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { Divider, Menu, MenuItem as MuiMenuItem, styled } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { HeaderGroup } from 'react-table';
+import { MRT_HeaderGroup } from '..';
 
 const MenuItem = styled(MuiMenuItem)({
   display: 'flex',
@@ -10,7 +10,7 @@ const MenuItem = styled(MuiMenuItem)({
 
 interface Props {
   anchorEl: HTMLElement | null;
-  column: HeaderGroup;
+  column: MRT_HeaderGroup;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
 }
 

package/src/menus/MRT_RowActionMenu.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { Menu, MenuItem as MuiMenuItem, styled } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { Row } from 'react-table';
+import { MRT_Row } from '..';
 
 const MenuItem = styled(MuiMenuItem)({
   display: 'flex',
@@ -10,7 +10,7 @@ const MenuItem = styled(MuiMenuItem)({
 
 interface Props {
   anchorEl: HTMLElement | null;
-  row: Row;
+  row: MRT_Row;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
   handleEdit: () => void;
 }

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -1,9 +1,10 @@
 import React, { FC } from 'react';
 import { FormControlLabel, MenuItem, Switch } from '@mui/material';
 import { ColumnInstance } from 'react-table';
+import { MRT_ColumnInstance } from '..';
 
 interface Props {
-  column: ColumnInstance;
+  column: MRT_ColumnInstance;
 }
 
 export const MRT_ShowHideColumnsMenu: FC<Props> = ({ column }) => {
@@ -35,7 +36,7 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({ column }) => {
           onChange={() => handleToggleColumnHidden(column)}
         />
       </MenuItem>
-      {column.columns?.map((c, i) => (
+      {column.columns?.map((c: MRT_ColumnInstance, i) => (
         <MRT_ShowHideColumnsMenu key={`${i}-${c.id}`} column={c} />
       ))}
     </>

package/src/table/MRT_TableContainer.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useEffect, useRef } from 'react';
 import {
   CircularProgress,
   LinearProgress,
@@ -50,6 +50,24 @@ export const MRT_TableContainer: FC<Props> = () => {
     muiTableContainerProps,
     tableInstance,
   } = useMRT();
+  const originalBodyOverflowStyle = useRef<string | undefined>();
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      originalBodyOverflowStyle.current = document?.body?.style?.overflow;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      if (fullScreen) {
+        document.body.style.overflow = 'hidden';
+      } else {
+        document.body.style.overflow =
+          originalBodyOverflowStyle.current ?? 'auto';
+      }
+    }
+  }, [fullScreen]);
 
   const tableContainerProps =
     muiTableContainerProps instanceof Function

package/src/useMRT.tsx

@@ -1,15 +1,13 @@
 import React, {
   Context,
-  createContext,
   PropsWithChildren,
+  createContext,
   useContext,
   useMemo,
   useState,
 } from 'react';
 import {
   PluginHook,
-  Row,
-  TableInstance,
   useExpanded,
   useFilters,
   useFlexLayout,
@@ -21,6 +19,7 @@ import {
   useSortBy,
   useTable,
 } from 'react-table';
+import { MRT_Row, MRT_TableInstance } from '.';
 import { MRT_Icons } from './icons';
 import { MRT_Localization } from './localization';
 import { MaterialReactTableProps } from './MaterialReactTable';
@@ -28,19 +27,19 @@ import { MaterialReactTableProps } from './MaterialReactTable';
 export type UseMRT<D extends {} = {}> = MaterialReactTableProps<D> & {
   anyRowsCanExpand: boolean;
   anyRowsExpanded: boolean;
-  currentEditingRow: Row<D> | null;
+  currentEditingRow: MRT_Row<D> | null;
   densePadding: boolean;
   fullScreen: boolean;
   icons: MRT_Icons;
   localization: MRT_Localization;
-  setCurrentEditingRow: (currentRowEditingId: Row<D> | null) => void;
+  setCurrentEditingRow: (currentRowEditingId: MRT_Row<D> | null) => void;
   setDensePadding: (densePadding: boolean) => void;
   setFullScreen: (fullScreen: boolean) => void;
   setShowFilters: (showFilters: boolean) => void;
   setShowSearch: (showSearch: boolean) => void;
   showFilters: boolean;
   showSearch: boolean;
-  tableInstance: TableInstance<D>;
+  tableInstance: MRT_TableInstance<D>;
 };
 
 const MaterialReactTableContext = (<D extends {}>() =>
@@ -62,28 +61,32 @@ export const MaterialReactTableProvider = <D extends {}>(
   if (props.enableColumnResizing)
     hooks.unshift(useResizeColumns, useFlexLayout);
 
-  const tableInstance = useTable<D>(props, ...hooks);
+  const tableInstance = useTable<D>(props, ...hooks) as MRT_TableInstance<D>;
 
   const anyRowsCanExpand = useMemo(
-    () => tableInstance.rows.some((row) => row.canExpand),
+    // @ts-ignore
+    () => tableInstance.rows.some((row: MRT_Row) => row.canExpand),
     [tableInstance.rows],
   );
   const anyRowsExpanded = useMemo(
-    () => tableInstance.rows.some((row) => row.isExpanded),
+    // @ts-ignore
+    () => tableInstance.rows.some((row: MRT_Row) => row.isExpanded),
     [tableInstance.rows],
   );
-  const [currentEditingRow, setCurrentEditingRow] = useState<Row | null>(null);
+  const [currentEditingRow, setCurrentEditingRow] = useState<MRT_Row | null>(
+    null,
+  );
   const [densePadding, setDensePadding] = useState(
-    props.defaultDensePadding ?? false,
+    props.initialState?.densePadding ?? false,
   );
   const [fullScreen, setFullScreen] = useState(
-    props.defaultFullScreen ?? false,
+    props.initialState?.fullScreen ?? false,
   );
   const [showFilters, setShowFilters] = useState(
-    props.defaultShowFilters ?? false,
+    props.initialState?.showFilters ?? false,
   );
   const [showSearch, setShowSearch] = useState(
-    props.defaultShowSearchTextField ?? false,
+    props.initialState?.showSearchTextField ?? false,
   );
 
   return (
@@ -112,5 +115,5 @@ export const MaterialReactTableProvider = <D extends {}>(
 };
 
 export const useMRT = <D extends {}>(): UseMRT<D> =>
-  //@ts-ignore
+  // @ts-ignore
   useContext<UseMRT<D>>(MaterialReactTableContext);