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

package/dist/toolbar/MRT_ToolbarAlertBanner.d.ts

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 import { MRT_TableInstance } from '..';
 interface Props {
+    stackAlertBanner?: boolean;
     tableInstance: MRT_TableInstance;
 }
 export declare const MRT_ToolbarAlertBanner: FC<Props>;

package/dist/toolbar/MRT_ToolbarTop.d.ts

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

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" | "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"> & {
+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" | "enableColumnOrdering" | "enableEditing" | "enabledColumnFilterOptions" | "filterSelectOptions" | "muiTableBodyCellCopyButtonProps" | "muiTableBodyCellEditTextFieldProps" | "muiTableBodyCellProps" | "muiTableFooterCellProps" | "muiTableHeadCellColumnActionsButtonProps" | "muiTableHeadCellFilterTextFieldProps" | "muiTableHeadCellProps" | "onCellEditBlur" | "onCellEditChange" | "onColumnFilterValueChange"> & {
     header?: string | undefined;
 }) => ColumnDef<D>;

package/package.json

@@ -1,13 +1,14 @@
 {
-  "version": "0.8.0-alpha.1",
+  "version": "0.8.1",
   "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.",
+  "description": "A fully featured Material UI implementation of Tanstack react-table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",
   "author": "Kevin Vandy",
   "keywords": [
     "react-table",
     "material-ui",
-    "material-table"
+    "material-table",
+    "tanstack table"
   ],
   "repository": {
     "type": "git",
@@ -47,29 +48,26 @@
   "size-limit": [
     {
       "path": "dist/material-react-table.cjs.production.min.js",
-      "limit": "40 KB"
+      "limit": "50 KB"
     },
     {
       "path": "dist/material-react-table.esm.js",
-      "limit": "40 KB"
+      "limit": "50 KB"
     }
   ],
   "devDependencies": {
     "@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": "^7.1.0",
+    "@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.5.5",
     "@storybook/addon-actions": "^6.5.5",
-    "@storybook/addon-console": "^1.2.3",
     "@storybook/addon-essentials": "^6.5.5",
     "@storybook/addon-info": "^5.3.21",
     "@storybook/addon-links": "^6.5.5",
-    "@storybook/addon-storysource": "^6.5.5",
     "@storybook/addons": "^6.5.5",
     "@storybook/react": "^6.5.5",
     "@types/react": "^18.0.9",
@@ -79,11 +77,10 @@
     "eslint-plugin-react-hooks": "^4.5.0",
     "husky": "^8.0.1",
     "prettier": "^2.6.2",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-is": "^18.1.0",
     "size-limit": "^7.0.8",
-    "storybook-addon-paddings": "^4.3.0",
     "storybook-dark-mode": "^1.1.0",
     "tsdx": "^0.14.1",
     "tslib": "^2.4.0",
@@ -98,6 +95,9 @@
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "^8.0.0-alpha.83",
-    "@tanstack/react-table": "^8.0.0-alpha.87"
+    "@tanstack/react-table": "^8.0.0-alpha.89",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dnd-scrolling": "^1.2.4"
   }
 }

package/src/MaterialReactTable.tsx

@@ -80,6 +80,7 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
   >,
   | 'getAllColumns'
   | 'getAllLeafColumns'
+  | 'getColumn'
   | 'getExpandedRowModel'
   | 'getPaginationRowModel'
   | 'getPrePaginationRowModel'
@@ -90,6 +91,7 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
 > & {
   getAllColumns: () => MRT_Column<D>[];
   getAllLeafColumns: () => MRT_Column<D>[];
+  getColumn: (columnId: string) => MRT_Column<D>;
   getExpandedRowModel: () => MRT_RowModel<D>;
   getPaginationRowModel: () => MRT_RowModel<D>;
   getPrePaginationRowModel: () => MRT_RowModel<D>;
@@ -176,6 +178,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
   columns?: MRT_ColumnDef<D>[];
   enableClickToCopy?: boolean;
   enableColumnActions?: boolean;
+  enableColumnOrdering?: boolean;
   enableEditing?: boolean;
   enabledColumnFilterOptions?: (MRT_FILTER_OPTION | string)[];
   filterFn?: MRT_FilterFn;
@@ -280,6 +283,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<
@@ -327,6 +333,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     editingMode?: 'table' | 'row' | 'cell';
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
+    enableColumnOrdering?: boolean;
     enableDensePaddingToggle?: boolean;
     enableEditing?: boolean;
     enableExpandAll?: boolean;
@@ -754,15 +761,18 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
 export default <D extends Record<string, any> = {}>({
   autoResetExpanded = false,
   columnResizeMode = 'onEnd',
+  defaultColumn = { minSize: 50, maxSize: 1000, size: 150 },
   editingMode = 'row',
   enableColumnActions = true,
   enableColumnFilters = true,
+  enableColumnOrdering = false,
   enableColumnResizing = false,
   enableDensePaddingToggle = true,
   enableExpandAll = true,
   enableFilters = true,
   enableFullScreenToggle = true,
   enableGlobalFilter = true,
+  enableGrouping = false,
   enableHiding = true,
   enableMultiRowSelection = true,
   enablePagination = true,
@@ -787,15 +797,18 @@ export default <D extends Record<string, any> = {}>({
   <MRT_TableRoot
     autoResetExpanded={autoResetExpanded}
     columnResizeMode={columnResizeMode}
+    defaultColumn={defaultColumn}
     editingMode={editingMode}
     enableColumnActions={enableColumnActions}
     enableColumnFilters={enableColumnFilters}
+    enableColumnOrdering={enableColumnOrdering}
     enableColumnResizing={enableColumnResizing}
     enableDensePaddingToggle={enableDensePaddingToggle}
     enableExpandAll={enableExpandAll}
     enableFilters={enableFilters}
     enableFullScreenToggle={enableFullScreenToggle}
     enableGlobalFilter={enableGlobalFilter}
+    enableGrouping={enableGrouping}
     enableHiding={enableHiding}
     enableMultiRowSelection={enableMultiRowSelection}
     enablePagination={enablePagination}

package/src/body/MRT_TableBodyCell.tsx

@@ -132,8 +132,6 @@ export const MRT_TableBodyCell: FC<Props> = ({
           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'
@@ -150,7 +148,6 @@ export const MRT_TableBodyCell: FC<Props> = ({
           column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined,
         transition: 'all 0.2s ease-in-out',
         whiteSpace: isDensePadding ? 'nowrap' : 'normal',
-        width: column.getSize(),
         zIndex: column.getIsPinned() ? 1 : undefined,
         '&:hover': {
           backgroundColor: enableHover
@@ -161,6 +158,11 @@ export const MRT_TableBodyCell: FC<Props> = ({
         },
         ...(tableCellProps?.sx as any),
       })}
+      style={{
+        maxWidth: `min(${column.getSize()}px, fit-content)`,
+        minWidth: `max(${column.getSize()}px, ${column.minSize ?? 30}px)`,
+        width: column.getSize(),
+      }}
     >
       <>
         {isLoading || showSkeletons ? (
@@ -171,7 +173,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
             {...muiTableBodyCellSkeletonProps}
           />
         ) : column.columnDefType === 'display' ? (
-          column.Cell?.({ cell, tableInstance })
+          column.columnDef.Cell?.({ cell, tableInstance })
         ) : cell.getIsPlaceholder() ||
           (row.getIsGrouped() &&
             column.id !==
@@ -184,7 +186,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
           <>
             <MRT_CopyButton cell={cell} tableInstance={tableInstance}>
               <>
-                {cell.column?.Cell?.({ cell, tableInstance }) ??
+                {cell.column.columnDef?.Cell?.({ cell, tableInstance }) ??
                   cell.renderCell()}
               </>
             </MRT_CopyButton>
@@ -192,8 +194,9 @@ export const MRT_TableBodyCell: FC<Props> = ({
           </>
         ) : (
           <>
-            {cell.column?.Cell?.({ cell, tableInstance }) ?? cell.renderCell()}
-            {row.getIsGrouped() && <> ({row.subRows?.length})</>}
+            {cell.column.columnDef?.Cell?.({ cell, tableInstance }) ??
+              cell.renderCell()}
+            {row.getIsGrouped() && <> ({row.subRows?.length ?? ''})</>}
           </>
         )}
       </>

package/src/buttons/MRT_CopyButton.tsx

@@ -4,7 +4,7 @@ import { MRT_Cell, MRT_TableInstance } from '..';
 
 interface Props {
   cell: MRT_Cell;
-  children: ReactNode
+  children: ReactNode;
   tableInstance: MRT_TableInstance;
 }
 
@@ -52,6 +52,8 @@ export const MRT_CopyButton: FC<Props> = ({
         aria-label={localization.clickToCopy}
         onClick={() => handleCopy(cell.getValue())}
         size="small"
+        type="button"
+        variant="text"
         {...buttonProps}
         sx={{
           backgroundColor: 'transparent',
@@ -67,7 +69,6 @@ export const MRT_CopyButton: FC<Props> = ({
           textTransform: 'inherit',
           ...buttonProps?.sx,
         }}
-        variant="text"
       >
         {children}
       </Button>

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 {
@@ -10,35 +10,43 @@ export const MRT_ExpandAllButton: FC<Props> = ({ tableInstance }) => {
   const {
     getIsAllRowsExpanded,
     getIsSomeRowsExpanded,
+    getCanSomeRowsExpand,
     getState,
     options: {
       icons: { DoubleArrowDownIcon },
       localization,
+      renderDetailPanel,
     },
     toggleAllRowsExpanded,
   } = tableInstance;
 
-  const { isDensePadding, isLoading } = getState();
+  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}
+        disabled={!getCanSomeRowsExpand() && !renderDetailPanel}
+        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/footer/MRT_TableFooterCell.tsx

@@ -54,14 +54,17 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, tableInstance }) => {
         ...(tableCellProps?.sx as any),
       })}
     >
-      {footer.isPlaceholder
-        ? null
-        : column.Footer?.({
-            footer,
-            tableInstance,
-          }) ??
-          column.footer ??
-          null}
+      <>
+        {footer.isPlaceholder
+          ? null
+          : column.columnDef.Footer?.({
+              footer,
+              tableInstance,
+            }) ??
+            column.columnDef.footer ??
+            footer.renderFooter() ??
+            null}
+      </>
     </TableCell>
   );
 };

package/src/footer/MRT_TableFooterRow.tsx

@@ -20,8 +20,9 @@ export const MRT_TableFooterRow: FC<Props> = ({
   if (
     !footerGroup.headers?.some(
       (h) =>
-        (typeof h.column.footer === 'string' && !!h.column.footer) ||
-        h.column.Footer,
+        (typeof h.column.columnDef.footer === 'string' &&
+          !!h.column.columnDef.footer) ||
+        h.column.columnDef.Footer,
     )
   )
     return null;

package/src/head/MRT_DraggableTableHeadCell.tsx

@@ -0,0 +1,52 @@
+import React, { FC } from 'react';
+import { useDrag, useDrop } from 'react-dnd';
+import { MRT_TableHeadCell } from './MRT_TableHeadCell';
+import type { MRT_Header, MRT_TableInstance } from '..';
+
+interface Props {
+  header: MRT_Header;
+  tableInstance: MRT_TableInstance;
+}
+
+export const MRT_DraggableTableHeadCell: FC<Props> = ({
+  header,
+  tableInstance,
+}) => {
+  const {
+    getState,
+    options: {},
+    setColumnOrder,
+  } = tableInstance;
+
+  const { columnOrder } = getState();
+
+  const reorder = (item: MRT_Header, newIndex: number) => {
+    const { index: currentIndex } = item;
+    columnOrder.splice(newIndex, 0, columnOrder.splice(currentIndex, 1)[0]);
+    setColumnOrder([...columnOrder]);
+  };
+
+  const [, drop] = useDrop({
+    accept: 'header',
+    drop: (item: MRT_Header) => reorder(item, header.index),
+  });
+
+  const [{ isDragging }, drag, preview] = useDrag({
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+    item: () => header,
+    type: 'header',
+  });
+
+  return (
+    <MRT_TableHeadCell
+      dragRef={drag}
+      dropRef={drop}
+      header={header}
+      isDragging={isDragging}
+      previewRef={preview}
+      tableInstance={tableInstance}
+    />
+  );
+};