material-react-table 0.4.5 → 0.4.8

package/README.md

@@ -12,7 +12,7 @@ View additional storybook examples at https://www.material-react-table.dev/
 
 View the source code and open issues at https://github.com/KevinVandy/material-react-table
 
-Join the discord development discussion at https://discord.gg/Gjm62HGw
+Join the discord development discussion at https://discord.gg/5wqyRx6fnm
 
 <br />
 
@@ -25,6 +25,7 @@ Join the discord development discussion at https://discord.gg/Gjm62HGw
 - [x] Column Hiding
 - [x] Custom Styling
 - [x] Dense Padding Toggle
+- [x] Localization
 - [x] Filtering
 - [x] Global Search
 - [x] HeaderGroups
@@ -40,7 +41,7 @@ Join the discord development discussion at https://discord.gg/Gjm62HGw
 1. Install Peer Dependencies (material-ui v5 and react table v7)
 
 ```bash
-npm install @mui/material @mui/icons-material @emotion/react react-table
+npm install @mui/material @mui/icons-material @emotion/react @emotion/styled react-table
 ```
 
 2. Install material-react-table

package/dist/MaterialReactTable.d.ts

@@ -1,14 +1,58 @@
 import { ChangeEvent, FC, MouseEvent, ReactNode } from 'react';
 import { AlertProps, IconButtonProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TextFieldProps, ToolbarProps } from '@mui/material';
-import { Cell, Column, HeaderGroup, Row, TableInstance, TableOptions, UseExpandedOptions, UseFiltersOptions, UseGlobalFiltersOptions, UseGroupByOptions, UsePaginationOptions, UseResizeColumnsOptions, UseRowSelectOptions, UseRowStateOptions, UseSortByOptions, UseTableOptions } from 'react-table';
-import { MRT_Localization } from './utils/localization';
-import { MRT_ColumnInterface } from './@types/react-table-config';
-export declare type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> & UseTableOptions<D> & UseExpandedOptions<D> & UseFiltersOptions<D> & UseGlobalFiltersOptions<D> & UseGroupByOptions<D> & UsePaginationOptions<D> & UseResizeColumnsOptions<D> & UseRowSelectOptions<D> & UseRowStateOptions<D> & UseSortByOptions<D> & {
+import { Cell, Column, ColumnInstance, HeaderGroup, Row, TableInstance, TableOptions, TableState, UseColumnOrderInstanceProps, UseColumnOrderState, UseExpandedInstanceProps, UseExpandedOptions, UseExpandedRowProps, UseExpandedState, UseFiltersColumnOptions, UseFiltersColumnProps, UseFiltersInstanceProps, UseFiltersOptions, UseFiltersState, UseGlobalFiltersColumnOptions, UseGlobalFiltersInstanceProps, UseGlobalFiltersOptions, UseGlobalFiltersState, UseGroupByCellProps, UseGroupByColumnOptions, UseGroupByColumnProps, UseGroupByInstanceProps, UseGroupByOptions, UseGroupByRowProps, UseGroupByState, UsePaginationInstanceProps, UsePaginationOptions, UsePaginationState, UseResizeColumnsColumnOptions, UseResizeColumnsColumnProps, UseResizeColumnsOptions, UseResizeColumnsState, UseRowSelectInstanceProps, UseRowSelectOptions, UseRowSelectRowProps, UseRowSelectState, UseRowStateCellProps, UseRowStateInstanceProps, UseRowStateOptions, UseRowStateRowProps, UseRowStateState, UseSortByColumnOptions, UseSortByColumnProps, UseSortByInstanceProps, UseSortByOptions, UseSortByState, UseTableHeaderGroupProps, UseTableInstanceProps, UseTableOptions } from 'react-table';
+import { MRT_Localization } from './localization';
+import { MRT_Icons } from './icons';
+export declare type MRT_TableOptions<D extends {} = {}> = TableOptions<D> & UseExpandedOptions<D> & UseFiltersOptions<D> & UseGlobalFiltersOptions<D> & UseGroupByOptions<D> & UsePaginationOptions<D> & UseResizeColumnsOptions<D> & UseRowSelectOptions<D> & UseRowStateOptions<D> & UseSortByOptions<D> & {};
+export declare type MRT_TableInstance<D extends {} = {}> = TableInstance<D> & UseTableInstanceProps<D> & UseColumnOrderInstanceProps<D> & UseExpandedInstanceProps<D> & UseFiltersInstanceProps<D> & UseGlobalFiltersInstanceProps<D> & UseGroupByInstanceProps<D> & UsePaginationInstanceProps<D> & UseRowSelectInstanceProps<D> & UseRowStateInstanceProps<D> & UseSortByInstanceProps<D> & {
+    columns: (Column<D> & MRT_ColumnInstance<D>)[];
+    headerGroups: MRT_HeaderGroup<D>[];
+    footerGroups: MRT_HeaderGroup<D>[];
+    state: MRT_TableState<D>;
+    rows: MRT_Row<D>[];
+    page: MRT_Row<D>[];
+    resetResizing: () => void;
+    getToggleAllRowsExpandedProps: () => void;
+};
+export declare type MRT_ColumnInterface<D extends {} = {}> = UseFiltersColumnOptions<D> & UseGlobalFiltersColumnOptions<D> & UseGroupByColumnOptions<D> & UseResizeColumnsColumnOptions<D> & UseSortByColumnOptions<D> & {
+    Edit?: ({ cell, onChange, }: {
+        cell: MRT_Cell<D>;
+        onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    }) => ReactNode;
+    Filter?: ({ column }: {
+        column: MRT_HeaderGroup<D>;
+    }) => ReactNode;
+    Footer?: string;
+    Header?: string;
+    disableFilters?: boolean;
+    editable?: boolean;
+    muiTableBodyCellEditTextFieldProps?: TextFieldProps | ((cell: MRT_Cell<D>) => TextFieldProps);
+    muiTableBodyCellProps?: TableCellProps | ((cell: MRT_Cell<D>) => TableCellProps);
+    muiTableFooterCellProps?: TableCellProps | ((column: Column<D>) => TableCellProps);
+    muiTableHeadCellFilterTextFieldProps?: TextFieldProps | ((column: Column<D>) => TextFieldProps);
+    muiTableHeadCellProps?: TableCellProps | ((column: Column<D>) => TableCellProps);
+    onCellEditChange?: (event: ChangeEvent<HTMLInputElement>, cell: MRT_Cell<D>) => void;
+    onFilterChange?: (event: ChangeEvent<HTMLInputElement>, filterValue: any) => void;
+};
+export declare type MRT_ColumnInstance<D extends {} = {}> = ColumnInstance<D> & UseFiltersColumnProps<D> & UseGroupByColumnProps<D> & UseResizeColumnsColumnProps<D> & UseSortByColumnProps<D> & {
+    columns?: MRT_ColumnInstance<D>[];
+};
+export declare type MRT_HeaderGroup<D extends {} = {}> = HeaderGroup<D> & MRT_ColumnInstance<D> & UseTableHeaderGroupProps<D> & {
+    headers: MRT_HeaderGroup<D>[];
+};
+export declare type MRT_Row<D extends {} = {}> = Row<D> & UseExpandedRowProps<D> & UseGroupByRowProps<D> & UseRowSelectRowProps<D> & UseRowStateRowProps<D> & {
+    cells: MRT_Cell<D>[];
+};
+export declare type MRT_Cell<D extends {} = {}, _V = any> = Cell<D> & UseGroupByCellProps<D> & UseRowStateCellProps<D> & {};
+export declare type MRT_TableState<D extends {} = {}> = TableState<D> & UseColumnOrderState<D> & UseExpandedState<D> & UseFiltersState<D> & UseGlobalFiltersState<D> & UseGroupByState<D> & UsePaginationState<D> & UseResizeColumnsState<D> & UseRowSelectState<D> & UseRowStateState<D> & UseSortByState<D> & {
+    densePadding?: boolean;
+    fullScreen?: boolean;
+    showFilters?: boolean;
+    showSearchTextField?: boolean;
+};
+export declare type MaterialReactTableProps<D extends {} = {}> = MRT_TableOptions<D> & UseTableOptions<D> & UseExpandedOptions<D> & UseFiltersOptions<D> & UseGlobalFiltersOptions<D> & UseGroupByOptions<D> & UsePaginationOptions<D> & UseResizeColumnsOptions<D> & UseRowSelectOptions<D> & UseRowStateOptions<D> & UseSortByOptions<D> & {
     columns: (Column<D> & MRT_ColumnInterface)[];
-    defaultDensePadding?: boolean;
-    defaultFullScreen?: boolean;
-    defaultShowFilters?: boolean;
-    defaultShowSearchTextField?: boolean;
+    data: D[];
     disableColumnActions?: boolean;
     disableColumnHiding?: boolean;
     disableDensePaddingToggle?: boolean;
@@ -16,40 +60,42 @@ export declare type MaterialReactTableProps<D extends {} = {}> = TableOptions<D>
     disableFullScreenToggle?: boolean;
     disableSelectAll?: boolean;
     disableSubRowTree?: boolean;
-    enableRowNumbers?: boolean;
     enableColumnGrouping?: boolean;
     enableColumnResizing?: boolean;
     enableRowActions?: boolean;
     enableRowEditing?: boolean;
+    enableRowNumbers?: boolean;
     enableSelection?: boolean;
     hideTableFooter?: boolean;
     hideTableHead?: boolean;
-    hideToolbarInternalActions?: boolean;
     hideToolbarBottom?: boolean;
+    hideToolbarInternalActions?: boolean;
     hideToolbarTop?: boolean;
+    icons?: Partial<MRT_Icons>;
+    initialState?: Partial<MRT_TableState>;
     isFetching?: boolean;
     isLoading?: boolean;
     localization?: Partial<MRT_Localization>;
     muiSearchTextFieldProps?: TextFieldProps;
-    muiTableBodyCellEditTextFieldProps?: TextFieldProps | ((cell?: Cell<D>) => TextFieldProps);
-    muiTableBodyCellProps?: TableCellProps | ((cell?: Cell<D>) => TableCellProps);
+    muiTableBodyCellEditTextFieldProps?: TextFieldProps | ((cell?: MRT_Cell<D>) => TextFieldProps);
+    muiTableBodyCellProps?: TableCellProps | ((cell?: MRT_Cell<D>) => TableCellProps);
     muiTableBodyProps?: TableBodyProps;
     muiTableBodyRowProps?: TableRowProps | ((row: Row<D>) => TableRowProps);
-    muiTableContainerProps?: TableContainerProps | ((table: TableInstance<D>) => TableContainerProps);
+    muiTableContainerProps?: TableContainerProps | ((table: MRT_TableInstance<D>) => TableContainerProps);
     muiTableDetailPanelProps?: TableCellProps | ((row: Row<D>) => TableCellProps);
     muiTableFooterCellProps?: TableCellProps | ((column: Column<D>) => TableCellProps);
     muiTableFooterProps?: TableFooterProps;
-    muiTableFooterRowProps?: TableRowProps | ((footerGroup: HeaderGroup<D>) => TableRowProps);
+    muiTableFooterRowProps?: TableRowProps | ((footerGroup: MRT_HeaderGroup<D>) => TableRowProps);
     muiTableHeadCellFilterTextFieldProps?: TextFieldProps | ((column: Column<D>) => TextFieldProps);
     muiTableHeadCellProps?: TableCellProps | ((column: Column<D>) => TableCellProps);
     muiTableHeadProps?: TableHeadProps;
-    muiTableHeadRowProps?: TableRowProps | ((row: HeaderGroup<D>) => TableRowProps);
-    muiTablePaginationProps?: Partial<TablePaginationProps> | ((tableInstance: TableInstance<D>) => Partial<TablePaginationProps>);
+    muiTableHeadRowProps?: TableRowProps | ((row: MRT_HeaderGroup<D>) => TableRowProps);
+    muiTablePaginationProps?: Partial<TablePaginationProps> | ((tableInstance: MRT_TableInstance<D>) => Partial<TablePaginationProps>);
     muiTableProps?: TableProps;
-    muiTableToolbarAlertBannerProps?: AlertProps | ((tableInstance: TableInstance<D>) => AlertProps);
-    muiTableToolbarBottomProps?: ToolbarProps | ((tableInstance: TableInstance<D>) => ToolbarProps);
-    muiTableToolbarTopProps?: ToolbarProps | ((tableInstance: TableInstance<D>) => ToolbarProps);
-    onCellClick?: (event: MouseEvent<HTMLTableCellElement>, cell: Cell<D>) => void;
+    muiTableToolbarAlertBannerProps?: AlertProps | ((tableInstance: MRT_TableInstance<D>) => AlertProps);
+    muiTableToolbarBottomProps?: ToolbarProps | ((tableInstance: MRT_TableInstance<D>) => ToolbarProps);
+    muiTableToolbarTopProps?: ToolbarProps | ((tableInstance: MRT_TableInstance<D>) => ToolbarProps);
+    onCellClick?: (event: MouseEvent<HTMLTableCellElement>, cell: MRT_Cell<D>) => void;
     onColumnHide?: (column: Column<D>, visibleColumns: Column<D>[]) => void;
     onDetailPanelClick?: (event: MouseEvent<HTMLTableCellElement>, row: Row<D>) => void;
     onGlobalFilterChange?: (event: ChangeEvent<HTMLInputElement>) => void;
@@ -63,10 +109,10 @@ export declare type MaterialReactTableProps<D extends {} = {}> = TableOptions<D>
     positionToolbarActions?: 'bottom' | 'top';
     positionToolbarAlertBanner?: 'bottom' | 'top';
     renderDetailPanel?: (row: Row<D>) => ReactNode;
-    renderRowActionMenuItems?: (rowData: Row<D>, tableInstance: TableInstance<D>, closeMenu: () => void) => ReactNode[];
-    renderRowActions?: (row: Row<D>, tableInstance: TableInstance<D>) => ReactNode;
-    renderToolbarCustomActions?: (tableInstance: TableInstance<D>) => ReactNode;
-    renderToolbarInternalActions?: (tableInstance: TableInstance<D>, { MRT_ToggleSearchButton, MRT_ToggleFiltersButton, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_FullScreenToggleButton, }: {
+    renderRowActionMenuItems?: (rowData: Row<D>, tableInstance: MRT_TableInstance<D>, closeMenu: () => void) => ReactNode[];
+    renderRowActions?: (row: Row<D>, tableInstance: MRT_TableInstance<D>) => ReactNode;
+    renderToolbarCustomActions?: (tableInstance: MRT_TableInstance<D>) => ReactNode;
+    renderToolbarInternalActions?: (tableInstance: MRT_TableInstance<D>, { MRT_ToggleSearchButton, MRT_ToggleFiltersButton, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_FullScreenToggleButton, }: {
         MRT_ToggleSearchButton: FC<IconButtonProps>;
         MRT_ToggleFiltersButton: FC<IconButtonProps>;
         MRT_ShowHideColumnsButton: FC<IconButtonProps>;
@@ -74,5 +120,5 @@ export declare type MaterialReactTableProps<D extends {} = {}> = TableOptions<D>
         MRT_FullScreenToggleButton: FC<IconButtonProps>;
     }) => ReactNode;
 };
-declare const _default: <D extends {}>({ defaultColumn, localization, positionActionsColumn, positionPagination, positionToolbarActions, positionToolbarAlertBanner, ...rest }: MaterialReactTableProps<D>) => JSX.Element;
+declare const _default: <D extends {}>({ defaultColumn, icons, localization, positionActionsColumn, positionPagination, positionToolbarActions, positionToolbarAlertBanner, ...rest }: MaterialReactTableProps<D>) => JSX.Element;
 export default _default;

package/dist/body/MRT_TableBodyCell.d.ts

@@ -1,10 +1,10 @@
 import { FC } from 'react';
-import { Cell } from 'react-table';
+import { MRT_Cell } from '..';
 export declare const MRT_StyledTableBodyCell: import("@emotion/styled").StyledComponent<import("@mui/material").TableCellProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     densePadding?: boolean | undefined;
 }, {}, {}>;
 interface Props {
-    cell: Cell;
+    cell: MRT_Cell;
 }
 export declare const MRT_TableBodyCell: FC<Props>;
 export {};

package/dist/body/MRT_TableBodyRow.d.ts

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { Row } from 'react-table';
+import { MRT_Row } from '..';
 export declare const TableRow: import("@emotion/styled").StyledComponent<{
     children?: React.ReactNode;
     classes?: Partial<import("@mui/material").TableRowClasses> | undefined;
@@ -16,7 +16,7 @@ export declare const TableRow: import("@emotion/styled").StyledComponent<{
     isSelected?: boolean | undefined;
 }, {}, {}>;
 interface Props {
-    row: Row;
+    row: MRT_Row;
 }
 export declare const MRT_TableBodyRow: FC<Props>;
 export {};

package/dist/body/MRT_TableDetailPanel.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
-import { Row } from 'react-table';
+import { MRT_Row } from '..';
 interface Props {
-    row: Row;
+    row: MRT_Row;
 }
 export declare const MRT_TableDetailPanel: FC<Props>;
 export {};

package/dist/buttons/MRT_EditActionButtons.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
-import { Row } from 'react-table';
+import { MRT_Row } from '..';
 interface Props {
-    row: Row;
+    row: MRT_Row;
 }
 export declare const MRT_EditActionButtons: FC<Props>;
 export {};

package/dist/buttons/MRT_ExpandButton.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
-import { Row } from 'react-table';
+import { MRT_Row } from '..';
 interface Props {
-    row: Row;
+    row: MRT_Row;
 }
 export declare const MRT_ExpandButton: FC<Props>;
 export {};

package/dist/buttons/MRT_ToggleColumnActionMenuButton.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
-import { HeaderGroup } from 'react-table';
+import { MRT_HeaderGroup } from '..';
 interface Props {
-    column: HeaderGroup;
+    column: MRT_HeaderGroup;
 }
 export declare const MRT_ToggleColumnActionMenuButton: FC<Props>;
 export {};

package/dist/buttons/MRT_ToggleRowActionMenuButton.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
-import { Row } from 'react-table';
+import { MRT_Row } from '..';
 interface Props {
-    row: Row;
+    row: MRT_Row;
 }
 export declare const MRT_ToggleRowActionMenuButton: FC<Props>;
 export {};

package/dist/footer/MRT_TableFooterCell.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
-import { HeaderGroup } from 'react-table';
+import { MRT_HeaderGroup } from '..';
 interface Props {
-    column: HeaderGroup;
+    column: MRT_HeaderGroup;
 }
 export declare const MRT_TableFooterCell: FC<Props>;
 export {};

package/dist/footer/MRT_TableFooterRow.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
-import { HeaderGroup } from 'react-table';
+import { MRT_HeaderGroup } from '..';
 interface Props {
-    footerGroup: HeaderGroup;
+    footerGroup: MRT_HeaderGroup;
 }
 export declare const MRT_TableFooterRow: FC<Props>;
 export {};

package/dist/head/MRT_TableHeadCell.d.ts

@@ -1,11 +1,11 @@
 import { FC } from 'react';
-import { HeaderGroup } from 'react-table';
+import { MRT_HeaderGroup } from '..';
 export declare const MRT_StyledTableHeadCell: import("@emotion/styled").StyledComponent<import("@mui/material").TableCellProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     densePadding?: boolean | undefined;
     enableColumnResizing?: boolean | undefined;
 }, {}, {}>;
 interface Props {
-    column: HeaderGroup;
+    column: MRT_HeaderGroup;
 }
 export declare const MRT_TableHeadCell: FC<Props>;
 export {};

package/dist/head/MRT_TableHeadRow.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
-import { HeaderGroup } from 'react-table';
+import { MRT_HeaderGroup } from '..';
 interface Props {
-    headerGroup: HeaderGroup;
+    headerGroup: MRT_HeaderGroup;
 }
 export declare const MRT_TableHeadRow: FC<Props>;
 export {};

package/dist/icons.d.ts

@@ -0,0 +1,25 @@
+export interface MRT_Icons {
+    CancelIcon: any;
+    ClearAllIcon: any;
+    CloseIcon: any;
+    DensityMediumIcon: any;
+    DensitySmallIcon: any;
+    DoubleArrowDownIcon: any;
+    DynamicFeedIcon: any;
+    EditIcon: any;
+    ExpandLessIcon: any;
+    ExpandMoreIcon: any;
+    FilterListIcon: any;
+    FilterListOffIcon: any;
+    FullscreenExitIcon: any;
+    FullscreenIcon: any;
+    MoreHorizIcon: any;
+    MoreVertIcon: any;
+    SaveIcon: any;
+    SearchIcon: any;
+    SearchOffIcon: any;
+    SortIcon: any;
+    ViewColumnIcon: any;
+    VisibilityOffIcon: any;
+}
+export declare const MRT_Default_Icons: MRT_Icons;

package/dist/inputs/MRT_EditCellTextField.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
-import { Cell } from 'react-table';
+import { MRT_Cell } from '..';
 interface Props {
-    cell: Cell;
+    cell: MRT_Cell;
 }
 export declare const MRT_EditCellTextField: FC<Props>;
 export {};

package/dist/inputs/MRT_FilterTextField.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
-import { HeaderGroup } from 'react-table';
+import { MRT_HeaderGroup } from '..';
 interface Props {
-    column: HeaderGroup;
+    column: MRT_HeaderGroup;
 }
 export declare const MRT_FilterTextField: FC<Props>;
 export {};

package/dist/inputs/MRT_SelectCheckbox.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
-import { Row } from 'react-table';
+import { MRT_Row } from '..';
 interface Props {
-    row?: Row;
+    row?: MRT_Row;
     selectAll?: boolean;
 }
 export declare const MRT_SelectCheckbox: FC<Props>;

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

@@ -31,4 +31,4 @@ export interface MRT_Localization {
     toolbarAlertGroupedByMessage: string;
     toolbarAlertGroupedThenByMessage: string;
 }
-export declare const defaultLocalization: MRT_Localization;
+export declare const MRT_DefaultLocalization_EN: MRT_Localization;