Skip to content

Commit c093fbb

Browse files
ling1726ling1726
authored
docs: Add examples for DataGrid (#25783)
Adds usages examples scenarios and props
1 parent f5016b3 commit c093fbb

10 files changed

Lines changed: 1613 additions & 0 deletions

‎packages/react-components/react-table/stories/DataGrid/KeyboardNavigation.stories.tsx‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
import * as React from 'react';
2+
import {
3+
FolderRegular,
4+
EditRegular,
5+
OpenRegular,
6+
DocumentRegular,
7+
PeopleRegular,
8+
DocumentPdfRegular,
9+
VideoRegular,
10+
} from '@fluentui/react-icons';
11+
import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components';
12+
import { TableCellLayout } from '@fluentui/react-components/unstable';
13+
import {
14+
DataGridBody,
15+
DataGridRow,
16+
DataGrid,
17+
DataGridHeader,
18+
DataGridHeaderCell,
19+
DataGridCell,
20+
ColumnDefinition,
21+
RowState,
22+
createColumn,
23+
} from '@fluentui/react-table';
24+
25+
type FileCell = {
26+
label: string;
27+
icon: JSX.Element;
28+
};
29+
30+
type LastUpdatedCell = {
31+
label: string;
32+
timestamp: number;
33+
};
34+
35+
type LastUpdateCell = {
36+
label: string;
37+
icon: JSX.Element;
38+
};
39+
40+
type AuthorCell = {
41+
label: string;
42+
status: PresenceBadgeStatus;
43+
};
44+
45+
type Item = {
46+
file: FileCell;
47+
author: AuthorCell;
48+
lastUpdated: LastUpdatedCell;
49+
lastUpdate: LastUpdateCell;
50+
};
51+
52+
const items: Item[] = [
53+
{
54+
file: { label: 'Meeting notes', icon: <DocumentRegular /> },
55+
author: { label: 'Max Mustermann', status: 'available' },
56+
lastUpdated: { label: '7h ago', timestamp: 1 },
57+
lastUpdate: {
58+
label: 'You edited this',
59+
icon: <EditRegular />,
60+
},
61+
},
62+
{
63+
file: { label: 'Thursday presentation', icon: <FolderRegular /> },
64+
author: { label: 'Erika Mustermann', status: 'busy' },
65+
lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 },
66+
lastUpdate: {
67+
label: 'You recently opened this',
68+
icon: <OpenRegular />,
69+
},
70+
},
71+
{
72+
file: { label: 'Training recording', icon: <VideoRegular /> },
73+
author: { label: 'John Doe', status: 'away' },
74+
lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 },
75+
lastUpdate: {
76+
label: 'You recently opened this',
77+
icon: <OpenRegular />,
78+
},
79+
},
80+
{
81+
file: { label: 'Purchase order', icon: <DocumentPdfRegular /> },
82+
author: { label: 'Jane Doe', status: 'offline' },
83+
lastUpdated: { label: 'Tue at 9:30 AM', timestamp: 3 },
84+
lastUpdate: {
85+
label: 'You shared this in a Teams chat',
86+
icon: <PeopleRegular />,
87+
},
88+
},
89+
];
90+
91+
export const KeyboardNavigation = () => {
92+
const columns: ColumnDefinition<Item>[] = React.useMemo(
93+
() => [
94+
createColumn<Item>({
95+
columnId: 'file',
96+
compare: (a, b) => {
97+
return a.file.label.localeCompare(b.file.label);
98+
},
99+
renderHeaderCell: () => {
100+
return 'File';
101+
},
102+
renderCell: item => {
103+
return <TableCellLayout media={item.file.icon}>{item.file.label}</TableCellLayout>;
104+
},
105+
}),
106+
createColumn<Item>({
107+
columnId: 'author',
108+
compare: (a, b) => {
109+
return a.author.label.localeCompare(b.author.label);
110+
},
111+
renderHeaderCell: () => {
112+
return 'Author';
113+
},
114+
renderCell: item => {
115+
return (
116+
<TableCellLayout media={<Avatar badge={{ status: item.author.status }} />}>
117+
{item.author.label}
118+
</TableCellLayout>
119+
);
120+
},
121+
}),
122+
createColumn<Item>({
123+
columnId: 'lastUpdated',
124+
compare: (a, b) => {
125+
return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
126+
},
127+
renderHeaderCell: () => {
128+
return 'Last updated';
129+
},
130+
131+
renderCell: item => {
132+
return item.lastUpdated.label;
133+
},
134+
}),
135+
createColumn<Item>({
136+
columnId: 'lastUpdate',
137+
compare: (a, b) => {
138+
return a.lastUpdate.label.localeCompare(b.lastUpdate.label);
139+
},
140+
renderHeaderCell: () => {
141+
return 'Last update';
142+
},
143+
renderCell: item => {
144+
return <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>;
145+
},
146+
}),
147+
],
148+
[],
149+
);
150+
151+
return (
152+
<DataGrid items={items} columns={columns} focusMode="cell">
153+
<DataGridHeader>
154+
<DataGridRow>
155+
{({ renderHeaderCell }: ColumnDefinition<Item>) => (
156+
<DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
157+
)}
158+
</DataGridRow>
159+
</DataGridHeader>
160+
<DataGridBody>
161+
{({ item, rowId }: RowState<Item>) => (
162+
<DataGridRow key={rowId}>
163+
{({ renderCell }: ColumnDefinition<Item>) => <DataGridCell>{renderCell(item)}</DataGridCell>}
164+
</DataGridRow>
165+
)}
166+
</DataGridBody>
167+
</DataGrid>
168+
);
169+
};

‎packages/react-components/react-table/stories/DataGrid/MultipleSelect.stories.tsx‎

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
import * as React from 'react';
2+
import {
3+
FolderRegular,
4+
EditRegular,
5+
OpenRegular,
6+
DocumentRegular,
7+
PeopleRegular,
8+
DocumentPdfRegular,
9+
VideoRegular,
10+
} from '@fluentui/react-icons';
11+
import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components';
12+
import { TableCellLayout } from '@fluentui/react-components/unstable';
13+
import {
14+
DataGridBody,
15+
DataGridRow,
16+
DataGrid,
17+
DataGridHeader,
18+
DataGridHeaderCell,
19+
DataGridCell,
20+
ColumnDefinition,
21+
RowState,
22+
createColumn,
23+
} from '@fluentui/react-table';
24+
25+
type FileCell = {
26+
label: string;
27+
icon: JSX.Element;
28+
};
29+
30+
type LastUpdatedCell = {
31+
label: string;
32+
timestamp: number;
33+
};
34+
35+
type LastUpdateCell = {
36+
label: string;
37+
icon: JSX.Element;
38+
};
39+
40+
type AuthorCell = {
41+
label: string;
42+
status: PresenceBadgeStatus;
43+
};
44+
45+
type Item = {
46+
file: FileCell;
47+
author: AuthorCell;
48+
lastUpdated: LastUpdatedCell;
49+
lastUpdate: LastUpdateCell;
50+
};
51+
52+
const items: Item[] = [
53+
{
54+
file: { label: 'Meeting notes', icon: <DocumentRegular /> },
55+
author: { label: 'Max Mustermann', status: 'available' },
56+
lastUpdated: { label: '7h ago', timestamp: 1 },
57+
lastUpdate: {
58+
label: 'You edited this',
59+
icon: <EditRegular />,
60+
},
61+
},
62+
{
63+
file: { label: 'Thursday presentation', icon: <FolderRegular /> },
64+
author: { label: 'Erika Mustermann', status: 'busy' },
65+
lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 },
66+
lastUpdate: {
67+
label: 'You recently opened this',
68+
icon: <OpenRegular />,
69+
},
70+
},
71+
{
72+
file: { label: 'Training recording', icon: <VideoRegular /> },
73+
author: { label: 'John Doe', status: 'away' },
74+
lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 },
75+
lastUpdate: {
76+
label: 'You recently opened this',
77+
icon: <OpenRegular />,
78+
},
79+
},
80+
{
81+
file: { label: 'Purchase order', icon: <DocumentPdfRegular /> },
82+
author: { label: 'Jane Doe', status: 'offline' },
83+
lastUpdated: { label: 'Tue at 9:30 AM', timestamp: 3 },
84+
lastUpdate: {
85+
label: 'You shared this in a Teams chat',
86+
icon: <PeopleRegular />,
87+
},
88+
},
89+
];
90+
91+
export const MultipleSelect = () => {
92+
const columns: ColumnDefinition<Item>[] = React.useMemo(
93+
() => [
94+
createColumn<Item>({
95+
columnId: 'file',
96+
compare: (a, b) => {
97+
return a.file.label.localeCompare(b.file.label);
98+
},
99+
renderHeaderCell: () => {
100+
return 'File';
101+
},
102+
renderCell: item => {
103+
return <TableCellLayout media={item.file.icon}>{item.file.label}</TableCellLayout>;
104+
},
105+
}),
106+
createColumn<Item>({
107+
columnId: 'author',
108+
compare: (a, b) => {
109+
return a.author.label.localeCompare(b.author.label);
110+
},
111+
renderHeaderCell: () => {
112+
return 'Author';
113+
},
114+
renderCell: item => {
115+
return (
116+
<TableCellLayout media={<Avatar badge={{ status: item.author.status }} />}>
117+
{item.author.label}
118+
</TableCellLayout>
119+
);
120+
},
121+
}),
122+
createColumn<Item>({
123+
columnId: 'lastUpdated',
124+
compare: (a, b) => {
125+
return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
126+
},
127+
renderHeaderCell: () => {
128+
return 'Last updated';
129+
},
130+
131+
renderCell: item => {
132+
return item.lastUpdated.label;
133+
},
134+
}),
135+
createColumn<Item>({
136+
columnId: 'lastUpdate',
137+
compare: (a, b) => {
138+
return a.lastUpdate.label.localeCompare(b.lastUpdate.label);
139+
},
140+
renderHeaderCell: () => {
141+
return 'Last update';
142+
},
143+
renderCell: item => {
144+
return <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>;
145+
},
146+
}),
147+
],
148+
[],
149+
);
150+
151+
const defaultSelectedItems = React.useMemo(() => new Set([1]), []);
152+
153+
return (
154+
<DataGrid
155+
items={items}
156+
columns={columns}
157+
focusMode="cell"
158+
selectionMode="multiselect"
159+
defaultSelectedItems={defaultSelectedItems}
160+
>
161+
<DataGridHeader>
162+
<DataGridRow>
163+
{({ renderHeaderCell }: ColumnDefinition<Item>) => (
164+
<DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
165+
)}
166+
</DataGridRow>
167+
</DataGridHeader>
168+
<DataGridBody>
169+
{({ item, rowId }: RowState<Item>) => (
170+
<DataGridRow key={rowId}>
171+
{({ renderCell }: ColumnDefinition<Item>) => <DataGridCell>{renderCell(item)}</DataGridCell>}
172+
</DataGridRow>
173+
)}
174+
</DataGridBody>
175+
</DataGrid>
176+
);
177+
};

0 commit comments

Comments
 (0)