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

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

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { IconButton } from '@mui/material';
+import { IconButton, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
 interface Props {
@@ -13,7 +13,6 @@ export const MRT_ExpandAllButton: FC<Props> = ({ tableInstance }) => {
     getState,
     options: {
       icons: { DoubleArrowDownIcon },
-      isLoading,
       localization,
     },
     toggleAllRowsExpanded,
@@ -22,24 +21,29 @@ export const MRT_ExpandAllButton: FC<Props> = ({ tableInstance }) => {
   const { isDensePadding } = getState();
 
   return (
-    <IconButton
-      aria-label={localization.expandAll}
-      disabled={isLoading}
+    <Tooltip
+      arrow
+      enterDelay={1000}
+      enterNextDelay={1000}
       title={localization.expandAll}
-      onClick={() => toggleAllRowsExpanded(!getIsAllRowsExpanded())}
-      sx={{
-        height: isDensePadding ? '1.75rem' : '2.25rem',
-        width: isDensePadding ? '1.75rem' : '2.25rem',
-      }}
     >
-      <DoubleArrowDownIcon
-        style={{
-          transform: `rotate(${
-            getIsAllRowsExpanded() ? -180 : getIsSomeRowsExpanded() ? -90 : 0
-          }deg)`,
-          transition: 'transform 0.2s',
+      <IconButton
+        aria-label={localization.expandAll}
+        onClick={() => toggleAllRowsExpanded(!getIsAllRowsExpanded())}
+        sx={{
+          height: isDensePadding ? '1.75rem' : '2.25rem',
+          width: isDensePadding ? '1.75rem' : '2.25rem',
         }}
-      />
-    </IconButton>
+      >
+        <DoubleArrowDownIcon
+          style={{
+            transform: `rotate(${
+              getIsAllRowsExpanded() ? -180 : getIsSomeRowsExpanded() ? -90 : 0
+            }deg)`,
+            transition: 'transform 0.2s',
+          }}
+        />
+      </IconButton>
+    </Tooltip>
   );
 };

package/src/buttons/MRT_ExpandButton.tsx

@@ -1,5 +1,5 @@
 import React, { FC, MouseEvent } from 'react';
-import { IconButton } from '@mui/material';
+import { IconButton, Tooltip } from '@mui/material';
 import type { MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
@@ -26,28 +26,34 @@ export const MRT_ExpandButton: FC<Props> = ({ row, tableInstance }) => {
   };
 
   return (
-    <IconButton
-      aria-label={localization.expand}
-      disabled={!row.getCanExpand() && !renderDetailPanel}
+    <Tooltip
+      arrow
+      enterDelay={1000}
+      enterNextDelay={1000}
       title={localization.expand}
-      onClick={handleToggleExpand}
-      sx={{
-        height: isDensePadding ? '1.75rem' : '2.25rem',
-        width: isDensePadding ? '1.75rem' : '2.25rem',
-      }}
     >
-      <ExpandMoreIcon
-        style={{
-          transform: `rotate(${
-            !row.getCanExpand() && !renderDetailPanel
-              ? -90
-              : row.getIsExpanded()
-              ? -180
-              : 0
-          }deg)`,
-          transition: 'transform 0.2s',
+      <IconButton
+        aria-label={localization.expand}
+        disabled={!row.getCanExpand() && !renderDetailPanel}
+        onClick={handleToggleExpand}
+        sx={{
+          height: isDensePadding ? '1.75rem' : '2.25rem',
+          width: isDensePadding ? '1.75rem' : '2.25rem',
         }}
-      />
-    </IconButton>
+      >
+        <ExpandMoreIcon
+          style={{
+            transform: `rotate(${
+              !row.getCanExpand() && !renderDetailPanel
+                ? -90
+                : row.getIsExpanded()
+                ? -180
+                : 0
+            }deg)`,
+            transition: 'transform 0.2s',
+          }}
+        />
+      </IconButton>
+    </Tooltip>
   );
 };

package/src/enums.ts

@@ -1,10 +1,10 @@
 export enum MRT_FILTER_OPTION {
-  BEST_MATCH = 'bestMatch',
-  BEST_MATCH_FIRST = 'bestMatchFirst',
+  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,24 +45,25 @@ 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
-        ? null
-        : column.Footer?.({
-            footer,
-            tableInstance,
-          }) ??
-          column.footer ??
-          null}
+      <>
+        {footer.isPlaceholder
+          ? null
+          : column.columnDef.Footer?.({
+              footer,
+              tableInstance,
+            }) ??
+            footer.renderFooter() ??
+            null}
+      </>
     </TableCell>
   );
 };

package/src/footer/MRT_TableFooterRow.tsx

@@ -19,27 +19,25 @@ 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.columnDef.footer === 'string' &&
+          !!h.column.columnDef.footer) ||
+        h.column.columnDef.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}
         />
       ))}