material-react-table 0.4.7 → 0.5.0

package/src/toolbar/MRT_ToolbarBottom.tsx

@@ -1,28 +1,10 @@
 import React, { FC } from 'react';
-import { alpha, styled, Toolbar as MuiToolbar } from '@mui/material';
+import { alpha, Toolbar } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_TablePagination } from './MRT_TablePagination';
 import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
 import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
 
-const Toolbar = styled(MuiToolbar, {
-  shouldForwardProp: (prop) => prop !== 'fullScreen',
-})<{ fullScreen?: boolean }>(({ fullScreen, theme }) => ({
-  backgroundColor: theme.palette.background.default,
-  backgroundImage: `linear-gradient(${alpha(
-    theme.palette.common.white,
-    0.05,
-  )},${alpha(theme.palette.common.white, 0.05)})`,
-  bottom: fullScreen ? '0' : undefined,
-  display: 'flex',
-  justifyContent: 'space-between',
-  overflowY: 'hidden',
-  padding: '0 0.5rem !important',
-  position: fullScreen ? 'fixed' : undefined,
-  width: 'calc(100% - 1rem)',
-  zIndex: 1,
-}));
-
 interface Props {}
 
 export const MRT_ToolbarBottom: FC<Props> = () => {
@@ -43,7 +25,28 @@ export const MRT_ToolbarBottom: FC<Props> = () => {
       : muiTableToolbarBottomProps;
 
   return (
-    <Toolbar fullScreen={fullScreen} variant="dense" {...toolbarProps}>
+    <Toolbar
+      variant="dense"
+      {...toolbarProps}
+      sx={(theme) =>
+        ({
+          backgroundColor: theme.palette.background.default,
+          backgroundImage: `linear-gradient(${alpha(
+            theme.palette.common.white,
+            0.05,
+          )},${alpha(theme.palette.common.white, 0.05)})`,
+          bottom: fullScreen ? '0' : undefined,
+          display: 'flex',
+          justifyContent: 'space-between',
+          overflowY: 'hidden',
+          p: '0 0.5rem !important',
+          position: fullScreen ? 'fixed' : undefined,
+          width: 'calc(100% - 1rem)',
+          zIndex: 1,
+          ...toolbarProps?.sx,
+        } as any)
+      }
+    >
       {!hideToolbarInternalActions && positionToolbarActions === 'bottom' ? (
         <MRT_ToolbarInternalButtons />
       ) : (

package/src/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -1,17 +1,11 @@
 import React, { FC } from 'react';
-import { styled } from '@mui/material';
-import { MRT_ToggleFiltersButton } from '../buttons/MRT_ToggleFiltersButton';
+import { Box } from '@mui/material';
+import { MRT_FullScreenToggleButton } from '../buttons/MRT_FullScreenToggleButton';
 import { MRT_ShowHideColumnsButton } from '../buttons/MRT_ShowHideColumnsButton';
-import { useMRT } from '../useMRT';
 import { MRT_ToggleDensePaddingButton } from '../buttons/MRT_ToggleDensePaddingButton';
+import { MRT_ToggleFiltersButton } from '../buttons/MRT_ToggleFiltersButton';
 import { MRT_ToggleSearchButton } from '../buttons/MRT_ToggleSearchButton';
-import { MRT_FullScreenToggleButton } from '../buttons/MRT_FullScreenToggleButton';
-
-const ToolbarButtonsContainer = styled('div')({
-  display: 'flex',
-  gap: '0.5rem',
-  alignItems: 'center',
-});
+import { useMRT } from '../useMRT';
 
 interface Props {}
 
@@ -41,12 +35,19 @@ export const MRT_ToolbarInternalButtons: FC<Props> = () => {
   }
 
   return (
-    <ToolbarButtonsContainer>
+    <Box
+      sx={{
+        display: 'flex',
+        gap: '0.5rem',
+        alignItems: 'center',
+        p: '0 0.5rem',
+      }}
+    >
       {!disableGlobalFilter && <MRT_ToggleSearchButton />}
       {!disableFilters && <MRT_ToggleFiltersButton />}
       {!disableColumnHiding && <MRT_ShowHideColumnsButton />}
       {!disableDensePaddingToggle && <MRT_ToggleDensePaddingButton />}
       {!disableFullScreenToggle && <MRT_FullScreenToggleButton />}
-    </ToolbarButtonsContainer>
+    </Box>
   );
 };

package/src/toolbar/MRT_ToolbarTop.tsx

@@ -1,40 +1,11 @@
 import React, { FC } from 'react';
-import { alpha, styled, Toolbar as MuiToolbar } from '@mui/material';
+import { alpha, Box, Toolbar } from '@mui/material';
 import { MRT_SearchTextField } from '../inputs/MRT_SearchTextField';
 import { useMRT } from '../useMRT';
 import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
 import { MRT_TablePagination } from './MRT_TablePagination';
 import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
 
-const Toolbar = styled(MuiToolbar, {
-  shouldForwardProp: (prop) => prop !== 'fullScreen',
-})<{ fullScreen?: boolean }>(({ fullScreen, theme }) => ({
-  backgroundColor: theme.palette.background.default,
-  backgroundImage: `linear-gradient(${alpha(
-    theme.palette.common.white,
-    0.05,
-  )},${alpha(theme.palette.common.white, 0.05)})`,
-  display: 'grid',
-  padding: '0 0.5rem !important',
-  position: fullScreen ? 'sticky' : undefined,
-  top: fullScreen ? '0' : undefined,
-  width: 'calc(100% - 1rem)',
-  zIndex: 1,
-}));
-
-const ToolbarTopRow = styled('div')({
-  padding: '0.5rem',
-  display: 'flex',
-  justifyContent: 'space-between',
-});
-
-const ToolbarActionsContainer = styled('div')({
-  display: 'flex',
-  gap: '0.5rem',
-  position: 'relative',
-  zIndex: 3,
-});
-
 interface Props {}
 
 export const MRT_ToolbarTop: FC<Props> = () => {
@@ -57,17 +28,49 @@ export const MRT_ToolbarTop: FC<Props> = () => {
       : muiTableToolbarTopProps;
 
   return (
-    <Toolbar fullScreen={fullScreen} variant="dense" {...toolbarProps}>
+    <Toolbar
+      variant="dense"
+      {...toolbarProps}
+      sx={(theme) =>
+        ({
+          backgroundColor: theme.palette.background.default,
+          backgroundImage: `linear-gradient(${alpha(
+            theme.palette.common.white,
+            0.05,
+          )},${alpha(theme.palette.common.white, 0.05)})`,
+          display: 'grid',
+          p: '0 !important',
+          position: fullScreen ? 'sticky' : undefined,
+          top: fullScreen ? '0' : undefined,
+          width: '100%',
+          zIndex: 1,
+          ...toolbarProps?.sx,
+        } as any)
+      }
+    >
       {positionToolbarAlertBanner === 'top' && <MRT_ToolbarAlertBanner />}
-      <ToolbarTopRow>
+      <Box
+        sx={{
+          p: '0.5rem',
+          display: 'flex',
+          justifyContent: 'space-between',
+        }}
+      >
         {renderToolbarCustomActions?.(tableInstance) ?? <span />}
-        <ToolbarActionsContainer>
+        <Box
+          sx={{
+            display: 'flex',
+            gap: '0.5rem',
+            position: 'relative',
+            zIndex: 3,
+          }}
+        >
           {!disableGlobalFilter && <MRT_SearchTextField />}
           {!hideToolbarInternalActions && positionToolbarActions === 'top' && (
             <MRT_ToolbarInternalButtons />
           )}
-        </ToolbarActionsContainer>
-      </ToolbarTopRow>
+        </Box>
+      </Box>
       <div>
         {!manualPagination &&
           ['top', 'both'].includes(positionPagination ?? '') && (

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

package/dist/table/MRT_TableButtonCell.d.ts

@@ -1,3 +0,0 @@
-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/src/table/MRT_TableButtonCell.tsx

@@ -1,9 +0,0 @@
-import { styled, TableCell as MuiTableCell } from '@mui/material';
-
-export const MRT_TableButtonCell = styled(MuiTableCell, {
-  shouldForwardProp: (prop) => prop !== 'densePadding',
-})<{ densePadding?: boolean }>(({ densePadding }) => ({
-  padding: densePadding ? '1px' : '0.6rem',
-  textAlign: 'center',
-  transition: 'all 0.2s ease-in-out',
-}));