Table

3.15.0

Table component using react-table to display the data. Can be grouped, filtered, sorted. Themed with theme-ui for consistency.

import { Table } from '@component-controls/components';

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

	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)

Date	Author	Commit Message
5/9/2021	atanasster	fix: table header centered labels
4/23/2021	atanasster	feat: tests coverage block
4/23/2021	atanasster	chore: simplify axe-plugin block
4/22/2021	atanasster	feat: test results block
2/26/2021	atanasster	feat: add react-table pagination
2/17/2021	atanasster	feat: components history and catalog
12/8/2020	atanasster	feat: addon-stats
12/6/2020	atanasster	feat: table default sorting prop
10/28/2020	atanasster	chore: axe-plugin and components
6/21/2020	atanasster	feat: full text search initial

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

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
search:
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

Value

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