Skip to content

Commit d02abcc

Browse files
KevinVandyKevinVandy
committed
refactor column info stuff
1 parent f705a2d commit d02abcc

File tree

14 files changed

+114
-108
lines changed

14 files changed

+114
-108
lines changed

‎apps/material-react-table-docs/pages/changelog.mdx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,14 @@ import Head from 'next/head';
77

88
## MRT V2 Changelog
99

10+
> Note: As of v2.12.0, the React and ReactDom peer dependencies have been moved back down to React v17 in order to help more people upgrade to MRT v2 without having to upgrade to React v18.
11+
12+
### Version 2.12.0 - 2024-02-26
13+
14+
- **Marked React 17 as a peer dependency instead of React 18 since concurrent features are not yet being utilized under the hood in MRT**
15+
- Filter label tooltip will show label instead of value when a label is provided to filterSelectOptions
16+
- Fixed Column and Row Dragging element animation to not go back to where it started when dragging
17+
1018
### Version 2.11.3 - 2024-02-14
1119

1220
- Upgraded to TanStack Table v8.12.0 for new column pinning/sizing/pinning instance APIs and better column resizing performance

‎apps/material-react-table-docs/pages/docs/getting-started/install.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { FAQs } from '../../../components/mdx/FAQs';
2020
> 3. `@mui/icons-material` (v5)
2121
> 4. `@emotion/react` (v11)
2222
> 5. `@emotion/styled` (v11)
23-
> 6. `react` and `react-dom` (v18) - (MRT v2 will eventually use React 18 concurrent mode)
23+
> 6. `react` and `react-dom` (v17+)
2424
2525
### Quick Install
2626

‎apps/material-react-table-docs/pages/docs/getting-started/migrating-to-v2.mdx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ import { InstallCommand } from '../../../components/mdx/InstallCommand';
1515

1616
This should be an easy to moderate upgrade for most developers. The only breaking changes have to do with the removed `tableInstanceRef`, some renamed props/options, and new column sizing behaviors.
1717

18+
> Note: As of v2.12.0, the React and ReactDom peer dependencies have been moved back down to React v17 in order to help more people upgrade to MRT v2 without having to upgrade to React v18.
19+
1820
### New Feature Highlights
1921

2022
1. New optional but recommended `useMaterialReactTable` hook that allows you to create the `table` instance in your own scope

‎packages/material-react-table/README.md‎

Lines changed: 29 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,6 @@ View [Documentation](https://www.material-react-table.com/)
1616
</a>
1717
<a href="https://github.com/KevinVandy/material-react-table/blob/v2/LICENSE" target="_blank">
1818
<img alt="" src="https://badgen.net/github/license/KevinVandy/material-react-table?color=blue" />
19-
</a>
20-
<a href="http://makeapullrequest.com" target="_blank">
21-
<img alt="" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" />
2219
</a>
2320
<a
2421
href="https://github.com/sponsors/kevinvandy"
@@ -27,14 +24,21 @@ View [Documentation](https://www.material-react-table.com/)
2724
>
2825
<img alt="" src="https://img.shields.io/badge/sponsor-violet" />
2926
</a>
27+
<a
28+
href="https://discord.gg/5wqyRx6fnm"
29+
target="_blank"
30+
rel="noopener"
31+
>
32+
<img alt="" src="https://dcbadge.vercel.app/api/server/5wqyRx6fnm?style=flat">
33+
</a>
3034
3135
## About
3236

3337
### _Quickly Create React Data Tables with Material Design_
3438

35-
### __Built with [Material UI <sup>V5</sup>](https://mui.com) and [TanStack Table <sup>V8</sup>](https://tanstack.com/table/v8)__
39+
### **Built with [Material UI <sup>V5</sup>](https://mui.com) and [TanStack Table <sup>V8</sup>](https://tanstack.com/table/v8)**
3640

37-
<img src="https://material-react-table.com/banner.png" alt="MRT" height="50"/>
41+
<img src="https://material-react-table.com/banner.png" alt="MRT" height="50" />
3842

3943
> Want to use Mantine instead of Material UI? Check out [Mantine React Table](https://www.mantine-react-table.com)
4044
@@ -46,19 +50,19 @@ View [Documentation](https://www.material-react-table.com/)
4650

4751
### Quick Examples
4852

49-
- [Basic Table](https://www.material-react-table.com/docs/examples/basic/) (See Default Features)
50-
- [Minimal Table](https://www.material-react-table.com/docs/examples/minimal/) (Turn off Features like Pagination, Sorting, Filtering, and Toolbars)
51-
- [Advanced Table](https://www.material-react-table.com/docs/examples/advanced/) (See some of the Advanced Features)
52-
- [Custom Headless Table](https://www.material-react-table.com/docs/examples/custom-headless/) (Build your own table markup)
53-
- [Dragging / Ordering Examples](https://www.material-react-table.com/docs/examples/column-ordering/) (Drag and Drop)
54-
- [Editing (CRUD) Examples](https://www.material-react-table.com/docs/examples/editing-crud/) (Create, Edit, and Delete Rows)
55-
- [Expanding / Grouping Examples](https://www.material-react-table.com/docs/examples/aggregation-and-grouping/) (Sum, Average, Count, etc.)
56-
- [Filtering Examples](https://www.material-react-table.com/docs/examples/filter-variants/) (Faceted Values, Switching Filters, etc.)
57-
- [Sticky Pinning Examples](https://www.material-react-table.com/docs/examples/sticky-header/) (Sticky Headers, Sticky Columns, Sticky Rows, etc.)
58-
- [Remote Data Fetching Examples](https://www.material-react-table.com/docs/examples/react-query/) (Server-side Pagination, Sorting, and Filtering)
59-
- [Virtualized Examples](https://www.material-react-table.com/docs/examples/virtualized/) (10,000 rows at once!)
60-
- [Infinite Scrolling](https://www.material-react-table.com/docs/examples/infinite-scrolling/) (Fetch data as you scroll)
61-
- [Localization (i18n)](https://www.material-react-table.com/docs/guides/localization#built-in-locale-examples) (Over a dozen languages built-in)
53+
- [Basic Table](https://www.material-react-table.com/docs/examples/basic/) (See Default Features)
54+
- [Minimal Table](https://www.material-react-table.com/docs/examples/minimal/) (Turn off Features like Pagination, Sorting, Filtering, and Toolbars)
55+
- [Advanced Table](https://www.material-react-table.com/docs/examples/advanced/) (See some of the Advanced Features)
56+
- [Custom Headless Table](https://www.material-react-table.com/docs/examples/custom-headless/) (Build your own table markup)
57+
- [Dragging / Ordering Examples](https://www.material-react-table.com/docs/examples/column-ordering/) (Drag and Drop)
58+
- [Editing (CRUD) Examples](https://www.material-react-table.com/docs/examples/editing-crud/) (Create, Edit, and Delete Rows)
59+
- [Expanding / Grouping Examples](https://www.material-react-table.com/docs/examples/aggregation-and-grouping/) (Sum, Average, Count, etc.)
60+
- [Filtering Examples](https://www.material-react-table.com/docs/examples/filter-variants/) (Faceted Values, Switching Filters, etc.)
61+
- [Sticky Pinning Examples](https://www.material-react-table.com/docs/examples/sticky-header/) (Sticky Headers, Sticky Columns, Sticky Rows, etc.)
62+
- [Remote Data Fetching Examples](https://www.material-react-table.com/docs/examples/react-query/) (Server-side Pagination, Sorting, and Filtering)
63+
- [Virtualized Examples](https://www.material-react-table.com/docs/examples/virtualized/) (10,000 rows at once!)
64+
- [Infinite Scrolling](https://www.material-react-table.com/docs/examples/infinite-scrolling/) (Fetch data as you scroll)
65+
- [Localization (i18n)](https://www.material-react-table.com/docs/guides/localization#built-in-locale-examples) (Over a dozen languages built-in)
6266

6367
View additional [storybook examples](https://www.material-react-table.dev/)
6468

@@ -68,7 +72,7 @@ _All features can easily be enabled/disabled_
6872

6973
_**Fully Fleshed out [Docs](https://www.material-react-table.com/docs/guides#guides) are available for all features**_
7074

71-
- [x] 30-54kb gzipped - [Bundlephobia](https://bundlephobia.com/package/material-react-table)
75+
- [x] 30-56kb gzipped - [Bundlephobia](https://bundlephobia.com/package/material-react-table)
7276
- [x] Advanced TypeScript Generics Support (TypeScript Optional)
7377
- [x] Aggregation and Grouping (Sum, Average, Count, etc.)
7478
- [x] Cell Actions (Right-click Context Menu)
@@ -132,7 +136,10 @@ npm install material-react-table
132136
133137
```jsx
134138
import { useMemo, useState, useEffect } from 'react';
135-
import { MaterialReactTable, useMaterialReactTable } from 'material-react-table';
139+
import {
140+
MaterialReactTable,
141+
useMaterialReactTable,
142+
} from 'material-react-table';
136143

137144
//data must be stable reference (useState, useMemo, useQuery, defined outside of component, etc.)
138145
const data = [
@@ -144,7 +151,7 @@ const data = [
144151
name: 'Sara',
145152
age: 25,
146153
},
147-
]
154+
];
148155

149156
export default function App() {
150157
const columns = useMemo(
@@ -185,7 +192,7 @@ export default function App() {
185192
const someEventHandler = () => {
186193
//read the table state during an event from the table instance
187194
console.log(table.getState().sorting);
188-
}
195+
};
189196

190197
return (
191198
<MaterialReactTable table={table} /> //other more lightweight MRT sub components also available

‎packages/material-react-table/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"version": "2.11.3",
2+
"version": "2.12.0",
33
"license": "MIT",
44
"name": "material-react-table",
55
"description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
@@ -111,8 +111,8 @@
111111
"@mui/icons-material": ">=5.11",
112112
"@mui/material": ">=5.13",
113113
"@mui/x-date-pickers": ">=6.15.0",
114-
"react": ">=18.0",
115-
"react-dom": ">=18.0"
114+
"react": ">=17.0",
115+
"react-dom": ">=17.0"
116116
},
117117
"dependencies": {
118118
"@tanstack/match-sorter-utils": "8.11.8",

‎packages/material-react-table/src/components/body/MRT_TableBodyCell.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,9 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
211211
};
212212

213213
const handleDragOver = (e: DragEvent) => {
214-
e.preventDefault();
214+
if (columnDef.enableColumnOrdering !== false) {
215+
e.preventDefault();
216+
}
215217
};
216218

217219
const handleContextMenu = (e: MouseEvent<HTMLTableCellElement>) => {

‎packages/material-react-table/src/components/head/MRT_TableHead.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,6 @@ export const MRT_TableHead = <TData extends MRT_RowData>({
2020
...rest
2121
}: MRT_TableHeadProps<TData>) => {
2222
const {
23-
getHeaderGroups,
24-
getSelectedRowModel,
2523
getState,
2624
options: {
2725
enableStickyHeader,
@@ -60,7 +58,7 @@ export const MRT_TableHead = <TData extends MRT_RowData>({
6058
})}
6159
>
6260
{positionToolbarAlertBanner === 'head-overlay' &&
63-
(showAlertBanner || getSelectedRowModel().rows.length > 0) ? (
61+
(showAlertBanner || table.getSelectedRowModel().rows.length > 0) ? (
6462
<tr
6563
style={{
6664
display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
@@ -77,14 +75,16 @@ export const MRT_TableHead = <TData extends MRT_RowData>({
7775
</th>
7876
</tr>
7977
) : (
80-
getHeaderGroups().map((headerGroup) => (
81-
<MRT_TableHeadRow
82-
columnVirtualizer={columnVirtualizer}
83-
headerGroup={headerGroup as any}
84-
key={headerGroup.id}
85-
table={table}
86-
/>
87-
))
78+
table
79+
.getHeaderGroups()
80+
.map((headerGroup) => (
81+
<MRT_TableHeadRow
82+
columnVirtualizer={columnVirtualizer}
83+
headerGroup={headerGroup as any}
84+
key={headerGroup.id}
85+
table={table}
86+
/>
87+
))
8888
)}
8989
</TableHead>
9090
);

‎packages/material-react-table/src/components/head/MRT_TableHeadCell.tsx‎

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import {
1515
type MRT_RowData,
1616
type MRT_TableInstance,
1717
} from '../../types';
18-
import { useColumnFilterInfo } from '../../utils/column.utils';
1918
import { getCommonMRTCellStyles } from '../../utils/style.utils';
2019
import { parseFromValuesOrFunc } from '../../utils/utils';
2120

@@ -75,11 +74,6 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
7574
...rest,
7675
};
7776

78-
const columnFilterInfo = useColumnFilterInfo({
79-
header,
80-
table,
81-
});
82-
8377
const isColumnPinned =
8478
enableColumnPinning &&
8579
columnDef.columnDefType !== 'group' &&
@@ -148,7 +142,9 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
148142
};
149143

150144
const handleDragOver = (e: DragEvent) => {
151-
e.preventDefault();
145+
if (columnDef.enableColumnOrdering !== false) {
146+
e.preventDefault();
147+
}
152148
};
153149

154150
const HeaderElement =
@@ -282,11 +278,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
282278
{HeaderElement}
283279
</Box>
284280
{column.getCanFilter() && (
285-
<MRT_TableHeadCellFilterLabel
286-
columnFilterInfo={columnFilterInfo}
287-
header={header}
288-
table={table}
289-
/>
281+
<MRT_TableHeadCellFilterLabel header={header} table={table} />
290282
)}
291283
{column.getCanSort() && (
292284
<MRT_TableHeadCellSortLabel header={header} table={table} />
@@ -322,11 +314,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
322314
</Box>
323315
)}
324316
{columnFilterDisplayMode === 'subheader' && column.getCanFilter() && (
325-
<MRT_TableHeadCellFilterContainer
326-
columnFilterInfo={columnFilterInfo}
327-
header={header}
328-
table={table}
329-
/>
317+
<MRT_TableHeadCellFilterContainer header={header} table={table} />
330318
)}
331319
</TableCell>
332320
);

‎packages/material-react-table/src/components/head/MRT_TableHeadCellFilterContainer.tsx‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
type MRT_RowData,
55
type MRT_TableInstance,
66
} from '../../types';
7-
import { type ColumnFilterInfo } from '../../utils/column.utils';
7+
import { getColumnFilterInfo } from '../../utils/column.utils';
88
import { MRT_FilterCheckbox } from '../inputs/MRT_FilterCheckbox';
99
import { MRT_FilterRangeFields } from '../inputs/MRT_FilterRangeFields';
1010
import { MRT_FilterRangeSlider } from '../inputs/MRT_FilterRangeSlider';
@@ -13,13 +13,11 @@ import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
1313
export interface MRT_TableHeadCellFilterContainerProps<
1414
TData extends MRT_RowData,
1515
> extends CollapseProps {
16-
columnFilterInfo: ColumnFilterInfo;
1716
header: MRT_Header<TData>;
1817
table: MRT_TableInstance<TData>;
1918
}
2019

2120
export const MRT_TableHeadCellFilterContainer = <TData extends MRT_RowData>({
22-
columnFilterInfo,
2321
header,
2422
table,
2523
...rest
@@ -31,7 +29,7 @@ export const MRT_TableHeadCellFilterContainer = <TData extends MRT_RowData>({
3129
const { showColumnFilters } = getState();
3230
const { column } = header;
3331
const { columnDef } = column;
34-
const { isRangeFilter } = columnFilterInfo;
32+
const { isRangeFilter } = getColumnFilterInfo({ header, table });
3533

3634
return (
3735
<Collapse
@@ -45,17 +43,9 @@ export const MRT_TableHeadCellFilterContainer = <TData extends MRT_RowData>({
4543
) : columnDef.filterVariant === 'range-slider' ? (
4644
<MRT_FilterRangeSlider header={header} table={table} />
4745
) : isRangeFilter ? (
48-
<MRT_FilterRangeFields
49-
columnFilterInfo={columnFilterInfo}
50-
header={header}
51-
table={table}
52-
/>
46+
<MRT_FilterRangeFields header={header} table={table} />
5347
) : (
54-
<MRT_FilterTextField
55-
columnFilterInfo={columnFilterInfo}
56-
header={header}
57-
table={table}
58-
/>
48+
<MRT_FilterTextField header={header} table={table} />
5949
)}
6050
</Collapse>
6151
);

‎packages/material-react-table/src/components/head/MRT_TableHeadCellFilterLabel.tsx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,19 @@ import {
1010
type MRT_RowData,
1111
type MRT_TableInstance,
1212
} from '../../types';
13-
import { type ColumnFilterInfo } from '../../utils/column.utils';
13+
import {
14+
getColumnFilterInfo,
15+
useDropdownOptions,
16+
} from '../../utils/column.utils';
1417
import { getValueAndLabel, parseFromValuesOrFunc } from '../../utils/utils';
1518

1619
export interface MRT_TableHeadCellFilterLabelProps<TData extends MRT_RowData>
1720
extends IconButtonProps {
18-
columnFilterInfo: ColumnFilterInfo;
1921
header: MRT_Header<TData>;
2022
table: MRT_TableInstance<TData>;
2123
}
2224

2325
export const MRT_TableHeadCellFilterLabel = <TData extends MRT_RowData = {}>({
24-
columnFilterInfo,
2526
header,
2627
table,
2728
...rest
@@ -44,11 +45,12 @@ export const MRT_TableHeadCellFilterLabel = <TData extends MRT_RowData = {}>({
4445

4546
const {
4647
currentFilterOption,
47-
dropdownOptions,
4848
isMultiSelectFilter,
4949
isRangeFilter,
5050
isSelectFilter,
51-
} = columnFilterInfo;
51+
} = getColumnFilterInfo({ header, table });
52+
53+
const dropdownOptions = useDropdownOptions({ header, table });
5254

5355
const getSelectLabel = (index?: number) =>
5456
getValueAndLabel(
@@ -169,11 +171,7 @@ export const MRT_TableHeadCellFilterLabel = <TData extends MRT_RowData = {}>({
169171
}}
170172
>
171173
<Box sx={{ p: '1rem' }}>
172-
<MRT_TableHeadCellFilterContainer
173-
columnFilterInfo={columnFilterInfo}
174-
header={header}
175-
table={table}
176-
/>
174+
<MRT_TableHeadCellFilterContainer header={header} table={table} />
177175
</Box>
178176
</Popover>
179177
)}

0 commit comments

Comments
 (0)