material-react-table 0.7.0-alpha.9 → 0.7.2

package/README.md

@@ -15,9 +15,7 @@ View additional [storybook examples](https://www.material-react-table.dev/)
 
 View the [github source code](https://github.com/KevinVandy/material-react-table) and [github open issues](https://github.com/KevinVandy/material-react-table/issues)
 
-Join the [discord](https://discord.gg/5wqyRx6fnm) server to join in on the development discussion
-
-<br />
+Join the [discord](https://discord.gg/5wqyRx6fnm) server to join in on the development discussion or ask questions
 
 ### Features (Some Still In Active Development)
 
@@ -32,9 +30,9 @@ Join the [discord](https://discord.gg/5wqyRx6fnm) server to join in on the devel
 - [x] Custom Styling and internal Mui Components
 - [x] Data Editing
 - [x] Dense Padding Toggle
-- [x] Filtering
+- [x] Filtering and multiple built-in filter modes
 - [x] Fullscreen
-- [ ] Global Search (broken in react-table v8 :( ))
+- [x] Global Filtering (Search)
 - [x] HeaderGroups
 - [x] Localization i18n
 - [x] Pagination (supports client-side and server-side)

package/dist/MaterialReactTable.d.ts

@@ -5,7 +5,7 @@ import { MRT_Localization } from './localization';
 import { MRT_Icons } from './icons';
 import { MRT_FILTER_TYPE } from './enums';
 export declare type MRT_TableOptions<D extends Record<string, any> = {}> = Partial<Omit<Options<D>, 'columns' | 'data' | 'initialState' | 'state' | 'expandRowsFn'>> & {
-    columns: MRT_ColumnInterface<D>[];
+    columns: MRT_ColumnDef<D>[];
     data: D[];
     initialState?: Partial<MRT_TableState<D>>;
     state?: Partial<MRT_TableState<D>>;
@@ -21,8 +21,8 @@ export interface MRT_RowModel<D extends Record<string, any> = {}> {
 export declare type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<TableInstance<Overwrite<Partial<DefaultGenerics>, {
     Row: D;
 }>>, 'getAllColumns' | 'getAllLeafColumns' | 'getExpandedRowModel' | 'getPaginationRowModel' | 'getPrePaginationRowModel' | 'getRowModel' | 'getSelectedRowModel' | 'getState' | 'options'> & {
-    getAllColumns: () => MRT_ColumnInstance<D>[];
-    getAllLeafColumns: () => MRT_ColumnInstance<D>[];
+    getAllColumns: () => MRT_Column<D>[];
+    getAllLeafColumns: () => MRT_Column<D>[];
     getExpandedRowModel: () => MRT_RowModel<D>;
     getPaginationRowModel: () => MRT_RowModel<D>;
     getPrePaginationRowModel: () => MRT_RowModel<D>;
@@ -36,16 +36,16 @@ export declare type MRT_TableInstance<D extends Record<string, any> = {}> = Omit
             [key in MRT_FILTER_TYPE]: any;
         };
         localization: MRT_Localization;
-        setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row<D> | null>>;
-        setCurrentFilterTypes: Dispatch<SetStateAction<{
-            [key: string]: MRT_FilterType;
-        }>>;
-        setCurrentGlobalFilterType: Dispatch<SetStateAction<MRT_FILTER_TYPE>>;
-        setIsDensePadding: Dispatch<SetStateAction<boolean>>;
-        setIsFullScreen: Dispatch<SetStateAction<boolean>>;
-        setShowFilters: Dispatch<SetStateAction<boolean>>;
-        setShowSearch: Dispatch<SetStateAction<boolean>>;
     };
+    setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row<D> | null>>;
+    setCurrentFilterTypes: Dispatch<SetStateAction<{
+        [key: string]: MRT_FilterType;
+    }>>;
+    setCurrentGlobalFilterType: Dispatch<SetStateAction<MRT_FILTER_TYPE>>;
+    setIsDensePadding: Dispatch<SetStateAction<boolean>>;
+    setIsFullScreen: Dispatch<SetStateAction<boolean>>;
+    setShowFilters: Dispatch<SetStateAction<boolean>>;
+    setShowGlobalFilter: Dispatch<SetStateAction<boolean>>;
 };
 export declare type MRT_TableState<D extends Record<string, any> = {}> = Omit<TableState, 'pagination'> & {
     currentEditingRow: MRT_Row<D> | null;
@@ -54,10 +54,10 @@ export declare type MRT_TableState<D extends Record<string, any> = {}> = Omit<Ta
     isDensePadding: boolean;
     isFullScreen: boolean;
     showFilters: boolean;
-    showSearch: boolean;
+    showGlobalFilter: boolean;
     pagination: Partial<PaginationState>;
 };
-export declare type MRT_ColumnInterface<D extends Record<string, any> = {}> = Omit<ColumnDef<D>, 'header' | 'footer' | 'columns'> & {
+export declare type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<ColumnDef<D>, 'header' | 'footer' | 'columns'> & {
     Edit?: ({ cell, tableInstance, }: {
         cell: MRT_Cell<D>;
         tableInstance: MRT_TableInstance<D>;
@@ -79,11 +79,11 @@ export declare type MRT_ColumnInterface<D extends Record<string, any> = {}> = Om
         tableInstance: MRT_TableInstance<D>;
     }) => ReactNode;
     id: keyof D | string;
-    columns?: MRT_ColumnInterface<D>[];
+    columns?: MRT_ColumnDef<D>[];
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
     enableEditing?: boolean;
-    enabledFilterTypes?: (MRT_FILTER_TYPE | string)[];
+    enabledColumnFilterTypes?: (MRT_FILTER_TYPE | string)[];
     filter?: MRT_FilterType | string | FilterType<D>;
     filterSelectOptions?: (string | {
         text: string;
@@ -105,19 +105,19 @@ export declare type MRT_ColumnInterface<D extends Record<string, any> = {}> = Om
     }) => TableCellProps);
     muiTableFooterCellProps?: TableCellProps | (({ tableInstance, column, }: {
         tableInstance: MRT_TableInstance;
-        column: MRT_ColumnInstance<D>;
+        column: MRT_Column<D>;
     }) => TableCellProps);
     muiTableHeadCellColumnActionsButtonProps?: IconButtonProps | (({ tableInstance, column, }: {
         tableInstance: MRT_TableInstance;
-        column: MRT_ColumnInstance<D>;
+        column: MRT_Column<D>;
     }) => IconButtonProps);
     muiTableHeadCellFilterTextFieldProps?: TextFieldProps | (({ tableInstance, column, }: {
         tableInstance: MRT_TableInstance;
-        column: MRT_ColumnInstance<D>;
+        column: MRT_Column<D>;
     }) => TextFieldProps);
     muiTableHeadCellProps?: TableCellProps | (({ tableInstance, column, }: {
         tableInstance: MRT_TableInstance;
-        column: MRT_ColumnInstance<D>;
+        column: MRT_Column<D>;
     }) => TableCellProps);
     onCellEditBlur?: ({ cell, event, tableInstance, }: {
         event: FocusEvent<HTMLInputElement>;
@@ -134,11 +134,11 @@ export declare type MRT_ColumnInterface<D extends Record<string, any> = {}> = Om
         filterValue: any;
     }) => void;
 };
-export declare type MRT_ColumnInstance<D extends Record<string, any> = {}> = Omit<Column<D>, 'header' | 'footer' | 'columns'> & MRT_ColumnInterface<D> & {
-    columns?: MRT_ColumnInstance<D>[];
+export declare type MRT_Column<D extends Record<string, any> = {}> = Omit<Column<D>, 'header' | 'footer' | 'columns'> & MRT_ColumnDef<D> & {
+    columns?: MRT_Column<D>[];
 };
 export declare type MRT_Header<D extends Record<string, any> = {}> = Omit<Header<D>, 'column'> & {
-    column: MRT_ColumnInstance<D>;
+    column: MRT_Column<D>;
 };
 export declare type MRT_HeaderGroup<D extends Record<string, any> = {}> = Omit<HeaderGroup<D>, 'headers'> & {
     headers: MRT_Header<D>[];
@@ -153,36 +153,35 @@ export declare type MRT_Row<D extends Record<string, any> = {}> = Omit<Row<D>, '
     original: D;
 };
 export declare type MRT_Cell<D extends Record<string, any> = {}> = Omit<Cell<D>, 'column' | 'row'> & {
-    column: MRT_ColumnInstance<D>;
+    column: MRT_Column<D>;
     row: MRT_Row<D>;
 };
 export declare type MRT_FilterType = MRT_FILTER_TYPE | Function;
 export declare type MaterialReactTableProps<D extends Record<string, any> = {}> = MRT_TableOptions<D> & {
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
-    enableColumnPinning?: boolean;
     enableDensePaddingToggle?: boolean;
+    enableEditing?: boolean;
     enableExpandAll?: boolean;
     enableFullScreenToggle?: boolean;
     enablePagination?: boolean;
     enableRowActions?: boolean;
-    enableStickyHeader?: boolean;
-    enableEditing?: boolean;
     enableRowNumbers?: boolean;
     enableSelectAll?: boolean;
+    enableStickyHeader?: boolean;
+    enableTableFooter?: boolean;
+    enableTableHead?: boolean;
+    enableToolbarBottom?: boolean;
+    enableToolbarInternalActions?: boolean;
+    enableToolbarTop?: boolean;
     enabledGlobalFilterTypes?: (MRT_FILTER_TYPE | string)[];
     filterTypes?: {
         [key in MRT_FILTER_TYPE]: any;
     };
-    hideTableFooter?: boolean;
-    hideTableHead?: boolean;
-    hideToolbarBottom?: boolean;
-    hideToolbarInternalActions?: boolean;
-    hideToolbarTop?: boolean;
     icons?: Partial<MRT_Icons>;
     idPrefix?: string;
-    isReloading?: boolean;
     isLoading?: boolean;
+    isReloading?: boolean;
     localization?: Partial<MRT_Localization>;
     muiLinearProgressProps?: LinearProgressProps | (({ tableInstance, }: {
         tableInstance: MRT_TableInstance;
@@ -227,7 +226,7 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
     }) => TableCellProps);
     muiTableFooterCellProps?: TableCellProps | (({ tableInstance, column, }: {
         tableInstance: MRT_TableInstance;
-        column: MRT_ColumnInstance<D>;
+        column: MRT_Column<D>;
     }) => TableCellProps);
     muiTableFooterProps?: TableFooterProps | (({ tableInstance, }: {
         tableInstance: MRT_TableInstance;
@@ -238,15 +237,15 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
     }) => TableRowProps);
     muiTableHeadCellColumnActionsButtonProps?: IconButtonProps | (({ tableInstance, column, }: {
         tableInstance: MRT_TableInstance;
-        column: MRT_ColumnInstance<D>;
+        column: MRT_Column<D>;
     }) => IconButtonProps);
     muiTableHeadCellFilterTextFieldProps?: TextFieldProps | (({ tableInstance, column, }: {
         tableInstance: MRT_TableInstance;
-        column: MRT_ColumnInstance<D>;
+        column: MRT_Column<D>;
     }) => TextFieldProps);
     muiTableHeadCellProps?: TableCellProps | (({ tableInstance, column, }: {
         tableInstance: MRT_TableInstance;
-        column: MRT_ColumnInstance<D>;
+        column: MRT_Column<D>;
     }) => TableCellProps);
     muiTableHeadProps?: TableHeadProps | (({ tableInstance, }: {
         tableInstance: MRT_TableInstance;
@@ -278,17 +277,12 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
         tableInstance: MRT_TableInstance<D>;
         event: MouseEvent<HTMLTableCellElement>;
     }) => void;
-    onColumnHide?: ({ column, columnVisibility, tableInstance, }: {
-        column: MRT_ColumnInstance<D>;
-        columnVisibility: VisibilityState;
-        tableInstance: MRT_TableInstance<D>;
-    }) => void;
     onDetailPanelClick?: ({ event, row, tableInstance, }: {
         event: MouseEvent<HTMLTableCellElement>;
         row: MRT_Row<D>;
         tableInstance: MRT_TableInstance<D>;
     }) => void;
-    onGlobalFilterChange?: ({ event, tableInstance, }: {
+    onGlobalSearchFilterChange?: ({ event, tableInstance, }: {
         event: ChangeEvent<HTMLInputElement>;
         tableInstance: MRT_TableInstance<D>;
     }) => void;
@@ -317,6 +311,31 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
         selectedRows: MRT_Row<D>[];
         tableInstance: MRT_TableInstance<D>;
     }) => void;
+    onToggleColumnVisibility?: ({ column, columnVisibility, tableInstance, }: {
+        column: MRT_Column<D>;
+        columnVisibility: VisibilityState;
+        tableInstance: MRT_TableInstance<D>;
+    }) => void;
+    onToggleDensePadding?: ({ event, isDensePadding, tableInstance, }: {
+        event: MouseEvent<HTMLButtonElement>;
+        isDensePadding: boolean;
+        tableInstance: MRT_TableInstance<D>;
+    }) => void;
+    onToggleFullScreen?: ({ event, isFullScreen, tableInstance, }: {
+        event: MouseEvent<HTMLButtonElement>;
+        isFullScreen: boolean;
+        tableInstance: MRT_TableInstance<D>;
+    }) => void;
+    onToggleShowFilters?: ({ event, showFilters, tableInstance, }: {
+        event: MouseEvent<HTMLButtonElement>;
+        showFilters: boolean;
+        tableInstance: MRT_TableInstance<D>;
+    }) => void;
+    onToggleShowGlobalFilter?: ({ event, showGlobalFilter, tableInstance, }: {
+        event: MouseEvent<HTMLButtonElement>;
+        showGlobalFilter: boolean;
+        tableInstance: MRT_TableInstance<D>;
+    }) => void;
     positionActionsColumn?: 'first' | 'last';
     positionPagination?: 'bottom' | 'top' | 'both';
     positionToolbarActions?: 'bottom' | 'top';
@@ -337,9 +356,9 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
     renderToolbarCustomActions?: ({ tableInstance, }: {
         tableInstance: MRT_TableInstance<D>;
     }) => ReactNode;
-    renderToolbarInternalActions?: ({ tableInstance, MRT_ToggleSearchButton, MRT_ToggleFiltersButton, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_FullScreenToggleButton, }: {
+    renderToolbarInternalActions?: ({ tableInstance, MRT_ToggleGlobalFilterButton, MRT_ToggleFiltersButton, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_FullScreenToggleButton, }: {
         tableInstance: MRT_TableInstance<D>;
-        MRT_ToggleSearchButton: FC<IconButtonProps & {
+        MRT_ToggleGlobalFilterButton: FC<IconButtonProps & {
             tableInstance: MRT_TableInstance<D>;
         }>;
         MRT_ToggleFiltersButton: FC<IconButtonProps & {
@@ -356,5 +375,5 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
         }>;
     }) => ReactNode;
 };
-declare const _default: <D extends Record<string, any> = {}>({ enableColumnActions, enableColumnFilters, enableDensePaddingToggle, enableExpandAll, enableFullScreenToggle, enableGlobalFilter, enableHiding, enablePagination, enableSelectAll, enableSorting, enableStickyHeader, icons, localization, positionActionsColumn, positionPagination, positionToolbarActions, positionToolbarAlertBanner, ...rest }: MaterialReactTableProps<D>) => JSX.Element;
+declare const _default: <D extends Record<string, any> = {}>({ autoResetExpanded, columnResizeMode, enableColumnActions, enableColumnFilters, enableColumnResizing, enableDensePaddingToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, enableMultiRowSelection, enablePagination, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarBottom, enableToolbarInternalActions, enableToolbarTop, icons, localization, positionActionsColumn, positionPagination, positionToolbarActions, positionToolbarAlertBanner, ...rest }: MaterialReactTableProps<D>) => JSX.Element;
 export default _default;

package/dist/buttons/{MRT_ToggleSearchButton.d.ts → MRT_ToggleGlobalFilterButton.d.ts}

@@ -4,5 +4,5 @@ import { MRT_TableInstance } from '..';
 interface Props extends IconButtonProps {
     tableInstance: MRT_TableInstance;
 }
-export declare const MRT_ToggleSearchButton: FC<Props>;
+export declare const MRT_ToggleGlobalFilterButton: FC<Props>;
 export {};

package/dist/icons.d.ts

@@ -20,6 +20,7 @@ export interface MRT_Icons {
     MoreHorizIcon: any;
     MoreVertIcon: any;
     PushPinIcon: any;
+    RestartAltIcon: any;
     SaveIcon: any;
     SearchIcon: any;
     SearchOffIcon: any;

package/dist/localization.d.ts

@@ -32,6 +32,7 @@ export interface MRT_Localization {
     hideColumn: string;
     pinToLeft: string;
     pinToRight: string;
+    resetColumnSize: string;
     rowActions: string;
     rowNumber: string;
     rowNumbers: string;
@@ -46,6 +47,8 @@ export interface MRT_Localization {
     showHideSearch: string;
     sortByColumnAsc: string;
     sortByColumnDesc: string;
+    sortedByColumnAsc: string;
+    sortedByColumnDesc: string;
     thenBy: string;
     toggleDensePadding: string;
     toggleFullScreen: string;
@@ -53,5 +56,6 @@ export interface MRT_Localization {
     toggleSelectRow: string;
     ungroupByColumn: string;
     unpin: string;
+    unsorted: string;
 }
 export declare const MRT_DefaultLocalization_EN: MRT_Localization;