material-react-table 1.0.0-beta.12 → 1.0.0-beta.15

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)
      */
@@ -294,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>;
@@ -490,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

@@ -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) => {
@@ -1457,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 : ['', ''];
@@ -1506,7 +1509,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
         }
     }, [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: {
@@ -1521,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',
                 },
@@ -1562,8 +1565,8 @@ 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': {
@@ -1603,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 }) => {