material-react-table 0.7.5 → 0.8.0-alpha.2

package/dist/table/MRT_Table.d.ts

@@ -1,7 +1,6 @@
 import { FC } from 'react';
 import { MRT_TableInstance } from '..';
 interface Props {
-    pinned: 'left' | 'center' | 'right' | 'none';
     tableInstance: MRT_TableInstance;
 }
 export declare const MRT_Table: FC<Props>;

package/dist/toolbar/MRT_ToolbarTop.d.ts

@@ -8,6 +8,7 @@ export declare const commonToolbarStyles: ({ theme }: {
     backgroundImage: string;
     display: string;
     p: string;
+    transition: string;
     width: string;
     zIndex: number;
 };

package/dist/utils.d.ts

@@ -7,6 +7,6 @@ export declare const createGroup: <D extends Record<string, any> = {}>(table: Ta
 export declare const createDataColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: MRT_ColumnDef<D>, currentFilterFns: {
     [key: string]: MRT_FilterFn<{}>;
 }) => ColumnDef<D>;
-export declare const createDisplayColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: Pick<MRT_ColumnDef<D>, "footer" | "columns" | "filterFn" | "id" | "accessorKey" | "accessorFn" | "cell" | "meta" | "enableHiding" | "defaultCanHide" | "defaultIsVisible" | "enablePinning" | "defaultCanPin" | "enableAllFilters" | "enableColumnFilter" | "enableGlobalFilter" | "defaultCanFilter" | "defaultCanColumnFilter" | "defaultCanGlobalFilter" | "sortingFn" | "sortDescFirst" | "enableSorting" | "enableMultiSort" | "defaultCanSort" | "invertSorting" | "sortUndefined" | "aggregationFn" | "aggregateValue" | "aggregatedCell" | "enableGrouping" | "defaultCanGroup" | "enableResizing" | "defaultCanResize" | "width" | "minWidth" | "maxWidth" | "Edit" | "Filter" | "Footer" | "Header" | "Cell" | "enableClickToCopy" | "enableColumnActions" | "enableEditing" | "enabledColumnFilterOptions" | "filterSelectOptions" | "muiTableBodyCellCopyButtonProps" | "muiTableBodyCellEditTextFieldProps" | "muiTableBodyCellProps" | "muiTableFooterCellProps" | "muiTableHeadCellColumnActionsButtonProps" | "muiTableHeadCellFilterTextFieldProps" | "muiTableHeadCellProps" | "onCellEditBlur" | "onCellEditChange" | "onColumnFilterValueChange"> & {
+export declare const createDisplayColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: Pick<MRT_ColumnDef<D>, "footer" | "columns" | "filterFn" | "id" | "accessorKey" | "accessorFn" | "cell" | "meta" | "enableHiding" | "enablePinning" | "enableColumnFilter" | "enableGlobalFilter" | "sortingFn" | "sortDescFirst" | "enableSorting" | "enableMultiSort" | "invertSorting" | "sortUndefined" | "aggregationFn" | "aggregatedCell" | "enableGrouping" | "enableResizing" | "size" | "minSize" | "maxSize" | "Edit" | "Filter" | "Footer" | "Header" | "Cell" | "enableClickToCopy" | "enableColumnActions" | "enableEditing" | "enabledColumnFilterOptions" | "filterSelectOptions" | "muiTableBodyCellCopyButtonProps" | "muiTableBodyCellEditTextFieldProps" | "muiTableBodyCellProps" | "muiTableFooterCellProps" | "muiTableHeadCellColumnActionsButtonProps" | "muiTableHeadCellFilterTextFieldProps" | "muiTableHeadCellProps" | "onCellEditBlur" | "onCellEditChange" | "onColumnFilterValueChange"> & {
     header?: string | undefined;
 }) => ColumnDef<D>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.5",
+  "version": "0.8.0-alpha.2",
   "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.",
@@ -55,39 +55,35 @@
     }
   ],
   "devDependencies": {
-    "@babel/core": "^7.17.9",
+    "@babel/core": "^7.18.2",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@etchteam/storybook-addon-status": "^4.2.1",
-    "@faker-js/faker": "^6.2.0",
-    "@mui/icons-material": "^5.6.2",
-    "@mui/material": "^5.6.2",
+    "@faker-js/faker": "^6.3.1",
+    "@mui/icons-material": "^5.8.0",
+    "@mui/material": "^5.8.1",
     "@size-limit/preset-small-lib": "^7.0.8",
-    "@storybook/addon-a11y": "^6.4.22",
-    "@storybook/addon-actions": "^6.4.22",
-    "@storybook/addon-console": "^1.2.3",
-    "@storybook/addon-essentials": "^6.4.22",
+    "@storybook/addon-a11y": "^6.5.5",
+    "@storybook/addon-actions": "^6.5.5",
+    "@storybook/addon-essentials": "^6.5.5",
     "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.4.22",
-    "@storybook/addon-storysource": "^6.4.22",
-    "@storybook/addons": "^6.4.22",
-    "@storybook/react": "^6.4.22",
-    "@types/react": "^17.0.41",
-    "@types/react-dom": "^17.0.14",
+    "@storybook/addon-links": "^6.5.5",
+    "@storybook/addons": "^6.5.5",
+    "@storybook/react": "^6.5.5",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.5",
     "babel-loader": "^8.2.5",
-    "eslint": "^8.14.0",
-    "eslint-plugin-react-hooks": "^4.4.0",
-    "husky": "^7.0.4",
+    "eslint": "^8.16.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
+    "husky": "^8.0.1",
     "prettier": "^2.6.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-is": "^17.0.2",
+    "react-is": "^18.1.0",
     "size-limit": "^7.0.8",
-    "storybook-addon-paddings": "^4.3.0",
-    "storybook-dark-mode": "^1.0.9",
+    "storybook-dark-mode": "^1.1.0",
     "tsdx": "^0.14.1",
     "tslib": "^2.4.0",
-    "typescript": "^4.6.3"
+    "typescript": "^4.7.2"
   },
   "peerDependencies": {
     "@emotion/react": ">=11",
@@ -97,7 +93,7 @@
     "react": ">=16.8"
   },
   "dependencies": {
-    "@tanstack/react-table": "^8.0.0-alpha.47",
-    "match-sorter": "^6.3.1"
+    "@tanstack/match-sorter-utils": "^8.0.0-alpha.83",
+    "@tanstack/react-table": "^8.0.0-beta.2"
   }
 }

package/src/MaterialReactTable.tsx

@@ -30,17 +30,18 @@ import {
   Cell,
   Column,
   ColumnDef,
-  DefaultGenerics,
   FilterFn,
   FilterFnOption,
   Header,
   HeaderGroup,
-  Options,
   Overwrite,
   PaginationState,
+  ReactTableGenerics,
   Row,
+  TableGenerics,
   TableInstance,
   TableState,
+  UseTableInstanceOptions,
   VisibilityState,
 } from '@tanstack/react-table';
 import { MRT_Localization, MRT_DefaultLocalization_EN } from './localization';
@@ -50,7 +51,7 @@ import { MRT_TableRoot } from './table/MRT_TableRoot';
 
 export type MRT_TableOptions<D extends Record<string, any> = {}> = Partial<
   Omit<
-    Options<D>,
+    UseTableInstanceOptions<ReactTableGenerics>,
     'columns' | 'data' | 'initialState' | 'state' | 'expandRowsFn' | 'filterFns'
   >
 > & {
@@ -71,7 +72,7 @@ export interface MRT_RowModel<D extends Record<string, any> = {}> {
 export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
   TableInstance<
     Overwrite<
-      Partial<DefaultGenerics>,
+      Partial<TableGenerics>,
       {
         Row: D;
       }
@@ -100,11 +101,11 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
     idPrefix: string;
     localization: MRT_Localization;
   };
-  setCurrentEditingCell: Dispatch<SetStateAction<MRT_Cell<D> | null>>;
-  setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row<D> | null>>;
+  setCurrentEditingCell: Dispatch<SetStateAction<MRT_Cell | null>>;
+  setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row | null>>;
   setCurrentFilterFns: Dispatch<
     SetStateAction<{
-      [key: string]: MRT_FilterFn<D>;
+      [key: string]: MRT_FilterFn;
     }>
   >;
   setCurrentGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterFn<D>>>;
@@ -123,10 +124,13 @@ export type MRT_TableState<D extends Record<string, any> = {}> = Omit<
   currentFilterFns: Record<string, string | Function>;
   currentGlobalFilterFn: Record<string, string | Function>;
   isDensePadding: boolean;
+  isLoading: boolean;
   isFullScreen: boolean;
+  pagination: Partial<PaginationState>;
   showFilters: boolean;
   showGlobalFilter: boolean;
-  pagination: Partial<PaginationState>;
+  showProgressBars: boolean;
+  showSkeletons: boolean;
 };
 
 export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
@@ -276,6 +280,9 @@ export type MRT_Column<D extends Record<string, any> = {}> = Omit<
 > &
   MRT_ColumnDef<D> & {
     columns?: MRT_Column<D>[];
+    columnDef: MRT_ColumnDef<D>;
+    header: string;
+    footer: string;
   };
 
 export type MRT_Header<D extends Record<string, any> = {}> = Omit<
@@ -294,18 +301,9 @@ export type MRT_HeaderGroup<D extends Record<string, any> = {}> = Omit<
 
 export type MRT_Row<D extends Record<string, any> = {}> = Omit<
   Row<D>,
-  | 'getVisibleCells'
-  | 'getAllCells'
-  | 'subRows'
-  | 'original'
-  | 'getLeftVisibleCells'
-  | 'getRightVisibleCells'
-  | 'getCenterVisibleCells'
+  'getVisibleCells' | 'getAllCells' | 'subRows' | 'original'
 > & {
   getAllCells: () => MRT_Cell<D>[];
-  getCenterVisibleCells: () => MRT_Cell<D>[];
-  getLeftVisibleCells: () => MRT_Cell<D>[];
-  getRightVisibleCells: () => MRT_Cell<D>[];
   getVisibleCells: () => MRT_Cell<D>[];
   subRows?: MRT_Row<D>[];
   original: D;
@@ -320,7 +318,7 @@ export type MRT_Cell<D extends Record<string, any> = {}> = Omit<
 };
 
 export type MRT_FilterFn<D extends Record<string, any> = {}> =
-  | FilterFn<D>
+  | FilterFn<TableGenerics>
   | FilterFnOption<D>
   | MRT_FILTER_OPTION
   | number
@@ -351,8 +349,6 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     enabledGlobalFilterOptions?: (MRT_FILTER_OPTION | string)[];
     icons?: Partial<MRT_Icons>;
     idPrefix?: string;
-    isLoading?: boolean;
-    isReloading?: boolean;
     localization?: Partial<MRT_Localization>;
     muiLinearProgressProps?:
       | LinearProgressProps
@@ -760,7 +756,6 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
 
 export default <D extends Record<string, any> = {}>({
   autoResetExpanded = false,
-  autoResetSorting = false,
   columnResizeMode = 'onEnd',
   editingMode = 'row',
   enableColumnActions = true,
@@ -774,6 +769,7 @@ export default <D extends Record<string, any> = {}>({
   enableHiding = true,
   enableMultiRowSelection = true,
   enablePagination = true,
+  enablePinning = false,
   enableSelectAll = true,
   enableSorting = true,
   enableStickyHeader = true,
@@ -793,12 +789,11 @@ export default <D extends Record<string, any> = {}>({
 }: MaterialReactTableProps<D>) => (
   <MRT_TableRoot
     autoResetExpanded={autoResetExpanded}
-    autoResetSorting={autoResetSorting}
     columnResizeMode={columnResizeMode}
     editingMode={editingMode}
     enableColumnActions={enableColumnActions}
-    enableColumnResizing={enableColumnResizing}
     enableColumnFilters={enableColumnFilters}
+    enableColumnResizing={enableColumnResizing}
     enableDensePaddingToggle={enableDensePaddingToggle}
     enableExpandAll={enableExpandAll}
     enableFilters={enableFilters}
@@ -807,6 +802,7 @@ export default <D extends Record<string, any> = {}>({
     enableHiding={enableHiding}
     enableMultiRowSelection={enableMultiRowSelection}
     enablePagination={enablePagination}
+    enablePinning={enablePinning}
     enableSelectAll={enableSelectAll}
     enableSorting={enableSorting}
     enableStickyHeader={enableStickyHeader}

package/src/body/MRT_TableBody.tsx

@@ -4,15 +4,13 @@ import { MRT_TableBodyRow } from './MRT_TableBodyRow';
 import { MRT_TableInstance } from '..';
 
 interface Props {
-  pinned: 'left' | 'center' | 'right' | 'none';
   tableInstance: MRT_TableInstance;
 }
 
-export const MRT_TableBody: FC<Props> = ({ pinned, tableInstance }) => {
+export const MRT_TableBody: FC<Props> = ({ tableInstance }) => {
   const {
     getPaginationRowModel,
     getPrePaginationRowModel,
-    getTableBodyProps,
     options: { enablePagination, muiTableBodyProps },
   } = tableInstance;
 
@@ -20,22 +18,16 @@ export const MRT_TableBody: FC<Props> = ({ pinned, tableInstance }) => {
     ? getPaginationRowModel().rows
     : getPrePaginationRowModel().rows;
 
-  const mTableBodyProps =
+  const tableBodyProps =
     muiTableBodyProps instanceof Function
       ? muiTableBodyProps({ tableInstance })
       : muiTableBodyProps;
 
-  const tableBodyProps = {
-    ...getTableBodyProps(),
-    ...mTableBodyProps,
-  };
-
   return (
     <TableBody {...tableBodyProps}>
       {rows.map((row) => (
         <MRT_TableBodyRow
-          key={row.getRowProps().key}
-          pinned={pinned}
+          key={row.id}
           row={row}
           tableInstance={tableInstance}
         />

package/src/body/MRT_TableBodyCell.tsx

@@ -1,25 +1,27 @@
 import React, { FC, MouseEvent, useMemo } from 'react';
-import { Skeleton, TableCell } from '@mui/material';
+import { alpha, darken, lighten, Skeleton, TableCell } from '@mui/material';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
 import type { MRT_Cell, MRT_TableInstance } from '..';
 import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
 
 interface Props {
   cell: MRT_Cell;
+  enableHover?: boolean;
   tableInstance: MRT_TableInstance;
 }
 
-export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
+export const MRT_TableBodyCell: FC<Props> = ({
+  cell,
+  enableHover,
+  tableInstance,
+}) => {
   const {
-    getIsSomeColumnsPinned,
     getState,
     options: {
       editingMode,
       enableClickToCopy,
       enableEditing,
-      enablePinning,
       idPrefix,
-      isLoading,
       muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps,
       onCellClick,
@@ -27,7 +29,13 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
     setCurrentEditingCell,
   } = tableInstance;
 
-  const { currentEditingCell, currentEditingRow, isDensePadding } = getState();
+  const {
+    currentEditingCell,
+    currentEditingRow,
+    isDensePadding,
+    isLoading,
+    showSkeletons,
+  } = getState();
 
   const { column, row } = cell;
 
@@ -42,7 +50,6 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
       : column.muiTableBodyCellProps;
 
   const tableCellProps = {
-    ...cell.getCellProps(),
     ...mTableCellBodyProps,
     ...mcTableCellBodyProps,
   };
@@ -50,10 +57,10 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
   const skeletonWidth = useMemo(
     () =>
       column.columnDefType === 'display'
-        ? column.getWidth() / 2
-        : Math.random() * (column.getWidth() - column.getWidth() / 3) +
-          column.getWidth() / 3,
-    [column.columnDefType, column.getWidth()],
+        ? column.getSize() / 2
+        : Math.random() * (column.getSize() - column.getSize() / 3) +
+          column.getSize() / 3,
+    [column.columnDefType, column.getSize()],
   );
 
   const isEditable =
@@ -84,6 +91,26 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
     }
   };
 
+  const getIsLastLeftPinnedColumn = () => {
+    return (
+      column.getIsPinned() === 'left' &&
+      tableInstance.getLeftLeafHeaders().length - 1 === column.getPinnedIndex()
+    );
+  };
+
+  const getIsFirstRightPinnedColumn = () => {
+    return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
+  };
+
+  const getTotalRight = () => {
+    return (
+      (tableInstance.getRightLeafHeaders().length -
+        1 -
+        column.getPinnedIndex()) *
+      150
+    );
+  };
+
   return (
     <TableCell
       onClick={(event: MouseEvent<HTMLTableCellElement>) =>
@@ -91,10 +118,22 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
       }
       onDoubleClick={handleDoubleClick}
       {...tableCellProps}
-      sx={{
+      sx={(theme) => ({
+        backgroundColor: column.getIsPinned()
+          ? alpha(lighten(theme.palette.background.default, 0.04), 0.95)
+          : undefined,
+        boxShadow: getIsLastLeftPinnedColumn()
+          ? `4px 0 4px -2px ${alpha(theme.palette.common.black, 0.1)}`
+          : getIsFirstRightPinnedColumn()
+          ? `-4px 0 4px -2px ${alpha(theme.palette.common.black, 0.1)}`
+          : undefined,
         cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'text',
-        maxWidth: `min(${column.getWidth()}px, fit-content)`,
-        minWidth: `max(${column.getWidth()}px, ${column.minWidth}px)`,
+        left:
+          column.getIsPinned() === 'left'
+            ? `${column.getStart('left')}px`
+            : undefined,
+        maxWidth: `min(${column.getSize()}px, fit-content)`,
+        minWidth: `max${column.getSize()}px, ${column.minSize}px`,
         p: isDensePadding
           ? column.columnDefType === 'display'
             ? '0 0.5rem'
@@ -106,46 +145,58 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell, tableInstance }) => {
           column.id === 'mrt-expand'
             ? `${row.depth + (isDensePadding ? 0.5 : 0.75)}rem`
             : undefined,
+        position: column.getIsPinned() ? 'sticky' : 'relative',
+        right:
+          column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined,
         transition: 'all 0.2s ease-in-out',
-        whiteSpace:
-          isDensePadding || (enablePinning && getIsSomeColumnsPinned())
-            ? 'nowrap'
-            : 'normal',
-        width: column.getWidth(),
-        //@ts-ignore
-        ...tableCellProps?.sx,
-      }}
+        whiteSpace: isDensePadding ? 'nowrap' : 'normal',
+        width: column.getSize(),
+        zIndex: column.getIsPinned() ? 1 : undefined,
+        '&:hover': {
+          backgroundColor: enableHover
+            ? theme.palette.mode === 'dark'
+              ? `${lighten(theme.palette.background.default, 0.13)} !important`
+              : `${darken(theme.palette.background.default, 0.07)} !important`
+            : undefined,
+        },
+        ...(tableCellProps?.sx as any),
+      })}
     >
-      {isLoading ? (
-        <Skeleton
-          animation="wave"
-          height={20}
-          width={skeletonWidth}
-          {...muiTableBodyCellSkeletonProps}
-        />
-      ) : column.columnDefType === 'display' ? (
-        column.Cell?.({ cell, tableInstance })
-      ) : cell.getIsPlaceholder() ||
-        (row.getIsGrouped() &&
-          column.id !==
-            row.groupingColumnId) ? null : cell.getIsAggregated() ? (
-        cell.renderAggregatedCell()
-      ) : isEditing ? (
-        <MRT_EditCellTextField cell={cell} tableInstance={tableInstance} />
-      ) : (enableClickToCopy || column.enableClickToCopy) &&
-        column.enableClickToCopy !== false ? (
-        <>
-          <MRT_CopyButton cell={cell} tableInstance={tableInstance}>
-            {cell.column?.Cell?.({ cell, tableInstance }) ?? cell.renderCell()}
-          </MRT_CopyButton>
-          {row.getIsGrouped() && <> ({row.subRows?.length})</>}
-        </>
-      ) : (
-        <>
-          {cell.column?.Cell?.({ cell, tableInstance }) ?? cell.renderCell()}
-          {row.getIsGrouped() && <> ({row.subRows?.length})</>}
-        </>
-      )}
+      <>
+        {isLoading || showSkeletons ? (
+          <Skeleton
+            animation="wave"
+            height={20}
+            width={skeletonWidth}
+            {...muiTableBodyCellSkeletonProps}
+          />
+        ) : column.columnDefType === 'display' ? (
+          column.columnDef.Cell?.({ cell, tableInstance })
+        ) : cell.getIsPlaceholder() ||
+          (row.getIsGrouped() &&
+            column.id !==
+              row.groupingColumnId) ? null : cell.getIsAggregated() ? (
+          cell.renderAggregatedCell()
+        ) : isEditing ? (
+          <MRT_EditCellTextField cell={cell} tableInstance={tableInstance} />
+        ) : (enableClickToCopy || column.enableClickToCopy) &&
+          column.enableClickToCopy !== false ? (
+          <>
+            <MRT_CopyButton cell={cell} tableInstance={tableInstance}>
+              <>
+                {cell.column.columnDef?.Cell?.({ cell, tableInstance }) ??
+                  cell.renderCell()}
+              </>
+            </MRT_CopyButton>
+            {row.getIsGrouped() && <> ({row.subRows?.length})</>}
+          </>
+        ) : (
+          <>
+            {cell.column.columnDef?.Cell?.({ cell, tableInstance }) ?? cell.renderCell()}
+            {row.getIsGrouped() && <> ({row.subRows?.length ?? ''})</>}
+          </>
+        )}
+      </>
     </TableCell>
   );
 };

package/src/body/MRT_TableBodyRow.tsx

@@ -1,47 +1,24 @@
 import React, { FC, MouseEvent } from 'react';
-import { TableRow } from '@mui/material';
+import { darken, lighten, TableRow } from '@mui/material';
 import { MRT_TableBodyCell } from './MRT_TableBodyCell';
 import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
 import type { MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
-  pinned: 'left' | 'center' | 'right' | 'none';
   row: MRT_Row;
   tableInstance: MRT_TableInstance;
 }
 
-export const MRT_TableBodyRow: FC<Props> = ({ pinned, row, tableInstance }) => {
+export const MRT_TableBodyRow: FC<Props> = ({ row, tableInstance }) => {
   const {
     options: { muiTableBodyRowProps, onRowClick, renderDetailPanel },
   } = tableInstance;
 
-  const {
-    getCenterVisibleCells,
-    getIsGrouped,
-    getIsSelected,
-    getLeftVisibleCells,
-    getRightVisibleCells,
-    getRowProps,
-    getVisibleCells,
-  } = row;
-
-  const mTableBodyRowProps =
+  const tableRowProps =
     muiTableBodyRowProps instanceof Function
       ? muiTableBodyRowProps({ row, tableInstance })
       : muiTableBodyRowProps;
 
-  const tableRowProps = {
-    ...getRowProps(),
-    ...mTableBodyRowProps,
-  };
-
-  const getVisibleCellsMap = {
-    center: getCenterVisibleCells,
-    left: getLeftVisibleCells,
-    none: getVisibleCells,
-    right: getRightVisibleCells,
-  };
-
   return (
     <>
       <TableRow
@@ -49,18 +26,32 @@ export const MRT_TableBodyRow: FC<Props> = ({ pinned, row, tableInstance }) => {
         onClick={(event: MouseEvent<HTMLTableRowElement>) =>
           onRowClick?.({ event, row, tableInstance })
         }
-        selected={getIsSelected()}
+        selected={row.getIsSelected()}
         {...tableRowProps}
+        sx={(theme) => ({
+          backgroundColor: lighten(theme.palette.background.default, 0.06),
+          transition: 'all 0.2s ease-in-out',
+          '&:hover td': {
+            backgroundColor:
+              tableRowProps?.hover !== false
+                ? theme.palette.mode === 'dark'
+                  ? `${lighten(theme.palette.background.default, 0.12)}`
+                  : `${darken(theme.palette.background.default, 0.05)}`
+                : undefined,
+          },
+          ...(tableRowProps?.sx as any),
+        })}
       >
-        {getVisibleCellsMap[pinned]().map((cell) => (
+        {row.getVisibleCells().map((cell) => (
           <MRT_TableBodyCell
             cell={cell}
-            key={cell.getCellProps().key}
+            key={cell.id}
+            enableHover={tableRowProps?.hover !== false}
             tableInstance={tableInstance}
           />
         ))}
       </TableRow>
-      {renderDetailPanel && !getIsGrouped() && (
+      {renderDetailPanel && !row.getIsGrouped() && (
         <MRT_TableDetailPanel row={row} tableInstance={tableInstance} />
       )}
     </>

package/src/buttons/MRT_ColumnPinningButtons.tsx

@@ -0,0 +1,57 @@
+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 {
+    options: {
+      icons: { PushPinIcon },
+      localization,
+    },
+  } = tableInstance;
+
+  const handlePinColumn = (pinDirection: 'left' | 'right' | false) => {
+    column.pin(pinDirection);
+  };
+
+  return (
+    <Box sx={{ mr: '8px' }}>
+      {column.getIsPinned() ? (
+        <Tooltip arrow title={localization.unpin}>
+          <IconButton onClick={() => handlePinColumn(false)} size="small">
+            <PushPinIcon />
+          </IconButton>
+        </Tooltip>
+      ) : (
+        <>
+          <Tooltip arrow title={localization.pinToLeft}>
+            <IconButton onClick={() => handlePinColumn('left')} size="small">
+              <PushPinIcon
+                style={{
+                  transform: 'rotate(90deg)',
+                }}
+              />
+            </IconButton>
+          </Tooltip>
+          <Tooltip arrow title={localization.pinToRight}>
+            <IconButton onClick={() => handlePinColumn('right')} size="small">
+              <PushPinIcon
+                style={{
+                  transform: 'rotate(-90deg)',
+                }}
+              />
+            </IconButton>
+          </Tooltip>
+        </>
+      )}
+    </Box>
+  );
+};