created:4/29/2021
updated:5/20/2021
loc
281
comments
20%
passed
24
coverage
64%
Table
Table component using react-table to display the data. Can be grouped, filtered, sorted. Themed with theme-ui for consistency.
Name | Description | Default | |
---|---|---|---|
TableOwnProps(16 properties) | |||
columns | the columns object as an array. Column<D>[] | - | |
data | array of data rows. D[] | [] | |
header | show or hide the header element. boolean | true | |
sorting | enable.disable sorting. boolean | false | |
filtering | enable/disable filtering. boolean | false | |
itemsLabel | string label for 'items' - used in the filter placeholder and grouping header. stringnull | properties | |
groupBy | field to be grouped by. string[] | - | |
hiddenColumns | list of columns to hide. string[] | - | |
rowSelect | if true, will enable row selection boolean | - | |
initialSelected | initially selected rows SelectedRowIds | {} | |
onSelectRowsChange | callback when selected rows change ((selected: SelectedRowIds) => void) | - | |
expanded | object listing the initially expanded rows. { [key: string]: boolean; } | - | |
skipPageReset | reset state update while update table data boolean | - | |
renderRowSubComponent | callback to render a SubComponent row ((props: { row: Row<{}>; }) => ReactNode) | - | |
sortBy | initial sorting SortingRule<any>[] | - | |
pagination | enable pagination booleanTablePaginationProps | - | |
HTMLAttributes(44 properties) | |||
Attributes(1 properties) | |||
AriaAttributes(48 properties) | |||
DOMAttributes(161 properties) | |||
-(1 properties) | |||
BoxOwnProps(4 properties) | |||
SpaceProps(28 properties) | |||
BackgroundColorProps(2 properties) | |||
OpacityProps(1 properties) |
28 commits
package | imports | peer |
---|---|---|
@primer/octicons-react ^10.0.0 | TriangleUpIconTriangleDownIcon | |
fast-memoize ^2.5.2 | memoize | |
react ^17.0.1 | useEffectReactNodeReactElementFragment | * |
react-table ^17.0.1 | useTableuseSortByuseRowSelectusePaginationuseGroupByuseGlobalFilteruseExpandedUseSortByStateUseSortByOptionsUseRowStateOptionsUseRowSelectStateUseRowSelectOptionsUsePaginationStateUsePaginationOptionsUseGroupByStateUseGroupByRowPropsUseGroupByOptionsUseGroupByCellPropsUseFiltersOptionsUseExpandedStateUseExpandedRowPropsUseExpandedOptionsTableStateTableOptionsSortingRuleRowPluginHookColumnCell | * |
theme-ui ^0.8.4 | jsxFlexBoxPropsBox |
file | imports |
---|---|
"./TableFilter" | GlobalFilter |
"./TableGrouping" | useExpanderColumn |
"./TableRowSelection" | useRowSelectionColumn |
"./useTableLayout" | useTableLayout |
"./TablePagination" | TablePaginationTablePaginationProps |
Name | User Name | Street | City | Zip Code |
---|---|---|---|---|
Edison Keebler | Danielle_Pollich | Jayde Rapids | Montanaborough | 20635 |
London Runolfsson | Audreanne.Sanford | Towne Cliff | Langoshport | 65133 |
Sebastian Gleason | Johnathan.Klocko58 | Haley Drives | South Kiannaberg | 58169 |
Gladys Baumbach | Darien.Gutmann | Anastasia Points | West Graycemouth | 33850 |
Ms. Jaunita Lubowitz | Kody.McClure | Lindgren Inlet | Grimesshire | 27558-3367 |
Edison Keebler | Danielle_Pollich | Jayde Rapids | Montanaborough | 20635 |
London Runolfsson | Audreanne.Sanford | Towne Cliff | Langoshport | 65133 |
Sebastian Gleason | Johnathan.Klocko58 | Haley Drives | South Kiannaberg | 58169 |
Gladys Baumbach | Darien.Gutmann | Anastasia Points | West Graycemouth | 33850 |
Ms. Jaunita Lubowitz | Kody.McClure | Lindgren Inlet | Grimesshire | 27558-3367 |
Age | Name | User Name | Street | City | Zip Code |
---|---|---|---|---|---|
25 | Gladys Baumbach | Darien.Gutmann | Anastasia Points | West Graycemouth | 33850 |
25 | Sebastian Gleason | Johnathan.Klocko58 | Haley Drives | South Kiannaberg | 58169 |
24 | London Runolfsson | Audreanne.Sanford | Towne Cliff | Langoshport | 65133 |
22 | Ms. Jaunita Lubowitz | Kody.McClure | Lindgren Inlet | Grimesshire | 27558-3367 |
22 | Edison Keebler | Danielle_Pollich | Jayde Rapids | Montanaborough | 20635 |
Age | Name | User Name | Street | City | Zip Code |
---|---|---|---|---|---|
22 | Edison Keebler | Danielle_Pollich | Jayde Rapids | Montanaborough | 20635 |
24 | London Runolfsson | Audreanne.Sanford | Towne Cliff | Langoshport | 65133 |
25 | Sebastian Gleason | Johnathan.Klocko58 | Haley Drives | South Kiannaberg | 58169 |
25 | Gladys Baumbach | Darien.Gutmann | Anastasia Points | West Graycemouth | 33850 |
22 | Ms. Jaunita Lubowitz | Kody.McClure | Lindgren Inlet | Grimesshire | 27558-3367 |
Age | Name | User Name | Street | City | Zip Code | |
---|---|---|---|---|---|---|
22 | Edison Keebler | Danielle_Pollich | Jayde Rapids | Montanaborough | 20635 | |
24 | London Runolfsson | Audreanne.Sanford | Towne Cliff | Langoshport | 65133 | |
25 | Sebastian Gleason | Johnathan.Klocko58 | Haley Drives | South Kiannaberg | 58169 | |
25 | Gladys Baumbach | Darien.Gutmann | Anastasia Points | West Graycemouth | 33850 | |
22 | Ms. Jaunita Lubowitz | Kody.McClure | Lindgren Inlet | Grimesshire | 27558-3367 |
Age | Name | User Name | Street | City | Zip Code |
---|---|---|---|---|---|
22 | Edison Keebler | Danielle_Pollich | Jayde Rapids | Montanaborough | 20635 |
24 | London Runolfsson | Audreanne.Sanford | Towne Cliff | Langoshport | 65133 |
25 | Sebastian Gleason | Johnathan.Klocko58 | Haley Drives | South Kiannaberg | 58169 |
25 | Gladys Baumbach | Darien.Gutmann | Anastasia Points | West Graycemouth | 33850 |
22 | Ms. Jaunita Lubowitz | Kody.McClure | Lindgren Inlet | Grimesshire | 27558-3367 |
23 | Jacques Bernhard | Nichole_Kozey4 | Ramona Station | Gunnerland | 64856 |
24 | Dr. Rylee DuBuque | Lewis.Vandervort7 | Kelly Landing | Lake Gabe | 98806 |
22 | Nettie Runte | Johnny.Marquardt30 | Larson Square | Hannaton | 81636 |
25 | Isabell Feil Jr. | Rafaela.Gusikowski4 | Kaya Mountain | Kemmerbury | 01459 |
24 | Jillian Hoeger | Annamae.Maggio23 | Darlene Course | Earlenebury | 70931 |
Total: 20 records