From e4d110bed4e97312dca64b1c7da8fbd47f731f12 Mon Sep 17 00:00:00 2001 From: Kevin Van Cott Date: Fri, 27 Oct 2023 10:05:22 -0500 Subject: [PATCH] release v2.0.0-rc.0 --- README.md | 63 ++++--- .../components/mdx/SourceCodeSnippet.tsx | 2 +- .../pages/changelog.mdx | 2 +- .../public/sitemap-0.xml | 172 +++++++++--------- packages/material-react-table/README.md | 63 ++++--- packages/material-react-table/package.json | 2 +- 6 files changed, 162 insertions(+), 142 deletions(-) diff --git a/README.md b/README.md index 1980acfb0..495048997 100644 --- a/README.md +++ b/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/) + + + ## 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 ( - + //other more lightweight MRT sub components also available ); } ``` diff --git a/apps/material-react-table-docs/components/mdx/SourceCodeSnippet.tsx b/apps/material-react-table-docs/components/mdx/SourceCodeSnippet.tsx index 370e14111..912de020f 100644 --- a/apps/material-react-table-docs/components/mdx/SourceCodeSnippet.tsx +++ b/apps/material-react-table-docs/components/mdx/SourceCodeSnippet.tsx @@ -297,7 +297,7 @@ export const SourceCodeSnippet = ({ selected={codeTab === 'legacy'} sx={{ textTransform: 'none' }} > - {isMobile ? 'Legacy' : 'Legacy Props API'} + {isMobile ? 'Legacy' : 'Props API'} )} {apiCode && ( diff --git a/apps/material-react-table-docs/pages/changelog.mdx b/apps/material-react-table-docs/pages/changelog.mdx index a8e6acb5d..41e7aca5e 100644 --- a/apps/material-react-table-docs/pages/changelog.mdx +++ b/apps/material-react-table-docs/pages/changelog.mdx @@ -73,4 +73,4 @@ See the old [V1 Changelog](https://v1.material-react-table.com/changelog) Material React Table V2 was a big release months in the making that mostly focussed on the new `useMaterialReactTable` hook and paradigms. New features will be added and many bug fixes around virtualization compatibility with advanced features will be prioritized first. -A lighter weight `useMaterialReactTableLight` hook is also being considered in the near future that will be a bit more bare-bones and tree-shakable. All features will be opt-in and will not be included by default. +A lighter weight `useMaterialReactTableLight` hook is also being considered in the near future that will be a bit more bare-bones and tree-shakable. All features will be opt-in and will not be enabled by default. diff --git a/apps/material-react-table-docs/public/sitemap-0.xml b/apps/material-react-table-docs/public/sitemap-0.xml index 3904837eb..3e9aecde2 100644 --- a/apps/material-react-table-docs/public/sitemap-0.xml +++ b/apps/material-react-table-docs/public/sitemap-0.xml @@ -1,88 +1,90 @@ -https://www.material-react-table.com2023-10-24T03:21:21.245Z -https://www.material-react-table.com/about2023-10-24T03:21:21.245Z -https://www.material-react-table.com/blog2023-10-24T03:21:21.245Z -https://www.material-react-table.com/blog/the-best-react-data-grid-table-libraries-with-material-design-in-20232023-10-24T03:21:21.245Z -https://www.material-react-table.com/changelog2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/api2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/api/cell-instance-apis2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/api/column-instance-apis2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/api/column-options2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/api/row-instance-apis2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/api/state-options2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/api/table-instance-apis2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/api/table-options2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/examples2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/examples/advanced2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/examples/aggregation-and-grouping2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/examples/basic2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/examples/column-ordering2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/examples/column-pinning2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/examples/column-virtualization2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/examples/custom-headless2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/examples/detail-panel2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/examples/editing-crud2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/examples/editing-crud-inline-cell2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/examples/editing-crud-inline-row2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/examples/editing-crud-inline-table2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/examples/expanding-tree2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/examples/export-csv2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/examples/export-pdf2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/examples/faceted-values2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/examples/filter-switching2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/examples/filter-variants2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/examples/infinite-scrolling2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/examples/minimal2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/examples/popover-filters2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/examples/react-query2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/examples/remote2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/examples/row-dragging2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/examples/row-ordering2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/examples/row-virtualization2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/examples/static-row-pinning2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/examples/sticky-header2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/examples/sticky-row-pinning2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/examples/sticky-row-selection2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/examples/virtualized2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/getting-started2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/getting-started/install2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/getting-started/usage2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/guides2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/guides/aggregation-and-grouping2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/guides/async-loading2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/guides/best-practices2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/guides/click-to-copy2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/guides/column-actions2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/guides/column-filtering2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/guides/column-hiding2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/guides/column-ordering-dnd2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/guides/column-pinning2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/guides/column-resizing2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/guides/customize-components2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/guides/customize-icons2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/guides/data-columns2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/guides/density-toggle2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/guides/detail-panel2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/guides/display-columns2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/guides/editing2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/guides/expanding-sub-rows2023-10-24T03:21:21.245Z -https://www.material-react-table.com/docs/guides/full-screen-toggle2023-10-24T03:21:21.246Z -https://www.material-react-table.com/docs/guides/global-filtering2023-10-24T03:21:21.246Z -https://www.material-react-table.com/docs/guides/localization2023-10-24T03:21:21.246Z -https://www.material-react-table.com/docs/guides/memoize-components2023-10-24T03:21:21.246Z -https://www.material-react-table.com/docs/guides/pagination2023-10-24T03:21:21.246Z -https://www.material-react-table.com/docs/guides/row-actions2023-10-24T03:21:21.246Z -https://www.material-react-table.com/docs/guides/row-numbers2023-10-24T03:21:21.246Z -https://www.material-react-table.com/docs/guides/row-ordering-dnd2023-10-24T03:21:21.246Z -https://www.material-react-table.com/docs/guides/row-pinning2023-10-24T03:21:21.246Z -https://www.material-react-table.com/docs/guides/row-selection2023-10-24T03:21:21.246Z -https://www.material-react-table.com/docs/guides/sorting2023-10-24T03:21:21.246Z -https://www.material-react-table.com/docs/guides/state-management2023-10-24T03:21:21.246Z -https://www.material-react-table.com/docs/guides/sticky-header2023-10-24T03:21:21.246Z -https://www.material-react-table.com/docs/guides/table-event-listeners2023-10-24T03:21:21.246Z -https://www.material-react-table.com/docs/guides/toolbar-customization2023-10-24T03:21:21.246Z -https://www.material-react-table.com/docs/guides/virtualization2023-10-24T03:21:21.246Z -https://www.material-react-table.com/migrating-to-v22023-10-24T03:21:21.246Z +https://www.material-react-table.com2023-10-27T14:56:15.189Z +https://www.material-react-table.com/about2023-10-27T14:56:15.189Z +https://www.material-react-table.com/blog2023-10-27T14:56:15.189Z +https://www.material-react-table.com/blog/the-best-react-data-grid-table-libraries-with-material-design-in-20232023-10-27T14:56:15.189Z +https://www.material-react-table.com/changelog2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/api2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/api/cell-instance-apis2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/api/column-instance-apis2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/api/column-options2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/api/mrt-components2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/api/mrt-hooks2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/api/row-instance-apis2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/api/state-options2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/api/table-instance-apis2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/api/table-options2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/examples2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/examples/advanced2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/examples/aggregation-and-grouping2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/examples/basic2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/examples/column-ordering2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/examples/column-pinning2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/examples/column-virtualization2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/examples/custom-headless2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/examples/detail-panel2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/examples/editing-crud2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/examples/editing-crud-inline-cell2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/examples/editing-crud-inline-row2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/examples/editing-crud-inline-table2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/examples/expanding-tree2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/examples/export-csv2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/examples/export-pdf2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/examples/faceted-values2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/examples/filter-switching2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/examples/filter-variants2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/examples/infinite-scrolling2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/examples/minimal2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/examples/popover-filters2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/examples/react-query2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/examples/remote2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/examples/row-dragging2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/examples/row-ordering2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/examples/row-virtualization2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/examples/static-row-pinning2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/examples/sticky-header2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/examples/sticky-row-pinning2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/examples/sticky-row-selection2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/examples/virtualized2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/getting-started2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/getting-started/install2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/getting-started/usage2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/guides2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/guides/aggregation-and-grouping2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/guides/async-loading2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/guides/best-practices2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/guides/click-to-copy2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/guides/column-actions2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/guides/column-filtering2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/guides/column-hiding2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/guides/column-ordering-dnd2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/guides/column-pinning2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/guides/column-resizing2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/guides/customize-components2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/guides/customize-icons2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/guides/data-columns2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/guides/density-toggle2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/guides/detail-panel2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/guides/display-columns2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/guides/editing2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/guides/expanding-sub-rows2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/guides/full-screen-toggle2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/guides/global-filtering2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/guides/localization2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/guides/memoize-components2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/guides/pagination2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/guides/row-actions2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/guides/row-numbers2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/guides/row-ordering-dnd2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/guides/row-pinning2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/guides/row-selection2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/guides/sorting2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/guides/state-management2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/guides/sticky-header2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/guides/table-event-listeners2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/guides/toolbar-customization2023-10-27T14:56:15.189Z +https://www.material-react-table.com/docs/guides/virtualization2023-10-27T14:56:15.189Z +https://www.material-react-table.com/migrating-to-v22023-10-27T14:56:15.189Z \ No newline at end of file diff --git a/packages/material-react-table/README.md b/packages/material-react-table/README.md index 1980acfb0..495048997 100644 --- a/packages/material-react-table/README.md +++ b/packages/material-react-table/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/) + + + ## 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 ( - + //other more lightweight MRT sub components also available ); } ``` diff --git a/packages/material-react-table/package.json b/packages/material-react-table/package.json index 941d0ed2f..2b9730d24 100644 --- a/packages/material-react-table/package.json +++ b/packages/material-react-table/package.json @@ -1,5 +1,5 @@ { - "version": "2.0.0-beta.15", + "version": "2.0.0-rc.0", "license": "MIT", "name": "material-react-table", "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",