material-react-table 1.0.0-beta.2 → 1.0.0-beta.3

package/dist/index.d.ts

@@ -517,7 +517,7 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     muiExpandAllButtonProps?: IconButtonProps | (({ table }: {
         table: MRT_TableInstance<TData>;
     }) => IconButtonProps);
-    muiExpandButtonProps?: IconButtonProps | (({ table, }: {
+    muiExpandButtonProps?: IconButtonProps | (({ row, table, }: {
         table: MRT_TableInstance<TData>;
         row: MRT_Row<TData>;
     }) => IconButtonProps);
@@ -553,9 +553,11 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => TableCellProps);
-    muiTableBodyCellSkeletonProps?: SkeletonProps | (({ table, cell, }: {
-        table: MRT_TableInstance<TData>;
+    muiTableBodyCellSkeletonProps?: SkeletonProps | (({ cell, column, row, table, }: {
         cell: MRT_Cell<TData>;
+        column: MRT_Column<TData>;
+        row: MRT_Row<TData>;
+        table: MRT_TableInstance<TData>;
     }) => SkeletonProps);
     muiTableBodyProps?: TableBodyProps | (({ table }: {
         table: MRT_TableInstance<TData>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.3",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",

package/src/MaterialReactTable.tsx

@@ -541,6 +541,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     muiExpandButtonProps?:
       | IconButtonProps
       | (({
+          row,
           table,
         }: {
           table: MRT_TableInstance<TData>;
@@ -612,11 +613,15 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     muiTableBodyCellSkeletonProps?:
       | SkeletonProps
       | (({
-          table,
           cell,
+          column,
+          row,
+          table,
         }: {
-          table: MRT_TableInstance<TData>;
           cell: MRT_Cell<TData>;
+          column: MRT_Column<TData>;
+          row: MRT_Row<TData>;
+          table: MRT_TableInstance<TData>;
         }) => SkeletonProps);
     muiTableBodyProps?:
       | TableBodyProps

package/src/body/MRT_TableBodyCell.tsx

@@ -82,6 +82,11 @@ export const MRT_TableBodyCell: FC<Props> = ({
     ...mcTableCellBodyProps,
   };
 
+  const skeletonProps =
+    muiTableBodyCellSkeletonProps instanceof Function
+      ? muiTableBodyCellSkeletonProps({ cell, column, row, table })
+      : muiTableBodyCellSkeletonProps;
+
   const isEditable =
     (enableEditing || columnDef.enableEditing) &&
     columnDef.enableEditing !== false;
@@ -140,7 +145,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
 
   const getTotalRight = () => {
     return (
-      (table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150
+      (table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 160
     );
   };
 
@@ -189,9 +194,9 @@ export const MRT_TableBodyCell: FC<Props> = ({
           ? alpha(lighten(theme.palette.background.default, 0.04), 0.95)
           : undefined,
         boxShadow: getIsLastLeftPinnedColumn()
-          ? `4px 0 4px -2px ${alpha(theme.palette.common.black, 0.1)}`
+          ? `-4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
           : getIsFirstRightPinnedColumn()
-          ? `-4px 0 4px -2px ${alpha(theme.palette.common.black, 0.1)}`
+          ? `4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
           : undefined,
         cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'text',
         left:
@@ -233,11 +238,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
         transition: 'all 0.2s ease-in-out',
         whiteSpace: density === 'compact' ? 'nowrap' : 'normal',
         zIndex:
-          draggingColumn?.id === column.id
-            ? 2
-            : column.getIsPinned()
-            ? 1
-            : undefined,
+          draggingColumn?.id === column.id ? 2 : column.getIsPinned() ? 1 : 0,
         '&:hover': {
           backgroundColor:
             enableHover &&
@@ -264,7 +265,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
             animation="wave"
             height={20}
             width={skeletonWidth}
-            {...muiTableBodyCellSkeletonProps}
+            {...skeletonProps}
           />
         ) : enableRowNumbers &&
           rowNumberMode === 'static' &&

package/src/body/MRT_TableBodyCellValue.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, memo } from 'react';
 import { MRT_Cell, MRT_TableInstance } from '..';
 
 interface Props {
@@ -6,7 +6,7 @@ interface Props {
   table: MRT_TableInstance;
 }
 
-export const MRT_TableBodyCellValue: FC<Props> = ({ cell, table }) => {
+const _MRT_TableBodyCellValue: FC<Props> = ({ cell, table }) => {
   const { column, row } = cell;
   const { columnDef } = column;
 
@@ -32,3 +32,8 @@ export const MRT_TableBodyCellValue: FC<Props> = ({ cell, table }) => {
     </>
   );
 };
+
+export const MRT_TableBodyCellValue = memo(
+  _MRT_TableBodyCellValue,
+  (prev, next) => prev.cell.getValue() === next.cell.getValue(),
+);

package/src/head/MRT_TableHeadCell.tsx

@@ -67,7 +67,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
 
   const getTotalRight = () => {
     return (
-      (table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 180
+      (table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 160
     );
   };
 
@@ -121,9 +121,9 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
             : 'inherit',
         backgroundImage: 'inherit',
         boxShadow: getIsLastLeftPinnedColumn()
-          ? `4px 0 4px -2px ${alpha(theme.palette.common.black, 0.1)}`
+          ? `-4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
           : getIsFirstRightPinnedColumn()
-          ? `-4px 0 4px -2px ${alpha(theme.palette.common.black, 0.1)}`
+          ? `4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
           : undefined,
         fontWeight: 'bold',
         left:

package/src/table/MRT_TableRoot.tsx

@@ -327,7 +327,9 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       >
         <MRT_TablePaper table={table as any} />
       </Dialog>
-      {!table.getState().isFullScreen && <MRT_TablePaper table={table as any} />}
+      {!table.getState().isFullScreen && (
+        <MRT_TablePaper table={table as any} />
+      )}
       {editingRow && props.editingMode === 'modal' && (
         <MRT_EditRowModal row={editingRow as any} table={table} open />
       )}