material-react-table 0.31.0 → 0.32.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.31.0",
+  "version": "0.32.0",
   "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.",
@@ -19,50 +19,46 @@
   "bugs": {
     "url": "https://github.com/KevinVandy/material-react-table/issues"
   },
-  "main": "dist/index.js",
-  "module": "dist/material-react-table.esm.js",
+  "main": "dist/cjs/index.min.js",
+  "module": "dist/esm/material-react-table.esm.min.js",
   "typings": "dist/index.d.ts",
   "files": [
     "dist",
     "src"
   ],
+  "size-limit": [
+    {
+      "path": "dist/cjs/index.min.js",
+      "limit": "50 KB"
+    },
+    {
+      "path": "dist/esm/material-react-table.esm.min.js",
+      "limit": "50 KB"
+    }
+  ],
   "engines": {
     "node": ">=14"
   },
   "scripts": {
     "analyze": "size-limit --why",
-    "build": "tsdx build && size-limit && rm -rf material-react-table-docs/node_modules/material-react-table/dist && cp -r dist material-react-table-docs/node_modules/material-react-table/",
+    "build": "rm -rf dist && rollup -c && size-limit && rm -rf material-react-table-docs/node_modules/material-react-table/dist && cp -r dist material-react-table-docs/node_modules/material-react-table/",
     "build-storybook": "build-storybook",
     "format": "prettier -w .",
     "lint": "eslint .",
-    "prepare": "tsdx build",
     "size": "size-limit",
-    "start": "tsdx watch",
-    "storybook": "start-storybook -p 6006",
-    "test": "tsdx test --passWithNoTests"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "tsdx lint && format"
-    }
+    "storybook": "start-storybook -p 6006"
   },
-  "size-limit": [
-    {
-      "path": "dist/material-react-table.cjs.production.min.js",
-      "limit": "50 KB"
-    },
-    {
-      "path": "dist/material-react-table.esm.js",
-      "limit": "50 KB"
-    }
-  ],
   "devDependencies": {
     "@babel/core": "^7.18.9",
+    "@babel/preset-react": "^7.18.6",
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
     "@faker-js/faker": "^7.3.0",
     "@mui/icons-material": "^5.8.4",
     "@mui/material": "^5.9.2",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-typescript": "^8.3.4",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-a11y": "^6.5.9",
     "@storybook/addon-actions": "^6.5.9",
@@ -82,9 +78,12 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
+    "rollup": "^2.77.2",
+    "rollup-plugin-dts": "^4.2.2",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-terser": "^7.0.2",
     "size-limit": "^7.0.8",
     "storybook-dark-mode": "^1.1.0",
-    "tsdx": "^0.14.1",
     "tslib": "^2.4.0",
     "typescript": "^4.7.4"
   },
@@ -98,6 +97,6 @@
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.1.1",
     "@tanstack/react-table": "8.5.2",
-    "@tanstack/react-virtual": "^3.0.0-beta.13"
+    "@tanstack/react-virtual": "^3.0.0-beta.14"
   }
 }

package/src/MaterialReactTable.tsx

@@ -30,6 +30,7 @@ import type {
   Cell,
   Column,
   ColumnDef,
+  CoreColumnDefAccessorKey,
   FilterFn,
   Header,
   HeaderGroup,
@@ -139,8 +140,6 @@ export type MRT_TableState<TData extends Record<string, any> = {}> =
 
 export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
   ColumnDef<TData, unknown>,
-  | 'accessorFn'
-  | 'accessorKey'
   | 'aggregatedCell'
   | 'cell'
   | 'columns'
@@ -152,47 +151,59 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
 > & {
   AggregatedCell?: ({
     cell,
+    column,
     table,
   }: {
     cell: MRT_Cell<TData>;
+    column: MRT_Column<TData>;
     table: MRT_TableInstance<TData>;
   }) => ReactNode;
   Cell?: ({
     cell,
+    column,
     table,
   }: {
     cell: MRT_Cell<TData>;
+    column: MRT_Column<TData>;
     table: MRT_TableInstance<TData>;
   }) => ReactNode;
   Edit?: ({
     cell,
+    column,
     table,
   }: {
     cell: MRT_Cell<TData>;
+    column: MRT_Column<TData>;
     table: MRT_TableInstance<TData>;
   }) => ReactNode;
   Filter?: ({
+    column,
     header,
     table,
   }: {
+    column: MRT_Column<TData>;
     header: MRT_Header<TData>;
     table: MRT_TableInstance<TData>;
   }) => ReactNode;
   Footer?:
     | ReactNode
     | (({
+        column,
         footer,
         table,
       }: {
+        column: MRT_Column<TData>;
         footer: MRT_Header<TData>;
         table: MRT_TableInstance<TData>;
       }) => ReactNode);
   Header?:
     | ReactNode
     | (({
+        column,
         header,
         table,
       }: {
+        column: MRT_Column<TData>;
         header: MRT_Header<TData>;
         table: MRT_TableInstance<TData>;
       }) => ReactNode);
@@ -206,10 +217,12 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
   /**
    * Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
    * Specify which key in the row this column should use to access the correct data.
+   * Also supports Deep Key Dot Notation.
    *
-   * @example accessorKey: 'username'
+   * @example accessorKey: 'username' //simple
+   * @example accessorKey: 'name.firstName' //deep key dot notation
    */
-  accessorKey?: string & keyof TData;
+  accessorKey?: CoreColumnDefAccessorKey<TData, unknown>['accessorKey'];
   /**
    * Specify what type of column this is. Either `data`, `display`, or `group`. Defaults to `data`.
    * Leave this blank if you are just creating a normal data column.

package/src/body/MRT_TableBodyCell.tsx

@@ -262,20 +262,23 @@ export const MRT_TableBodyCell: FC<Props> = ({
             table={table}
           />
         ) : columnDefType === 'display' ? (
-          columnDef.Cell?.({ cell, table })
+          columnDef.Cell?.({ cell, column, table })
         ) : isEditing ? (
           <MRT_EditCellTextField cell={cell} table={table} />
         ) : (enableClickToCopy || columnDef.enableClickToCopy) &&
           columnDef.enableClickToCopy !== false ? (
           <>
             <MRT_CopyButton cell={cell} table={table}>
-              <>{columnDef?.Cell?.({ cell, table }) ?? cell.renderValue()}</>
+              <>
+                {columnDef?.Cell?.({ cell, column, table }) ??
+                  cell.renderValue()}
+              </>
             </MRT_CopyButton>
             {cell.getIsGrouped() && <> ({row.subRows?.length})</>}
           </>
         ) : (
           <>
-            {columnDef?.Cell?.({ cell, table }) ?? cell.renderValue()}
+            {columnDef?.Cell?.({ cell, column, table }) ?? cell.renderValue()}
             {cell.getIsGrouped() && <> ({row.subRows?.length ?? ''})</>}
           </>
         )}

package/src/column.utils.ts

@@ -10,6 +10,21 @@ import {
 import { MRT_FilterFns } from './filtersFns';
 import { MRT_SortingFns } from './sortingFns';
 
+export const defaultDisplayColumnDefOptions = {
+  columnDefType: 'display',
+  enableClickToCopy: false,
+  enableColumnActions: false,
+  enableColumnDragging: false,
+  enableColumnFilter: false,
+  enableColumnOrdering: false,
+  enableEditing: false,
+  enableGlobalFilter: false,
+  enableGrouping: false,
+  enableHiding: false,
+  enableResizing: false,
+  enableSorting: false,
+} as Partial<MRT_ColumnDef>;
+
 const getColumnId = <TData extends Record<string, any> = {}>(
   columnDef: MRT_ColumnDef<TData>,
 ): string =>
@@ -60,6 +75,11 @@ export const prepareColumns = <TData extends Record<string, any> = {}>(
         // @ts-ignore
         columnDef.sortingFn = MRT_SortingFns[columnDef.sortingFn];
       }
+    } else if (columnDef.columnDefType === 'display') {
+      columnDef = {
+        ...columnDef,
+        ...(defaultDisplayColumnDefOptions as MRT_ColumnDef<TData>),
+      };
     }
     return columnDef;
   }) as MRT_DefinedColumnDef<TData>[];

package/src/footer/MRT_TableFooterCell.tsx

@@ -66,6 +66,7 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, table }) => {
           ? null
           : (columnDef.Footer instanceof Function
               ? columnDef.Footer?.({
+                  column,
                   footer,
                   table,
                 })

package/src/head/MRT_TableHeadCell.tsx

@@ -98,6 +98,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
 
   const headerElement = ((columnDef?.Header instanceof Function
     ? columnDef?.Header?.({
+        column,
         header,
         table,
       })
@@ -147,9 +148,9 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
         pb:
           columnDefType === 'display'
             ? 0
-            : showColumnFilters
-            ? '0.5rem'
-            : undefined,
+            : showColumnFilters || density === 'compact'
+            ? '0.4rem'
+            : '0.6rem',
         position:
           column.getIsPinned() && columnDefType !== 'group'
             ? 'sticky'

package/src/index.tsx

@@ -1,9 +1,3 @@
 import MaterialReactTable from './MaterialReactTable';
 export default MaterialReactTable;
 export * from './MaterialReactTable';
-
-import type { MRT_Icons } from './icons';
-export type { MRT_Icons };
-
-import type { MRT_Localization } from './localization';
-export type { MRT_Localization };

package/src/inputs/MRT_EditCellTextField.tsx

@@ -67,7 +67,7 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, table }) => {
   };
 
   if (enableEditing && columnDef.enableEditing !== false && columnDef.Edit) {
-    return <>{columnDef.Edit?.({ cell, table })}</>;
+    return <>{columnDef.Edit?.({ cell, column, table })}</>;
   }
 
   return (

package/src/inputs/MRT_FilterTextField.tsx

@@ -177,7 +177,7 @@ export const MRT_FilterTextField: FC<Props> = ({
   };
 
   if (columnDef.Filter) {
-    return <>{columnDef.Filter?.({ header, table })}</>;
+    return <>{columnDef.Filter?.({ column, header, table })}</>;
   }
 
   return (

package/src/table/MRT_TableRoot.tsx

@@ -21,6 +21,7 @@ import {
   getAllLeafColumnDefs,
   getDefaultColumnOrderIds,
   getDefaultColumnFilterFn,
+  defaultDisplayColumnDefOptions,
 } from '../column.utils';
 import { MRT_FilterFns } from '../filtersFns';
 import type {
@@ -34,22 +35,6 @@ import type {
   MaterialReactTableProps,
 } from '..';
 
-const defaultDisplayColumnDefOptions = {
-  columnDefType: 'display',
-  enableClickToCopy: false,
-  enableColumnActions: false,
-  enableColumnDragging: false,
-  enableColumnFilter: false,
-  enableColumnOrdering: false,
-  enableEditing: false,
-  enableGlobalFilter: false,
-  enableGrouping: false,
-  enableHiding: false,
-  enablePinning: false,
-  enableResizing: false,
-  enableSorting: false,
-} as Partial<MRT_ColumnDef>;
-
 export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
   props: MaterialReactTableProps<TData>,
 ) => {

package/dist/index.js

@@ -1,8 +0,0 @@
-
-'use strict'
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./material-react-table.cjs.production.min.js')
-} else {
-  module.exports = require('./material-react-table.cjs.development.js')
-}