-
Notifications
You must be signed in to change notification settings - Fork 2.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: Improves
Table documentation (#25787)
* docs: Improves `Table` documentation - Cleanup docstrings - Adds main component description - Adds descriptions to relevant examples - Adds subcomponent props - Reorders examples * changefile * suggestions * suggestions * Add story for DataGrid implementation
- Loading branch information
Showing
20 changed files
with
446 additions
and
22 deletions.
There are no files selected for viewing
7 changes: 7 additions & 0 deletions
7
change/@fluentui-react-table-393b87fd-7546-484a-8f7f-c8bc7d2d6b08.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "type": "prerelease", | ||
| "comment": "docs: Update docstrings for props", | ||
| "packageName": "@fluentui/react-table", | ||
| "email": "[email protected]", | ||
| "dependentChangeType": "patch" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
226 changes: 226 additions & 0 deletions
226
packages/react-components/react-table/stories/Table/DataGrid.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,226 @@ | ||
| import * as React from 'react'; | ||
| import { | ||
| FolderRegular, | ||
| EditRegular, | ||
| OpenRegular, | ||
| DocumentRegular, | ||
| PeopleRegular, | ||
| DocumentPdfRegular, | ||
| VideoRegular, | ||
| } from '@fluentui/react-icons'; | ||
| import { PresenceBadgeStatus, Avatar, useArrowNavigationGroup } from '@fluentui/react-components'; | ||
| import { | ||
| TableBody, | ||
| TableCell, | ||
| TableRow, | ||
| Table, | ||
| TableHeader, | ||
| TableHeaderCell, | ||
| TableSelectionCell, | ||
| TableCellLayout, | ||
| useTable, | ||
| ColumnDefinition, | ||
| useSelection, | ||
| useSort, | ||
| createColumn, | ||
| ColumnId, | ||
| } from '@fluentui/react-components/unstable'; | ||
|
|
||
| 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: 3 }, | ||
| 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: 1 }, | ||
| lastUpdate: { | ||
| label: 'You shared this in a Teams chat', | ||
| icon: <PeopleRegular />, | ||
| }, | ||
| }, | ||
| ]; | ||
|
|
||
| export const DataGrid = () => { | ||
| const columns: ColumnDefinition<Item>[] = React.useMemo( | ||
| () => [ | ||
| createColumn<Item>({ | ||
| columnId: 'file', | ||
| compare: (a, b) => { | ||
| return a.file.label.localeCompare(b.file.label); | ||
| }, | ||
| }), | ||
| createColumn<Item>({ | ||
| columnId: 'author', | ||
| compare: (a, b) => { | ||
| return a.author.label.localeCompare(b.author.label); | ||
| }, | ||
| }), | ||
| createColumn<Item>({ | ||
| columnId: 'lastUpdated', | ||
| compare: (a, b) => { | ||
| return a.lastUpdated.timestamp - b.lastUpdated.timestamp; | ||
| }, | ||
| }), | ||
| createColumn<Item>({ | ||
| columnId: 'lastUpdate', | ||
| compare: (a, b) => { | ||
| return a.lastUpdate.label.localeCompare(b.lastUpdate.label); | ||
| }, | ||
| }), | ||
| ], | ||
| [], | ||
| ); | ||
|
|
||
| const { | ||
| getRows, | ||
| selection: { allRowsSelected, someRowsSelected, toggleAllRows, toggleRow, isRowSelected }, | ||
| sort: { getSortDirection, toggleColumnSort, sort }, | ||
| } = useTable( | ||
| { | ||
| columns, | ||
| items, | ||
| }, | ||
| [ | ||
| useSelection({ | ||
| selectionMode: 'multiselect', | ||
| defaultSelectedItems: new Set([0, 1]), | ||
| }), | ||
| useSort({ defaultSortState: { sortColumn: 'file', sortDirection: 'ascending' } }), | ||
| ], | ||
| ); | ||
|
|
||
| const rows = sort( | ||
| getRows(row => { | ||
| const selected = isRowSelected(row.rowId); | ||
| return { | ||
| ...row, | ||
| onClick: (e: React.MouseEvent) => toggleRow(e, row.rowId), | ||
| onKeyDown: (e: React.KeyboardEvent) => { | ||
| if (e.key === ' ') { | ||
| e.preventDefault(); | ||
| toggleRow(e, row.rowId); | ||
| } | ||
| }, | ||
| selected, | ||
| appearance: selected ? ('brand' as const) : ('none' as const), | ||
| }; | ||
| }), | ||
| ); | ||
|
|
||
| const headerSortProps = (columnId: ColumnId) => ({ | ||
| onClick: (e: React.MouseEvent) => { | ||
| toggleColumnSort(e, columnId); | ||
| }, | ||
| sortDirection: getSortDirection(columnId), | ||
| }); | ||
|
|
||
| const keyboardNavAttr = useArrowNavigationGroup({ axis: 'grid' }); | ||
|
|
||
| return ( | ||
| <Table {...keyboardNavAttr} sortable> | ||
| <TableHeader> | ||
| <TableRow> | ||
| <TableSelectionCell | ||
| tabIndex={0} | ||
| checkboxIndicator={{ tabIndex: -1 }} | ||
| checked={allRowsSelected ? true : someRowsSelected ? 'mixed' : false} | ||
| onClick={toggleAllRows} | ||
| /> | ||
| <TableHeaderCell {...headerSortProps('file')}>File</TableHeaderCell> | ||
| <TableHeaderCell {...headerSortProps('author')}>Author</TableHeaderCell> | ||
| <TableHeaderCell {...headerSortProps('lastUpdated')}>Last updated</TableHeaderCell> | ||
| <TableHeaderCell {...headerSortProps('lastUpdate')}>Last update</TableHeaderCell> | ||
| </TableRow> | ||
| </TableHeader> | ||
| <TableBody> | ||
| {rows.map(({ item, selected, onClick, onKeyDown, appearance }) => ( | ||
| <TableRow | ||
| key={item.file.label} | ||
| onClick={onClick} | ||
| onKeyDown={onKeyDown} | ||
| aria-selected={selected} | ||
| appearance={appearance} | ||
| > | ||
| <TableSelectionCell tabIndex={0} checkboxIndicator={{ tabIndex: -1 }} checked={selected} /> | ||
| <TableCell tabIndex={0}> | ||
| <TableCellLayout media={item.file.icon}>{item.file.label}</TableCellLayout> | ||
| </TableCell> | ||
| <TableCell tabIndex={0}> | ||
| <TableCellLayout media={<Avatar badge={{ status: item.author.status }} />}> | ||
| {item.author.label} | ||
| </TableCellLayout> | ||
| </TableCell> | ||
| <TableCell tabIndex={0}>{item.lastUpdated.label}</TableCell> | ||
| <TableCell tabIndex={0}> | ||
| <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout> | ||
| </TableCell> | ||
| </TableRow> | ||
| ))} | ||
| </TableBody> | ||
| </Table> | ||
| ); | ||
| }; | ||
|
|
||
| DataGrid.parameters = { | ||
| docs: { | ||
| description: { | ||
| story: [ | ||
| 'The `DataGrid` component is simply a composition of hook and primitive `Table` components', | ||
| 'along with some convenience features such as accessible markup and event handlers.', | ||
| 'Any feature of the `DataGrid` is achievable with the primitive components and hook', | ||
| ].join('\n'), | ||
| }, | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.