-
Notifications
You must be signed in to change notification settings - Fork 535
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add DataTable and Table to drafts (#2951)
* feat: add DataTable and Table to drafts * refactor(DataTable): change interface to type alias * test: update exports and DataTable test * chore: add changeset * feat(drafts): add table types to exports * refactor(types): update how types are re-exported * chore: update snapshots --------- Co-authored-by: Josh Black <joshblack@users.noreply.github.com>
- Loading branch information
Showing
10 changed files
with
473 additions
and
213 deletions.
There are no files selected for viewing
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,5 @@ | ||
| --- | ||
| '@primer/react': minor | ||
| --- | ||
|
|
||
| Add DataTable, Table to drafts entrypoint |
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
| 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.