material-react-table 0.40.11 → 1.0.0-beta.0

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,11 @@ _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.
+> Now in Beta!
 
-- 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
+__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_
 
 Join the [Discord](https://discord.gg/5wqyRx6fnm) server to join in on the development discussion or ask questions
 
@@ -114,7 +109,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 +124,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 +151,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 +182,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

@@ -231,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;
 };
@@ -283,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>;
     }>;
@@ -532,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[];

package/dist/cjs/index.js

@@ -492,20 +492,6 @@ const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table,
             React__default["default"].createElement(DragHandleIcon, null))));
 };
 
-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,
-};
 const getColumnId = (columnDef) => { var _a, _b, _c, _d; return (_d = (_a = columnDef.id) !== null && _a !== void 0 ? _a : (_c = (_b = columnDef.accessorKey) === null || _b === void 0 ? void 0 : _b.toString) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : columnDef.header; };
 const getAllLeafColumnDefs = (columns) => {
     let lowestLevelColumns = columns;
@@ -522,7 +508,7 @@ const getAllLeafColumnDefs = (columns) => {
     }
     return lowestLevelColumns.filter((col) => !col.columns);
 };
-const prepareColumns = (columnDefs, columnFilterFns, filterFns, sortingFns) => columnDefs.map((columnDef) => {
+const prepareColumns = ({ columnDefs, columnFilterFns, defaultDisplayColumn, filterFns, sortingFns, }) => columnDefs.map((columnDef) => {
     var _a, _b;
     if (!columnDef.id)
         columnDef.id = getColumnId(columnDef);
@@ -533,7 +519,13 @@ const prepareColumns = (columnDefs, columnFilterFns, filterFns, sortingFns) => c
         columnDef.columnDefType = 'data';
     if (!!((_a = columnDef.columns) === null || _a === void 0 ? void 0 : _a.length)) {
         columnDef.columnDefType = 'group';
-        columnDef.columns = prepareColumns(columnDef.columns, columnFilterFns, filterFns, sortingFns);
+        columnDef.columns = prepareColumns({
+            columnDefs: columnDef.columns,
+            columnFilterFns,
+            defaultDisplayColumn,
+            filterFns,
+            sortingFns,
+        });
     }
     else if (columnDef.columnDefType === 'data') {
         if (Object.keys(filterFns).includes(columnFilterFns[columnDef.id])) {
@@ -548,7 +540,7 @@ const prepareColumns = (columnDefs, columnFilterFns, filterFns, sortingFns) => c
         }
     }
     else if (columnDef.columnDefType === 'display') {
-        columnDef = Object.assign(Object.assign({}, defaultDisplayColumnDefOptions), columnDef);
+        columnDef = Object.assign(Object.assign({}, defaultDisplayColumn), columnDef);
     }
     return columnDef;
 });
@@ -1038,7 +1030,7 @@ const MRT_GlobalFilterTextField = ({ table, }) => {
     const textFieldProps = muiSearchTextFieldProps instanceof Function
         ? muiSearchTextFieldProps({ table })
         : muiSearchTextFieldProps;
-    return (React__default["default"].createElement(material.Collapse, { in: showGlobalFilter, orientation: "horizontal" },
+    return (React__default["default"].createElement(material.Collapse, { in: showGlobalFilter, orientation: "horizontal", unmountOnExit: true, mountOnEnter: true },
         React__default["default"].createElement(material.TextField, Object.assign({ placeholder: localization.search, onChange: handleChange, value: searchValue !== null && searchValue !== void 0 ? searchValue : '', variant: "standard", InputProps: {
                 startAdornment: enableGlobalFilterModes ? (React__default["default"].createElement(material.InputAdornment, { position: "start" },
                     React__default["default"].createElement(material.Tooltip, { arrow: true, title: localization.changeSearchMode },
@@ -1087,11 +1079,11 @@ const MRT_TablePagination = ({ table, position }) => {
     return (React__default["default"].createElement(material.TablePagination, Object.assign({ SelectProps: {
             sx: { m: '0 1rem 0 1ch' },
             MenuProps: { MenuListProps: { disablePadding: true } },
-        }, component: "div", count: totalRowCount, onPageChange: (_, newPage) => setPageIndex(newPage), onRowsPerPageChange: handleChangeRowsPerPage, page: pageIndex, rowsPerPage: pageSize, rowsPerPageOptions: [5, 10, 15, 20, 25, 30, 50, 100], showFirstButton: showFirstLastPageButtons, showLastButton: showFirstLastPageButtons }, tablePaginationProps, { sx: (theme) => (Object.assign({ m: '0 0.5rem', mt: position === 'top' &&
+        }, component: "div", count: totalRowCount, onPageChange: (_, newPage) => setPageIndex(newPage), onRowsPerPageChange: handleChangeRowsPerPage, page: pageIndex, rowsPerPage: pageSize, rowsPerPageOptions: [5, 10, 15, 20, 25, 30, 50, 100], showFirstButton: showFirstLastPageButtons, showLastButton: showFirstLastPageButtons }, tablePaginationProps, { sx: (theme) => (Object.assign({ mt: position === 'top' &&
                 enableToolbarInternalActions &&
                 !showGlobalFilter
                 ? '3.5rem'
-                : undefined, position: 'relative', zIndex: 2 }, ((tablePaginationProps === null || tablePaginationProps === void 0 ? void 0 : tablePaginationProps.sx) instanceof Function
+                : '-0.25rem', position: 'relative', zIndex: 2 }, ((tablePaginationProps === null || tablePaginationProps === void 0 ? void 0 : tablePaginationProps.sx) instanceof Function
             ? tablePaginationProps.sx(theme)
             : tablePaginationProps === null || tablePaginationProps === void 0 ? void 0 : tablePaginationProps.sx))) })));
 };
@@ -1199,7 +1191,7 @@ const MRT_ToggleGlobalFilterButton = (_a) => {
 
 const MRT_ToolbarInternalButtons = ({ table }) => {
     var _a;
-    const { options: { enableColumnFilters, enableColumnOrdering, enableDensityToggle, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, enablePinning, positionGlobalFilter, renderToolbarInternalActions, }, } = table;
+    const { options: { enableColumnFilters, enableColumnOrdering, enableDensityToggle, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, enablePinning, initialState, renderToolbarInternalActions, }, } = table;
     return (React__default["default"].createElement(material.Box, { sx: {
             alignItems: 'center',
             display: 'flex',
@@ -1207,8 +1199,9 @@ const MRT_ToolbarInternalButtons = ({ table }) => {
         } }, (_a = renderToolbarInternalActions === null || renderToolbarInternalActions === void 0 ? void 0 : renderToolbarInternalActions({
         table,
     })) !== null && _a !== void 0 ? _a : (React__default["default"].createElement(React__default["default"].Fragment, null,
-        enableGlobalFilter && positionGlobalFilter === 'right' && (React__default["default"].createElement(MRT_GlobalFilterTextField, { table: table })),
-        enableFilters && enableGlobalFilter && (React__default["default"].createElement(MRT_ToggleGlobalFilterButton, { table: table })),
+        enableFilters &&
+            enableGlobalFilter &&
+            !(initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) && (React__default["default"].createElement(MRT_ToggleGlobalFilterButton, { table: table })),
         enableFilters && enableColumnFilters && (React__default["default"].createElement(MRT_ToggleFiltersButton, { table: table })),
         (enableHiding || enableColumnOrdering || enablePinning) && (React__default["default"].createElement(MRT_ShowHideColumnsButton, { table: table })),
         enableDensityToggle && (React__default["default"].createElement(MRT_ToggleDensePaddingButton, { table: table })),
@@ -1282,7 +1275,9 @@ const MRT_TopToolbar = ({ table }) => {
                 width: '100%',
             } },
             enableGlobalFilter && positionGlobalFilter === 'left' && (React__default["default"].createElement(MRT_GlobalFilterTextField, { table: table })), (_a = renderTopToolbarCustomActions === null || renderTopToolbarCustomActions === void 0 ? void 0 : renderTopToolbarCustomActions({ table })) !== null && _a !== void 0 ? _a : React__default["default"].createElement("span", null),
-            enableToolbarInternalActions ? (React__default["default"].createElement(MRT_ToolbarInternalButtons, { table: table })) : (enableGlobalFilter &&
+            enableToolbarInternalActions ? (React__default["default"].createElement(material.Box, { sx: { display: 'flex', flexWrap: 'wrap' } },
+                enableGlobalFilter && positionGlobalFilter === 'right' && (React__default["default"].createElement(MRT_GlobalFilterTextField, { table: table })),
+                React__default["default"].createElement(MRT_ToolbarInternalButtons, { table: table }))) : (enableGlobalFilter &&
                 positionGlobalFilter === 'right' && (React__default["default"].createElement(MRT_GlobalFilterTextField, { table: table })))),
         enablePagination &&
             ['top', 'both'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (React__default["default"].createElement(MRT_TablePagination, { table: table, position: "top" })),
@@ -1310,8 +1305,11 @@ const MRT_BottomToolbar = ({ table }) => {
         positionToolbarAlertBanner === 'bottom' && (React__default["default"].createElement(MRT_ToolbarAlertBanner, { table: table })),
         ['both', 'bottom'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (React__default["default"].createElement(MRT_ToolbarDropZone, { table: table })),
         React__default["default"].createElement(material.Box, { sx: {
+                alignItems: 'flex-start',
+                boxSizing: 'border-box',
                 display: 'flex',
                 justifyContent: 'space-between',
+                p: '0.5rem',
                 width: '100%',
             } },
             renderBottomToolbarCustomActions ? (renderBottomToolbarCustomActions({ table })) : (React__default["default"].createElement("span", null)),
@@ -1455,6 +1453,9 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
     const handleFilterMenuOpen = (event) => {
         setAnchorEl(event.currentTarget);
     };
+    React.useEffect(() => {
+        setFilterValue('');
+    }, [columnDef._filterFn]);
     if (columnDef.Filter) {
         return React__default["default"].createElement(React__default["default"].Fragment, null, (_e = columnDef.Filter) === null || _e === void 0 ? void 0 : _e.call(columnDef, { column, header, table }));
     }
@@ -1483,7 +1484,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                         React__default["default"].createElement("span", null,
                             React__default["default"].createElement(material.IconButton, { "aria-label": localization.changeFilterMode, onClick: handleFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' } },
                                 React__default["default"].createElement(FilterListIcon, null)))),
-                    filterChipLabel && (React__default["default"].createElement(material.Chip, { onDelete: handleClearEmptyFilterChip, label: filterChipLabel })))) : (React__default["default"].createElement(FilterListIcon, { style: { marginRight: '4px' } })),
+                    filterChipLabel && (React__default["default"].createElement(material.Chip, { onDelete: handleClearEmptyFilterChip, label: filterChipLabel })))) : null,
                 endAdornment: !filterChipLabel && (React__default["default"].createElement(material.InputAdornment, { position: "end" },
                     React__default["default"].createElement(material.Tooltip, { arrow: true, placement: "right", title: (_g = localization.clearFilter) !== null && _g !== void 0 ? _g : '' },
                         React__default["default"].createElement("span", null,
@@ -2444,12 +2445,12 @@ const MRT_TableRoot = (props) => {
     const displayColumns = React.useMemo(() => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         return [
-            columnOrder.includes('mrt-row-drag') && Object.assign(Object.assign(Object.assign({ header: (_a = props.localization) === null || _a === void 0 ? void 0 : _a.move, size: 60 }, defaultDisplayColumnDefOptions), (_b = props.displayColumnDefOptions) === null || _b === void 0 ? void 0 : _b['mrt-row-drag']), { id: 'mrt-row-drag' }),
-            columnOrder.includes('mrt-row-actions') && Object.assign(Object.assign(Object.assign({ Cell: ({ cell, row }) => (React__default["default"].createElement(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, table: table })), header: (_c = props.localization) === null || _c === void 0 ? void 0 : _c.actions, size: 70 }, defaultDisplayColumnDefOptions), (_d = props.displayColumnDefOptions) === null || _d === void 0 ? void 0 : _d['mrt-row-actions']), { id: 'mrt-row-actions' }),
+            columnOrder.includes('mrt-row-drag') && Object.assign(Object.assign(Object.assign({ header: (_a = props.localization) === null || _a === void 0 ? void 0 : _a.move, size: 60 }, props.defaultDisplayColumn), (_b = props.displayColumnDefOptions) === null || _b === void 0 ? void 0 : _b['mrt-row-drag']), { id: 'mrt-row-drag' }),
+            columnOrder.includes('mrt-row-actions') && Object.assign(Object.assign(Object.assign({ Cell: ({ cell, row }) => (React__default["default"].createElement(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, table: table })), header: (_c = props.localization) === null || _c === void 0 ? void 0 : _c.actions, size: 70 }, props.defaultDisplayColumn), (_d = props.displayColumnDefOptions) === null || _d === void 0 ? void 0 : _d['mrt-row-actions']), { id: 'mrt-row-actions' }),
             columnOrder.includes('mrt-row-expand') &&
-                showExpandColumn(props, grouping) && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React__default["default"].createElement(MRT_ExpandButton, { row: row, table: table })), Header: () => props.enableExpandAll ? (React__default["default"].createElement(MRT_ExpandAllButton, { table: table })) : null, header: (_e = props.localization) === null || _e === void 0 ? void 0 : _e.expand, size: 60 }, defaultDisplayColumnDefOptions), (_f = props.displayColumnDefOptions) === null || _f === void 0 ? void 0 : _f['mrt-row-expand']), { id: 'mrt-row-expand' }),
-            columnOrder.includes('mrt-row-select') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React__default["default"].createElement(MRT_SelectCheckbox, { row: row, table: table })), Header: () => props.enableSelectAll ? (React__default["default"].createElement(MRT_SelectCheckbox, { selectAll: true, table: table })) : null, header: (_g = props.localization) === null || _g === void 0 ? void 0 : _g.select, size: 60 }, defaultDisplayColumnDefOptions), (_h = props.displayColumnDefOptions) === null || _h === void 0 ? void 0 : _h['mrt-row-select']), { id: 'mrt-row-select' }),
-            columnOrder.includes('mrt-row-numbers') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => row.index + 1, Header: () => { var _a; return (_a = props.localization) === null || _a === void 0 ? void 0 : _a.rowNumber; }, header: (_j = props.localization) === null || _j === void 0 ? void 0 : _j.rowNumbers, size: 60 }, defaultDisplayColumnDefOptions), (_k = props.displayColumnDefOptions) === null || _k === void 0 ? void 0 : _k['mrt-row-numbers']), { id: 'mrt-row-numbers' }),
+                showExpandColumn(props, grouping) && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React__default["default"].createElement(MRT_ExpandButton, { row: row, table: table })), Header: () => props.enableExpandAll ? (React__default["default"].createElement(MRT_ExpandAllButton, { table: table })) : null, header: (_e = props.localization) === null || _e === void 0 ? void 0 : _e.expand, size: 60 }, props.defaultDisplayColumn), (_f = props.displayColumnDefOptions) === null || _f === void 0 ? void 0 : _f['mrt-row-expand']), { id: 'mrt-row-expand' }),
+            columnOrder.includes('mrt-row-select') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React__default["default"].createElement(MRT_SelectCheckbox, { row: row, table: table })), Header: () => props.enableSelectAll ? (React__default["default"].createElement(MRT_SelectCheckbox, { selectAll: true, table: table })) : null, header: (_g = props.localization) === null || _g === void 0 ? void 0 : _g.select, size: 60 }, props.defaultDisplayColumn), (_h = props.displayColumnDefOptions) === null || _h === void 0 ? void 0 : _h['mrt-row-select']), { id: 'mrt-row-select' }),
+            columnOrder.includes('mrt-row-numbers') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => row.index + 1, Header: () => { var _a; return (_a = props.localization) === null || _a === void 0 ? void 0 : _a.rowNumber; }, header: (_j = props.localization) === null || _j === void 0 ? void 0 : _j.rowNumbers, size: 60 }, props.defaultDisplayColumn), (_k = props.displayColumnDefOptions) === null || _k === void 0 ? void 0 : _k['mrt-row-numbers']), { id: 'mrt-row-numbers' }),
         ].filter(Boolean);
     }, [
         columnOrder,
@@ -2474,8 +2475,14 @@ const MRT_TableRoot = (props) => {
         props.renderDetailPanel,
     ]);
     const columnDefs = React.useMemo(() => {
-        var _a, _b;
-        return prepareColumns([...displayColumns, ...props.columns], (_b = (_a = props.state) === null || _a === void 0 ? void 0 : _a.columnFilterFns) !== null && _b !== void 0 ? _b : columnFilterFns, props.filterFns, props.sortingFns);
+        var _a, _b, _c;
+        return prepareColumns({
+            columnDefs: [...displayColumns, ...props.columns],
+            columnFilterFns: (_b = (_a = props.state) === null || _a === void 0 ? void 0 : _a.columnFilterFns) !== null && _b !== void 0 ? _b : columnFilterFns,
+            defaultDisplayColumn: (_c = props.defaultDisplayColumn) !== null && _c !== void 0 ? _c : {},
+            filterFns: props.filterFns,
+            sortingFns: props.sortingFns,
+        });
     }, [
         columnFilterFns,
         displayColumns,
@@ -2534,8 +2541,8 @@ const MRT_TableRoot = (props) => {
 };
 
 var MaterialReactTable = (_a) => {
-    var { aggregationFns, autoResetExpanded = false, columnResizeMode = 'onEnd', defaultColumn = { minSize: 40, maxSize: 1000, size: 180 }, editingMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enablePinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, localization, positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'original', selectAllMode = 'all', sortingFns } = _a, rest = __rest(_a, ["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"]);
-    return (React__default["default"].createElement(MRT_TableRoot, Object.assign({ aggregationFns: Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns), autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: defaultColumn, editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterRankedResults: enableGlobalFilterRankedResults, enableGrouping: enableGrouping, enableHiding: enableHiding, enableMultiRowSelection: enableMultiRowSelection, enableMultiSort: enableMultiSort, enablePagination: enablePagination, enablePinning: enablePinning, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, enableSorting: enableSorting, enableStickyHeader: enableStickyHeader, enableTableFooter: enableTableFooter, enableTableHead: enableTableHead, enableToolbarInternalActions: enableToolbarInternalActions, enableTopToolbar: enableTopToolbar, filterFns: Object.assign(Object.assign({}, MRT_FilterFns), filterFns), icons: Object.assign(Object.assign({}, MRT_Default_Icons), icons), localization: Object.assign(Object.assign({}, MRT_DefaultLocalization_EN), localization), positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: Object.assign(Object.assign({}, MRT_SortingFns), sortingFns) }, rest)));
+    var { aggregationFns, autoResetExpanded = false, columnResizeMode = 'onEnd', defaultColumn = { minSize: 40, maxSize: 1000, size: 180 }, defaultDisplayColumn, editingMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enablePinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, localization, positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'original', selectAllMode = 'all', sortingFns } = _a, rest = __rest(_a, ["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"]);
+    return (React__default["default"].createElement(MRT_TableRoot, Object.assign({ aggregationFns: Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns), autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: defaultColumn, defaultDisplayColumn: Object.assign({ columnDefType: 'display', enableClickToCopy: false, enableColumnActions: false, enableColumnDragging: false, enableColumnFilter: false, enableColumnOrdering: false, enableEditing: false, enableGlobalFilter: false, enableGrouping: false, enableHiding: false, enableResizing: false, enableSorting: false }, defaultDisplayColumn), editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterRankedResults: enableGlobalFilterRankedResults, enableGrouping: enableGrouping, enableHiding: enableHiding, enableMultiRowSelection: enableMultiRowSelection, enableMultiSort: enableMultiSort, enablePagination: enablePagination, enablePinning: enablePinning, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, enableSorting: enableSorting, enableStickyHeader: enableStickyHeader, enableTableFooter: enableTableFooter, enableTableHead: enableTableHead, enableToolbarInternalActions: enableToolbarInternalActions, enableTopToolbar: enableTopToolbar, filterFns: Object.assign(Object.assign({}, MRT_FilterFns), filterFns), icons: Object.assign(Object.assign({}, MRT_Default_Icons), icons), localization: Object.assign(Object.assign({}, MRT_DefaultLocalization_EN), localization), positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: Object.assign(Object.assign({}, MRT_SortingFns), sortingFns) }, rest)));
 };
 
 exports.MRT_CopyButton = MRT_CopyButton;