material-react-table 1.0.0-beta.7 → 1.0.0-rc.0

package/README.md

@@ -48,11 +48,13 @@ See all [Props and Options](https://www.material-react-table.com/docs/api)
 
 View additional [storybook examples](https://www.material-react-table.dev/)
 
-## Features (All Features work and are MVP, but are still being polished)
+## Features
 
 _All features can easily be enabled/disabled_
 
-- [x] < 37kb gzipped - [Bundlephobia](https://bundlephobia.com/package/material-react-table)
+_**Fully Fleshed out [Docs](https://www.material-react-table.com/docs/guides#guides) are available for all features**_
+
+- [x] < 38kb gzipped - [Bundlephobia](https://bundlephobia.com/package/material-react-table)
 - [x] Advanced TypeScript Generics Support (TypeScript Optional)
 - [x] Aggregation and Grouping (Sum, Average, Count, etc.)
 - [x] Click To Copy Cell Values
@@ -63,7 +65,7 @@ _All features can easily be enabled/disabled_
 - [x] Column Resizing
 - [x] Customize Icons
 - [x] Customize Styling of internal Mui Components
-- [x] Data Editing (3 different editing modes)
+- [x] Data Editing (4 different editing modes)
 - [x] Density Toggle
 - [x] Detail Panels (Expansion)
 - [x] Filtering (supports client-side and server-side)
@@ -71,7 +73,7 @@ _All features can easily be enabled/disabled_
 - [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] Manage your own state or let the table manage it internally for you
 - [x] Pagination (supports client-side and server-side)
 - [x] Row Actions (Your Custom Action Buttons)
 - [x] Row Numbers
@@ -112,33 +114,31 @@ npm install material-react-table
 import React, { useMemo, useRef, useState, useEffect } from 'react';
 import MaterialReactTable from 'material-react-table';
 
+const data = [
+  {
+    name: 'John',
+    age: 30,
+  },
+  {
+    name: 'Sara',
+    age: 25,
+  },
+]
+
 export default function App() {
   const columns = useMemo(
     () => [
       {
         accessorKey: 'name', //simple recommended way to define a column
         header: 'Name',
-        muiTableHeadCellProps: { sx: { color: 'green' } }, //custom props
+        muiTableHeadCellProps: { sx: { color: 'green' } }, //optional custom props
+        Cell: ({ cell}) => <span>{cell.getValue()}</span>, //optional custom cell render
       },
       {
         accessorFn: (row) => row.age, //alternate way
         id: 'age', //id required if you use accessorFn instead of accessorKey
         header: 'Age',
-        Header: <i>Age</i>, //optional custom markup
-      },
-    ],
-    [],
-  );
-
-  const data = useMemo(
-    () => [
-      {
-        name: 'John',
-        age: 30,
-      },
-      {
-        name: 'Sara',
-        age: 25,
+        Header: () => <i>Age</i>, //optional custom header render
       },
     ],
     [],
@@ -170,7 +170,7 @@ export default function App() {
       state={{ rowSelection }} //manage your own state, pass it back to the table (optional)
       tableInstanceRef={tableInstanceRef} //get a reference to the underlying table instance (optional)
    />
-   );
+  );
 }
 ```
 

package/dist/cjs/MaterialReactTable.d.ts

@@ -4,9 +4,97 @@ import type { Cell, Column, ColumnDef, DeepKeys, FilterFn, Header, HeaderGroup,
 import type { Options as VirtualizerOptions, VirtualItem } from 'react-virtual';
 import { MRT_Icons } from './icons';
 import { MRT_FilterFns } from './filterFns';
-import { MRT_Localization } from './localization';
 import { MRT_SortingFns } from './sortingFns';
 declare type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
+export interface MRT_Localization {
+    actions: string;
+    and: string;
+    cancel: string;
+    changeFilterMode: string;
+    changeSearchMode: string;
+    clearFilter: string;
+    clearSearch: string;
+    clearSort: string;
+    clickToCopy: string;
+    columnActions: string;
+    copiedToClipboard: string;
+    dropToGroupBy: string;
+    edit: string;
+    expand: string;
+    expandAll: string;
+    filterArrIncludes: string;
+    filterArrIncludesAll: string;
+    filterArrIncludesSome: string;
+    filterBetween: string;
+    filterBetweenInclusive: string;
+    filterByColumn: string;
+    filterContains: string;
+    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;
+    goToFirstPage: string;
+    goToLastPage: string;
+    goToNextPage: string;
+    goToPreviousPage: string;
+    grab: string;
+    groupByColumn: string;
+    groupedBy: string;
+    hideAll: string;
+    hideColumn: string;
+    max: string;
+    min: string;
+    move: string;
+    noRecordsToDisplay: string;
+    noResultsFound: string;
+    of: string;
+    or: string;
+    pinToLeft: string;
+    pinToRight: string;
+    resetColumnSize: string;
+    resetOrder: string;
+    rowActions: string;
+    rowNumber: string;
+    rowNumbers: string;
+    rowsPerPage: string;
+    save: string;
+    search: string;
+    select: string;
+    selectedCountOfRowCountRowsSelected: string;
+    showAll: string;
+    showAllColumns: string;
+    showHideColumns: string;
+    showHideFilters: string;
+    showHideSearch: string;
+    sortByColumnAsc: string;
+    sortByColumnDesc: string;
+    sortedByColumnAsc: string;
+    sortedByColumnDesc: string;
+    thenBy: string;
+    toggleDensity: string;
+    toggleFullScreen: string;
+    toggleSelectAll: string;
+    toggleSelectRow: string;
+    toggleVisibility: string;
+    ungroupByColumn: string;
+    unpin: string;
+    unpinAll: string;
+    unsorted: string;
+}
 export interface MRT_RowModel<TData extends Record<string, any> = {}> {
     flatRows: MRT_Row<TData>[];
     rows: MRT_Row<TData>[];
@@ -104,9 +192,10 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
         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, }: {
@@ -163,7 +252,7 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
         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)
      */
@@ -194,9 +283,11 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => TextFieldProps);
-    muiTableBodyCellProps?: TableCellProps | (({ cell, table, }: {
-        table: MRT_TableInstance<TData>;
+    muiTableBodyCellProps?: TableCellProps | (({ cell, column, row, table, }: {
         cell: MRT_Cell<TData>;
+        column: MRT_Column<TData>;
+        row: MRT_Row<TData>;
+        table: MRT_TableInstance<TData>;
     }) => TableCellProps);
     muiTableFooterCellProps?: TableCellProps | (({ table, column, }: {
         table: MRT_TableInstance<TData>;
@@ -210,6 +301,10 @@ export declare 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 | (({ table, column, rangeFilterIndex, }: {
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
@@ -406,6 +501,10 @@ export declare 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 | (({ table, column, rangeFilterIndex, }: {
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
@@ -467,6 +566,9 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     positionPagination?: 'bottom' | 'top' | 'both';
     positionToolbarAlertBanner?: 'bottom' | 'top' | 'none';
     positionToolbarDropZone?: 'bottom' | 'top' | 'none' | 'both';
+    renderBottomToolbar?: ReactNode | (({ table }: {
+        table: MRT_TableInstance<TData>;
+    }) => ReactNode);
     renderBottomToolbarCustomActions?: ({ table, }: {
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
@@ -503,6 +605,9 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     renderToolbarInternalActions?: ({ table, }: {
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
+    renderTopToolbar?: ReactNode | (({ table }: {
+        table: MRT_TableInstance<TData>;
+    }) => ReactNode);
     renderTopToolbarCustomActions?: ({ table, }: {
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
@@ -523,5 +628,5 @@ export declare type Virtualizer = {
     scrollToIndex: (index: number, options?: any | undefined) => void;
     measure: () => void;
 };
-declare const _default: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, defaultDisplayColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
-export default _default;
+declare const MaterialReactTable: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, defaultDisplayColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
+export default MaterialReactTable;

package/dist/cjs/_locales/en.d.ts

@@ -0,0 +1,2 @@
+import { MRT_Localization } from '../MaterialReactTable';
+export declare const MRT_Localization_EN: MRT_Localization;

package/dist/cjs/_locales/pt-BR.d.ts

@@ -0,0 +1,2 @@
+import { MRT_Localization } from '../MaterialReactTable';
+export declare const MRT_Localization_PT_BR: MRT_Localization;

package/dist/cjs/column.utils.d.ts

@@ -103,3 +103,9 @@ export declare const getCommonCellStyles: ({ column, header, table, tableCellPro
     tableCellProps: TableCellProps;
     theme: Theme;
 }) => any;
+export declare const MRT_DefaultColumn: {
+    minSize: number;
+    maxSize: number;
+    size: number;
+};
+export declare const MRT_DefaultDisplayColumn: Partial<MRT_ColumnDef>;

package/dist/cjs/head/MRT_TableHeadCellSortLabel.d.ts

@@ -1,8 +1,10 @@
 import { FC } from 'react';
+import { TableCellProps } from '@mui/material';
 import { MRT_Header, MRT_TableInstance } from '..';
 interface Props {
     header: MRT_Header;
     table: MRT_TableInstance;
+    tableCellProps?: TableCellProps;
 }
 export declare const MRT_TableHeadCellSortLabel: FC<Props>;
 export {};

package/dist/cjs/index.d.ts

@@ -2,13 +2,14 @@ import MaterialReactTable from './MaterialReactTable';
 export default MaterialReactTable;
 export * from './MaterialReactTable';
 import type { MRT_Icons } from './icons';
-import type { MRT_Localization } from './localization';
-export type { MRT_Localization, MRT_Icons };
+export type { MRT_Icons };
 import { MRT_CopyButton } from './buttons/MRT_CopyButton';
 import { MRT_FullScreenToggleButton } from './buttons/MRT_FullScreenToggleButton';
 import { MRT_GlobalFilterTextField } from './inputs/MRT_GlobalFilterTextField';
 import { MRT_ShowHideColumnsButton } from './buttons/MRT_ShowHideColumnsButton';
+import { MRT_TablePagination } from './toolbar/MRT_TablePagination';
 import { MRT_ToggleDensePaddingButton } from './buttons/MRT_ToggleDensePaddingButton';
 import { MRT_ToggleFiltersButton } from './buttons/MRT_ToggleFiltersButton';
 import { MRT_ToggleGlobalFilterButton } from './buttons/MRT_ToggleGlobalFilterButton';
-export { MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_CopyButton, };
+import { MRT_ToolbarInternalButtons } from './toolbar/MRT_ToolbarInternalButtons';
+export { MRT_CopyButton, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_ShowHideColumnsButton, MRT_TablePagination, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToolbarInternalButtons, };