feat: add DataTable and Table to drafts #2951
There are no files selected for viewing
This file contains hidden or 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,5 @@ | ||
| --- | ||
| '@primer/react': minor | ||
| --- | ||
|
|
||
| Add DataTable, Table to drafts entrypoint | ||
This file contains hidden or 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 hidden or 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 hidden or 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,113 @@ | ||
| import React from 'react' | ||
| import {Column} from './column' | ||
| import {useTable} from './useTable' | ||
| import {SortDirection} from './sorting' | ||
| import {UniqueRow} from './row' | ||
| import {ObjectPaths} from './utils' | ||
| import {Table, TableHead, TableBody, TableRow, TableHeader, TableSortHeader, TableCell} from './Table' | ||
|
|
||
| // ---------------------------------------------------------------------------- | ||
| // DataTable | ||
| // ---------------------------------------------------------------------------- | ||
|
|
||
| export type DataTableProps<Data extends UniqueRow> = { | ||
| /** | ||
| * Provide an id to an element which uniquely describes this table | ||
| */ | ||
| 'aria-describedby'?: string | undefined | ||
|
|
||
| /** | ||
| * Provide an id to an element which uniquely labels this table | ||
| */ | ||
| 'aria-labelledby'?: string | undefined | ||
|
|
||
| /** | ||
| * Specify the amount of space that should be available around the contents of | ||
| * a cell | ||
| */ | ||
| cellPadding?: 'condensed' | 'normal' | 'spacious' | undefined | ||
|
|
||
| /** | ||
| * Provide a collection of the rows which will be rendered inside of the table | ||
| */ | ||
| data: Array<Data> | ||
|
|
||
| /** | ||
| * Provide the columns for the table and the fields in `data` to which they | ||
| * correspond | ||
| */ | ||
| columns: Array<Column<Data>> | ||
|
|
||
| /** | ||
| * Provide the id or field of the column by which the table is sorted. When | ||
| * using this `prop`, the input data must be sorted by this column in | ||
| * ascending order | ||
| */ | ||
| initialSortColumn?: ObjectPaths<Data> | string | undefined | ||
|
|
||
| /** | ||
| * Provide the sort direction that the table should be sorted by on the | ||
| * currently sorted column | ||
| */ | ||
| initialSortDirection?: Exclude<SortDirection, 'NONE'> | undefined | ||
| } | ||
|
|
||
| function DataTable<Data extends UniqueRow>({ | ||
| 'aria-labelledby': labelledby, | ||
| 'aria-describedby': describedby, | ||
| cellPadding, | ||
| columns, | ||
| data, | ||
| initialSortColumn, | ||
| initialSortDirection, | ||
| }: DataTableProps<Data>) { | ||
| const {headers, rows, actions} = useTable({ | ||
| data, | ||
| columns, | ||
| initialSortColumn, | ||
| initialSortDirection, | ||
| }) | ||
| return ( | ||
| <Table aria-labelledby={labelledby} aria-describedby={describedby} cellPadding={cellPadding}> | ||
| <TableHead> | ||
| <TableRow> | ||
| {headers.map(header => { | ||
| if (header.isSortable()) { | ||
| return ( | ||
| <TableSortHeader | ||
| key={header.id} | ||
| direction={header.getSortDirection()} | ||
| onToggleSort={() => { | ||
| actions.sortBy(header) | ||
| }} | ||
| > | ||
| {header.column.header} | ||
| </TableSortHeader> | ||
| ) | ||
| } | ||
| return <TableHeader key={header.id}>{header.column.header}</TableHeader> | ||
| })} | ||
| </TableRow> | ||
| </TableHead> | ||
| <TableBody> | ||
| {rows.map(row => { | ||
| return ( | ||
| <TableRow key={row.id}> | ||
| {row.getCells().map(cell => { | ||
| return ( | ||
| <TableCell key={cell.id} scope={cell.rowHeader ? 'row' : undefined}> | ||
| {cell.column.renderCell | ||
| ? cell.column.renderCell(row.getValue()) | ||
| : (cell.getValue() as React.ReactNode)} | ||
| </TableCell> | ||
| ) | ||
| })} | ||
| </TableRow> | ||
| ) | ||
| })} | ||
| </TableBody> | ||
| </Table> | ||
| ) | ||
| } | ||
|
|
||
| export {DataTable} |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I am wondering when will be the best time to start exporting new components in
experimentalbundle instead ofdrafts? According to the ADRThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great point, reached out about this over in Slack to see where that work is. For this PR I'll add it to
draftsand will add it toexperimentalonce that gets created 👀