Skip to content

docs: Add examples for DataGrid #25783

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ling1726 merged 1 commit into from
Nov 25, 2022
Merged

docs: Add examples for DataGrid #25783

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
169 changes: 169 additions & 0 deletions packages/react-components/react-table/stories/DataGrid/KeyboardNavigation.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,169 @@
import * as React from 'react';
import {
FolderRegular,
EditRegular,
OpenRegular,
DocumentRegular,
PeopleRegular,
DocumentPdfRegular,
VideoRegular,
} from '@fluentui/react-icons';
import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components';
import { TableCellLayout } from '@fluentui/react-components/unstable';
import {
DataGridBody,
DataGridRow,
DataGrid,
DataGridHeader,
DataGridHeaderCell,
DataGridCell,
ColumnDefinition,
RowState,
createColumn,
} from '@fluentui/react-table';

type FileCell = {
label: string;
icon: JSX.Element;
};

type LastUpdatedCell = {
label: string;
timestamp: number;
};

type LastUpdateCell = {
label: string;
icon: JSX.Element;
};

type AuthorCell = {
label: string;
status: PresenceBadgeStatus;
};

type Item = {
file: FileCell;
author: AuthorCell;
lastUpdated: LastUpdatedCell;
lastUpdate: LastUpdateCell;
};

const items: Item[] = [
{
file: { label: 'Meeting notes', icon: <DocumentRegular /> },
author: { label: 'Max Mustermann', status: 'available' },
lastUpdated: { label: '7h ago', timestamp: 1 },
lastUpdate: {
label: 'You edited this',
icon: <EditRegular />,
},
},
{
file: { label: 'Thursday presentation', icon: <FolderRegular /> },
author: { label: 'Erika Mustermann', status: 'busy' },
lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 },
lastUpdate: {
label: 'You recently opened this',
icon: <OpenRegular />,
},
},
{
file: { label: 'Training recording', icon: <VideoRegular /> },
author: { label: 'John Doe', status: 'away' },
lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 },
lastUpdate: {
label: 'You recently opened this',
icon: <OpenRegular />,
},
},
{
file: { label: 'Purchase order', icon: <DocumentPdfRegular /> },
author: { label: 'Jane Doe', status: 'offline' },
lastUpdated: { label: 'Tue at 9:30 AM', timestamp: 3 },
lastUpdate: {
label: 'You shared this in a Teams chat',
icon: <PeopleRegular />,
},
},
];

export const KeyboardNavigation = () => {
const columns: ColumnDefinition<Item>[] = React.useMemo(
() => [
createColumn<Item>({
columnId: 'file',
compare: (a, b) => {
return a.file.label.localeCompare(b.file.label);
},
renderHeaderCell: () => {
return 'File';
},
renderCell: item => {
return <TableCellLayout media={item.file.icon}>{item.file.label}</TableCellLayout>;
},
}),
createColumn<Item>({
columnId: 'author',
compare: (a, b) => {
return a.author.label.localeCompare(b.author.label);
},
renderHeaderCell: () => {
return 'Author';
},
renderCell: item => {
return (
<TableCellLayout media={<Avatar badge={{ status: item.author.status }} />}>
{item.author.label}
</TableCellLayout>
);
},
}),
createColumn<Item>({
columnId: 'lastUpdated',
compare: (a, b) => {
return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
},
renderHeaderCell: () => {
return 'Last updated';
},

renderCell: item => {
return item.lastUpdated.label;
},
}),
createColumn<Item>({
columnId: 'lastUpdate',
compare: (a, b) => {
return a.lastUpdate.label.localeCompare(b.lastUpdate.label);
},
renderHeaderCell: () => {
return 'Last update';
},
renderCell: item => {
return <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>;
},
}),
],
[],
);

return (
<DataGrid items={items} columns={columns} focusMode="cell">
<DataGridHeader>
<DataGridRow>
{({ renderHeaderCell }: ColumnDefinition<Item>) => (
<DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
)}
</DataGridRow>
</DataGridHeader>
<DataGridBody>
{({ item, rowId }: RowState<Item>) => (
<DataGridRow key={rowId}>
{({ renderCell }: ColumnDefinition<Item>) => <DataGridCell>{renderCell(item)}</DataGridCell>}
</DataGridRow>
)}
</DataGridBody>
</DataGrid>
);
};
177 changes: 177 additions & 0 deletions packages/react-components/react-table/stories/DataGrid/MultipleSelect.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,177 @@
import * as React from 'react';
import {
FolderRegular,
EditRegular,
OpenRegular,
DocumentRegular,
PeopleRegular,
DocumentPdfRegular,
VideoRegular,
} from '@fluentui/react-icons';
import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components';
import { TableCellLayout } from '@fluentui/react-components/unstable';
import {
DataGridBody,
DataGridRow,
DataGrid,
DataGridHeader,
DataGridHeaderCell,
DataGridCell,
ColumnDefinition,
RowState,
createColumn,
} from '@fluentui/react-table';

type FileCell = {
label: string;
icon: JSX.Element;
};

type LastUpdatedCell = {
label: string;
timestamp: number;
};

type LastUpdateCell = {
label: string;
icon: JSX.Element;
};

type AuthorCell = {
label: string;
status: PresenceBadgeStatus;
};

type Item = {
file: FileCell;
author: AuthorCell;
lastUpdated: LastUpdatedCell;
lastUpdate: LastUpdateCell;
};

const items: Item[] = [
{
file: { label: 'Meeting notes', icon: <DocumentRegular /> },
author: { label: 'Max Mustermann', status: 'available' },
lastUpdated: { label: '7h ago', timestamp: 1 },
lastUpdate: {
label: 'You edited this',
icon: <EditRegular />,
},
},
{
file: { label: 'Thursday presentation', icon: <FolderRegular /> },
author: { label: 'Erika Mustermann', status: 'busy' },
lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 },
lastUpdate: {
label: 'You recently opened this',
icon: <OpenRegular />,
},
},
{
file: { label: 'Training recording', icon: <VideoRegular /> },
author: { label: 'John Doe', status: 'away' },
lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 },
lastUpdate: {
label: 'You recently opened this',
icon: <OpenRegular />,
},
},
{
file: { label: 'Purchase order', icon: <DocumentPdfRegular /> },
author: { label: 'Jane Doe', status: 'offline' },
lastUpdated: { label: 'Tue at 9:30 AM', timestamp: 3 },
lastUpdate: {
label: 'You shared this in a Teams chat',
icon: <PeopleRegular />,
},
},
];

export const MultipleSelect = () => {
const columns: ColumnDefinition<Item>[] = React.useMemo(
() => [
createColumn<Item>({
columnId: 'file',
compare: (a, b) => {
return a.file.label.localeCompare(b.file.label);
},
renderHeaderCell: () => {
return 'File';
},
renderCell: item => {
return <TableCellLayout media={item.file.icon}>{item.file.label}</TableCellLayout>;
},
}),
createColumn<Item>({
columnId: 'author',
compare: (a, b) => {
return a.author.label.localeCompare(b.author.label);
},
renderHeaderCell: () => {
return 'Author';
},
renderCell: item => {
return (
<TableCellLayout media={<Avatar badge={{ status: item.author.status }} />}>
{item.author.label}
</TableCellLayout>
);
},
}),
createColumn<Item>({
columnId: 'lastUpdated',
compare: (a, b) => {
return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
},
renderHeaderCell: () => {
return 'Last updated';
},

renderCell: item => {
return item.lastUpdated.label;
},
}),
createColumn<Item>({
columnId: 'lastUpdate',
compare: (a, b) => {
return a.lastUpdate.label.localeCompare(b.lastUpdate.label);
},
renderHeaderCell: () => {
return 'Last update';
},
renderCell: item => {
return <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>;
},
}),
],
[],
);

const defaultSelectedItems = React.useMemo(() => new Set([1]), []);

return (
<DataGrid
items={items}
columns={columns}
focusMode="cell"
selectionMode="multiselect"
defaultSelectedItems={defaultSelectedItems}
>
<DataGridHeader>
<DataGridRow>
{({ renderHeaderCell }: ColumnDefinition<Item>) => (
<DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
)}
</DataGridRow>
</DataGridHeader>
<DataGridBody>
{({ item, rowId }: RowState<Item>) => (
<DataGridRow key={rowId}>
{({ renderCell }: ColumnDefinition<Item>) => <DataGridCell>{renderCell(item)}</DataGridCell>}
</DataGridRow>
)}
</DataGridBody>
</DataGrid>
);
};
Loading