material-react-table 1.0.0-beta.6 → 1.0.0-beta.9

package/README.md

@@ -48,10 +48,12 @@ See all [Props and Options](https://www.material-react-table.com/docs/api)
 
 View additional [storybook examples](https://www.material-react-table.dev/)
 
-## Features (All Features work and are MVP, but are still being polished)
+## Features
 
 _All features can easily be enabled/disabled_
 
+_**Fully Fleshed out [Docs](https://www.material-react-table.com/docs/guides#guides) are available for all features**_
+
 - [x] < 37kb gzipped - [Bundlephobia](https://bundlephobia.com/package/material-react-table)
 - [x] Advanced TypeScript Generics Support (TypeScript Optional)
 - [x] Aggregation and Grouping (Sum, Average, Count, etc.)
@@ -63,7 +65,7 @@ _All features can easily be enabled/disabled_
 - [x] Column Resizing
 - [x] Customize Icons
 - [x] Customize Styling of internal Mui Components
-- [x] Data Editing (3 different editing modes)
+- [x] Data Editing (4 different editing modes)
 - [x] Density Toggle
 - [x] Detail Panels (Expansion)
 - [x] Filtering (supports client-side and server-side)
@@ -71,7 +73,7 @@ _All features can easily be enabled/disabled_
 - [x] Global Filtering (Search across all columns, rank by best match)
 - [x] Header Groups & Footers
 - [x] Localization (i18n) support
-- [x] Manage your own state
+- [x] Manage your own state or let the table manage it internally for you
 - [x] Pagination (supports client-side and server-side)
 - [x] Row Actions (Your Custom Action Buttons)
 - [x] Row Numbers
@@ -112,33 +114,31 @@ npm install material-react-table
 import React, { useMemo, useRef, useState, useEffect } from 'react';
 import MaterialReactTable from 'material-react-table';
 
+const data = [
+  {
+    name: 'John',
+    age: 30,
+  },
+  {
+    name: 'Sara',
+    age: 25,
+  },
+]
+
 export default function App() {
   const columns = useMemo(
     () => [
       {
         accessorKey: 'name', //simple recommended way to define a column
         header: 'Name',
-        muiTableHeadCellProps: { sx: { color: 'green' } }, //custom props
+        muiTableHeadCellProps: { sx: { color: 'green' } }, //optional custom props
+        Cell: ({ cell}) => <span>{cell.getValue()}</span>, //optional custom cell render
       },
       {
         accessorFn: (row) => row.age, //alternate way
         id: 'age', //id required if you use accessorFn instead of accessorKey
         header: 'Age',
-        Header: <i>Age</i>, //optional custom markup
-      },
-    ],
-    [],
-  );
-
-  const data = useMemo(
-    () => [
-      {
-        name: 'John',
-        age: 30,
-      },
-      {
-        name: 'Sara',
-        age: 25,
+        Header: () => <i>Age</i>, //optional custom header render
       },
     ],
     [],
@@ -170,7 +170,7 @@ export default function App() {
       state={{ rowSelection }} //manage your own state, pass it back to the table (optional)
       tableInstanceRef={tableInstanceRef} //get a reference to the underlying table instance (optional)
    />
-   );
+  );
 }
 ```
 

package/dist/cjs/MaterialReactTable.d.ts

@@ -467,6 +467,9 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     positionPagination?: 'bottom' | 'top' | 'both';
     positionToolbarAlertBanner?: 'bottom' | 'top' | 'none';
     positionToolbarDropZone?: 'bottom' | 'top' | 'none' | 'both';
+    renderBottomToolbar?: ({ table, }: {
+        table: MRT_TableInstance<TData>;
+    }) => ReactNode | ReactNode[];
     renderBottomToolbarCustomActions?: ({ table, }: {
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
@@ -503,6 +506,9 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     renderToolbarInternalActions?: ({ table, }: {
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
+    renderTopToolbar?: ({ table, }: {
+        table: MRT_TableInstance<TData>;
+    }) => ReactNode | ReactNode[];
     renderTopToolbarCustomActions?: ({ table, }: {
         table: MRT_TableInstance<TData>;
     }) => ReactNode;

package/dist/cjs/index.js

@@ -393,7 +393,7 @@ const mrtFilterOptions = (localization) => [
         divider: false,
     },
 ];
-const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, table, }) => {
+const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilterValue, table, }) => {
     var _a, _b, _c, _d;
     const { getState, options: { columnFilterModeOptions, globalFilterModeOptions, localization, renderColumnFilterModeMenuItems, renderGlobalFilterModeMenuItems, }, setColumnFilterFns, setGlobalFilterFn, } = table;
     const { globalFilterFn, density } = getState();
@@ -412,11 +412,19 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, table,
             if (['empty', 'notEmpty'].includes(option)) {
                 column.setFilterValue(' ');
             }
-            else if (option === 'between') {
+            else if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === 'multi-select' ||
+                ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'].includes(option)) {
+                column.setFilterValue([]);
+                setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue([]);
+            }
+            else if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === 'range' ||
+                ['between', 'betweenInclusive', 'inNumberRange'].includes(option)) {
                 column.setFilterValue(['', '']);
+                setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
             }
             else {
                 column.setFilterValue('');
+                setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
             }
         }
         else {
@@ -1080,7 +1088,7 @@ const MRT_GlobalFilterTextField = ({ table, }) => {
                     textFieldProps.inputRef = inputRef;
                 }
             } })),
-        React__default["default"].createElement(MRT_FilterOptionMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table })));
+        React__default["default"].createElement(MRT_FilterOptionMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table, onSelect: handleClear })));
 };
 
 const MRT_LinearProgressBar = ({ isTopToolbar, table }) => {
@@ -1217,13 +1225,13 @@ const MRT_ToggleGlobalFilterButton = (_a) => {
     var _b;
     var { table } = _a, rest = __rest(_a, ["table"]);
     const { getState, options: { icons: { SearchIcon, SearchOffIcon }, localization, }, refs: { searchInputRef }, setShowGlobalFilter, } = table;
-    const { showGlobalFilter } = getState();
+    const { globalFilter, showGlobalFilter } = getState();
     const handleToggleSearch = () => {
         setShowGlobalFilter(!showGlobalFilter);
         queueMicrotask(() => { var _a; return (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
     };
     return (React__default["default"].createElement(material.Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideSearch },
-        React__default["default"].createElement(material.IconButton, Object.assign({ onClick: handleToggleSearch }, rest, { title: undefined }), showGlobalFilter ? React__default["default"].createElement(SearchOffIcon, null) : React__default["default"].createElement(SearchIcon, null))));
+        React__default["default"].createElement(material.IconButton, Object.assign({ disabled: !!globalFilter, onClick: handleToggleSearch }, rest, { title: undefined }), showGlobalFilter ? React__default["default"].createElement(SearchOffIcon, null) : React__default["default"].createElement(SearchIcon, null))));
 };
 
 const MRT_ToolbarInternalButtons = ({ table }) => {
@@ -1494,9 +1502,6 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
     const handleFilterMenuOpen = (event) => {
         setAnchorEl(event.currentTarget);
     };
-    React.useEffect(() => {
-        handleClear();
-    }, [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 }));
     }
@@ -1586,7 +1591,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                     isMultiSelectFilter && (React__default["default"].createElement(material.Checkbox, { checked: ((_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : []).includes(value), sx: { mr: '0.5rem' } })),
                     text));
             })),
-        React__default["default"].createElement(MRT_FilterOptionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table })));
+        React__default["default"].createElement(MRT_FilterOptionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table, setFilterValue: setFilterValue })));
 };
 
 const MRT_FilterRangeFields = ({ header, table }) => {
@@ -1608,11 +1613,8 @@ const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
     const { options: { icons: { FilterAltIcon }, localization, }, } = table;
     const { column } = header;
     const { columnDef } = column;
-    const isRangeFilter = [
-        'between',
-        'betweenInclusive',
-        'inNumberRange',
-    ].includes(columnDef._filterFn);
+    const isRangeFilter = columnDef.filterVariant === 'range' ||
+        ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn);
     const currentFilterOption = columnDef._filterFn;
     const filterTooltip = localization.filteringByColumn
         .replace('{column}', String(columnDef.header))
@@ -1624,8 +1626,8 @@ const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
         ? column.getFilterValue().join(`" ${isRangeFilter ? localization.and : localization.or} "`)
         : column.getFilterValue()}"`)
         .replace('" "', '');
-    return (React__default["default"].createElement(material.Grow, { unmountOnExit: true, in: (!!column.getFilterValue() && isRangeFilter) ||
-            (!isRangeFilter && // @ts-ignore
+    return (React__default["default"].createElement(material.Grow, { unmountOnExit: true, in: (!!column.getFilterValue() && !isRangeFilter) ||
+            (isRangeFilter && // @ts-ignore
                 (!!((_b = column.getFilterValue()) === null || _b === void 0 ? void 0 : _b[0]) || !!((_c = column.getFilterValue()) === null || _c === void 0 ? void 0 : _c[1]))) },
         React__default["default"].createElement("span", null,
             React__default["default"].createElement(material.Tooltip, { arrow: true, placement: "top", title: filterTooltip },
@@ -2309,11 +2311,11 @@ const MRT_TableFooter = ({ table }) => {
         ? muiTableFooterProps({ table })
         : muiTableFooterProps;
     const stickFooter = (isFullScreen || enableStickyFooter) && enableStickyFooter !== false;
-    return (React__default["default"].createElement(material.TableFooter, Object.assign({}, tableFooterProps, { sx: (theme) => (Object.assign({ position: stickFooter ? 'sticky' : undefined, bottom: stickFooter ? 0 : undefined, opacity: stickFooter ? 0.95 : undefined, outline: stickFooter
+    return (React__default["default"].createElement(material.TableFooter, Object.assign({}, tableFooterProps, { sx: (theme) => (Object.assign({ backgroundColor: material.lighten(theme.palette.background.default, 0.06), bottom: stickFooter ? 0 : undefined, opacity: stickFooter ? 0.95 : undefined, outline: stickFooter
                 ? theme.palette.mode === 'light'
                     ? `1px solid ${theme.palette.grey[300]}`
                     : `1px solid ${theme.palette.grey[700]}`
-                : undefined }, ((tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx) instanceof Function
+                : undefined, position: stickFooter ? 'sticky' : undefined }, ((tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx) instanceof Function
             ? tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx(theme)
             : tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx))) }), getFooterGroups().map((footerGroup) => (React__default["default"].createElement(MRT_TableFooterRow, { footerGroup: footerGroup, key: footerGroup.id, table: table })))));
 };
@@ -2367,18 +2369,9 @@ const MRT_TableContainer = ({ table }) => {
 };
 
 const MRT_TablePaper = ({ table }) => {
-    const { getState, options: { enableBottomToolbar, enableTopToolbar, muiTablePaperProps }, refs: { tablePaperRef }, } = table;
+    var _a, _b;
+    const { getState, options: { enableBottomToolbar, enableTopToolbar, muiTablePaperProps, renderBottomToolbar, renderTopToolbar, }, refs: { tablePaperRef }, } = table;
     const { isFullScreen } = getState();
-    React.useEffect(() => {
-        if (typeof window !== 'undefined') {
-            if (isFullScreen) {
-                document.body.style.height = '100vh';
-            }
-            else {
-                document.body.style.height = 'auto';
-            }
-        }
-    }, [isFullScreen]);
     const tablePaperProps = muiTablePaperProps instanceof Function
         ? muiTablePaperProps({ table })
         : muiTablePaperProps;
@@ -2390,10 +2383,17 @@ const MRT_TablePaper = ({ table }) => {
             }
         }, sx: (theme) => (Object.assign({ transition: 'all 0.2s ease-in-out' }, ((tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx) instanceof Function
             ? tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx(theme)
-            : tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx))), style: Object.assign(Object.assign({}, tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.style), { height: isFullScreen ? '100vh' : undefined, margin: isFullScreen ? '0' : undefined, maxHeight: isFullScreen ? '100vh' : undefined, maxWidth: isFullScreen ? '100vw' : undefined, padding: isFullScreen ? '0' : undefined, width: isFullScreen ? '100vw' : undefined }) }),
-        enableTopToolbar && React__default["default"].createElement(MRT_TopToolbar, { table: table }),
-        React__default["default"].createElement(MRT_TableContainer, { table: table }),
-        enableBottomToolbar && React__default["default"].createElement(MRT_BottomToolbar, { table: table })));
+            : tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx))), style: Object.assign(Object.assign({}, tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.style), (isFullScreen
+            ? {
+                height: '100vh',
+                margin: 0,
+                maxHeight: '100vh',
+                maxWidth: '100vw',
+                padding: 0,
+                width: '100vw',
+            }
+            : {})) }), (_a = (enableTopToolbar && (renderTopToolbar === null || renderTopToolbar === void 0 ? void 0 : renderTopToolbar({ table })))) !== null && _a !== void 0 ? _a : (React__default["default"].createElement(MRT_TopToolbar, { table: table })),
+        React__default["default"].createElement(MRT_TableContainer, { table: table }), (_b = (enableBottomToolbar && (renderBottomToolbar === null || renderBottomToolbar === void 0 ? void 0 : renderBottomToolbar({ table })))) !== null && _b !== void 0 ? _b : (React__default["default"].createElement(MRT_BottomToolbar, { table: table }))));
 };
 
 const MRT_EditRowModal = ({ open, row, table, }) => {
@@ -2548,6 +2548,22 @@ const MRT_TableRoot = (props) => {
     if (props.tableInstanceRef) {
         props.tableInstanceRef.current = table;
     }
+    const initialBodyHeight = React.useRef();
+    React.useEffect(() => {
+        if (typeof window !== 'undefined') {
+            initialBodyHeight.current = document.body.style.height;
+        }
+    }, []);
+    React.useEffect(() => {
+        if (typeof window !== 'undefined') {
+            if (table.getState().isFullScreen) {
+                document.body.style.height = '100vh';
+            }
+            else {
+                document.body.style.height = initialBodyHeight.current;
+            }
+        }
+    }, [table.getState().isFullScreen]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(material.Dialog, { PaperComponent: material.Box, TransitionComponent: material.Grow, disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => table.setIsFullScreen(false), open: table.getState().isFullScreen, transitionDuration: 400 },
             React__default["default"].createElement(MRT_TablePaper, { table: table })),