skip to navigation sidebar

skip to context sidebar

API

Blog

Tutorial

created:4/29/2021

updated:5/20/2021

loc

281

comments

20%

passed

coverage

64%

Table

@component-controls/components

3.15.0

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

Component

browse

docs

issues

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

Pagination

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

Controls

Name	Description	Default
totalCountVisible	boolean	true
totalCountTemplate	text	Total: ${totalData} records
pageIndex	number	0
pageSize	number	10
pageTemplate	text	Page ${pageIndex} of ${pageLength}
pageVisible	boolean	false
pageSizeTemplate	text	${pageSize} rows
pageSizeVisible	boolean	false
goToPageVisible	boolean	false
goToPageTemplate	text	Go to page:

Properties

	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)

Commits

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

External dependencies

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

Internal dependencies

file	imports
"./TableFilter"	GlobalFilter
"./TableGrouping"	useExpanderColumn
"./TableRowSelection"	useRowSelectionColumn
"./useTableLayout"	useTableLayout
"./TablePagination"	TablePaginationTablePaginationProps

Component JSX

<Fragment

react

^17.0.1

<Box

asvariant

theme-ui

^0.8.4

<Box

asvariant

theme-ui

^0.8.4

<Box

asvariant

theme-ui

^0.8.4

<TablePagination

pageIndexpageSize

TablePagination

from"./TablePagination"

Stories

Overview

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

No Header

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

Sortable

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

Filterable

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

Grouping

	Name	User Name	Street	City	Zip Code
22(2 properties)
24(1 properties)
25(2 properties)

Editing

Value

Row Select

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

Components/SyntaxHighlighter

Components/Tabs