material-react-table 0.7.5 → 0.7.6

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.5",
+  "version": "0.7.6",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI implementation of react-table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",
@@ -61,7 +61,7 @@
     "@etchteam/storybook-addon-status": "^4.2.1",
     "@faker-js/faker": "^6.2.0",
     "@mui/icons-material": "^5.6.2",
-    "@mui/material": "^5.6.2",
+    "@mui/material": "^5.6.3",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-a11y": "^6.4.22",
     "@storybook/addon-actions": "^6.4.22",
@@ -97,7 +97,7 @@
     "react": ">=16.8"
   },
   "dependencies": {
-    "@tanstack/react-table": "^8.0.0-alpha.47",
+    "@tanstack/react-table": "^8.0.0-alpha.48",
     "match-sorter": "^6.3.1"
   }
 }

package/src/buttons/MRT_ColumnPinningButtons.tsx

@@ -0,0 +1,69 @@
+import React, { FC } from 'react';
+import { Box, IconButton, Tooltip } from '@mui/material';
+import type { MRT_Column, MRT_TableInstance } from '..';
+
+interface Props {
+  column: MRT_Column;
+  tableInstance: MRT_TableInstance;
+}
+
+export const MRT_ColumnPinningButtons: FC<Props> = ({
+  column,
+  tableInstance,
+}) => {
+  const {
+    getState,
+    options: {
+      icons: { PushPinIcon },
+      localization,
+    },
+  } = tableInstance;
+
+  const { columnOrder } = getState();
+
+  const handlePinColumn = (pinDirection: 'left' | 'right' | false) => {
+    column.pin(pinDirection);
+    if (column.columnDefType === 'display') {
+      tableInstance.setColumnOrder([column.id, ...columnOrder]);
+    }
+  };
+
+  const pinned = column.getIsPinned();
+
+  return (
+    <Box sx={{ mr: '8px' }}>
+      <Tooltip
+        arrow
+        title={pinned === 'left' ? localization.unpin : localization.pinToLeft}
+      >
+        <IconButton
+          onClick={() => handlePinColumn(pinned === 'left' ? false : 'left')}
+          size="small"
+        >
+          <PushPinIcon
+            style={{
+              transform: pinned === 'left' ? 'rotate(0)' : 'rotate(90deg)',
+            }}
+          />
+        </IconButton>
+      </Tooltip>
+      <Tooltip
+        arrow
+        title={
+          pinned === 'right' ? localization.unpin : localization.pinToRight
+        }
+      >
+        <IconButton
+          onClick={() => handlePinColumn(pinned === 'right' ? false : 'right')}
+          size="small"
+        >
+          <PushPinIcon
+            style={{
+              transform: pinned === 'right' ? 'rotate(0)' : 'rotate(-90deg)',
+            }}
+          />
+        </IconButton>
+      </Tooltip>
+    </Box>
+  );
+};

package/src/localization.ts

@@ -56,6 +56,7 @@ export interface MRT_Localization {
   toggleSelectRow: string;
   ungroupByColumn: string;
   unpin: string;
+  unpinAll: string;
   unsorted: string;
 }
 
@@ -118,5 +119,6 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   toggleSelectRow: 'Toggle select row',
   ungroupByColumn: 'Ungroup by {column}',
   unpin: 'Unpin',
+  unpinAll: 'Unpin all',
   unsorted: 'Unsorted',
 };

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useMemo } from 'react';
 import { Button, Menu, Divider, Box } from '@mui/material';
 import { MRT_ShowHideColumnsMenuItems } from './MRT_ShowHideColumnsMenuItems';
-import { MRT_TableInstance } from '..';
+import { MRT_Column, MRT_TableInstance } from '..';
 
 interface Props {
   anchorEl: HTMLElement | null;
@@ -24,7 +24,7 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
     getState,
     toggleAllColumnsVisible,
     getAllLeafColumns,
-    options: { localization },
+    options: { localization, enablePinning },
   } = tableInstance;
 
   const { isDensePadding } = getState();
@@ -40,14 +40,16 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
     [getAllColumns()],
   );
 
-  const allDataColumns = useMemo(() => {
+  const allDataColumns: (MRT_Column | null)[] = useMemo(() => {
     const dataColumns = getAllColumns().filter(
       (col) => col.columnDefType !== 'display',
     );
     return getIsSomeColumnsPinned()
       ? [
           ...dataColumns.filter((c) => c.getIsPinned() === 'left'),
+          null,
           ...dataColumns.filter((c) => c.getIsPinned() === false),
+          null,
           ...dataColumns.filter((c) => c.getIsPinned() === 'right'),
         ]
       : dataColumns;
@@ -78,6 +80,14 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
             {localization.hideAll}
           </Button>
         )}
+        {!isSubMenu && enablePinning && (
+          <Button
+            disabled={!getIsSomeColumnsPinned()}
+            onClick={() => tableInstance.setColumnPinning({})}
+          >
+            {localization.unpinAll}
+          </Button>
+        )}
         <Button
           disabled={getIsAllColumnsVisible()}
           onClick={() => toggleAllColumnsVisible(true)}
@@ -95,14 +105,18 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
         />
       ))}
       <Divider />
-      {allDataColumns.map((column, index) => (
-        <MRT_ShowHideColumnsMenuItems
-          column={column}
-          isSubMenu={isSubMenu}
-          key={`${index}-${column.id}`}
-          tableInstance={tableInstance}
-        />
-      ))}
+      {allDataColumns.map((column, index) =>
+        column ? (
+          <MRT_ShowHideColumnsMenuItems
+            column={column}
+            isSubMenu={isSubMenu}
+            key={`${index}-${column.id}`}
+            tableInstance={tableInstance}
+          />
+        ) : (
+          <Divider key={`${index}-divider`} />
+        ),
+      )}
     </Menu>
   );
 };

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { FormControlLabel, MenuItem, Switch } from '@mui/material';
 import type { MRT_Column, MRT_TableInstance } from '..';
-import { commonMenuItemStyles } from './MRT_ColumnActionMenu';
+import { MRT_ColumnPinningButtons } from '../buttons/MRT_ColumnPinningButtons';
 
 interface Props {
   column: MRT_Column;
@@ -16,7 +16,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
 }) => {
   const {
     getState,
-    options: { onToggleColumnVisibility },
+    options: { onToggleColumnVisibility, enablePinning },
   } = tableInstance;
 
   const { columnVisibility } = getState();
@@ -44,8 +44,20 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
   return (
     <>
       <MenuItem
-        sx={{ ...commonMenuItemStyles, pl: `${(column.depth + 0.5) * 2}rem` }}
+        sx={{
+          alignItems: 'center',
+          justifyContent: 'flex-start',
+          my: 0,
+          pl: `${(column.depth + 0.5) * 2}rem`,
+          py: '6px',
+        }}
       >
+        {!isSubMenu && enablePinning && (
+          <MRT_ColumnPinningButtons
+            column={column}
+            tableInstance={tableInstance}
+          />
+        )}
         <FormControlLabel
           componentsProps={{ typography: { sx: { marginBottom: 0 } } }}
           checked={switchChecked}

package/src/table/MRT_Table.tsx

@@ -14,10 +14,10 @@ export const MRT_Table: FC<Props> = ({ pinned, tableInstance }) => {
   const {
     getTableProps,
     options: {
-      muiTableProps,
-      enableTableHead,
-      enableTableFooter,
       enableStickyHeader,
+      enableTableFooter,
+      enableTableHead,
+      muiTableProps,
     },
   } = tableInstance;
 

package/src/table/MRT_TableContainer.tsx

@@ -30,7 +30,6 @@ interface Props {
 export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
   const {
     getCenterTableWidth,
-    getIsSomeColumnsPinned,
     getLeftTableWidth,
     getRightTableWidth,
     getState,
@@ -42,7 +41,7 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
     },
   } = tableInstance;
 
-  const { isFullScreen, columnPinning } = getState();
+  const { isFullScreen } = getState();
 
   const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
 
@@ -67,6 +66,9 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
     setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
   });
 
+  const isSomeColumnsPinnedLeft = !!tableInstance.getLeftFlatHeaders().length;
+  const isSomeColumnsPinnedRight = !!tableInstance.getRightFlatHeaders().length;
+
   return (
     <TableContainer
       {...tableContainerProps}
@@ -84,7 +86,8 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
           : undefined,
       }}
     >
-      {enablePinning && getIsSomeColumnsPinned() ? (
+      {(enablePinning && isSomeColumnsPinnedLeft) ||
+      isSomeColumnsPinnedRight ? (
         <Box
           sx={{
             display: 'grid',
@@ -96,13 +99,20 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
               commonBoxStyles({
                 pinned: 'left',
                 theme,
-                visible: !!columnPinning.left?.length,
+                visible: isSomeColumnsPinnedLeft,
               })
             }
           >
             <MRT_Table pinned="left" tableInstance={tableInstance} />
           </Box>
-          <Box sx={(theme: Theme) => commonBoxStyles({ theme })}>
+          <Box
+            sx={(theme: Theme) =>
+              commonBoxStyles({
+                theme,
+                visible: !!tableInstance.getCenterFlatHeaders().length,
+              })
+            }
+          >
             <MRT_Table pinned="center" tableInstance={tableInstance} />
           </Box>
           <Box
@@ -110,7 +120,7 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
               commonBoxStyles({
                 pinned: 'right',
                 theme,
-                visible: !!columnPinning.right?.length,
+                visible: isSomeColumnsPinnedRight,
               })
             }
           >

package/src/table/MRT_TableRoot.tsx

@@ -1,19 +1,19 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import {
+  ColumnDef,
+  FilterFn,
   PaginationState,
   Table,
   createTable,
   functionalUpdate,
   getColumnFilteredRowModelSync,
+  getCoreRowModelSync,
   getExpandedRowModel,
   getGlobalFilteredRowModelSync,
   getGroupedRowModelSync,
   getPaginationRowModel,
   getSortedRowModelSync,
   useTableInstance,
-  getCoreRowModelSync,
-  ColumnDef,
-  FilterFn,
 } from '@tanstack/react-table';
 import {
   MRT_Cell,