From 0907c26c2940780d40498908cca94c900f6cfa6c Mon Sep 17 00:00:00 2001 From: Kevin Van Cott Date: Thu, 26 Oct 2023 23:05:42 -0500 Subject: [PATCH] created changelog --- .../prop-tables/CellInstanceAPIsTable.tsx | 2 +- .../prop-tables/ColumnInstanceAPIsTable.tsx | 2 +- .../prop-tables/ColumnOptionsTable.tsx | 2 +- .../prop-tables/RowInstanceAPIsTable.tsx | 2 +- .../prop-tables/StateOptionsTable.tsx | 2 +- .../prop-tables/TableInstanceAPIsTable.tsx | 2 +- .../prop-tables/TableOptionsTable.tsx | 2 +- .../components/prop-tables/tableOptions.ts | 2 +- .../sandbox/src/JS.js | 2 +- .../sandbox/src/TS.tsx | 2 +- .../sandbox/src/JS.js | 2 +- .../sandbox/src/TS.tsx | 2 +- .../pages/changelog.mdx | 63 ++++++++++++++++++- .../pages/docs/guides/memoize-components.mdx | 6 +- .../pages/docs/guides/row-numbers.mdx | 6 +- .../pages/migrating-to-v2.mdx | 9 ++- .../src/body/MRT_TableBodyCell.tsx | 4 +- .../src/hooks/useMRT_TableOptions.ts | 4 +- packages/material-react-table/src/types.ts | 2 +- .../stories/features/RowNumbers.stories.tsx | 8 +-- 20 files changed, 95 insertions(+), 31 deletions(-) diff --git a/apps/material-react-table-docs/components/prop-tables/CellInstanceAPIsTable.tsx b/apps/material-react-table-docs/components/prop-tables/CellInstanceAPIsTable.tsx index 5055461d4..045f4c4d2 100644 --- a/apps/material-react-table-docs/components/prop-tables/CellInstanceAPIsTable.tsx +++ b/apps/material-react-table-docs/components/prop-tables/CellInstanceAPIsTable.tsx @@ -139,7 +139,7 @@ const CellInstanceAPIsTable = ({ onlyOptions }: Props) => { {row.original.description || 'No Description Provided... Yet...'} )} - rowNumberMode="static" + rowNumberDisplayMode="static" onColumnPinningChange={setColumnPinning} state={{ columnPinning }} /> diff --git a/apps/material-react-table-docs/components/prop-tables/ColumnInstanceAPIsTable.tsx b/apps/material-react-table-docs/components/prop-tables/ColumnInstanceAPIsTable.tsx index 6f231ce08..3d7c33a72 100644 --- a/apps/material-react-table-docs/components/prop-tables/ColumnInstanceAPIsTable.tsx +++ b/apps/material-react-table-docs/components/prop-tables/ColumnInstanceAPIsTable.tsx @@ -142,7 +142,7 @@ const ColumnInstanceAPIsTable = ({ onlyOptions }: Props) => { {row.original.description || 'No Description Provided... Yet...'} )} - rowNumberMode="static" + rowNumberDisplayMode="static" onColumnPinningChange={setColumnPinning} state={{ columnPinning }} /> diff --git a/apps/material-react-table-docs/components/prop-tables/ColumnOptionsTable.tsx b/apps/material-react-table-docs/components/prop-tables/ColumnOptionsTable.tsx index 84f69332f..f7dfc9746 100644 --- a/apps/material-react-table-docs/components/prop-tables/ColumnOptionsTable.tsx +++ b/apps/material-react-table-docs/components/prop-tables/ColumnOptionsTable.tsx @@ -174,7 +174,7 @@ const ColumnOptionsTable = ({ onlyOptions }: Props) => { {row.original.description || 'No Description Provided... Yet...'} )} - rowNumberMode="static" + rowNumberDisplayMode="static" onColumnPinningChange={setColumnPinning} state={{ columnPinning }} /> diff --git a/apps/material-react-table-docs/components/prop-tables/RowInstanceAPIsTable.tsx b/apps/material-react-table-docs/components/prop-tables/RowInstanceAPIsTable.tsx index df68411a8..12f6bc3b7 100644 --- a/apps/material-react-table-docs/components/prop-tables/RowInstanceAPIsTable.tsx +++ b/apps/material-react-table-docs/components/prop-tables/RowInstanceAPIsTable.tsx @@ -139,7 +139,7 @@ const RowInstanceAPIsTable = ({ onlyOptions }: Props) => { {row.original.description || 'No Description Provided... Yet...'} )} - rowNumberMode="static" + rowNumberDisplayMode="static" onColumnPinningChange={setColumnPinning} state={{ columnPinning }} /> diff --git a/apps/material-react-table-docs/components/prop-tables/StateOptionsTable.tsx b/apps/material-react-table-docs/components/prop-tables/StateOptionsTable.tsx index e7c86e70c..b06fb73aa 100644 --- a/apps/material-react-table-docs/components/prop-tables/StateOptionsTable.tsx +++ b/apps/material-react-table-docs/components/prop-tables/StateOptionsTable.tsx @@ -164,7 +164,7 @@ const StateOptionsTable = ({ onlyOptions }: Props) => { {row.original.description || 'No Description Provided... Yet...'} )} - rowNumberMode="static" + rowNumberDisplayMode="static" onColumnPinningChange={setColumnPinning} state={{ columnPinning }} /> diff --git a/apps/material-react-table-docs/components/prop-tables/TableInstanceAPIsTable.tsx b/apps/material-react-table-docs/components/prop-tables/TableInstanceAPIsTable.tsx index a1eaeccaa..c3b9f53dc 100644 --- a/apps/material-react-table-docs/components/prop-tables/TableInstanceAPIsTable.tsx +++ b/apps/material-react-table-docs/components/prop-tables/TableInstanceAPIsTable.tsx @@ -139,7 +139,7 @@ const TableInstanceAPIsTable = ({ onlyOptions }: Props) => { {row.original.description || 'No Description Provided... Yet...'} )} - rowNumberMode="static" + rowNumberDisplayMode="static" onColumnPinningChange={setColumnPinning} state={{ columnPinning }} /> diff --git a/apps/material-react-table-docs/components/prop-tables/TableOptionsTable.tsx b/apps/material-react-table-docs/components/prop-tables/TableOptionsTable.tsx index 84b4a1722..c337a8be8 100644 --- a/apps/material-react-table-docs/components/prop-tables/TableOptionsTable.tsx +++ b/apps/material-react-table-docs/components/prop-tables/TableOptionsTable.tsx @@ -185,7 +185,7 @@ const TableOptionsTable = ({ onlyOptions }: Props) => { {row.original.description || 'No Description Provided... Yet...'} )} - rowNumberMode="static" + rowNumberDisplayMode="static" onColumnPinningChange={setColumnPinning} state={{ columnPinning }} /> diff --git a/apps/material-react-table-docs/components/prop-tables/tableOptions.ts b/apps/material-react-table-docs/components/prop-tables/tableOptions.ts index be5eaf8ec..c97bbe45e 100644 --- a/apps/material-react-table-docs/components/prop-tables/tableOptions.ts +++ b/apps/material-react-table-docs/components/prop-tables/tableOptions.ts @@ -1988,7 +1988,7 @@ export const tableOptions: TableOption[] = [ type: 'number', }, { - tableOption: 'rowNumberMode', + tableOption: 'rowNumberDisplayMode', defaultValue: "'original'", description: '', link: '', diff --git a/apps/material-react-table-docs/examples/enable-row-numbers-original/sandbox/src/JS.js b/apps/material-react-table-docs/examples/enable-row-numbers-original/sandbox/src/JS.js index df64f58d8..ce41b814e 100644 --- a/apps/material-react-table-docs/examples/enable-row-numbers-original/sandbox/src/JS.js +++ b/apps/material-react-table-docs/examples/enable-row-numbers-original/sandbox/src/JS.js @@ -38,7 +38,7 @@ const Example = () => { columns, data, enableRowNumbers: true, - rowNumberMode: 'original', + rowNumberDisplayMode: 'original', }); return ; diff --git a/apps/material-react-table-docs/examples/enable-row-numbers-original/sandbox/src/TS.tsx b/apps/material-react-table-docs/examples/enable-row-numbers-original/sandbox/src/TS.tsx index b00c7dc4c..0dd51ed93 100644 --- a/apps/material-react-table-docs/examples/enable-row-numbers-original/sandbox/src/TS.tsx +++ b/apps/material-react-table-docs/examples/enable-row-numbers-original/sandbox/src/TS.tsx @@ -39,7 +39,7 @@ const Example = () => { columns, data, enableRowNumbers: true, - rowNumberMode: 'original', + rowNumberDisplayMode: 'original', }); return ; diff --git a/apps/material-react-table-docs/examples/enable-row-numbers-static/sandbox/src/JS.js b/apps/material-react-table-docs/examples/enable-row-numbers-static/sandbox/src/JS.js index ef400e976..35a6bfb9a 100644 --- a/apps/material-react-table-docs/examples/enable-row-numbers-static/sandbox/src/JS.js +++ b/apps/material-react-table-docs/examples/enable-row-numbers-static/sandbox/src/JS.js @@ -38,7 +38,7 @@ const Example = () => { columns, data, enableRowNumbers: true, - rowNumberMode: 'static', // default + rowNumberDisplayMode: 'static', // default }); return ; diff --git a/apps/material-react-table-docs/examples/enable-row-numbers-static/sandbox/src/TS.tsx b/apps/material-react-table-docs/examples/enable-row-numbers-static/sandbox/src/TS.tsx index 324aab801..f33eef1e4 100644 --- a/apps/material-react-table-docs/examples/enable-row-numbers-static/sandbox/src/TS.tsx +++ b/apps/material-react-table-docs/examples/enable-row-numbers-static/sandbox/src/TS.tsx @@ -39,7 +39,7 @@ const Example = () => { columns, data, enableRowNumbers: true, - rowNumberMode: 'static', // default + rowNumberDisplayMode: 'static', // default }); return ; diff --git a/apps/material-react-table-docs/pages/changelog.mdx b/apps/material-react-table-docs/pages/changelog.mdx index aaadc227e..a8e6acb5d 100644 --- a/apps/material-react-table-docs/pages/changelog.mdx +++ b/apps/material-react-table-docs/pages/changelog.mdx @@ -8,10 +8,69 @@ import Head from 'next/head'; /> +## Changelog + +### Version 2 + +#### Version 2.0.0 - 10-27-2023 + +- Made `MaterialReactTable` a named export instead of a default export. +- Made `@mui/x-date-pickers` a required peer dependency. +- Added new `useMaterialReactTable` hook to replace the need for the `tableInstanceRef` prop. +- Now exporting all `MRT_*` sub-components and utility functions from `material-react-table` package to allow for easier building of custom UIs in headless mode. +- Added `createMRTColumnHelper` utility function to help with creating columns with slightly more type-safety. +- Added new `mrtTheme` table option to allow for changing some basic mui theme colors that are hard to target with CSS or the mui theme provider. +- Added new `layoutMode: 'grid-no-grow'` option for better column resizing behavior. +- Improved column resizing UI. +- Added new `columnFilterDisplayMode` option to allow for different filter UIs. +- Added new `createDisplayMode` table option to allow for different create/editing UIs. Added new functionality for creating new rows in the table. +- Renamed `editMode` prop to `editDisplayMode` table option. +- Added new `paginationDisplayMode` option to allow for different pagination UIs. +- Added new `rowPinningDisplayMode` table option and row pinning features. +- Added new `"autocomplete"` filterVariant. +- Added new `"date"` filterVariant. +- Added new `"date-range"` filterVariant. +- Added new loading overlay UI features when `isLoading` or `showLoadingOverlay` are true Progress bars no longer show when `isLoading` is true. +- Changed the default sort icon and show it as visible with a low opacity by default in table header cells. +- Changed the filter label icon to show before the sort icon in table header cells. +- Changed the default global filter search box UI to be compact and outlined. +- Changed edit text field UI to be more compact by default. +- Changed the default rowNumberDisplayMode to `"static"`. +- Changed how the full screen table UI works internally. (No more mui full screen dialog, just simple CSS) +- Upgraded to TanStack Table `v8.10.7` +- Upgraded to TanStack Virtual `v3.0.0-beta.68` +- Renamed options + - `editingMode` -> `editDisplayMode` + - `rowNumberMode` -> `rowNumberDisplayMode` + - `enablePinning` -> `enableColumnPinning` and `enableRowPinning` + - `virtualizerInstanceRef` split into `columnVirtualizerRef` and `rowVirtualizerRef` + - `virtualizerProps` split into `columnVirtualizerOptions` and `rowVirtualizerOptions` + - `columnVirtualizerProps` -> `columnVirtualizerOptions` + - `rowVirtualizerProps` -> `rowVirtualizerOptions` + - `muiTablePaginationProps` -> `muiPaginationProps` + - `muiTableBodyCellCopyButtonProps` -> `muiCopyButtonProps` + - `muiTableBodyCellEditTextFieldProps` -> `muiEditTextFieldProps` + - `muiTableBodyCellSkeletonProps` -> `muiSkeletonProps` + - `muiTableBodyRowDragHandleProps` -> `muiRowDragHandleProps` + - `muiTableDetailPanelProps` -> `muiDetailPanelProps` + - `muiTableHeadCellColumnActionsButtonProps` -> `muiColumnActionsButtonProps` + - `muiTableHeadCellDragHandleProps` -> `muiColumnDragHandleProps` + - `muiTableHeadCellFilterCheckboxProps` -> `muiFilterCheckboxProps` + - `muiTableHeadCellFilterTextFieldProps` -> `muiFilterTextFieldProps` + - `muiTableHeadCellFilterSliderProps` -> `muiFilterSliderProps` + - `MRT_FilterFnsState` -> `MRT_ColumnFilterFns` + - `MaterialReactTableProps` -> `MRT_TableOptions` + +Is anything missing from this v2 changelog? Make a PR or join the [Discord](https://discord.gg/5wqyRx6fnm) to discuss. + +### Version 1 + +See the old [V1 Changelog](https://v1.material-react-table.com/changelog) + ## Roadmap ### Version 2 Roadmap (2023) -Version 2 should be released as stable by the end of 2023. +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. -If you are interested in following along the development of any of these features, be sure to join the [Discord](https://discord.gg/5wqyRx6fnm) +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. diff --git a/apps/material-react-table-docs/pages/docs/guides/memoize-components.mdx b/apps/material-react-table-docs/pages/docs/guides/memoize-components.mdx index 32130bec8..8402ff787 100644 --- a/apps/material-react-table-docs/pages/docs/guides/memoize-components.mdx +++ b/apps/material-react-table-docs/pages/docs/guides/memoize-components.mdx @@ -5,7 +5,7 @@ import MemoizeTableBodyExample from '../../../examples/memoize-table-body'; import Box from '@mui/material/Box'; - Memoize Components Guide - Material React Table V2 Docs + {'Memoize Components Guide - Material React Table V2 Docs'} DON'T MEMOIZE COMPONENTS UNLESS YOU KNOW WHAT YOU'RE DOING AND UNDERSTAND WHICH FEATURES WILL BREAK. +> Using these memoization features are usually unnecessary, but available if you need them. They can break some features, so use them with caution. ### Memoizing Table Cells diff --git a/apps/material-react-table-docs/pages/docs/guides/row-numbers.mdx b/apps/material-react-table-docs/pages/docs/guides/row-numbers.mdx index bcf19ca7f..9f7ca9128 100644 --- a/apps/material-react-table-docs/pages/docs/guides/row-numbers.mdx +++ b/apps/material-react-table-docs/pages/docs/guides/row-numbers.mdx @@ -18,18 +18,18 @@ Material React Table has an easy to implement row number features. There are two ### Relevant Table Options ### Enable Row Numbers (Static Mode) -In the default rowNumberMode (`static`), row numbers are just a static part of the table in their own column. They act like the row numbers in an excel spreadsheet. Sorting and filtering will not affect the row numbers. +In the default rowNumberDisplayMode (`static`), row numbers are just a static part of the table in their own column. They act like the row numbers in an excel spreadsheet. Sorting and filtering will not affect the row numbers. ### Enable Row Numbers (Original Mode) -Alternatively, use the `"original"` rowNumberMode to have row numbers linked to the original index of the data array. This means that when you search or filter, the same row numbers will stay with the same rows as data is sorted and filtered. +Alternatively, use the `"original"` rowNumberDisplayMode to have row numbers linked to the original index of the data array. This means that when you search or filter, the same row numbers will stay with the same rows as data is sorted and filtered. diff --git a/apps/material-react-table-docs/pages/migrating-to-v2.mdx b/apps/material-react-table-docs/pages/migrating-to-v2.mdx index 26324448d..e7c5a796b 100644 --- a/apps/material-react-table-docs/pages/migrating-to-v2.mdx +++ b/apps/material-react-table-docs/pages/migrating-to-v2.mdx @@ -16,7 +16,7 @@ import { InstallCommand } from '../components/mdx/InstallCommand'; ### New Feature Highlights 1. The new optional, but recommended `useMaterialReactTable` hook that allows you to create the `table` instance in your own scope. -2. Greatly improved Editing and Creating features. +2. Greatly improved Editing and new Creating features. 3. New Row Pinning Features 4. New Column Filtering `'popover'` display mode to give a more "excel-like" filtering experience. 5. New Autocomplete, Date, and Date Range Filter variants @@ -26,7 +26,9 @@ import { InstallCommand } from '../components/mdx/InstallCommand'; 9. Improved Table Head Cell Default Styles 10. Improved Column Sizing and Layout Modes for Column Resizing features 11. All internal MRT components are now exported for custom headless use cases -12. New optional `createMRTColumnHelper` utitlity function for better `TValue`/`cell.getValue()` type inference +12. New optional `createMRTColumnHelper` utility function for better `TValue`/`cell.getValue()` type inference + +See the full [changelog](/changelog#version-2.0.0---10-27-2023) for more details. ### Breaking Changes @@ -64,6 +66,7 @@ export const App = () => { #### Renamed Props/Options - `editingMode` -> `editDisplayMode` +- `rowNumberMode` -> `rowNumberDisplayMode` - `enablePinning` -> `enableColumnPinning` and `enableRowPinning` - `virtualizerInstanceRef` split into `columnVirtualizerRef` and `rowVirtualizerRef` - `virtualizerProps` split into `columnVirtualizerOptions` and `rowVirtualizerOptions` @@ -157,3 +160,5 @@ export const MyTableComponent = () => { ); }; ``` + +Is anything missing from this v2 migration guide? Make a PR or join the [Discord](https://discord.gg/5wqyRx6fnm) to discuss. \ No newline at end of file diff --git a/packages/material-react-table/src/body/MRT_TableBodyCell.tsx b/packages/material-react-table/src/body/MRT_TableBodyCell.tsx index 1bf6e903b..3a0c3dbbd 100644 --- a/packages/material-react-table/src/body/MRT_TableBodyCell.tsx +++ b/packages/material-react-table/src/body/MRT_TableBodyCell.tsx @@ -60,7 +60,7 @@ export const MRT_TableBodyCell = ({ layoutMode, muiSkeletonProps, muiTableBodyCellProps, - rowNumberMode, + rowNumberDisplayMode, }, refs: { editInputRefs }, setEditingCell, @@ -281,7 +281,7 @@ export const MRT_TableBodyCell = ({ {...skeletonProps} /> ) : enableRowNumbers && - rowNumberMode === 'static' && + rowNumberDisplayMode === 'static' && column.id === 'mrt-row-numbers' ? ( rowIndex + 1 ) : column.id === 'mrt-row-drag' ? ( diff --git a/packages/material-react-table/src/hooks/useMRT_TableOptions.ts b/packages/material-react-table/src/hooks/useMRT_TableOptions.ts index d006a141f..c3dabd5a5 100644 --- a/packages/material-react-table/src/hooks/useMRT_TableOptions.ts +++ b/packages/material-react-table/src/hooks/useMRT_TableOptions.ts @@ -86,7 +86,7 @@ export const useMRT_TableOptions: ( positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', - rowNumberMode = 'static', + rowNumberDisplayMode = 'static', rowPinningDisplayMode = 'sticky', selectAllMode = 'page', sortingFns, @@ -194,7 +194,7 @@ export const useMRT_TableOptions: ( positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, - rowNumberMode, + rowNumberDisplayMode, rowPinningDisplayMode, selectAllMode, sortingFns: _sortingFns, diff --git a/packages/material-react-table/src/types.ts b/packages/material-react-table/src/types.ts index 79d8a8d5a..1160ac842 100644 --- a/packages/material-react-table/src/types.ts +++ b/packages/material-react-table/src/types.ts @@ -1114,7 +1114,7 @@ export type MRT_TableOptions = Omit< table: MRT_TableInstance; }) => ReactNode; rowCount?: number; - rowNumberMode?: 'original' | 'static'; + rowNumberDisplayMode?: 'original' | 'static'; rowPinningDisplayMode?: | 'bottom' | 'select-bottom' diff --git a/packages/material-react-table/stories/features/RowNumbers.stories.tsx b/packages/material-react-table/stories/features/RowNumbers.stories.tsx index e22e45776..155d7df7b 100644 --- a/packages/material-react-table/stories/features/RowNumbers.stories.tsx +++ b/packages/material-react-table/stories/features/RowNumbers.stories.tsx @@ -44,7 +44,7 @@ export const enableRowNumbersOriginal = () => ( columns={columns} data={data} enableRowNumbers - rowNumberMode="original" + rowNumberDisplayMode="original" /> ); @@ -54,7 +54,7 @@ export const enableRowNumbersStatic = () => ( data={data} enableRowNumbers enableRowVirtualization - rowNumberMode="static" + rowNumberDisplayMode="static" /> ); @@ -65,7 +65,7 @@ export const enableRowNumbersOriginalVirtual = () => ( enableBottomToolbar={false} enablePagination={false} enableRowNumbers - rowNumberMode="original" + rowNumberDisplayMode="original" /> ); @@ -77,6 +77,6 @@ export const enableRowNumbersStaticVirtual = () => ( enablePagination={false} enableRowNumbers enableRowVirtualization - rowNumberMode="static" + rowNumberDisplayMode="static" /> );