material-react-table 0.26.6 → 0.29.0

package/README.md

@@ -1,18 +1,18 @@
 # Material React Table
 
-<a href="https://npmjs.com/package/material-react-table" target="_blank_">
+<a href="https://npmjs.com/package/material-react-table" target="_blank">
   <img alt="" src="https://badgen.net/npm/v/material-react-table" />
 </a>
-<a href="https://npmjs.com/package/material-react-table" target="_blank_">
+<a href="https://npmjs.com/package/material-react-table" target="_blank">
   <img alt="" src="https://img.shields.io/npm/dm/material-react-table.svg" />
 </a>
-<a href="https://bundlephobia.com/result?p=material-react-table" target="_blank_">
+<a href="https://bundlephobia.com/result?p=material-react-table" target="_blank">
   <img alt="" src="https://badgen.net/bundlephobia/minzip/material-react-table@latest" />
 </a>
-<a href="https://github.com/KevinVandy/material-react-table" target="_blank_">
+<a href="https://github.com/KevinVandy/material-react-table" target="_blank">
   <img alt="" src="https://img.shields.io/github/stars/KevinVandy/material-react-table.svg?style=social&label=Star" />
 </a>
-<a href="http://makeapullrequest.com" target="_blank_">
+<a href="http://makeapullrequest.com" target="_blank">
   <img alt="" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" />
 </a>
 
@@ -40,6 +40,7 @@ See all [Props and Options](https://www.material-react-table.com/docs/api)
  - [Basic Table](https://www.material-react-table.com/docs/examples/basic/) (See Default Features)
  - [Minimal Table](https://www.material-react-table.com/docs/examples/minimal/) (Turn off Features)
  - [Advanced Table](https://www.material-react-table.com/docs/examples/advanced/) (See some of the Advanced Features)
+ - [Data Export Table](https://www.material-react-table.com/docs/examples/data-export/) (Export to CSV, Excel, etc.)
  - [Remote Data](https://www.material-react-table.com/docs/examples/remote/) (Server-side Pagination, Sorting, and Filtering)
  - [React Query](https://www.material-react-table.com/docs/examples/react-query/) (Server-side Pagination, Sorting, and Filtering)
  - [Virtualized Rows](https://www.material-react-table.com/docs/examples/virtualized/) (20,000 rows at once!)
@@ -52,7 +53,7 @@ View additional [storybook examples](https://www.material-react-table.dev/)
 
 _All features can easily be enabled/disabled_
 
-- [x] < 35kb gzipped - [Bundlephobia](https://bundlephobia.com/package/material-react-table)
+- [x] < 36kb gzipped - [Bundlephobia](https://bundlephobia.com/package/material-react-table)
 - [x] Advanced TypeScript Generics Support (TypeScript Optional)
 - [x] Click To Copy Cell Values
 - [x] Column Action Dropdown Menu
@@ -134,8 +135,6 @@ export default function App() {
     [],
   );
 
-  //simple data example
-  //Check out https://www.material-react-table.com/docs/examples/remote for a more realistic example
   const data = useMemo(
     () => [
       {

package/dist/MaterialReactTable.d.ts

@@ -1,7 +1,7 @@
 import { ChangeEvent, Dispatch, DragEvent, FC, FocusEvent, ReactNode, SetStateAction } from 'react';
 import type { AlertProps, ButtonProps, CheckboxProps, IconButtonProps, LinearProgressProps, PaperProps, SkeletonProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TextFieldProps, ToolbarProps } from '@mui/material';
 import type { Cell, Column, ColumnDef, FilterFn, Header, HeaderGroup, OnChangeFn, Row, SortingFn, Table, TableOptions, TableState } from '@tanstack/react-table';
-import type { Options as VirtualizerOptions } from 'react-virtual';
+import type { VirtualizerOptions } from '@tanstack/react-virtual';
 import { MRT_Localization } from './localization';
 import { MRT_Icons } from './icons';
 import { MRT_FilterFns } from './filtersFns';
@@ -69,7 +69,7 @@ export declare type MRT_TableState<TData extends Record<string, any> = {}> = Tab
     showProgressBars: boolean;
     showSkeletons: boolean;
 };
-export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<ColumnDef<TData>, 'accessorFn' | 'accessorKey' | 'aggregatedCell' | 'cell' | 'columns' | 'filterFn' | 'footer' | 'header' | 'id' | 'sortingFn'> & {
+export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<ColumnDef<TData, unknown>, 'accessorFn' | 'accessorKey' | 'aggregatedCell' | 'cell' | 'columns' | 'filterFn' | 'footer' | 'header' | 'id' | 'sortingFn'> & {
     AggregatedCell?: ({ cell, table, }: {
         cell: MRT_Cell<TData>;
         table: MRT_TableInstance<TData>;
@@ -117,6 +117,7 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
      * @example columnDefType: 'display'
      */
     columnDefType?: 'data' | 'display' | 'group';
+    columnFilterModeOptions?: MRT_FilterOption[] | null;
     columns?: MRT_ColumnDef<TData>[];
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
@@ -124,12 +125,12 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
     enableColumnFilterChangeMode?: boolean;
     enableColumnOrdering?: boolean;
     enableEditing?: boolean;
-    enabledColumnFilterOptions?: MRT_FilterOption[] | null;
     filterFn?: MRT_FilterFn<TData>;
     filterSelectOptions?: (string | {
         text: string;
         value: string;
     })[];
+    filterVariant?: 'text' | 'select' | 'multiSelect' | 'range';
     /**
      * footer must be a string. If you want custom JSX to render the footer, you can also specify a `Footer` option. (Capital F)
      */
@@ -172,9 +173,10 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
     }) => IconButtonProps);
-    muiTableHeadCellFilterTextFieldProps?: TextFieldProps | (({ table, column, }: {
+    muiTableHeadCellFilterTextFieldProps?: TextFieldProps | (({ table, column, rangeFilterIndex, }: {
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
+        rangeFilterIndex?: number;
     }) => TextFieldProps);
     muiTableHeadCellProps?: TableCellProps | (({ table, column, }: {
         table: MRT_TableInstance<TData>;
@@ -194,6 +196,7 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
 };
 export declare type MRT_DefinedColumnDef<TData extends Record<string, any> = {}> = Omit<MRT_ColumnDef<TData>, 'id'> & {
     id: string;
+    _filterFn: MRT_FilterOption;
 };
 export declare type MRT_Column<TData extends Record<string, any> = {}> = Omit<Column<TData, unknown>, 'header' | 'footer' | 'columns' | 'columnDef' | 'filterFn'> & {
     columnDef: MRT_DefinedColumnDef<TData>;
@@ -236,6 +239,7 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     displayColumnDefOptions?: Partial<{
         [key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef>;
     }>;
+    columnFilterModeOptions?: (MRT_FilterOption | string)[] | null;
     columns: MRT_ColumnDef<TData>[];
     data: TData[];
     editingMode?: 'table' | 'row' | 'cell';
@@ -263,7 +267,6 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     enableToolbarBottom?: boolean;
     enableToolbarInternalActions?: boolean;
     enableToolbarTop?: boolean;
-    enabledColumnFilterOptions?: (MRT_FilterOption | string)[] | null;
     enabledGlobalFilterOptions?: (MRT_FilterOption | string)[] | null;
     expandRowsFn?: (dataRow: TData) => TData[];
     icons?: Partial<MRT_Icons>;
@@ -343,9 +346,10 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
     }) => IconButtonProps);
-    muiTableHeadCellFilterTextFieldProps?: TextFieldProps | (({ table, column, }: {
+    muiTableHeadCellFilterTextFieldProps?: TextFieldProps | (({ table, column, rangeFilterIndex, }: {
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
+        rangeFilterIndex?: number;
     }) => TextFieldProps);
     muiTableHeadCellProps?: TableCellProps | (({ table, column, }: {
         table: MRT_TableInstance<TData>;
@@ -463,7 +467,7 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     selectAllMode?: 'all' | 'page';
     state?: Partial<MRT_TableState<TData>>;
     tableId?: string;
-    virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement>>;
+    virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>;
 };
 declare const _default: <TData extends Record<string, any> = {}>({ autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableColumnActions, enableColumnFilterChangeMode, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterChangeMode, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarBottom, enableToolbarInternalActions, enableToolbarTop, icons, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, rowNumberMode, selectAllMode, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
 export default _default;

package/dist/column.utils.d.ts

@@ -8,3 +8,4 @@ export declare const reorderColumn: <TData extends Record<string, any> = {}>(dra
 export declare const getLeadingDisplayColumnIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => MRT_DisplayColumnIds[];
 export declare const getTrailingDisplayColumnIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => (string | false | undefined)[];
 export declare const getDefaultColumnOrderIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => string[];
+export declare const getDefaultColumnFilterFn: <TData extends Record<string, any> = {}>(columnDef: MRT_ColumnDef<TData>) => MRT_FilterOption;

package/dist/inputs/MRT_FilterTextField.d.ts

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import type { MRT_Header, MRT_TableInstance } from '..';
 interface Props {
     header: MRT_Header;
-    inputIndex?: number;
+    rangeFilterIndex?: number;
     table: MRT_TableInstance;
 }
 export declare const MRT_FilterTextField: FC<Props>;

package/dist/localization.d.ts

@@ -13,6 +13,9 @@ export interface MRT_Localization {
     edit: string;
     expand: string;
     expandAll: string;
+    filterArrIncludes: string;
+    filterArrIncludesAll: string;
+    filterArrIncludesSome: string;
     filterBetween: string;
     filterBetweenInclusive: string;
     filterByColumn: string;
@@ -20,15 +23,20 @@ export interface MRT_Localization {
     filterEmpty: string;
     filterEndsWith: string;
     filterEquals: string;
+    filterEqualsString: string;
     filterFuzzy: string;
     filterGreaterThan: string;
     filterGreaterThanOrEqualTo: string;
+    filterInNumberRange: string;
+    filterIncludesString: string;
+    filterIncludesStringSensitive: string;
     filterLessThan: string;
     filterLessThanOrEqualTo: string;
     filterMode: string;
     filterNotEmpty: string;
     filterNotEquals: string;
     filterStartsWith: string;
+    filterWeakEquals: string;
     filteringByColumn: string;
     grab: string;
     groupByColumn: string;
@@ -38,6 +46,7 @@ export interface MRT_Localization {
     max: string;
     min: string;
     move: string;
+    or: string;
     pinToLeft: string;
     pinToRight: string;
     resetColumnSize: string;