material-react-table 0.4.7 → 0.4.8

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 }) => {

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;
 }
 

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/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);