material-react-table 0.24.0 → 0.26.0

package/README.md

@@ -59,26 +59,26 @@ _All features can easily be enabled/disabled_
 - [x] Column Grouping (Group By and Aggregates)
 - [x] Column Hiding
 - [x] Column Ordering via Drag'n'Drop
-- [x] Column Pinning
-- [x] Column Resizing (work in progress)
+- [x] Column Pinning (Freeze Columns)
+- [x] Column Resizing
 - [x] Customize Icons
 - [x] Customize Styling of internal Mui Components
 - [x] Data Editing (3 different editing modes)
 - [x] Density Toggle
-- [x] Detail Panels
-- [x] Filtering and multiple built-in filter modes
-- [x] Full Screen mode
+- [x] Detail Panels (Expansion)
+- [x] Filtering (supports client-side and server-side)
+- [x] Full Screen Mode
 - [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] Pagination (supports client-side and server-side)
-- [x] Remote/Server-side sorting and filtering supported
-- [x] Row Actions
+- [x] Row Actions (Your Custom Action Buttons)
 - [x] Row Numbers
-- [x] Row Selection (checkboxes)
+- [x] Row Ordering via Drag'n'Drop
+- [x] Row Selection (Checkboxes)
 - [x] SSR compatible
-- [x] Sorting
+- [x] Sorting (supports client-side and server-side)
 - [x] Theming (Respects your Material UI Theme)
 - [x] Toolbars (Add your own action buttons)
 - [x] Tree Data / Expanding Sub-rows
@@ -90,6 +90,8 @@ _All features can easily be enabled/disabled_
 
 ### Installation
 
+View the full [Installation Docs](https://www.material-react-table.com/docs/install)
+
 1. Install Peer Dependencies (Material UI V5)
 
 ```bash

package/dist/MaterialReactTable.d.ts

@@ -7,13 +7,6 @@ import { MRT_Icons } from './icons';
 import { MRT_FilterFns } from './filtersFns';
 import { MRT_SortingFns } from './sortingFns';
 declare type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
-export declare type MRT_TableOptions<TData extends Record<string, any> = {}> = Partial<Omit<TableOptions<TData>, 'columns' | 'data' | 'initialState' | 'state' | 'expandRowsFn'>> & {
-    columns: MRT_ColumnDef<TData>[];
-    data: TData[];
-    expandRowsFn?: (dataRow: TData) => TData[];
-    initialState?: Partial<MRT_TableState<TData>>;
-    state?: Partial<MRT_TableState<TData>>;
-};
 export interface MRT_RowModel<TData extends Record<string, any> = {}> {
     flatRows: MRT_Row<TData>[];
     rows: MRT_Row<TData>[];
@@ -114,7 +107,7 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
      *
      * @example accessorKey: 'username'
      */
-    accessorKey?: LiteralUnion<string & keyof TData>;
+    accessorKey?: string & keyof TData;
     /**
      * Specify what type of column this is. Either `data`, `display`, or `group`. Defaults to `data`.
      * Leave this blank if you are just creating a normal data column.
@@ -229,6 +222,7 @@ export declare type MRT_SortingOption = keyof typeof MRT_SortingFns;
 export declare type MRT_SortingFn<TData extends Record<string, any> = {}> = SortingFn<TData> | MRT_SortingOption;
 export declare type MRT_FilterOption = keyof typeof MRT_FilterFns;
 export declare type MRT_FilterFn<TData extends Record<string, any> = {}> = FilterFn<TData> | MRT_FilterOption;
+export declare type MRT_DisplayColumnIds = 'mrt-row-drag' | 'mrt-row-actions' | 'mrt-row-expand' | 'mrt-row-select' | 'mrt-row-numbers';
 /**
  * `columns` and `data` props are the only required props, but there are over 150 other optional props.
  *
@@ -238,7 +232,12 @@ export declare type MRT_FilterFn<TData extends Record<string, any> = {}> = Filte
  * See the full props list on the official docs site:
  * @link https://www.material-react-table.com/docs/api/props
  */
-export declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = MRT_TableOptions<TData> & {
+export declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = Omit<Partial<TableOptions<TData>>, 'columns' | 'data' | 'initialState' | 'state' | 'expandRowsFn'> & {
+    displayColumnDefOptions?: Partial<{
+        [key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef>;
+    }>;
+    columns: MRT_ColumnDef<TData>[];
+    data: TData[];
     editingMode?: 'table' | 'row' | 'cell';
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
@@ -266,7 +265,9 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     enableToolbarTop?: boolean;
     enabledColumnFilterOptions?: (MRT_FilterOption | string)[] | null;
     enabledGlobalFilterOptions?: (MRT_FilterOption | string)[] | null;
+    expandRowsFn?: (dataRow: TData) => TData[];
     icons?: Partial<MRT_Icons>;
+    initialState?: Partial<MRT_TableState<TData>>;
     localization?: Partial<MRT_Localization>;
     muiExpandAllButtonProps?: IconButtonProps | (({ table }: {
         table: MRT_TableInstance<TData>;
@@ -305,13 +306,13 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
         table: MRT_TableInstance<TData>;
         cell: MRT_Cell<TData>;
     }) => SkeletonProps);
+    muiTableBodyProps?: TableBodyProps | (({ table }: {
+        table: MRT_TableInstance<TData>;
+    }) => TableBodyProps);
     muiTableBodyRowDragHandleProps?: IconButtonProps | (({ table, row, }: {
         table: MRT_TableInstance<TData>;
         row: MRT_Row<TData>;
     }) => IconButtonProps);
-    muiTableBodyProps?: TableBodyProps | (({ table }: {
-        table: MRT_TableInstance<TData>;
-    }) => TableBodyProps);
     muiTableBodyRowProps?: TableRowProps | (({ table, row, }: {
         table: MRT_TableInstance<TData>;
         row: MRT_Row<TData>;
@@ -400,11 +401,11 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     onCurrentGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
     onCurrentHoveredColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
     onCurrentHoveredRowChange?: OnChangeFn<MRT_Row<TData> | null>;
+    onDensityChange?: OnChangeFn<boolean>;
     onEditRowSubmit?: ({ row, table, }: {
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => Promise<void> | void;
-    onDensityChange?: OnChangeFn<boolean>;
     onIsFullScreenChange?: OnChangeFn<boolean>;
     onRowDrop?: ({ event, draggedRow, targetRow, }: {
         event: DragEvent<HTMLButtonElement>;
@@ -434,9 +435,6 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     renderToolbarBottomCustomActions?: ({ table, }: {
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
-    renderToolbarTopCustomActions?: ({ table, }: {
-        table: MRT_TableInstance<TData>;
-    }) => ReactNode;
     renderToolbarInternalActions?: ({ table, MRT_ToggleGlobalFilterButton, MRT_ToggleFiltersButton, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_FullScreenToggleButton, }: {
         table: MRT_TableInstance<TData>;
         MRT_ToggleGlobalFilterButton: FC<IconButtonProps & {
@@ -455,9 +453,13 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
             table: MRT_TableInstance<TData>;
         }>;
     }) => ReactNode;
+    renderToolbarTopCustomActions?: ({ table, }: {
+        table: MRT_TableInstance<TData>;
+    }) => ReactNode;
     rowCount?: number;
     rowNumberMode?: 'original' | 'static';
     selectAllMode?: 'all' | 'page';
+    state?: Partial<MRT_TableState<TData>>;
     tableId?: string;
     virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement>>;
 };

package/dist/{utils.d.ts → column.utils.d.ts}

@@ -1,10 +1,10 @@
 import { ColumnOrderState } from '@tanstack/react-table';
-import { MaterialReactTableProps, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_FilterOption } from '.';
+import { MaterialReactTableProps, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterOption } from '.';
 export declare const getAllLeafColumnDefs: <TData extends Record<string, any> = {}>(columns: MRT_ColumnDef<TData>[]) => MRT_ColumnDef<TData>[];
 export declare const prepareColumns: <TData extends Record<string, any> = {}>(columnDefs: MRT_ColumnDef<TData>[], currentFilterFns: {
-    [key: string]: "between" | "contains" | "empty" | "endsWith" | "equals" | "fuzzy" | "greaterThan" | "lessThan" | "notEmpty" | "notEquals" | "startsWith" | "includesString" | "includesStringSensitive" | "equalsString" | "arrIncludes" | "arrIncludesAll" | "arrIncludesSome" | "weakEquals" | "inNumberRange";
+    [key: string]: "between" | "betweenInclusive" | "contains" | "empty" | "endsWith" | "equals" | "fuzzy" | "greaterThan" | "greaterThanOrEqualTo" | "lessThan" | "lessThanOrEqualTo" | "notEmpty" | "notEquals" | "startsWith" | "includesString" | "includesStringSensitive" | "equalsString" | "arrIncludes" | "arrIncludesAll" | "arrIncludesSome" | "weakEquals" | "inNumberRange";
 }) => MRT_DefinedColumnDef<TData>[];
 export declare const reorderColumn: <TData extends Record<string, any> = {}>(draggedColumn: MRT_Column<TData>, targetColumn: MRT_Column<TData>, columnOrder: ColumnOrderState) => ColumnOrderState;
-export declare const getLeadingDisplayColumnIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => string[];
+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[];

package/dist/filtersFns.d.ts

@@ -1,92 +1,60 @@
 import { RankingInfo } from '@tanstack/match-sorter-utils';
 import { Row } from '@tanstack/react-table';
-export declare const fuzzy: {
-    <TData extends Record<string, any> = {}>(row: Row<TData>, columnId: string, filterValue: string | number, addMeta: (item: RankingInfo) => void): boolean;
-    autoRemove(val: any): boolean;
-};
-export declare const contains: {
-    <TData extends Record<string, any> = {}>(row: Row<TData>, id: string, filterValue: string | number): boolean;
-    autoRemove(val: any): boolean;
-};
-export declare const startsWith: {
-    <TData extends Record<string, any> = {}>(row: Row<TData>, id: string, filterValue: string | number): boolean;
-    autoRemove(val: any): boolean;
-};
-export declare const endsWith: {
-    <TData extends Record<string, any> = {}>(row: Row<TData>, id: string, filterValue: string | number): boolean;
-    autoRemove(val: any): boolean;
-};
-export declare const equals: {
-    <TData extends Record<string, any> = {}>(row: Row<TData>, id: string, filterValue: string | number): boolean;
-    autoRemove(val: any): boolean;
-};
-export declare const notEquals: {
-    <TData extends Record<string, any> = {}>(row: Row<TData>, id: string, filterValue: string | number): boolean;
-    autoRemove(val: any): boolean;
-};
-export declare const greaterThan: {
-    <TData extends Record<string, any> = {}>(row: Row<TData>, id: string, filterValue: string | number): boolean;
-    autoRemove(val: any): boolean;
-};
-export declare const lessThan: {
-    <TData extends Record<string, any> = {}>(row: Row<TData>, id: string, filterValue: string | number): boolean;
-    autoRemove(val: any): boolean;
-};
-export declare const between: {
-    <TData extends Record<string, any> = {}>(row: Row<TData>, id: string, filterValues: [string | number, string | number]): boolean;
-    autoRemove(val: any): boolean;
-};
-export declare const empty: {
-    <TData extends Record<string, any> = {}>(row: Row<TData>, id: string, _filterValue: string | number): boolean;
-    autoRemove(val: any): boolean;
-};
-export declare const notEmpty: {
-    <TData extends Record<string, any> = {}>(row: Row<TData>, id: string, _filterValue: string | number): boolean;
-    autoRemove(val: any): boolean;
-};
 export declare const MRT_FilterFns: {
     between: {
         <TData extends Record<string, any> = {}>(row: Row<TData>, id: string, filterValues: [string | number, string | number]): boolean;
         autoRemove(val: any): boolean;
     };
+    betweenInclusive: {
+        <TData_1 extends Record<string, any> = {}>(row: Row<TData_1>, id: string, filterValues: [string | number, string | number]): boolean;
+        autoRemove(val: any): boolean;
+    };
     contains: {
-        <TData_1 extends Record<string, any> = {}>(row: Row<TData_1>, id: string, filterValue: string | number): boolean;
+        <TData_2 extends Record<string, any> = {}>(row: Row<TData_2>, id: string, filterValue: string | number): boolean;
         autoRemove(val: any): boolean;
     };
     empty: {
-        <TData_2 extends Record<string, any> = {}>(row: Row<TData_2>, id: string, _filterValue: string | number): boolean;
+        <TData_3 extends Record<string, any> = {}>(row: Row<TData_3>, id: string, _filterValue: string | number): boolean;
         autoRemove(val: any): boolean;
     };
     endsWith: {
-        <TData_3 extends Record<string, any> = {}>(row: Row<TData_3>, id: string, filterValue: string | number): boolean;
+        <TData_4 extends Record<string, any> = {}>(row: Row<TData_4>, id: string, filterValue: string | number): boolean;
         autoRemove(val: any): boolean;
     };
     equals: {
-        <TData_4 extends Record<string, any> = {}>(row: Row<TData_4>, id: string, filterValue: string | number): boolean;
+        <TData_5 extends Record<string, any> = {}>(row: Row<TData_5>, id: string, filterValue: string | number): boolean;
         autoRemove(val: any): boolean;
     };
     fuzzy: {
-        <TData_5 extends Record<string, any> = {}>(row: Row<TData_5>, columnId: string, filterValue: string | number, addMeta: (item: RankingInfo) => void): boolean;
+        <TData_6 extends Record<string, any> = {}>(row: Row<TData_6>, columnId: string, filterValue: string | number, addMeta: (item: RankingInfo) => void): boolean;
         autoRemove(val: any): boolean;
     };
     greaterThan: {
-        <TData_6 extends Record<string, any> = {}>(row: Row<TData_6>, id: string, filterValue: string | number): boolean;
+        <TData_7 extends Record<string, any> = {}>(row: Row<TData_7>, id: string, filterValue: string | number): boolean;
+        autoRemove(val: any): boolean;
+    };
+    greaterThanOrEqualTo: {
+        <TData_8 extends Record<string, any> = {}>(row: Row<TData_8>, id: string, filterValue: string | number): boolean;
         autoRemove(val: any): boolean;
     };
     lessThan: {
-        <TData_7 extends Record<string, any> = {}>(row: Row<TData_7>, id: string, filterValue: string | number): boolean;
+        <TData_9 extends Record<string, any> = {}>(row: Row<TData_9>, id: string, filterValue: string | number): boolean;
+        autoRemove(val: any): boolean;
+    };
+    lessThanOrEqualTo: {
+        <TData_10 extends Record<string, any> = {}>(row: Row<TData_10>, id: string, filterValue: string | number): boolean;
         autoRemove(val: any): boolean;
     };
     notEmpty: {
-        <TData_8 extends Record<string, any> = {}>(row: Row<TData_8>, id: string, _filterValue: string | number): boolean;
+        <TData_11 extends Record<string, any> = {}>(row: Row<TData_11>, id: string, _filterValue: string | number): boolean;
         autoRemove(val: any): boolean;
     };
     notEquals: {
-        <TData_9 extends Record<string, any> = {}>(row: Row<TData_9>, id: string, filterValue: string | number): boolean;
+        <TData_12 extends Record<string, any> = {}>(row: Row<TData_12>, id: string, filterValue: string | number): boolean;
         autoRemove(val: any): boolean;
     };
     startsWith: {
-        <TData_10 extends Record<string, any> = {}>(row: Row<TData_10>, id: string, filterValue: string | number): boolean;
+        <TData_13 extends Record<string, any> = {}>(row: Row<TData_13>, id: string, filterValue: string | number): boolean;
         autoRemove(val: any): boolean;
     };
     includesString: import("@tanstack/table-core").FilterFn<any>;

package/dist/localization.d.ts

@@ -14,6 +14,7 @@ export interface MRT_Localization {
     expand: string;
     expandAll: string;
     filterBetween: string;
+    filterBetweenInclusive: string;
     filterByColumn: string;
     filterContains: string;
     filterEmpty: string;
@@ -21,7 +22,9 @@ export interface MRT_Localization {
     filterEquals: string;
     filterFuzzy: string;
     filterGreaterThan: string;
+    filterGreaterThanOrEqualTo: string;
     filterLessThan: string;
+    filterLessThanOrEqualTo: string;
     filterMode: string;
     filterNotEmpty: string;
     filterNotEquals: string;