created changelog

KevinVandy · Oct 27, 2023 · 0907c26 · 0907c26
1 parent f6b1ed6
commit 0907c26
Show file tree

Hide file tree

Showing 20 changed files with 95 additions and 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
@@ -139,7 +139,7 @@ const CellInstanceAPIsTable = ({ onlyOptions }: Props) => {
           {row.original.description || 'No Description Provided... Yet...'}
         </Typography>
       )}
-      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
@@ -142,7 +142,7 @@ const ColumnInstanceAPIsTable = ({ onlyOptions }: Props) => {
           {row.original.description || 'No Description Provided... Yet...'}
         </Typography>
       )}
-      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
@@ -174,7 +174,7 @@ const ColumnOptionsTable = ({ onlyOptions }: Props) => {
           {row.original.description || 'No Description Provided... Yet...'}
         </Typography>
       )}
-      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
@@ -139,7 +139,7 @@ const RowInstanceAPIsTable = ({ onlyOptions }: Props) => {
           {row.original.description || 'No Description Provided... Yet...'}
         </Typography>
       )}
-      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
@@ -164,7 +164,7 @@ const StateOptionsTable = ({ onlyOptions }: Props) => {
           {row.original.description || 'No Description Provided... Yet...'}
         </Typography>
       )}
-      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
@@ -139,7 +139,7 @@ const TableInstanceAPIsTable = ({ onlyOptions }: Props) => {
           {row.original.description || 'No Description Provided... Yet...'}
         </Typography>
       )}
-      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
@@ -185,7 +185,7 @@ const TableOptionsTable = ({ onlyOptions }: Props) => {
           {row.original.description || 'No Description Provided... Yet...'}
         </Typography>
       )}
-      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
@@ -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
@@ -38,7 +38,7 @@ const Example = () => {
     columns,
     data,
     enableRowNumbers: true,
-    rowNumberMode: 'original',
+    rowNumberDisplayMode: 'original',
   });
 
   return <MaterialReactTable table={table} />;

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
@@ -39,7 +39,7 @@ const Example = () => {
     columns,
     data,
     enableRowNumbers: true,
-    rowNumberMode: 'original',
+    rowNumberDisplayMode: 'original',
   });
 
   return <MaterialReactTable table={table} />;

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
@@ -38,7 +38,7 @@ const Example = () => {
     columns,
     data,
     enableRowNumbers: true,
-    rowNumberMode: 'static', // default
+    rowNumberDisplayMode: 'static', // default
   });
 
   return <MaterialReactTable table={table} />;

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
@@ -39,7 +39,7 @@ const Example = () => {
     columns,
     data,
     enableRowNumbers: true,
-    rowNumberMode: 'static', // default
+    rowNumberDisplayMode: 'static', // default
   });
 
   return <MaterialReactTable table={table} />;

diff --git 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';
   />
 </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
@@ -5,7 +5,7 @@ import MemoizeTableBodyExample from '../../../examples/memoize-table-body';
 import Box from '@mui/material/Box';
 
 <Head>
-  <title>Memoize Components Guide - Material React Table V2 Docs</title>
+  <title>{'Memoize Components Guide - Material React Table V2 Docs'}</title>
   <meta
     name="description"
     content="How to memoize certain table components in Material React Table in order to improve render performance."
@@ -14,11 +14,11 @@ import Box from '@mui/material/Box';
 
 ## Memoize Components Guide
 
-As of version 1.1, Material React Table has introduced a new `memoMode` prop that will allow you to either memoize table cells, table rows, or the entire table body in order to improve render performance on large tables.
+Material React Table a `memoMode` table option that will allow you to explicitly memoize either table cells, table rows, or the entire table body in order to improve render performance on large tables.
 
 However, memoizing these components will **BREAK** some features!
 
-> 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
@@ -18,18 +18,18 @@ Material React Table has an easy to implement row number features. There are two
 ### Relevant Table Options
 
 <TableOptionsTable
-  onlyOptions={new Set(['enableRowNumbers', 'rowNumberMode'])}
+  onlyOptions={new Set(['enableRowNumbers', 'rowNumberDisplayMode'])}
 />
 
 ### 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.
 
 <StaticExample />
 
 ### 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.
 
 <OriginalExample />
 

diff --git 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.
diff --git 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 = <TData extends MRT_RowData>({
       layoutMode,
       muiSkeletonProps,
       muiTableBodyCellProps,
-      rowNumberMode,
+      rowNumberDisplayMode,
     },
     refs: { editInputRefs },
     setEditingCell,
@@ -281,7 +281,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
               {...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
@@ -86,7 +86,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
   positionPagination = 'bottom',
   positionToolbarAlertBanner = 'top',
   positionToolbarDropZone = 'top',
-  rowNumberMode = 'static',
+  rowNumberDisplayMode = 'static',
   rowPinningDisplayMode = 'sticky',
   selectAllMode = 'page',
   sortingFns,
@@ -194,7 +194,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     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
@@ -1114,7 +1114,7 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
     table: MRT_TableInstance<TData>;
   }) => 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
@@ -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"
   />
 );