material-react-table 0.40.9 → 0.40.12

package/README.md

@@ -1,9 +1,5 @@
 # Material React Table
 
-__Built with [Material UI <sup>V5</sup>](https://mui.com) and [TanStack Table <sup>V8</sup>](https://tanstack.com/table/v8)__
-
-_Quickly Create React Data Tables with Material Design_
-
 <a href="https://npmjs.com/package/material-react-table" target="_blank">
   <img alt="" src="https://badgen.net/npm/v/material-react-table?color=blue" />
 </a>
@@ -25,12 +21,9 @@ _Quickly Create React Data Tables with Material Design_
 
 ## About
 
-> This project is still in alpha, but is expected to enter beta by August 2022, and a stable 1.0 release shortly thereafter.
+__Built with [Material UI <sup>V5</sup>](https://mui.com) and [TanStack Table <sup>V8</sup>](https://tanstack.com/table/v8)__
 
-- A fully featured Material UI V5 implementation of Tanstack React Table V8
-- Inspired by material-table and the MUI X DataGrid
-- Written from the ground up in TypeScript
-- All internal Material UI components are easily customizable
+_Quickly Create React Data Tables with Material Design_
 
 Join the [Discord](https://discord.gg/5wqyRx6fnm) server to join in on the development discussion or ask questions
 
@@ -114,7 +107,7 @@ npm install material-react-table
 > Read the full usage docs [here](https://www.material-react-table.com/docs/getting-started/usage/)
 
 ```jsx
-import React, { useMemo, useState, useEffect } from 'react';
+import React, { useMemo, useRef, useState, useEffect } from 'react';
 import MaterialReactTable from 'material-react-table';
 
 export default function App() {
@@ -129,7 +122,7 @@ export default function App() {
         accessorFn: (row) => row.age, //alternate way
         id: 'age', //id required if you use accessorFn instead of accessorKey
         header: 'Age',
-        Header: <i style={{ color: 'red' }}>Age</i>, //optional custom markup
+        Header: <i>Age</i>, //optional custom markup
       },
     ],
     [],
@@ -156,15 +149,24 @@ export default function App() {
     //do something when the row selection changes
   }, [rowSelection]);
 
+  //Or, optionally, you can get a reference to the underlying table instance
+  const tableInstanceRef = useRef(null);
+
+  const someEventHandler = () => {
+    //read the table state during an event from the table instance ref
+    console.log(tableInstanceRef.current.getState().sorting);
+  }
+
   return (
     <MaterialReactTable 
       columns={columns} 
       data={data} 
       enableColumnOrdering //enable some features
       enableRowSelection 
-      enableStickyHeader
+      enablePagination={false} //disable a default feature
       onRowSelectionChange={setRowSelection} //hoist internal state to your own state (optional)
       state={{ rowSelection }} //manage your own state, pass it back to the table (optional)
+      tableInstanceRef={tableInstanceRef} //get a reference to the underlying table instance (optional)
    />
    );
 }
@@ -178,4 +180,4 @@ _Open in [Code Sandbox](https://codesandbox.io/s/simple-material-react-table-exa
   <img src="https://contrib.rocks/image?repo=kevinvandy/material-react-table" />
 </a>
 
-PRs are Welcome, but please discuss in [GitHub Discussions](https://github.com/KevinVandy/material-react-table/discussions) or the [Discord Server](https://discord.gg/5wqyRx6fnm) first!
+PRs are Welcome, but please discuss in [GitHub Discussions](https://github.com/KevinVandy/material-react-table/discussions) or the [Discord Server](https://discord.gg/5wqyRx6fnm) first if it is a large change!

package/dist/cjs/MaterialReactTable.d.ts

@@ -181,9 +181,11 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
      * @default gets set to the same value as `accessorKey` by default
      */
     id?: LiteralUnion<string & keyof TData>;
-    muiTableBodyCellCopyButtonProps?: ButtonProps | (({ cell, table, }: {
-        table: MRT_TableInstance<TData>;
+    muiTableBodyCellCopyButtonProps?: ButtonProps | (({ cell, column, row, table, }: {
         cell: MRT_Cell<TData>;
+        column: MRT_Column<TData>;
+        row: MRT_Row<TData>;
+        table: MRT_TableInstance<TData>;
     }) => ButtonProps);
     muiTableBodyCellEditTextFieldProps?: TextFieldProps | (({ cell, column, row, table, }: {
         cell: MRT_Cell<TData>;
@@ -229,7 +231,8 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
     }) => ReactNode[];
     sortingFn?: MRT_SortingFn;
 };
-export declare type MRT_DefinedColumnDef<TData extends Record<string, any> = {}> = Omit<MRT_ColumnDef<TData>, 'id'> & {
+export declare type MRT_DefinedColumnDef<TData extends Record<string, any> = {}> = Omit<MRT_ColumnDef<TData>, 'id' | 'defaultDisplayColumn'> & {
+    defaultDisplayColumn: Partial<MRT_ColumnDef<TData>>;
     id: string;
     _filterFn: MRT_FilterOption;
 };
@@ -281,6 +284,7 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     columns: MRT_ColumnDef<TData>[];
     data: TData[];
     defaultColumn?: Partial<MRT_ColumnDef<TData>>;
+    defaultDisplayColumn?: Partial<MRT_ColumnDef<TData>>;
     displayColumnDefOptions?: Partial<{
         [key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef>;
     }>;
@@ -530,5 +534,5 @@ export declare type Virtualizer = {
     scrollToIndex: (index: number, options?: any | undefined) => void;
     measure: () => void;
 };
-declare const _default: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
+declare const _default: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, defaultDisplayColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
 export default _default;

package/dist/cjs/column.utils.d.ts

@@ -2,85 +2,90 @@ import { ColumnOrderState, GroupingState } from '@tanstack/react-table';
 import { MaterialReactTableProps, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterOption } from '.';
 import { MRT_FilterFns } from './filterFns';
 import { MRT_SortingFns } from './sortingFns';
-export declare const defaultDisplayColumnDefOptions: Partial<MRT_ColumnDef<{}>>;
 export declare const getColumnId: <TData extends Record<string, any> = {}>(columnDef: MRT_ColumnDef<TData>) => string;
 export declare const getAllLeafColumnDefs: <TData extends Record<string, any> = {}>(columns: MRT_ColumnDef<TData>[]) => MRT_ColumnDef<TData>[];
-export declare const prepareColumns: <TData extends Record<string, any> = {}>(columnDefs: MRT_ColumnDef<TData>[], columnFilterFns: {
-    [key: string]: MRT_FilterOption;
-}, filterFns: {
-    between: {
-        <TData_1 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_1>, id: string, filterValues: [string | number, string | number]): boolean;
-        autoRemove(val: any): boolean;
+export declare const prepareColumns: <TData extends Record<string, any> = {}>({ columnDefs, columnFilterFns, defaultDisplayColumn, filterFns, sortingFns, }: {
+    columnDefs: MRT_ColumnDef<TData>[];
+    columnFilterFns: {
+        [key: string]: MRT_FilterOption;
     };
-    betweenInclusive: {
-        <TData_2 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_2>, id: string, filterValues: [string | number, string | number]): boolean;
-        autoRemove(val: any): boolean;
-    };
-    contains: {
-        <TData_3 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_3>, id: string, filterValue: string | number): boolean;
-        autoRemove(val: any): boolean;
-    };
-    empty: {
-        <TData_4 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_4>, id: string, _filterValue: string | number): boolean;
-        autoRemove(val: any): boolean;
-    };
-    endsWith: {
-        <TData_5 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_5>, id: string, filterValue: string | number): boolean;
-        autoRemove(val: any): boolean;
-    };
-    equals: {
-        <TData_6 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_6>, id: string, filterValue: string | number): boolean;
-        autoRemove(val: any): boolean;
-    };
-    fuzzy: {
-        <TData_7 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_7>, columnId: string, filterValue: string | number, addMeta: (item: import("@tanstack/match-sorter-utils").RankingInfo) => void): boolean;
-        autoRemove(val: any): boolean;
-    };
-    greaterThan: {
-        <TData_8 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_8>, id: string, filterValue: string | number): boolean;
-        autoRemove(val: any): boolean;
-    };
-    greaterThanOrEqualTo: {
-        <TData_9 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_9>, id: string, filterValue: string | number): boolean;
-        autoRemove(val: any): boolean;
-    };
-    lessThan: {
-        <TData_10 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_10>, id: string, filterValue: string | number): boolean;
-        autoRemove(val: any): boolean;
-    };
-    lessThanOrEqualTo: {
-        <TData_11 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_11>, id: string, filterValue: string | number): boolean;
-        autoRemove(val: any): boolean;
-    };
-    notEmpty: {
-        <TData_12 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_12>, id: string, _filterValue: string | number): boolean;
-        autoRemove(val: any): boolean;
-    };
-    notEquals: {
-        <TData_13 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_13>, id: string, filterValue: string | number): boolean;
-        autoRemove(val: any): boolean;
-    };
-    startsWith: {
-        <TData_14 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_14>, id: string, filterValue: string | number): boolean;
-        autoRemove(val: any): boolean;
-    };
-    includesString: import("@tanstack/table-core").FilterFn<any>;
-    includesStringSensitive: import("@tanstack/table-core").FilterFn<any>;
-    equalsString: import("@tanstack/table-core").FilterFn<any>;
-    arrIncludes: import("@tanstack/table-core").FilterFn<any>;
-    arrIncludesAll: import("@tanstack/table-core").FilterFn<any>;
-    arrIncludesSome: import("@tanstack/table-core").FilterFn<any>;
-    weakEquals: import("@tanstack/table-core").FilterFn<any>;
-    inNumberRange: import("@tanstack/table-core").FilterFn<any>;
-} & Record<string, import("@tanstack/table-core").FilterFn<any>>, sortingFns: {
-    fuzzy: <TData_15 extends Record<string, any> = {}>(rowA: import("@tanstack/table-core").Row<TData_15>, rowB: import("@tanstack/table-core").Row<TData_15>, columnId: string) => number;
-    alphanumeric: import("@tanstack/table-core").SortingFn<any>;
-    alphanumericCaseSensitive: import("@tanstack/table-core").SortingFn<any>;
-    text: import("@tanstack/table-core").SortingFn<any>;
-    textCaseSensitive: import("@tanstack/table-core").SortingFn<any>;
-    datetime: import("@tanstack/table-core").SortingFn<any>;
-    basic: import("@tanstack/table-core").SortingFn<any>;
-} & Record<string, import("@tanstack/table-core").SortingFn<any>>) => MRT_DefinedColumnDef<TData>[];
+    defaultDisplayColumn: Partial<MRT_ColumnDef<TData>>;
+    filterFns: {
+        between: {
+            <TData_1 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_1>, id: string, filterValues: [string | number, string | number]): boolean;
+            autoRemove(val: any): boolean;
+        };
+        betweenInclusive: {
+            <TData_2 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_2>, id: string, filterValues: [string | number, string | number]): boolean;
+            autoRemove(val: any): boolean;
+        };
+        contains: {
+            <TData_3 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_3>, id: string, filterValue: string | number): boolean;
+            autoRemove(val: any): boolean;
+        };
+        empty: {
+            <TData_4 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_4>, id: string, _filterValue: string | number): boolean;
+            autoRemove(val: any): boolean;
+        };
+        endsWith: {
+            <TData_5 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_5>, id: string, filterValue: string | number): boolean;
+            autoRemove(val: any): boolean;
+        };
+        equals: {
+            <TData_6 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_6>, id: string, filterValue: string | number): boolean;
+            autoRemove(val: any): boolean;
+        };
+        fuzzy: {
+            <TData_7 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_7>, columnId: string, filterValue: string | number, addMeta: (item: import("@tanstack/match-sorter-utils").RankingInfo) => void): boolean;
+            autoRemove(val: any): boolean;
+        };
+        greaterThan: {
+            <TData_8 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_8>, id: string, filterValue: string | number): boolean;
+            autoRemove(val: any): boolean;
+        };
+        greaterThanOrEqualTo: {
+            <TData_9 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_9>, id: string, filterValue: string | number): boolean;
+            autoRemove(val: any): boolean;
+        };
+        lessThan: {
+            <TData_10 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_10>, id: string, filterValue: string | number): boolean;
+            autoRemove(val: any): boolean;
+        };
+        lessThanOrEqualTo: {
+            <TData_11 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_11>, id: string, filterValue: string | number): boolean;
+            autoRemove(val: any): boolean;
+        };
+        notEmpty: {
+            <TData_12 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_12>, id: string, _filterValue: string | number): boolean;
+            autoRemove(val: any): boolean;
+        };
+        notEquals: {
+            <TData_13 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_13>, id: string, filterValue: string | number): boolean;
+            autoRemove(val: any): boolean;
+        };
+        startsWith: {
+            <TData_14 extends Record<string, any> = {}>(row: import("@tanstack/table-core").Row<TData_14>, id: string, filterValue: string | number): boolean;
+            autoRemove(val: any): boolean;
+        };
+        includesString: import("@tanstack/table-core").FilterFn<any>;
+        includesStringSensitive: import("@tanstack/table-core").FilterFn<any>;
+        equalsString: import("@tanstack/table-core").FilterFn<any>;
+        arrIncludes: import("@tanstack/table-core").FilterFn<any>;
+        arrIncludesAll: import("@tanstack/table-core").FilterFn<any>;
+        arrIncludesSome: import("@tanstack/table-core").FilterFn<any>;
+        weakEquals: import("@tanstack/table-core").FilterFn<any>;
+        inNumberRange: import("@tanstack/table-core").FilterFn<any>;
+    } & Record<string, import("@tanstack/table-core").FilterFn<any>>;
+    sortingFns: {
+        fuzzy: <TData_15 extends Record<string, any> = {}>(rowA: import("@tanstack/table-core").Row<TData_15>, rowB: import("@tanstack/table-core").Row<TData_15>, columnId: string) => number;
+        alphanumeric: import("@tanstack/table-core").SortingFn<any>;
+        alphanumericCaseSensitive: import("@tanstack/table-core").SortingFn<any>;
+        text: import("@tanstack/table-core").SortingFn<any>;
+        textCaseSensitive: import("@tanstack/table-core").SortingFn<any>;
+        datetime: import("@tanstack/table-core").SortingFn<any>;
+        basic: import("@tanstack/table-core").SortingFn<any>;
+    } & Record<string, import("@tanstack/table-core").SortingFn<any>>;
+}) => MRT_DefinedColumnDef<TData>[];
 export declare const reorderColumn: <TData extends Record<string, any> = {}>(draggedColumn: MRT_Column<TData>, targetColumn: MRT_Column<TData>, columnOrder: ColumnOrderState) => ColumnOrderState;
 export declare const showExpandColumn: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>, grouping?: GroupingState) => boolean;
 export declare const getLeadingDisplayColumnIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => MRT_DisplayColumnIds[];