Skip to content

Commit e493271

Browse files
radubreharradubrehar
committed
Merge branch 'master' of github.com:infinite-table/infinite-react
2 parents 0509f21 + 23be0cf commit e493271

10 files changed

Lines changed: 688 additions & 4 deletions

File tree

‎source/src/components/DataSource/types.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,10 @@ export type DataSourcePropGroupRowsStateObject<KeyType = any> = {
139139
collapsedRows: DataSourceGroupRowsList<KeyType>;
140140
};
141141

142+
export type DataSourcePropGroupRowsState<KeyType = any> =
143+
| GroupRowsState<KeyType>
144+
| DataSourcePropGroupRowsStateObject<KeyType>;
145+
142146
export type RowDetailStateObject<KeyType = any> = {
143147
expandedRows: true | KeyType[];
144148
collapsedRows: true | KeyType[];
@@ -761,10 +765,8 @@ export type DataSourceProps<T> = {
761765
defaultGroupBy?: DataSourcePropGroupBy<T>;
762766
onGroupByChange?: (groupBy: DataSourcePropGroupBy<T>) => void;
763767

764-
groupRowsState?: GroupRowsState | DataSourcePropGroupRowsStateObject<any>;
765-
defaultGroupRowsState?:
766-
| GroupRowsState
767-
| DataSourcePropGroupRowsStateObject<any>;
768+
groupRowsState?: DataSourcePropGroupRowsState<any>;
769+
defaultGroupRowsState?: DataSourcePropGroupRowsState<any>;
768770
onGroupRowsStateChange?: (groupRowsState: GroupRowsState) => void;
769771

770772
collapseGroupRowsOnDataFunctionChange?: boolean;

‎www/content/docs/learn/grouping-and-pivoting/grouping-rows.page.md‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,75 @@ Additionally, there are other ways to override those inherited configurations, i
8181

8282
</Note>
8383

84+
## Controlling the collapse/expand state
85+
86+
When you do grouping, by default, all row groups are expanded. Of course you have full control over this and you do this via the <DPropLink name="groupRowsState" />/<DPropLink name="defaultGroupRowsState" /> props.
87+
88+
If you simply want to specify the initial expanded/collapsed state, you should use the <DPropLink name="defaultGroupRowsState" /> prop.
89+
90+
```tsx title="Specifying the default state for group rows"
91+
const defaultGroupRowsState: DataSourcePropGroupRowsStateObject = {
92+
collapsedRows: true,
93+
expandedRows: [['Mexico'], ['Mexico', 'backend'], ['India']],
94+
};
95+
```
96+
97+
The two properties in this object are `collapsedRows` and `expandedRows`, and each can have the following values:
98+
- `true` - meaning that all groups have this state
99+
- an array of arrays - representing the exceptions to the default value
100+
101+
102+
So if you have `collapsedRows` set to `true` and then `expandedRows` set to `[['Mexico'], ['Mexico', 'backend'], ['India']]` then all rows are collapsed by default, except the rows specified in the `expandedRows`.
103+
104+
105+
<Sandpack title="Everything is collapsed except a few rows">
106+
107+
```ts file="row-grouping-state-example.page.tsx"
108+
109+
```
110+
111+
</Sandpack>
112+
113+
<Note>
114+
115+
You can specify expand/collapse state at any level of nesting.
116+
117+
Let's suppose by default all rows are collapsed - if you want a node to be visible then you have to specify all its parents as expanded.
118+
119+
So having this
120+
```tsx
121+
const defaultGroupRowsState = {
122+
collapsedRows: true,
123+
expandedRows: [['Mexico', 'backend']],
124+
};
125+
```
126+
will show all rows as collapsed, and just as soon as you expand `Mexico` you will see the `backend` group row for Mexico to be expanded.
127+
</Note>
128+
129+
This data format gives you ultimate flexibility and allows you to easily restore an expand/collpase state at a later time, if you wanted to.
130+
131+
<Note>
132+
If you use the controlled <DPropLink name="groupRowsState" />, make sure you update it by leveraging the <DPropLink name="onGroupRowsStateChange" /> callback prop.
133+
</Note>
134+
135+
136+
<Sandpack title="Using controlled expanded/collapsed state for group rows">
137+
138+
```ts file="row-grouping-state-controlled-example.page.tsx"
139+
140+
```
141+
142+
</Sandpack>
143+
144+
In addition to simple objects with the shape described above, the <DPropLink name="groupRowsState" />/<DPropLink name="defaultGroupRowsState" /> can also be instanges of `GroupRowsState` class, which is exported by the Infinite Table package. This class is simply a wrapper around those objects, but it gives you additional utility methods.
145+
146+
<Note>
147+
148+
The <DPropLink name="onGroupRowsStateChange" /> callback gives you an instance of <DPropLink name="GroupRowsState" /> back as the single argument. If you're using plain objects, just do `groupRowsState.getState()` and you'll get the corresponding plain object for the current expand/collapse state.
149+
150+
<TypeLink name="GroupRowsState" /> give you some additional helper methods, which you can read about <TypeLink name="GroupRowsState">here</TypeLink>
151+
</Note>
152+
84153
## Grouping strategies
85154

86155
Multiple grouping strategies are supported by, `InfiniteTable` DataGrid:

‎www/content/docs/learn/grouping-and-pivoting/row-grouping-state-controlled-example.page.tsx‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import {
2+
InfiniteTable,
3+
DataSource,
4+
GroupRowsState,
5+
} from '@infinite-table/infinite-react';
6+
import type {
7+
DataSourcePropGroupBy,
8+
InfiniteTablePropColumns,
9+
} from '@infinite-table/infinite-react';
10+
import * as React from 'react';
11+
12+
const groupBy: DataSourcePropGroupBy<Developer> = [
13+
{
14+
field: 'country',
15+
column: {
16+
header: 'Country group',
17+
renderGroupValue: ({ value }) => <>Country: {value}</>,
18+
},
19+
},
20+
{
21+
field: 'stack',
22+
},
23+
];
24+
25+
const columns: InfiniteTablePropColumns<Developer> = {
26+
country: {
27+
field: 'country',
28+
// specifying a style here for the column
29+
// note: it will also be "picked up" by the group column
30+
// if you're grouping by the 'country' field
31+
style: {
32+
color: 'tomato',
33+
},
34+
},
35+
firstName: { field: 'firstName' },
36+
age: { field: 'age' },
37+
salary: {
38+
field: 'salary',
39+
type: 'number',
40+
},
41+
42+
canDesign: { field: 'canDesign' },
43+
stack: { field: 'stack' },
44+
};
45+
46+
export default function App() {
47+
const [groupRowsState, setGroupRowsState] = React.useState<
48+
GroupRowsState<string>
49+
>(() => {
50+
const groupRowsState = new GroupRowsState<string>({
51+
collapsedRows: true,
52+
expandedRows: [['Mexico'], ['Mexico', 'backend'], ['India']],
53+
});
54+
55+
return groupRowsState;
56+
});
57+
58+
return (
59+
<>
60+
<button
61+
onClick={() => {
62+
const newState = new GroupRowsState<string>(groupRowsState);
63+
newState.expandAll();
64+
setGroupRowsState(newState);
65+
}}
66+
>
67+
Expand all
68+
</button>
69+
<button
70+
onClick={() => {
71+
const newState = new GroupRowsState<string>(groupRowsState);
72+
newState.collapseAll();
73+
setGroupRowsState(newState);
74+
}}
75+
>
76+
Collapse all
77+
</button>
78+
<DataSource<Developer>
79+
data={dataSource}
80+
primaryKey="id"
81+
groupBy={groupBy}
82+
groupRowsState={groupRowsState}
83+
onGroupRowsStateChange={setGroupRowsState}
84+
>
85+
<InfiniteTable<Developer> columns={columns} />
86+
</DataSource>
87+
</>
88+
);
89+
}
90+
91+
const dataSource = () => {
92+
return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers1k')
93+
.then((r) => r.json())
94+
.then((data: Developer[]) => data);
95+
};
96+
97+
type Developer = {
98+
id: number;
99+
firstName: string;
100+
lastName: string;
101+
country: string;
102+
city: string;
103+
currency: string;
104+
email: string;
105+
preferredLanguage: string;
106+
stack: string;
107+
canDesign: 'yes' | 'no';
108+
hobby: string;
109+
salary: number;
110+
age: number;
111+
};

‎www/content/docs/learn/grouping-and-pivoting/row-grouping-state-example.page.tsx‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import { InfiniteTable, DataSource } from '@infinite-table/infinite-react';
2+
import type {
3+
DataSourcePropGroupBy,
4+
DataSourcePropGroupRowsStateObject,
5+
InfiniteTablePropColumns,
6+
} from '@infinite-table/infinite-react';
7+
import * as React from 'react';
8+
9+
const groupBy: DataSourcePropGroupBy<Developer> = [
10+
{
11+
field: 'country',
12+
column: {
13+
header: 'Country group',
14+
renderGroupValue: ({ value }) => <>Country: {value}</>,
15+
},
16+
},
17+
{
18+
field: 'stack',
19+
},
20+
];
21+
22+
const columns: InfiniteTablePropColumns<Developer> = {
23+
country: {
24+
field: 'country',
25+
// specifying a style here for the column
26+
// note: it will also be "picked up" by the group column
27+
// if you're grouping by the 'country' field
28+
style: {
29+
color: 'tomato',
30+
},
31+
},
32+
firstName: { field: 'firstName' },
33+
age: { field: 'age' },
34+
salary: {
35+
field: 'salary',
36+
type: 'number',
37+
},
38+
39+
canDesign: { field: 'canDesign' },
40+
stack: { field: 'stack' },
41+
};
42+
43+
const defaultGroupRowsState: DataSourcePropGroupRowsStateObject = {
44+
collapsedRows: true,
45+
expandedRows: [['Mexico'], ['Mexico', 'backend'], ['India']],
46+
};
47+
48+
export default function App() {
49+
return (
50+
<DataSource<Developer>
51+
data={dataSource}
52+
primaryKey="id"
53+
groupBy={groupBy}
54+
defaultGroupRowsState={defaultGroupRowsState}
55+
>
56+
<InfiniteTable<Developer> columns={columns} />
57+
</DataSource>
58+
);
59+
}
60+
61+
const dataSource = () => {
62+
return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers1k')
63+
.then((r) => r.json())
64+
.then((data: Developer[]) => data);
65+
};
66+
67+
type Developer = {
68+
id: number;
69+
firstName: string;
70+
lastName: string;
71+
country: string;
72+
city: string;
73+
currency: string;
74+
email: string;
75+
preferredLanguage: string;
76+
stack: string;
77+
canDesign: 'yes' | 'no';
78+
hobby: string;
79+
salary: number;
80+
age: number;
81+
};

‎www/content/docs/reference/datasource-props/group-rows-initial-state-example.page.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import { InfiniteTable, DataSource } from '@infinite-table/infinite-react';
2+
import type {
3+
DataSourcePropGroupBy,
4+
DataSourcePropGroupRowsStateObject,
5+
InfiniteTablePropColumns,
6+
} from '@infinite-table/infinite-react';
7+
import * as React from 'react';
8+
9+
const groupBy: DataSourcePropGroupBy<Developer> = [
10+
{
11+
field: 'country',
12+
},
13+
{
14+
field: 'stack',
15+
},
16+
];
17+
18+
const columns: InfiniteTablePropColumns<Developer> = {
19+
country: {
20+
field: 'country',
21+
},
22+
firstName: { field: 'firstName' },
23+
age: { field: 'age' },
24+
salary: {
25+
field: 'salary',
26+
type: 'number',
27+
},
28+
29+
canDesign: { field: 'canDesign' },
30+
stack: { field: 'stack' },
31+
};
32+
const defaultGroupRowsState: DataSourcePropGroupRowsStateObject<string> = {
33+
collapsedRows: true,
34+
expandedRows: [['Mexico'], ['Mexico', 'backend'], ['India']],
35+
};
36+
37+
export default function App() {
38+
return (
39+
<DataSource<Developer>
40+
data={dataSource}
41+
primaryKey="id"
42+
groupBy={groupBy}
43+
defaultGroupRowsState={defaultGroupRowsState}
44+
>
45+
<InfiniteTable<Developer> columns={columns} />
46+
</DataSource>
47+
);
48+
}
49+
50+
const dataSource = () => {
51+
return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers1k')
52+
.then((r) => r.json())
53+
.then((data: Developer[]) => data);
54+
};
55+
56+
type Developer = {
57+
id: number;
58+
firstName: string;
59+
lastName: string;
60+
country: string;
61+
city: string;
62+
currency: string;
63+
email: string;
64+
preferredLanguage: string;
65+
stack: string;
66+
canDesign: 'yes' | 'no';
67+
hobby: string;
68+
salary: number;
69+
age: number;
70+
};

0 commit comments

Comments
 (0)