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

package/dist/esm/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/index.d.ts

@@ -1,5 +1,5 @@
 import { MutableRefObject, Dispatch, SetStateAction, ReactNode } from 'react';
-import { ButtonProps, TextFieldProps, TableCellProps, IconButtonProps, ToolbarProps, LinearProgressProps, CheckboxProps, SkeletonProps, TableBodyProps, TableRowProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, PaperProps, TableProps, ChipProps, AlertProps } from '@mui/material';
+import { ButtonProps, TextFieldProps, TableCellProps, IconButtonProps, CheckboxProps, ToolbarProps, LinearProgressProps, SkeletonProps, TableBodyProps, TableRowProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, PaperProps, TableProps, ChipProps, AlertProps } from '@mui/material';
 import { Row, Table, TableState, ColumnDef, DeepKeys, Column, Header, HeaderGroup, Cell, SortingFn, FilterFn, TableOptions, OnChangeFn } from '@tanstack/react-table';
 import { Options, VirtualItem } from 'react-virtual';
 import * as _tanstack_table_core from '@tanstack/table-core';
@@ -296,9 +296,10 @@ declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<Column
         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, }: {
@@ -355,7 +356,7 @@ declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<Column
         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)
      */
@@ -404,6 +405,10 @@ declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<Column
         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>;
@@ -600,6 +605,10 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
         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/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.12",
+  "version": "1.0.0-beta.13",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",

package/src/MaterialReactTable.tsx

@@ -275,10 +275,12 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
   Filter?: ({
     column,
     header,
+    rangeFilterIndex,
     table,
   }: {
     column: MRT_Column<TData>;
     header: MRT_Header<TData>;
+    rangeFilterIndex?: number;
     table: MRT_TableInstance<TData>;
   }) => ReactNode;
   Footer?:
@@ -349,7 +351,7 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
   enableEditing?: boolean;
   filterFn?: MRT_FilterFn<TData>;
   filterSelectOptions?: (string | { 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)
    */
@@ -434,6 +436,15 @@ export 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
     | (({
@@ -787,6 +798,15 @@ export 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
       | (({

package/src/column.utils.ts

@@ -164,8 +164,12 @@ export const getDefaultColumnFilterFn = <
   columnDef: MRT_ColumnDef<TData>,
 ): MRT_FilterOption => {
   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';
 };
 

package/src/head/MRT_TableHeadCellFilterContainer.tsx

@@ -3,6 +3,7 @@ import { Collapse } from '@mui/material';
 import { MRT_FilterRangeFields } from '../inputs/MRT_FilterRangeFields';
 import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
 import { MRT_Header, MRT_TableInstance } from '..';
+import { MRT_FilterCheckbox } from '../inputs/MRT_FilterCheckbox';
 
 interface Props {
   header: MRT_Header;
@@ -20,9 +21,12 @@ export const MRT_TableHeadCellFilterContainer: FC<Props> = ({
 
   return (
     <Collapse in={showColumnFilters} mountOnEnter unmountOnExit>
-      {['between', 'betweenInclusive', 'inNumberRange'].includes(
-        columnDef._filterFn,
-      ) ? (
+      {columnDef.filterVariant === 'checkbox' ? (
+        <MRT_FilterCheckbox column={column} table={table} />
+      ) : columnDef.filterVariant === 'range' ||
+        ['between', 'betweenInclusive', 'inNumberRange'].includes(
+          columnDef._filterFn,
+        ) ? (
         <MRT_FilterRangeFields header={header} table={table} />
       ) : (
         <MRT_FilterTextField header={header} table={table} />

package/src/inputs/MRT_FilterCheckbox.tsx

@@ -0,0 +1,96 @@
+import React, { FC } from 'react';
+import {
+  Checkbox,
+  CheckboxProps,
+  FormControlLabel,
+  Tooltip,
+} from '@mui/material';
+import type { MRT_Column, MRT_TableInstance } from '..';
+
+interface Props {
+  column: MRT_Column;
+  table: MRT_TableInstance;
+}
+
+export const MRT_FilterCheckbox: FC<Props> = ({ column, table }) => {
+  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 = {
+    ...mTableHeadCellFilterCheckboxProps,
+    ...mcTableHeadCellFilterCheckboxProps,
+  } as CheckboxProps;
+
+  const filterLabel = localization.filterByColumn?.replace(
+    '{column}',
+    columnDef.header,
+  );
+
+  return (
+    <Tooltip
+      arrow
+      enterDelay={1000}
+      enterNextDelay={1000}
+      title={checkboxProps?.title ?? filterLabel}
+    >
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={column.getFilterValue() === 'true'}
+            indeterminate={column.getFilterValue() === undefined}
+            color={
+              column.getFilterValue() === undefined ? 'default' : 'primary'
+            }
+            size={density === 'compact' ? 'small' : 'medium'}
+            {...checkboxProps}
+            onClick={(e) => {
+              e.stopPropagation();
+              checkboxProps?.onClick?.(e);
+            }}
+            onChange={(e, checked) => {
+              column.setFilterValue(
+                column.getFilterValue() === undefined
+                  ? 'true'
+                  : column.getFilterValue() === 'true'
+                  ? 'false'
+                  : undefined,
+              );
+              checkboxProps?.onChange?.(e, checked);
+            }}
+            sx={(theme) => ({
+              height: '2.5rem',
+              width: '2.5rem',
+              ...(checkboxProps?.sx instanceof Function
+                ? checkboxProps.sx(theme)
+                : (checkboxProps?.sx as any)),
+            })}
+          />
+        }
+        disableTypography
+        label={checkboxProps.title ?? filterLabel}
+        sx={{ color: 'text.secondary', mt: '-4px', fontWeight: 'normal' }}
+        title={undefined}
+      />
+    </Tooltip>
+  );
+};

package/src/inputs/MRT_FilterTextField.tsx

@@ -118,10 +118,12 @@ export const MRT_FilterTextField: FC<Props> = ({
       (event: ChangeEvent<HTMLInputElement>) => {
         let value =
           textFieldProps.type === 'date'
-            ? new Date(event.target.value)
+            ? event.target.valueAsDate
+            : textFieldProps.type === 'number'
+            ? event.target.valueAsNumber
             : event.target.value;
         if (isRangeFilter) {
-          column.setFilterValue((old: [string, string | Date]) => {
+          column.setFilterValue((old: Array<string | Date | number | null>) => {
             const newFilterValues = old ?? ['', ''];
             newFilterValues[rangeFilterIndex as number] = value;
             return newFilterValues;
@@ -177,7 +179,9 @@ export const MRT_FilterTextField: FC<Props> = ({
   }, [column.getFilterValue()]);
 
   if (columnDef.Filter) {
-    return <>{columnDef.Filter?.({ column, header, table })}</>;
+    return (
+      <>{columnDef.Filter?.({ column, header, rangeFilterIndex, table })}</>
+    );
   }
 
   return (
@@ -210,7 +214,7 @@ export const MRT_FilterTextField: FC<Props> = ({
         }
         FormHelperTextProps={{
           sx: {
-            fontSize: '0.6rem',
+            fontSize: '0.75rem',
             lineHeight: '0.8rem',
             whiteSpace: 'nowrap',
           },
@@ -315,12 +319,11 @@ export const MRT_FilterTextField: FC<Props> = ({
         }}
         sx={(theme) => ({
           p: 0,
-          minWidth:
-            columnDef.filterVariant === 'range'
-              ? '90px'
-              : !filterChipLabel
-              ? '120px'
-              : 'auto',
+          minWidth: isRangeFilter
+            ? '100px'
+            : !filterChipLabel
+            ? '120px'
+            : 'auto',
           width: '100%',
           '& .MuiSelect-icon': {
             mr: '1.5rem',