material-react-table 2.0.0-beta.8 → 2.0.0-rc.0

package/README.md

@@ -1,4 +1,4 @@
-# Material React Table
+# Material React Table V2
 
 View [Documentation](https://www.material-react-table.com/)
 
@@ -20,6 +20,13 @@ View [Documentation](https://www.material-react-table.com/)
 <a href="http://makeapullrequest.com" target="_blank">
   <img alt="" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" />
 </a>
+ <a
+  href="https://github.com/sponsors/kevinvandy"
+  target="_blank"
+  rel="noopener"
+>
+  <img alt="" src="https://img.shields.io/badge/sponsor-violet" />
+</a>
 
 ## About
 
@@ -35,19 +42,21 @@ View [Documentation](https://www.material-react-table.com/)
 
 - Join the [Discord](https://discord.gg/5wqyRx6fnm) server to join in on the development discussion or ask questions
 - View the [Docs Website](https://www.material-react-table.com/)
-- See all [Props, Options, and APIs](https://www.material-react-table.com/docs/api)
+- See all [Props, Options, APIs, Components, and Hooks](https://www.material-react-table.com/docs/api)
 
 ### Quick Examples
 
  - [Basic Table](https://www.material-react-table.com/docs/examples/basic/) (See Default Features)
  - [Minimal Table](https://www.material-react-table.com/docs/examples/minimal/) (Turn off Features like Pagination, Sorting, Filtering, and Toolbars)
  - [Advanced Table](https://www.material-react-table.com/docs/examples/advanced/) (See some of the Advanced Features)
- - [Aggregation/Grouping](https://www.material-react-table.com/docs/examples/aggregation-and-grouping/) (Aggregation features such as Sum, Average, Count, etc.)
- - [Data Export Table](https://www.material-react-table.com/docs/examples/data-export/) (Export to CSV, Excel, etc.)
- - [Editing CRUD Table](https://www.material-react-table.com/docs/examples/editing-crud/) (Create, Edit, and Delete Rows)
- - [Remote Data](https://www.material-react-table.com/docs/examples/remote/) (Server-side Pagination, Sorting, and Filtering)
- - [React Query](https://www.material-react-table.com/docs/examples/react-query/) (Server-side Pagination, Sorting, and Filtering, simplified)
- - [Virtualized Rows](https://www.material-react-table.com/docs/examples/virtualized/) (10,000 rows at once!)
+ - [Custom Headless Table](https://www.material-react-table.com/docs/examples/custom-headless/) (Build your own table markup)
+ - [Dragging / Ordering Examples](https://www.material-react-table.com/docs/examples/column-ordering/) (Drag and Drop)
+ - [Editing (CRUD) Examples](https://www.material-react-table.com/docs/examples/editing-crud/) (Create, Edit, and Delete Rows)
+ - [Expanding / Grouping Examples](https://www.material-react-table.com/docs/examples/aggregation-and-grouping/) (Sum, Average, Count, etc.)
+ - [Filtering Examples](https://www.material-react-table.com/docs/examples/filter-variants/) (Faceted Values, Switching Filters, etc.)
+ - [Sticky Pinning Examples](https://www.material-react-table.com/docs/examples/sticky-header/) (Sticky Headers, Sticky Columns, Sticky Rows, etc.)
+ - [Remote Data Fetching Examples](https://www.material-react-table.com/docs/examples/react-query/) (Server-side Pagination, Sorting, and Filtering)
+ - [Virtualized Examples](https://www.material-react-table.com/docs/examples/virtualized/) (10,000 rows at once!)
  - [Infinite Scrolling](https://www.material-react-table.com/docs/examples/infinite-scrolling/) (Fetch data as you scroll)
  - [Localization (i18n)](https://www.material-react-table.com/docs/guides/localization#built-in-locale-examples) (Over a dozen languages built-in)
 
@@ -59,7 +68,7 @@ _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] < 47kb gzipped - [Bundlephobia](https://bundlephobia.com/package/material-react-table)
+- [x] 43-53kb 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
@@ -85,6 +94,7 @@ _**Fully Fleshed out [Docs](https://www.material-react-table.com/docs/guides#gui
 - [x] Row Actions (Your Custom Action Buttons)
 - [x] Row Numbers
 - [x] Row Ordering via Drag'n'Drop
+- [x] Row Pinning
 - [x] Row Selection (Checkboxes)
 - [x] SSR compatible
 - [x] Sorting (supports client-side and server-side)
@@ -99,12 +109,12 @@ _**Fully Fleshed out [Docs](https://www.material-react-table.com/docs/guides#gui
 
 View the full [Installation Docs](https://www.material-react-table.com/docs/getting-started/install)
 
-1. Ensure that you have React 17 or later installed (Material UI V5 requires React 17 or 18)
+1. Ensure that you have React 18 or later installed
 
 2. Install Peer Dependencies (Material UI V5)
 
 ```bash
-npm install @mui/material @mui/icons-material @emotion/react @emotion/styled
+npm install @mui/material @mui/x-date-pickers @mui/icons-material @emotion/react @emotion/styled
 ```
 
 3. Install material-react-table
@@ -120,9 +130,10 @@ npm install material-react-table
 > Read the full usage docs [here](https://www.material-react-table.com/docs/getting-started/usage/)
 
 ```jsx
-import { useMemo, useRef, useState, useEffect } from 'react';
-import { MaterialReactTable } from 'material-react-table';
+import { useMemo, useState, useEffect } from 'react';
+import { MaterialReactTable, useMaterialReactTable } from 'material-react-table';
 
+//data must be stable reference (useState, useMemo, useQuery, defined outside of component, etc.)
 const data = [
   {
     name: 'John',
@@ -160,25 +171,23 @@ export default function App() {
     //do something when the row selection changes
   }, [rowSelection]);
 
-  //Or, optionally, you can get a reference to the underlying table instance
-  const tableInstanceRef = useRef(null);
+  const table = useMaterialReactTable({
+    columns,
+    data,
+    enableColumnOrdering: true, //enable some features
+    enableRowSelection: true,
+    enablePagination: false, //disable a default feature
+    onRowSelectionChange: setRowSelection, //hoist internal state to your own state (optional)
+    state: { rowSelection }, //manage your own state, pass it back to the table (optional)
+  });
 
   const someEventHandler = () => {
-    //read the table state during an event from the table instance ref
-    console.log(tableInstanceRef.current.getState().sorting);
+    //read the table state during an event from the table instance
+    console.log(table.getState().sorting);
   }
 
   return (
-    <MaterialReactTable 
-      columns={columns} 
-      data={data} 
-      enableColumnOrdering //enable some features
-      enableRowSelection 
-      enablePagination={false} //disable a default feature
-      onRowSelectionChange={setRowSelection} //hoist internal state to your own state (optional)
-      state={{ rowSelection }} //manage your own state, pass it back to the table (optional)
-      tableInstanceRef={tableInstanceRef} //get a reference to the underlying table instance (optional)
-    />
+    <MaterialReactTable table={table} /> //other more lightweight MRT sub components also available
   );
 }
 ```

package/dist/index.d.ts

@@ -440,7 +440,11 @@ type MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<ColumnDef
     columnFilterModeOptions?: Array<LiteralUnion<string & MRT_FilterOption>> | null;
     columns?: MRT_ColumnDef<TData, TValue>[];
     editSelectOptions?: ({
-        text: string;
+        label?: string;
+        /**
+         * @deprecated use `label` instead
+         */
+        text?: string;
         value: any;
     } | string)[];
     editVariant?: 'select' | 'text';
@@ -453,7 +457,11 @@ type MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<ColumnDef
     enableFilterMatchHighlighting?: boolean;
     filterFn?: MRT_FilterFn<TData>;
     filterSelectOptions?: ({
-        text: string;
+        label?: string;
+        /**
+         * @deprecated use `label` instead
+         */
+        text?: string;
         value: any;
     } | string)[];
     filterVariant?: 'autocomplete' | 'checkbox' | 'date' | 'date-range' | 'multi-select' | 'range' | 'range-slider' | 'select' | 'text';
@@ -955,14 +963,13 @@ type MRT_TableOptions<TData extends MRT_RowData> = Omit<Partial<TableOptions<TDa
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
     rowCount?: number;
-    rowNumberMode?: 'original' | 'static';
+    rowNumberDisplayMode?: 'original' | 'static';
     rowPinningDisplayMode?: 'bottom' | 'select-bottom' | 'select-sticky' | 'select-top' | 'sticky' | 'top' | 'top-and-bottom';
     rowVirtualizerInstanceRef?: MutableRefObject<Virtualizer<HTMLDivElement, HTMLTableRowElement> | null>;
     rowVirtualizerOptions?: ((props: {
         table: MRT_TableInstance<TData>;
     }) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>) | Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>;
     selectAllMode?: 'all' | 'page';
-    selectDisplayMode?: 'checkbox' | 'radio' | 'switch';
     /**
      * Manage state externally any way you want, then pass it back into MRT.
      */
@@ -1231,6 +1238,14 @@ declare const flexRender: (Comp: Renderable<any>, props: any) => JSX.Element | R
 declare const createRow: <TData extends MRT_RowData>(table: MRT_TableInstance<TData>, originalRow?: TData | undefined) => MRT_Row<TData>;
 declare const extraIndexRangeExtractor: (range: Range, draggingIndex: number) => number[];
 declare function createMRTColumnHelper<TData extends MRT_RowData>(): MRT_ColumnHelper<TData>;
+declare const getValueAndLabel: (option: {
+    label?: string;
+    text?: string;
+    value: string;
+} | string) => {
+    label: string;
+    value: string;
+};
 
 interface Props$z<TData extends MRT_RowData> extends TableFooterProps {
     table: MRT_TableInstance<TData>;
@@ -1315,6 +1330,40 @@ interface Props$o<TData extends MRT_RowData> extends TableRowProps {
 }
 declare const MRT_TableHeadRow: <TData extends MRT_RowData>({ headerGroup, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, ...rest }: Props$o<TData>) => react_jsx_runtime.JSX.Element;
 
+interface Params<TData extends MRT_RowData> {
+    columnOrder: ColumnOrderState;
+    creatingRow: MRT_Row<TData> | null;
+    grouping: GroupingState;
+    tableOptions: MRT_DefinedTableOptions<TData>;
+}
+declare const useMRT_DisplayColumns: <TData extends MRT_RowData>({ columnOrder, creatingRow, grouping, tableOptions, }: Params<TData>) => MRT_ColumnDef<TData>[];
+
+declare const useMRT_Effects: <TData extends MRT_RowData>(table: MRT_TableInstance<TData>) => void;
+
+declare const useMRT_TableInstance: <TData extends MRT_RowData>(tableOptions: MRT_DefinedTableOptions<TData>) => MRT_TableInstance<TData>;
+
+declare const MRT_DefaultColumn: {
+    readonly filterVariant: "text";
+    readonly maxSize: 1000;
+    readonly minSize: 40;
+    readonly size: 180;
+};
+declare const MRT_DefaultDisplayColumn: {
+    readonly columnDefType: "display";
+    readonly enableClickToCopy: false;
+    readonly enableColumnActions: false;
+    readonly enableColumnDragging: false;
+    readonly enableColumnFilter: false;
+    readonly enableColumnOrdering: false;
+    readonly enableEditing: false;
+    readonly enableGlobalFilter: false;
+    readonly enableGrouping: false;
+    readonly enableHiding: false;
+    readonly enableResizing: false;
+    readonly enableSorting: false;
+};
+declare const useMRT_TableOptions: <TData extends MRT_RowData>(tableOptions: MRT_TableOptions<TData>) => MRT_DefinedTableOptions<TData>;
+
 interface Props$n<TData extends MRT_RowData> extends TextFieldProps<'standard'> {
     cell: MRT_Cell<TData>;
     table: MRT_TableInstance<TData>;
@@ -1512,4 +1561,4 @@ declare const MRT_TopToolbar: <TData extends MRT_RowData>({ table, }: Props<TDat
 
 declare const useMaterialReactTable: <TData extends MRT_RowData>(tableOptions: MRT_TableOptions<TData>) => MRT_TableInstance<TData>;
 
-export { type LiteralUnion, type MRT_AggregationFn, MRT_AggregationFns, type MRT_AggregationOption, MRT_BottomToolbar, type MRT_Cell, type MRT_Column, MRT_ColumnActionMenu, type MRT_ColumnDef, type MRT_ColumnFilterFnsState, type MRT_ColumnHelper, MRT_ColumnPinningButtons, MRT_CopyButton, type MRT_DefinedColumnDef, type MRT_DefinedTableOptions, type MRT_DensityState, type MRT_DisplayColumnDef, type MRT_DisplayColumnIds, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, type MRT_FilterFn, MRT_FilterFns, type MRT_FilterOption, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, type MRT_GroupColumnDef, type MRT_Header, type MRT_HeaderGroup, type MRT_Icons, type MRT_InternalFilterOption, MRT_LinearProgressBar, type MRT_Localization, type MRT_Row, MRT_RowActionMenu, type MRT_RowData, type MRT_RowModel, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, type MRT_SortingFn, MRT_SortingFns, type MRT_SortingOption, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableBodyRowPinButton, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, type MRT_TableInstance, MRT_TableLoadingOverlay, type MRT_TableOptions, MRT_TablePagination, MRT_TablePaper, type MRT_TableState, type MRT_Theme, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, type Prettify, type Xor, commonListItemStyles, commonMenuItemStyles, createMRTColumnHelper, createRow, extraIndexRangeExtractor, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnId, getCommonMRTCellStyles, getCommonToolbarStyles, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsFirstColumn, getIsFirstRightPinnedColumn, getIsLastColumn, getIsLastLeftPinnedColumn, getLeadingDisplayColumnIds, getMRTTheme, getTotalRight, getTrailingDisplayColumnIds, mrtFilterOptions, parseCSSVarId, parseFromValuesOrFunc, prepareColumns, rankGlobalFuzzy, reorderColumn, showExpandColumn, useMaterialReactTable };
+export { type LiteralUnion, type MRT_AggregationFn, MRT_AggregationFns, type MRT_AggregationOption, MRT_BottomToolbar, type MRT_Cell, type MRT_Column, MRT_ColumnActionMenu, type MRT_ColumnDef, type MRT_ColumnFilterFnsState, type MRT_ColumnHelper, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, type MRT_DefinedColumnDef, type MRT_DefinedTableOptions, type MRT_DensityState, type MRT_DisplayColumnDef, type MRT_DisplayColumnIds, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, type MRT_FilterFn, MRT_FilterFns, type MRT_FilterOption, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, type MRT_GroupColumnDef, type MRT_Header, type MRT_HeaderGroup, type MRT_Icons, type MRT_InternalFilterOption, MRT_LinearProgressBar, type MRT_Localization, type MRT_Row, MRT_RowActionMenu, type MRT_RowData, type MRT_RowModel, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, type MRT_SortingFn, MRT_SortingFns, type MRT_SortingOption, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableBodyRowPinButton, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, type MRT_TableInstance, MRT_TableLoadingOverlay, type MRT_TableOptions, MRT_TablePagination, MRT_TablePaper, type MRT_TableState, type MRT_Theme, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, type Prettify, type Xor, commonListItemStyles, commonMenuItemStyles, createMRTColumnHelper, createRow, extraIndexRangeExtractor, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnId, getCommonMRTCellStyles, getCommonToolbarStyles, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsFirstColumn, getIsFirstRightPinnedColumn, getIsLastColumn, getIsLastLeftPinnedColumn, getLeadingDisplayColumnIds, getMRTTheme, getTotalRight, getTrailingDisplayColumnIds, getValueAndLabel, mrtFilterOptions, parseCSSVarId, parseFromValuesOrFunc, prepareColumns, rankGlobalFuzzy, reorderColumn, showExpandColumn, useMRT_DisplayColumns, useMRT_Effects, useMRT_TableInstance, useMRT_TableOptions, useMaterialReactTable };