material-react-table 0.7.4 → 0.8.0-alpha.1

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

package/src/buttons/MRT_CopyButton.tsx

@@ -1,9 +1,10 @@
-import React, { FC, useState } from 'react';
+import React, { FC, ReactNode, useState } from 'react';
 import { Button, Tooltip } from '@mui/material';
 import { MRT_Cell, MRT_TableInstance } from '..';
 
 interface Props {
   cell: MRT_Cell;
+  children: ReactNode
   tableInstance: MRT_TableInstance;
 }
 
@@ -49,7 +50,7 @@ export const MRT_CopyButton: FC<Props> = ({
     >
       <Button
         aria-label={localization.clickToCopy}
-        onClick={() => handleCopy(cell.value)}
+        onClick={() => handleCopy(cell.getValue())}
         size="small"
         {...buttonProps}
         sx={{

package/src/buttons/MRT_EditActionButtons.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from 'react';
 import { Box, IconButton, Tooltip } from '@mui/material';
 import type { MRT_Row, MRT_TableInstance } from '..';
-import { RowValues } from '@tanstack/react-table';
 
 interface Props {
   row: MRT_Row;
@@ -22,7 +21,7 @@ export const MRT_EditActionButtons: FC<Props> = ({ row, tableInstance }) => {
   const { currentEditingRow } = getState();
 
   const handleCancel = () => {
-    row.values = (row.original as RowValues) ?? {};
+    row._valuesCache = row.original ?? {};
     setCurrentEditingRow(null);
   };
 

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -13,13 +13,12 @@ export const MRT_ExpandAllButton: FC<Props> = ({ tableInstance }) => {
     getState,
     options: {
       icons: { DoubleArrowDownIcon },
-      isLoading,
       localization,
     },
     toggleAllRowsExpanded,
   } = tableInstance;
 
-  const { isDensePadding } = getState();
+  const { isDensePadding, isLoading } = getState();
 
   return (
     <IconButton

package/src/enums.ts

@@ -1,10 +1,10 @@
-export enum MRT_FILTER_TYPE {
-  BEST_MATCH = 'bestMatch',
-  BEST_MATCH_FIRST = 'bestMatchFirst',
+export enum MRT_FILTER_OPTION {
+  BETWEEN = 'between',
   CONTAINS = 'contains',
   EMPTY = 'empty',
   ENDS_WITH = 'endsWith',
   EQUALS = 'equals',
+  FUZZY = 'fuzzy',
   GREATER_THAN = 'greaterThan',
   LESS_THAN = 'lessThan',
   NOT_EMPTY = 'notEmpty',

package/src/filtersFNs.ts

@@ -1,155 +1,145 @@
-import { matchSorter } from 'match-sorter';
+import { rankItem, rankings, RankingInfo } from '@tanstack/match-sorter-utils';
 import { MRT_Row } from '.';
 
-export const bestMatchFirst = (
-  rows: MRT_Row[],
-  columnIds: string[] | string,
-  filterValue: string | number,
-) =>
-  matchSorter(rows, filterValue.toString().trim(), {
-    keys: Array.isArray(columnIds)
-      ? columnIds.map((c) => `values.${c}`)
-      : [`values.${columnIds}`],
-  });
-
-bestMatchFirst.autoRemove = (val: any) => !val;
-
-export const bestMatch = (
-  rows: MRT_Row[],
-  columnIds: string[] | string,
-  filterValue: string | number,
-) =>
-  matchSorter(rows, filterValue.toString().trim(), {
-    keys: Array.isArray(columnIds)
-      ? columnIds.map((c) => `values.${c}`)
-      : [`values.${columnIds}`],
-    sorter: (rankedItems) => rankedItems,
+export const fuzzy = (
+  row: MRT_Row,
+  columnId: string,
+  value: string,
+  addMeta: (item: RankingInfo) => void,
+) => {
+  const itemRank = rankItem(row.getValue(columnId), value, {
+    threshold: rankings.MATCHES,
   });
+  addMeta(itemRank);
+  return itemRank.passed;
+};
 
-bestMatch.autoRemove = (val: any) => !val;
+fuzzy.autoRemove = (val: any) => !val;
 
 export const contains = (
-  rows: MRT_Row[],
+  row: MRT_Row,
   id: string,
   filterValue: string | number,
 ) =>
-  rows.filter((row) =>
-    row.values[id]
-      .toString()
-      .toLowerCase()
-      .trim()
-      .includes(filterValue.toString().toLowerCase().trim()),
-  );
+  row
+    .getValue(id)
+    .toString()
+    .toLowerCase()
+    .trim()
+    .includes(filterValue.toString().toLowerCase().trim());
 
 contains.autoRemove = (val: any) => !val;
 
 export const startsWith = (
-  rows: MRT_Row[],
+  row: MRT_Row,
   id: string,
   filterValue: string | number,
 ) =>
-  rows.filter((row) =>
-    row.values[id]
-      .toString()
-      .toLowerCase()
-      .trim()
-      .startsWith(filterValue.toString().toLowerCase().trim()),
-  );
+  row
+    .getValue(id)
+    .toString()
+    .toLowerCase()
+    .trim()
+    .startsWith(filterValue.toString().toLowerCase().trim());
 
 startsWith.autoRemove = (val: any) => !val;
 
 export const endsWith = (
-  rows: MRT_Row[],
+  row: MRT_Row,
   id: string,
   filterValue: string | number,
 ) =>
-  rows.filter((row) =>
-    row.values[id]
-      .toString()
-      .toLowerCase()
-      .trim()
-      .endsWith(filterValue.toString().toLowerCase().trim()),
-  );
+  row
+    .getValue(id)
+    .toString()
+    .toLowerCase()
+    .trim()
+    .endsWith(filterValue.toString().toLowerCase().trim());
 
 endsWith.autoRemove = (val: any) => !val;
 
 export const equals = (
-  rows: MRT_Row[],
+  row: MRT_Row,
   id: string,
   filterValue: string | number,
 ) =>
-  rows.filter(
-    (row) =>
-      row.values[id].toString().toLowerCase().trim() ===
-      filterValue.toString().toLowerCase().trim(),
-  );
+  row.getValue(id).toString().toLowerCase().trim() ===
+  filterValue.toString().toLowerCase().trim();
 
 equals.autoRemove = (val: any) => !val;
 
 export const notEquals = (
-  rows: MRT_Row[],
+  row: MRT_Row,
   id: string,
   filterValue: string | number,
 ) =>
-  rows.filter(
-    (row) =>
-      row.values[id].toString().toLowerCase().trim() !==
-      filterValue.toString().toLowerCase().trim(),
-  );
+  row.getValue(id).toString().toLowerCase().trim() !==
+  filterValue.toString().toLowerCase().trim();
 
 notEquals.autoRemove = (val: any) => !val;
 
 export const greaterThan = (
-  rows: MRT_Row[],
+  row: MRT_Row,
   id: string,
   filterValue: string | number,
 ) =>
-  rows.filter((row) =>
-    !isNaN(+filterValue) && !isNaN(+row.values[id])
-      ? +row.values[id] > +filterValue
-      : row.values[id].toString().toLowerCase().trim() >
-        filterValue.toString().toLowerCase().trim(),
-  );
+  !isNaN(+filterValue) && !isNaN(+row.getValue(id))
+    ? +row.getValue(id) >= +filterValue
+    : row.getValue(id).toString().toLowerCase().trim() >
+      filterValue.toString().toLowerCase().trim();
 
 greaterThan.autoRemove = (val: any) => !val;
 
 export const lessThan = (
-  rows: MRT_Row[],
+  row: MRT_Row,
   id: string,
   filterValue: string | number,
 ) =>
-  rows.filter((row) =>
-    !isNaN(+filterValue) && !isNaN(+row.values[id])
-      ? +row.values[id] < +filterValue
-      : row.values[id].toString().toLowerCase().trim() <
-        filterValue.toString().toLowerCase().trim(),
-  );
+  !isNaN(+filterValue) && !isNaN(+row.getValue(id))
+    ? +row.getValue(id) <= +filterValue
+    : row.getValue(id).toString().toLowerCase().trim() <
+      filterValue.toString().toLowerCase().trim();
 
 lessThan.autoRemove = (val: any) => !val;
 
+export const between = (
+  row: MRT_Row,
+  id: string,
+  filterValues: [string | number, string | number],
+) =>
+  ((['', undefined] as any[]).includes(filterValues[0]) ||
+    greaterThan(row, id, filterValues[0])) &&
+  ((!isNaN(+filterValues[0]) &&
+    !isNaN(+filterValues[1]) &&
+    +filterValues[0] > +filterValues[1]) ||
+    (['', undefined] as any[]).includes(filterValues[1]) ||
+    lessThan(row, id, filterValues[1]));
+
+between.autoRemove = (val: any) => !val;
+
 export const empty = (
-  rows: MRT_Row[],
+  row: MRT_Row,
   id: string,
   _filterValue: string | number,
-) => rows.filter((row) => !row.values[id].toString().toLowerCase().trim());
+) => !row.getValue(id).toString().trim();
 
 empty.autoRemove = (val: any) => !val;
 
 export const notEmpty = (
-  rows: MRT_Row[],
+  row: MRT_Row,
   id: string,
   _filterValue: string | number,
-) => rows.filter((row) => !!row.values[id].toString().toLowerCase().trim());
+) => !!row.getValue(id).toString().trim();
 
 notEmpty.autoRemove = (val: any) => !val;
 
 export const defaultFilterFNs = {
-  bestMatch,
-  bestMatchFirst,
+  between,
   contains,
   empty,
   endsWith,
   equals,
+  fuzzy,
   greaterThan,
   lessThan,
   notEmpty,

package/src/footer/MRT_TableFooter.tsx

@@ -1,19 +1,16 @@
 import React, { FC } from 'react';
 import { TableFooter } from '@mui/material';
 import { MRT_TableFooterRow } from './MRT_TableFooterRow';
-import type { MRT_HeaderGroup, MRT_TableInstance } from '..';
+import type { MRT_TableInstance } from '..';
 
 interface Props {
-  pinned: 'left' | 'center' | 'right' | 'none';
   tableInstance: MRT_TableInstance;
 }
 
-export const MRT_TableFooter: FC<Props> = ({ pinned, tableInstance }) => {
+export const MRT_TableFooter: FC<Props> = ({ tableInstance }) => {
   const {
-    getCenterFooterGroups,
     getFooterGroups,
-    getLeftFooterGroups,
-    getRightFooterGroups,
+
     options: { muiTableFooterProps },
   } = tableInstance;
 
@@ -22,19 +19,12 @@ export const MRT_TableFooter: FC<Props> = ({ pinned, tableInstance }) => {
       ? muiTableFooterProps({ tableInstance })
       : muiTableFooterProps;
 
-  const getFooterGroupsMap = {
-    center: getCenterFooterGroups,
-    left: getLeftFooterGroups,
-    none: getFooterGroups,
-    right: getRightFooterGroups,
-  };
-
   return (
     <TableFooter {...tableFooterProps}>
-      {getFooterGroupsMap[pinned]().map((footerGroup) => (
+      {getFooterGroups().map((footerGroup) => (
         <MRT_TableFooterRow
-          footerGroup={footerGroup as MRT_HeaderGroup}
-          key={footerGroup.getFooterGroupProps().key}
+          footerGroup={footerGroup as any}
+          key={footerGroup.id}
           tableInstance={tableInstance}
         />
       ))}

package/src/footer/MRT_TableFooterCell.tsx

@@ -28,7 +28,6 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, tableInstance }) => {
       : column.muiTableFooterCellProps;
 
   const tableCellProps = {
-    ...footer.getFooterProps(),
     ...mTableFooterCellProps,
     ...mcTableFooterCellProps,
   };
@@ -36,9 +35,9 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, tableInstance }) => {
   return (
     <TableCell
       align={column.columnDefType === 'group' ? 'center' : 'left'}
+      colSpan={footer.colSpan}
       variant="head"
       {...tableCellProps}
-      //@ts-ignore
       sx={(theme) => ({
         backgroundColor: theme.palette.background.default,
         backgroundImage: `linear-gradient(${alpha(
@@ -46,14 +45,13 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, tableInstance }) => {
           0.05,
         )},${alpha(theme.palette.common.white, 0.05)})`,
         fontWeight: 'bold',
-        maxWidth: `min(${column.getWidth()}px, ${column.maxWidth}px)`,
-        minWidth: `max(${column.getWidth()}px, ${column.minWidth}px)`,
+        maxWidth: `${column.getSize()}px`,
+        minWidth: `${column.getSize()}px`,
         p: isDensePadding ? '0.5rem' : '1rem',
         transition: `all ${enableColumnResizing ? '10ms' : '0.2s'} ease-in-out`,
-        width: column.getWidth(),
+        width: column.getSize(),
         verticalAlign: 'text-top',
-        //@ts-ignore
-        ...tableCellProps?.sx,
+        ...(tableCellProps?.sx as any),
       })}
     >
       {footer.isPlaceholder

package/src/footer/MRT_TableFooterRow.tsx

@@ -19,27 +19,24 @@ export const MRT_TableFooterRow: FC<Props> = ({
   // if no content in row, skip row
   if (
     !footerGroup.headers?.some(
-      (h) => h.column.columnDef.footer || h.column.Footer,
+      (h) =>
+        (typeof h.column.footer === 'string' && !!h.column.footer) ||
+        h.column.Footer,
     )
   )
     return null;
 
-  const mTableFooterRowProps =
+  const tableRowProps =
     muiTableFooterRowProps instanceof Function
       ? muiTableFooterRowProps({ footerGroup, tableInstance })
       : muiTableFooterRowProps;
 
-  const tableRowProps = {
-    ...footerGroup.getFooterGroupProps(),
-    ...mTableFooterRowProps,
-  };
-
   return (
     <TableRow {...tableRowProps}>
       {footerGroup.headers.map((footer: MRT_Header) => (
         <MRT_TableFooterCell
           footer={footer}
-          key={footer.getFooterProps().key}
+          key={footer.id}
           tableInstance={tableInstance}
         />
       ))}

package/src/head/MRT_TableHead.tsx

@@ -1,19 +1,15 @@
 import React, { FC } from 'react';
 import { TableHead } from '@mui/material';
 import { MRT_TableHeadRow } from './MRT_TableHeadRow';
-import type { MRT_HeaderGroup, MRT_TableInstance } from '..';
+import type { MRT_TableInstance } from '..';
 
 interface Props {
-  pinned: 'left' | 'center' | 'right' | 'none';
   tableInstance: MRT_TableInstance;
 }
 
-export const MRT_TableHead: FC<Props> = ({ pinned, tableInstance }) => {
+export const MRT_TableHead: FC<Props> = ({ tableInstance }) => {
   const {
-    getCenterHeaderGroups,
     getHeaderGroups,
-    getLeftHeaderGroups,
-    getRightHeaderGroups,
     options: { muiTableHeadProps },
   } = tableInstance;
 
@@ -22,19 +18,12 @@ export const MRT_TableHead: FC<Props> = ({ pinned, tableInstance }) => {
       ? muiTableHeadProps({ tableInstance })
       : muiTableHeadProps;
 
-  const getHeaderGroupsMap = {
-    center: getCenterHeaderGroups,
-    left: getLeftHeaderGroups,
-    none: getHeaderGroups,
-    right: getRightHeaderGroups,
-  };
-
   return (
     <TableHead {...tableHeadProps}>
-      {getHeaderGroupsMap[pinned]().map((headerGroup) => (
+      {getHeaderGroups().map((headerGroup) => (
         <MRT_TableHeadRow
-          headerGroup={headerGroup as MRT_HeaderGroup}
-          key={headerGroup.getHeaderGroupProps().key}
+          headerGroup={headerGroup as any}
+          key={headerGroup.id}
           tableInstance={tableInstance}
         />
       ))}