material-react-table 0.41.0 → 1.0.0-beta.10

package/README.md

@@ -21,6 +21,8 @@
 
 ## About
 
+> Now in Beta!
+
 __Built with [Material UI <sup>V5</sup>](https://mui.com) and [TanStack Table <sup>V8</sup>](https://tanstack.com/table/v8)__
 
 _Quickly Create React Data Tables with Material Design_
@@ -46,10 +48,12 @@ 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_
 
+_**Fully Fleshed out [Docs](https://www.material-react-table.com/docs/guides#guides) are available for all features**_
+
 - [x] < 37kb gzipped - [Bundlephobia](https://bundlephobia.com/package/material-react-table)
 - [x] Advanced TypeScript Generics Support (TypeScript Optional)
 - [x] Aggregation and Grouping (Sum, Average, Count, etc.)
@@ -61,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)
@@ -69,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
@@ -110,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
       },
     ],
     [],
@@ -168,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

@@ -1,12 +1,94 @@
-import { Dispatch, DragEvent, MutableRefObject, ReactNode, SetStateAction } from 'react';
+import { Dispatch, MutableRefObject, ReactNode, SetStateAction } from 'react';
 import type { AlertProps, ButtonProps, CheckboxProps, ChipProps, IconButtonProps, LinearProgressProps, PaperProps, SkeletonProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TextFieldProps, ToolbarProps } from '@mui/material';
 import type { Cell, Column, ColumnDef, DeepKeys, FilterFn, Header, HeaderGroup, OnChangeFn, Row, SortingFn, Table, TableOptions, TableState } from '@tanstack/react-table';
 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;
+    grab: string;
+    groupByColumn: string;
+    groupedBy: string;
+    hideAll: string;
+    hideColumn: string;
+    max: string;
+    min: string;
+    move: string;
+    noRecordsToDisplay: string;
+    noResultsFound: string;
+    or: string;
+    pinToLeft: string;
+    pinToRight: string;
+    resetColumnSize: string;
+    resetOrder: string;
+    rowActions: string;
+    rowNumber: string;
+    rowNumbers: 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>[];
@@ -40,6 +122,7 @@ export declare type MRT_TableInstance<TData extends Record<string, any> = {}> =
         filterInputRefs: MutableRefObject<Record<string, HTMLInputElement>>;
         searchInputRef: MutableRefObject<HTMLInputElement>;
         tableContainerRef: MutableRefObject<HTMLDivElement>;
+        tablePaperRef: MutableRefObject<HTMLDivElement>;
         topToolbarRef: MutableRefObject<HTMLDivElement>;
     };
     setColumnFilterFns: Dispatch<SetStateAction<{
@@ -326,7 +409,7 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     muiExpandAllButtonProps?: IconButtonProps | (({ table }: {
         table: MRT_TableInstance<TData>;
     }) => IconButtonProps);
-    muiExpandButtonProps?: IconButtonProps | (({ table, }: {
+    muiExpandButtonProps?: IconButtonProps | (({ row, table, }: {
         table: MRT_TableInstance<TData>;
         row: MRT_Row<TData>;
     }) => IconButtonProps);
@@ -362,9 +445,11 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => TableCellProps);
-    muiTableBodyCellSkeletonProps?: SkeletonProps | (({ table, cell, }: {
-        table: MRT_TableInstance<TData>;
+    muiTableBodyCellSkeletonProps?: SkeletonProps | (({ cell, column, row, table, }: {
         cell: MRT_Cell<TData>;
+        column: MRT_Column<TData>;
+        row: MRT_Row<TData>;
+        table: MRT_TableInstance<TData>;
     }) => SkeletonProps);
     muiTableBodyProps?: TableBodyProps | (({ table }: {
         table: MRT_TableInstance<TData>;
@@ -437,13 +522,6 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     muiTopToolbarProps?: ToolbarProps | (({ table }: {
         table: MRT_TableInstance<TData>;
     }) => ToolbarProps);
-    onColumnDrop?: ({ event, draggedColumn, targetColumn, }: {
-        event: DragEvent<HTMLButtonElement>;
-        draggedColumn: MRT_Column<TData>;
-        targetColumn: MRT_Column<TData> | {
-            id: string;
-        } | null;
-    }) => void;
     onDensityChange?: OnChangeFn<boolean>;
     onDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
     onDraggingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
@@ -462,13 +540,6 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     onHoveredColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
     onHoveredRowChange?: OnChangeFn<MRT_Row<TData> | null>;
     onIsFullScreenChange?: OnChangeFn<boolean>;
-    onRowDrop?: ({ event, draggedRow, targetRow, }: {
-        event: DragEvent<HTMLButtonElement>;
-        draggedRow: MRT_Row<TData>;
-        targetRow: MRT_Row<TData> | {
-            id: string;
-        } | null;
-    }) => void;
     onShowAlertBannerChange?: OnChangeFn<boolean>;
     onShowFiltersChange?: OnChangeFn<boolean>;
     onShowGlobalFilterChange?: OnChangeFn<boolean>;
@@ -478,6 +549,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;
@@ -514,6 +588,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;

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/es.d.ts

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

package/dist/cjs/body/MRT_EditRowModal.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { MRT_Row, MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> {
     open: boolean;

package/dist/cjs/body/MRT_TableBody.d.ts

@@ -1,8 +1,7 @@
-import { FC, RefObject } from 'react';
+import { FC } from 'react';
 import type { MRT_TableInstance } from '..';
 interface Props {
     table: MRT_TableInstance;
-    tableContainerRef: RefObject<HTMLDivElement>;
 }
 export declare const MRT_TableBody: FC<Props>;
 export {};

package/dist/cjs/body/MRT_TableBodyCellValue.d.ts

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+import React from 'react';
 import { MRT_Cell, MRT_TableInstance } from '..';
 interface Props {
     cell: MRT_Cell;
     table: MRT_TableInstance;
 }
-export declare const MRT_TableBodyCellValue: FC<Props>;
+export declare const MRT_TableBodyCellValue: React.NamedExoticComponent<Props>;
 export {};

package/dist/cjs/buttons/MRT_ColumnPinningButtons.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { MRT_Column, MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> {
     column: MRT_Column<TData>;

package/dist/cjs/buttons/MRT_EditActionButtons.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { MRT_Row, MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> {
     row: MRT_Row<TData>;

package/dist/cjs/buttons/MRT_FullScreenToggleButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IconButtonProps } from '@mui/material';
 import { MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> extends IconButtonProps {

package/dist/cjs/buttons/MRT_ShowHideColumnsButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IconButtonProps } from '@mui/material';
 import { MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> extends IconButtonProps {

package/dist/cjs/buttons/MRT_ToggleDensePaddingButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IconButtonProps } from '@mui/material';
 import { MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> extends IconButtonProps {

package/dist/cjs/buttons/MRT_ToggleFiltersButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IconButtonProps } from '@mui/material';
 import { MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> extends IconButtonProps {

package/dist/cjs/buttons/MRT_ToggleGlobalFilterButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IconButtonProps } from '@mui/material';
 import { MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> extends IconButtonProps {

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

@@ -1,5 +1,6 @@
 import { ColumnOrderState, GroupingState } from '@tanstack/react-table';
-import { MaterialReactTableProps, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterOption } from '.';
+import { TableCellProps, Theme } from '@mui/material';
+import { MaterialReactTableProps, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterOption, MRT_Header, MRT_TableInstance } from '.';
 import { MRT_FilterFns } from './filterFns';
 import { MRT_SortingFns } from './sortingFns';
 export declare const getColumnId: <TData extends Record<string, any> = {}>(columnDef: MRT_ColumnDef<TData>) => string;
@@ -92,3 +93,13 @@ export declare const getLeadingDisplayColumnIds: <TData extends Record<string, a
 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;
+export declare const getIsLastLeftPinnedColumn: (table: MRT_TableInstance, column: MRT_Column) => boolean;
+export declare const getIsFirstRightPinnedColumn: (column: MRT_Column) => boolean;
+export declare const getTotalRight: (table: MRT_TableInstance, column: MRT_Column) => number;
+export declare const getCommonCellStyles: ({ column, header, table, tableCellProps, theme, }: {
+    column: MRT_Column;
+    header?: MRT_Header<{}> | undefined;
+    table: MRT_TableInstance;
+    tableCellProps: TableCellProps;
+    theme: Theme;
+}) => any;

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, };