material-react-table 0.4.3 → 0.4.4

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.4.3",
+  "version": "0.4.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.",

package/src/MaterialReactTable.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, MouseEvent, ReactNode } from 'react';
+import React, { ChangeEvent, FC, MouseEvent, ReactNode } from 'react';
 import {
   AlertProps,
   TableBodyProps,
@@ -66,7 +66,7 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
     enableSelection?: boolean;
     hideTableFooter?: boolean;
     hideTableHead?: boolean;
-    hideToolbarActions?: boolean;
+    hideToolbarInternalActions?: boolean;
     hideToolbarBottom?: boolean;
     hideToolbarTop?: boolean;
     isFetching?: boolean;
@@ -153,6 +153,22 @@ export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
       tableInstance: TableInstance<D>,
     ) => ReactNode;
     renderToolbarCustomActions?: (tableInstance: TableInstance<D>) => ReactNode;
+    renderToolbarInternalActions?: (
+      tableInstance: TableInstance<D>,
+      {
+        MRT_ToggleSearchButton,
+        MRT_ToggleFiltersButton,
+        MRT_ShowHideColumnsButton,
+        MRT_ToggleDensePaddingButton,
+        MRT_FullScreenToggleButton,
+      }: {
+        MRT_ToggleSearchButton: FC;
+        MRT_ToggleFiltersButton: FC;
+        MRT_ShowHideColumnsButton: FC;
+        MRT_ToggleDensePaddingButton: FC;
+        MRT_FullScreenToggleButton: FC;
+      },
+    ) => ReactNode;
   };
 
 export default <D extends {}>({

package/src/inputs/MRT_DensePaddingSwitch.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from 'react';
+import { Switch, Tooltip } from '@mui/material';
+import { useMRT } from '../useMRT';
+
+interface Props {}
+
+export const MRT_DensePaddingSwitch: FC<Props> = () => {
+  const { densePadding, setDensePadding, localization } = useMRT();
+
+  return (
+    <Tooltip arrow title={localization?.toggleDensePaddingSwitchTitle ?? ''}>
+      <Switch
+        inputProps={{
+          'aria-label': localization?.toggleDensePaddingSwitchTitle ?? '',
+        }}
+        color="default"
+        checked={densePadding}
+        size="small"
+        onChange={() => setDensePadding(!densePadding)}
+      />
+    </Tooltip>
+  );
+};

package/src/table/MRT_TableContainer.tsx

@@ -14,12 +14,12 @@ import { MRT_ToolbarBottom } from '../toolbar/MRT_ToolbarBottom';
 
 const TableContainer = styled(MuiTableContainer, {
   shouldForwardProp: (prop) => prop !== 'fullScreen',
-})<{ fullScreen?: boolean, component: any }>(({ fullScreen }) => ({
+})<{ fullScreen?: boolean; component: any }>(({ fullScreen }) => ({
   bottom: fullScreen ? '0' : undefined,
   height: fullScreen ? '100%' : undefined,
   left: fullScreen ? '0' : undefined,
   margin: fullScreen ? '0' : undefined,
-  position: fullScreen ? 'absolute' : undefined,
+  position: fullScreen ? 'fixed' : undefined,
   right: fullScreen ? '0' : undefined,
   top: fullScreen ? '0' : undefined,
   transition: 'all 0.2s ease-in-out',
@@ -52,7 +52,7 @@ export const MRT_TableContainer: FC<Props> = () => {
   } = useMRT();
 
   useEffect(() => {
-    if(fullScreen) {
+    if (fullScreen) {
       document.body.style.overflow = 'hidden';
     } else {
       document.body.style.overflow = 'auto';

package/src/toolbar/MRT_ToolbarBottom.tsx

@@ -27,7 +27,7 @@ interface Props {}
 
 export const MRT_ToolbarBottom: FC<Props> = () => {
   const {
-    hideToolbarActions,
+    hideToolbarInternalActions,
     manualPagination,
     muiTableToolbarBottomProps,
     positionPagination,
@@ -44,7 +44,7 @@ export const MRT_ToolbarBottom: FC<Props> = () => {
 
   return (
     <Toolbar fullScreen={fullScreen} variant="dense" {...toolbarProps}>
-      {!hideToolbarActions && positionToolbarActions === 'bottom' ? (
+      {!hideToolbarInternalActions && positionToolbarActions === 'bottom' ? (
         <MRT_ToolbarInternalButtons />
       ) : (
         <span />

package/src/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -22,8 +22,24 @@ export const MRT_ToolbarInternalButtons: FC<Props> = () => {
     disableDensePaddingToggle,
     disableGlobalFilter,
     disableFullScreenToggle,
+    renderToolbarInternalActions,
+    tableInstance,
   } = useMRT();
 
+  if (renderToolbarInternalActions) {
+    return (
+      <>
+        {renderToolbarInternalActions(tableInstance, {
+          MRT_ToggleSearchButton,
+          MRT_ToggleFiltersButton,
+          MRT_ShowHideColumnsButton,
+          MRT_ToggleDensePaddingButton,
+          MRT_FullScreenToggleButton,
+        })}
+      </>
+    );
+  }
+
   return (
     <ToolbarButtonsContainer>
       {!disableGlobalFilter && <MRT_ToggleSearchButton />}

package/src/toolbar/MRT_ToolbarTop.tsx

@@ -40,7 +40,7 @@ interface Props {}
 export const MRT_ToolbarTop: FC<Props> = () => {
   const {
     disableGlobalFilter,
-    hideToolbarActions,
+    hideToolbarInternalActions,
     manualPagination,
     muiTableToolbarTopProps,
     positionPagination,
@@ -63,7 +63,7 @@ export const MRT_ToolbarTop: FC<Props> = () => {
         {renderToolbarCustomActions?.(tableInstance) ?? <span />}
         <ToolbarActionsContainer>
           {!disableGlobalFilter && <MRT_SearchTextField />}
-          {!hideToolbarActions && positionToolbarActions === 'top' && (
+          {!hideToolbarInternalActions && positionToolbarActions === 'top' && (
             <MRT_ToolbarInternalButtons />
           )}
         </ToolbarActionsContainer>