Skip to content

Commit 93cb964

Browse files
KevinVandyKevinVandy
committed
release v2.5.0 - new alt grouping UIs
1 parent b0d6096 commit 93cb964

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+9227
-119
lines changed

‎apps/material-react-table-docs/components/mdx/SourceCodeSnippet.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -473,7 +473,8 @@ export const SourceCodeSnippet = ({
473473
{line.map((token, key) => {
474474
if (
475475
token.content === '//column definitions...' ||
476-
token.content === '//data definitions...'
476+
token.content === '//data definitions...' ||
477+
token.content === '//demo...'
477478
) {
478479
skipCodeLine = true;
479480
if (isFullCode) {

‎apps/material-react-table-docs/components/navigation/Sidebar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export const SideBar = ({ navOpen, setNavOpen }: Props) => {
3131
pb: '10rem',
3232
scrollPaddingTop: '20%',
3333
transition: 'all .2s',
34-
width: navOpen ? '290px' : 0,
34+
width: navOpen ? '300px' : 0,
3535
'@media (max-width: 900px)': {
3636
mt: '50px',
3737
},

‎apps/material-react-table-docs/components/navigation/routes.ts‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -173,12 +173,16 @@ export const routes: Array<RouteItem> = [
173173
],
174174
},
175175
{
176-
href: '/docs/examples/aggregation-and-grouping',
176+
href: '/docs/examples/expanding-tree',
177177
label: 'Expanding / Grouping Examples',
178178
secondaryItems: [
179179
{
180-
href: '/docs/examples/aggregation-and-grouping',
181-
label: 'Aggregation and Grouping Example',
180+
href: '/docs/examples/expanding-tree',
181+
label: 'Expanding Sub-Rows (Tree) Example',
182+
},
183+
{
184+
href: '/docs/examples/expanding-tree-flat-parse',
185+
label: 'Expanding Parsed Tree Example',
182186
},
183187
{
184188
href: '/docs/examples/detail-panel',
@@ -189,12 +193,16 @@ export const routes: Array<RouteItem> = [
189193
label: 'Chart Detail Panel Example',
190194
},
191195
{
192-
href: '/docs/examples/expanding-tree',
193-
label: 'Expanding Sub-Rows (Tree) Example',
196+
href: '/docs/examples/column-grouping',
197+
label: 'Column Grouping Example',
194198
},
195199
{
196-
href: '/docs/examples/expanding-tree-flat-parse',
197-
label: 'Expanding Parsed Tree Example',
200+
href: '/docs/examples/customized-grouping',
201+
label: 'Customized Grouping Example',
202+
},
203+
{
204+
href: '/docs/examples/aggregation-and-grouping',
205+
label: 'Aggregation Example',
198206
},
199207
],
200208
},
@@ -352,8 +360,8 @@ export const routes: Array<RouteItem> = [
352360
href: '/docs/guides#feature-guides',
353361
items: [
354362
{
355-
href: '/docs/guides/aggregation-and-grouping',
356-
label: 'Aggregation and Grouping',
363+
href: '/docs/guides/aggregation',
364+
label: 'Aggregation',
357365
},
358366
{
359367
href: '/docs/guides/async-loading',
@@ -371,6 +379,10 @@ export const routes: Array<RouteItem> = [
371379
href: '/docs/guides/column-filtering',
372380
label: 'Column Filtering',
373381
},
382+
{
383+
href: '/docs/guides/column-grouping',
384+
label: 'Column Grouping',
385+
},
374386
{
375387
href: '/docs/guides/column-hiding',
376388
label: 'Column Hiding',

‎apps/material-react-table-docs/example-groups/ExpandingExamples.tsx‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { useRouter } from 'next/router';
22
import { Box, Tab, Tabs } from '@mui/material';
3+
import EnableColumnGroupingExample from '../examples/enable-column-grouping';
4+
import CustomizeRemoveColumnGroupingExample from '../examples/customize-remove-column-grouping';
35
import AggregationAndGroupingExample from '../examples/aggregation-and-grouping';
46
import DetailExample from '../examples/enable-detail-panel';
57
import ChartDetailPanelExample from '../examples/chart-detail-panel';
@@ -28,17 +30,16 @@ const ExpandingExamples = ({ isPage = false }) => {
2830
: setActiveTab(newPath as string)
2931
}
3032
>
31-
<Tab
32-
label="Aggregation and Grouping"
33-
value="aggregation-and-grouping"
34-
/>
35-
<Tab label="Detail Panel" value="detail-panel" />
36-
<Tab label="Chart Detail Panel" value="chart-detail-panel" />
3733
<Tab label="Expanding Tree" value="expanding-tree" />
3834
<Tab
39-
label="Expanding Parsed Tree"
35+
label="Parsed Tree"
4036
value="expanding-tree-flat-parse"
4137
/>
38+
<Tab label="Detail Panel" value="detail-panel" />
39+
<Tab label="Chart Detail Panel" value="chart-detail-panel" />
40+
<Tab label="Column Grouping" value="column-grouping" />
41+
<Tab label="Customized Grouping" value="customized-grouping" />
42+
<Tab label="Aggregation" value="aggregation-and-grouping" />
4243
<Link href="/docs/examples" passHref legacyBehavior>
4344
<Tab
4445
label={
@@ -53,15 +54,19 @@ const ExpandingExamples = ({ isPage = false }) => {
5354
</Tabs>
5455
</Box>
5556
<Box>
56-
{activeTab === 'aggregation-and-grouping' && (
57-
<AggregationAndGroupingExample />
58-
)}
59-
{activeTab === 'detail-panel' && <DetailExample />}
60-
{activeTab === 'chart-detail-panel' && <ChartDetailPanelExample />}
6157
{activeTab === 'expanding-tree' && <ExpandingTreeExample />}
6258
{activeTab === 'expanding-tree-flat-parse' && (
6359
<ExpandingParsedTreeExample />
6460
)}
61+
{activeTab === 'detail-panel' && <DetailExample />}
62+
{activeTab === 'chart-detail-panel' && <ChartDetailPanelExample />}
63+
{activeTab === 'column-grouping' && <EnableColumnGroupingExample />}
64+
{activeTab === 'customized-grouping' && (
65+
<CustomizeRemoveColumnGroupingExample />
66+
)}
67+
{activeTab === 'aggregation-and-grouping' && (
68+
<AggregationAndGroupingExample />
69+
)}
6570
</Box>
6671
</>
6772
);

‎apps/material-react-table-docs/examples/aggregation-and-grouping/sandbox/src/JS.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,10 +116,16 @@ const Example = () => {
116116
const table = useMaterialReactTable({
117117
columns,
118118
data,
119+
displayColumnDefOptions: {
120+
'mrt-row-expand': {
121+
enableResizing: true,
122+
},
123+
},
119124
enableColumnResizing: true,
120125
enableGrouping: true,
121126
enableStickyHeader: true,
122127
enableStickyFooter: true,
128+
groupedColumnMode: 'remove', //instead of the default 'reorder'
123129
initialState: {
124130
density: 'compact',
125131
expanded: true, //expand all groups by default

‎apps/material-react-table-docs/examples/aggregation-and-grouping/sandbox/src/TS.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,10 +117,16 @@ const Example = () => {
117117
const table = useMaterialReactTable({
118118
columns,
119119
data,
120+
displayColumnDefOptions: {
121+
'mrt-row-expand': {
122+
enableResizing: true,
123+
},
124+
},
120125
enableColumnResizing: true,
121126
enableGrouping: true,
122127
enableStickyHeader: true,
123128
enableStickyFooter: true,
129+
groupedColumnMode: 'remove', //instead of the default 'reorder'
124130
initialState: {
125131
density: 'compact',
126132
expanded: true, //expand all groups by default

‎apps/material-react-table-docs/examples/customize-remove-column-grouping/index.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { SourceCodeSnippet } from '../../components/mdx/SourceCodeSnippet';
2+
import Example from './sandbox/src/TS';
3+
const JS = require('!!raw-loader!./sandbox/src/JS.js').default;
4+
const TS = require('!!raw-loader!./sandbox/src/TS.tsx').default;
5+
6+
const ExampleTable = ({ showTopRow = true }) => {
7+
return (
8+
<SourceCodeSnippet
9+
Component={Example}
10+
javaScriptCode={JS}
11+
typeScriptCode={TS}
12+
tableId="customize-remove-column-grouping"
13+
showTopRow={showTopRow}
14+
/>
15+
);
16+
};
17+
18+
export default ExampleTable;

‎apps/material-react-table-docs/examples/customize-remove-column-grouping/sandbox/.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
dist-ssr
5+
*.local

‎apps/material-react-table-docs/examples/customize-remove-column-grouping/sandbox/README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Example
2+
3+
To run this example:
4+
5+
- `npm install` or `yarn`
6+
- `npm run start` or `yarn start`

‎apps/material-react-table-docs/examples/customize-remove-column-grouping/sandbox/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Material React Table Example</title>
7+
</head>
8+
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)