material-react-table 1.0.0-beta.10 → 1.0.0-beta.13

package/dist/cjs/inputs/MRT_FilterCheckbox.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import type { MRT_Column, MRT_TableInstance } from '..';
+interface Props {
+    column: MRT_Column;
+    table: MRT_TableInstance;
+}
+export declare const MRT_FilterCheckbox: FC<Props>;
+export {};

package/dist/cjs/table/MRT_TableRoot.d.ts

@@ -130,6 +130,10 @@ export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(pro
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
     }) => import("@mui/material").IconButtonProps<"button", {}>) | undefined;
+    muiTableHeadCellFilterCheckboxProps?: import("@mui/material").CheckboxProps | (({ column, table, }: {
+        column: MRT_Column<TData>;
+        table: MRT_TableInstance<TData>;
+    }) => import("@mui/material").CheckboxProps) | undefined;
     muiTableHeadCellFilterTextFieldProps?: import("@mui/material").TextFieldProps | (({ table, column, rangeFilterIndex, }: {
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;

package/dist/esm/MaterialReactTable.d.ts

@@ -186,9 +186,10 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
-    Filter?: ({ column, header, table, }: {
+    Filter?: ({ column, header, rangeFilterIndex, table, }: {
         column: MRT_Column<TData>;
         header: MRT_Header<TData>;
+        rangeFilterIndex?: number;
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
     Footer?: ReactNode | (({ column, footer, table, }: {
@@ -245,7 +246,7 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
         text: string;
         value: any;
     })[];
-    filterVariant?: 'text' | 'select' | 'multi-select' | 'range';
+    filterVariant?: 'text' | 'select' | 'multi-select' | 'range' | 'checkbox';
     /**
      * footer must be a string. If you want custom JSX to render the footer, you can also specify a `Footer` option. (Capital F)
      */
@@ -276,9 +277,11 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => TextFieldProps);
-    muiTableBodyCellProps?: TableCellProps | (({ cell, table, }: {
-        table: MRT_TableInstance<TData>;
+    muiTableBodyCellProps?: TableCellProps | (({ cell, column, row, table, }: {
         cell: MRT_Cell<TData>;
+        column: MRT_Column<TData>;
+        row: MRT_Row<TData>;
+        table: MRT_TableInstance<TData>;
     }) => TableCellProps);
     muiTableFooterCellProps?: TableCellProps | (({ table, column, }: {
         table: MRT_TableInstance<TData>;
@@ -292,6 +295,10 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
     }) => IconButtonProps);
+    muiTableHeadCellFilterCheckboxProps?: CheckboxProps | (({ column, table, }: {
+        column: MRT_Column<TData>;
+        table: MRT_TableInstance<TData>;
+    }) => CheckboxProps);
     muiTableHeadCellFilterTextFieldProps?: TextFieldProps | (({ table, column, rangeFilterIndex, }: {
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
@@ -488,6 +495,10 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
     }) => IconButtonProps);
+    muiTableHeadCellFilterCheckboxProps?: CheckboxProps | (({ column, table, }: {
+        column: MRT_Column<TData>;
+        table: MRT_TableInstance<TData>;
+    }) => CheckboxProps);
     muiTableHeadCellFilterTextFieldProps?: TextFieldProps | (({ table, column, rangeFilterIndex, }: {
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;

package/dist/esm/inputs/MRT_FilterCheckbox.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import type { MRT_Column, MRT_TableInstance } from '..';
+interface Props {
+    column: MRT_Column;
+    table: MRT_TableInstance;
+}
+export declare const MRT_FilterCheckbox: FC<Props>;
+export {};

package/dist/esm/material-react-table.esm.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useState, useCallback, Fragment, memo, useEffect, useLayoutEffect } from 'react';
+import React, { useMemo, useRef, useState, useCallback, useEffect, Fragment, memo, useLayoutEffect } from 'react';
 import { aggregationFns, filterFns, sortingFns, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
 import { ArrowRight, Cancel, CheckBox, ClearAll, Close, DensityLarge, DensityMedium, DensitySmall, DragHandle, DynamicFeed, Edit, ExpandLess, ExpandMore, FilterAlt, FilterAltOff, FilterList, FilterListOff, FullscreenExit, Fullscreen, KeyboardDoubleArrowDown, MoreHoriz, MoreVert, PushPin, RestartAlt, Save, Search, SearchOff, Sort, ViewColumn, VisibilityOff } from '@mui/icons-material';
 import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
@@ -591,10 +591,11 @@ const getDefaultColumnOrderIds = (props) => [
 const getDefaultColumnFilterFn = (columnDef) => {
     if (columnDef.filterVariant === 'multi-select')
         return 'arrIncludesSome';
-    if (columnDef.filterVariant === 'select')
-        return 'equals';
     if (columnDef.filterVariant === 'range')
         return 'betweenInclusive';
+    if (columnDef.filterVariant === 'select' ||
+        columnDef.filterVariant === 'checkbox')
+        return 'equals';
     return 'fuzzy';
 };
 const getIsLastLeftPinnedColumn = (table, column) => {
@@ -1043,6 +1044,9 @@ const MRT_GlobalFilterTextField = ({ table, }) => {
     var _a;
     const { getState, setGlobalFilter, options: { enableGlobalFilterModes, icons: { SearchIcon, CloseIcon }, localization, muiSearchTextFieldProps, }, refs: { searchInputRef }, } = table;
     const { globalFilter, showGlobalFilter } = getState();
+    const textFieldProps = muiSearchTextFieldProps instanceof Function
+        ? muiSearchTextFieldProps({ table })
+        : muiSearchTextFieldProps;
     const [anchorEl, setAnchorEl] = useState(null);
     const [searchValue, setSearchValue] = useState(globalFilter !== null && globalFilter !== void 0 ? globalFilter : '');
     const handleChangeDebounced = useCallback(debounce((event) => {
@@ -1060,9 +1064,11 @@ const MRT_GlobalFilterTextField = ({ table, }) => {
         setSearchValue('');
         setGlobalFilter(undefined);
     };
-    const textFieldProps = muiSearchTextFieldProps instanceof Function
-        ? muiSearchTextFieldProps({ table })
-        : muiSearchTextFieldProps;
+    useEffect(() => {
+        if (globalFilter === undefined) {
+            handleClear();
+        }
+    }, [globalFilter]);
     return (React.createElement(Collapse, { in: showGlobalFilter, orientation: "horizontal", unmountOnExit: true, mountOnEnter: true },
         React.createElement(TextField, Object.assign({ placeholder: localization.search, onChange: handleChange, value: searchValue !== null && searchValue !== void 0 ? searchValue : '', variant: "standard", InputProps: {
                 startAdornment: enableGlobalFilterModes ? (React.createElement(InputAdornment, { position: "start" },
@@ -1452,8 +1458,10 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
     });
     const handleChangeDebounced = useCallback(debounce((event) => {
         let value = textFieldProps.type === 'date'
-            ? new Date(event.target.value)
-            : event.target.value;
+            ? event.target.valueAsDate
+            : textFieldProps.type === 'number'
+                ? event.target.valueAsNumber
+                : event.target.value;
         if (isRangeFilter) {
             column.setFilterValue((old) => {
                 const newFilterValues = old !== null && old !== void 0 ? old : ['', ''];
@@ -1495,8 +1503,13 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
     const handleFilterMenuOpen = (event) => {
         setAnchorEl(event.currentTarget);
     };
+    useEffect(() => {
+        if (column.getFilterValue() === undefined) {
+            handleClear();
+        }
+    }, [column.getFilterValue()]);
     if (columnDef.Filter) {
-        return React.createElement(React.Fragment, null, (_e = columnDef.Filter) === null || _e === void 0 ? void 0 : _e.call(columnDef, { column, header, table }));
+        return (React.createElement(React.Fragment, null, (_e = columnDef.Filter) === null || _e === void 0 ? void 0 : _e.call(columnDef, { column, header, rangeFilterIndex, table })));
     }
     return (React.createElement(React.Fragment, null,
         React.createElement(TextField, Object.assign({ fullWidth: true, inputProps: {
@@ -1511,7 +1524,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
             localization[`filter${((_f = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _f === void 0 ? void 0 : _f.toUpperCase()) +
                 (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]))) : null, FormHelperTextProps: {
                 sx: {
-                    fontSize: '0.6rem',
+                    fontSize: '0.75rem',
                     lineHeight: '0.8rem',
                     whiteSpace: 'nowrap',
                 },
@@ -1552,11 +1565,11 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                 if (textFieldProps.inputRef) {
                     textFieldProps.inputRef = inputRef;
                 }
-            }, sx: (theme) => (Object.assign({ p: 0, minWidth: columnDef.filterVariant === 'range'
-                    ? '90px'
+            }, sx: (theme) => (Object.assign({ p: 0, minWidth: isRangeFilter
+                    ? '100px'
                     : !filterChipLabel
                         ? '120px'
-                        : 'auto', width: '100%', '&	.MuiSelect-icon': {
+                        : 'auto', width: '100%', '& .MuiSelect-icon': {
                     mr: '1.5rem',
                 } }, ((textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx) instanceof Function
                 ? textFieldProps.sx(theme)
@@ -1593,12 +1606,50 @@ const MRT_FilterRangeFields = ({ header, table }) => {
         React.createElement(MRT_FilterTextField, { header: header, rangeFilterIndex: 1, table: table })));
 };
 
+const MRT_FilterCheckbox = ({ column, table }) => {
+    var _a, _b, _c;
+    const { getState, options: { localization, muiTableHeadCellFilterCheckboxProps }, } = table;
+    const { density } = getState();
+    const { columnDef } = column;
+    const mTableHeadCellFilterCheckboxProps = muiTableHeadCellFilterCheckboxProps instanceof Function
+        ? muiTableHeadCellFilterCheckboxProps({
+            column,
+            table,
+        })
+        : muiTableHeadCellFilterCheckboxProps;
+    const mcTableHeadCellFilterCheckboxProps = columnDef.muiTableHeadCellFilterCheckboxProps instanceof Function
+        ? columnDef.muiTableHeadCellFilterCheckboxProps({
+            column,
+            table,
+        })
+        : columnDef.muiTableHeadCellFilterCheckboxProps;
+    const checkboxProps = Object.assign(Object.assign({}, mTableHeadCellFilterCheckboxProps), mcTableHeadCellFilterCheckboxProps);
+    const filterLabel = (_a = localization.filterByColumn) === null || _a === void 0 ? void 0 : _a.replace('{column}', columnDef.header);
+    return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_b = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _b !== void 0 ? _b : filterLabel },
+        React.createElement(FormControlLabel, { control: React.createElement(Checkbox, Object.assign({ checked: column.getFilterValue() === 'true', indeterminate: column.getFilterValue() === undefined, color: column.getFilterValue() === undefined ? 'default' : 'primary', size: density === 'compact' ? 'small' : 'medium' }, checkboxProps, { onClick: (e) => {
+                    var _a;
+                    e.stopPropagation();
+                    (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onClick) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e);
+                }, onChange: (e, checked) => {
+                    var _a;
+                    column.setFilterValue(column.getFilterValue() === undefined
+                        ? 'true'
+                        : column.getFilterValue() === 'true'
+                            ? 'false'
+                            : undefined);
+                    (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onChange) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e, checked);
+                }, sx: (theme) => (Object.assign({ height: '2.5rem', width: '2.5rem' }, ((checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx) instanceof Function
+                    ? checkboxProps.sx(theme)
+                    : checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx))) })), disableTypography: true, label: (_c = checkboxProps.title) !== null && _c !== void 0 ? _c : filterLabel, sx: { color: 'text.secondary', mt: '-4px', fontWeight: 'normal' }, title: undefined })));
+};
+
 const MRT_TableHeadCellFilterContainer = ({ header, table, }) => {
     const { getState } = table;
     const { showColumnFilters } = getState();
     const { column } = header;
     const { columnDef } = column;
-    return (React.createElement(Collapse, { in: showColumnFilters, mountOnEnter: true, unmountOnExit: true }, ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn) ? (React.createElement(MRT_FilterRangeFields, { header: header, table: table })) : (React.createElement(MRT_FilterTextField, { header: header, table: table }))));
+    return (React.createElement(Collapse, { in: showColumnFilters, mountOnEnter: true, unmountOnExit: true }, columnDef.filterVariant === 'checkbox' ? (React.createElement(MRT_FilterCheckbox, { column: column, table: table })) : columnDef.filterVariant === 'range' ||
+        ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn) ? (React.createElement(MRT_FilterRangeFields, { header: header, table: table })) : (React.createElement(MRT_FilterTextField, { header: header, table: table }))));
 };
 
 const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
@@ -2002,7 +2053,7 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
         ? muiTableBodyCellProps({ cell, column, row, table })
         : muiTableBodyCellProps;
     const mcTableCellBodyProps = columnDef.muiTableBodyCellProps instanceof Function
-        ? columnDef.muiTableBodyCellProps({ cell, table })
+        ? columnDef.muiTableBodyCellProps({ cell, column, row, table })
         : columnDef.muiTableBodyCellProps;
     const tableCellProps = Object.assign(Object.assign({}, mTableCellBodyProps), mcTableCellBodyProps);
     const skeletonProps = muiTableBodyCellSkeletonProps instanceof Function