A next-generation tool to create blazing-fast documentation sites
API
created:4/29/2021
updated:5/20/2021
loc
281
comments
20%
passed
24
coverage
64%

Table

avatar of atanasster
@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.

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

Filterable

Age
Name
User Name
Street
City
Zip Code
22Edison KeeblerDanielle_PollichJayde RapidsMontanaborough20635
24London RunolfssonAudreanne.SanfordTowne CliffLangoshport65133
25Sebastian GleasonJohnathan.Klocko58Haley DrivesSouth Kiannaberg58169
25Gladys BaumbachDarien.GutmannAnastasia PointsWest Graycemouth33850
22Ms. Jaunita LubowitzKody.McClureLindgren InletGrimesshire27558-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)

Commits

Date
Author
Commit Message
5/9/2021

atanasster

avatar of atanasster
fix: table header centered labels
4/23/2021

atanasster

avatar of atanasster
feat: tests coverage block
4/23/2021

atanasster

avatar of atanasster
chore: simplify axe-plugin block
4/22/2021

atanasster

avatar of atanasster
feat: test results block
2/26/2021

atanasster

avatar of atanasster
feat: add react-table pagination
2/17/2021

atanasster

avatar of atanasster
feat: components history and catalog
12/8/2020

atanasster

avatar of atanasster
feat: addon-stats
12/6/2020

atanasster

avatar of atanasster
feat: table default sorting prop
10/28/2020

atanasster

avatar of atanasster
chore: axe-plugin and components
6/21/2020

atanasster

avatar of atanasster
feat: full text search initial
28 commits
package
imports
peer
TriangleUpIconTriangleDownIcon
memoize
react
^17.0.1
useEffectReactNodeReactElementFragment
*
useTableuseSortByuseRowSelectusePaginationuseGroupByuseGlobalFilteruseExpandedUseSortByStateUseSortByOptionsUseRowStateOptionsUseRowSelectStateUseRowSelectOptionsUsePaginationStateUsePaginationOptionsUseGroupByStateUseGroupByRowPropsUseGroupByOptionsUseGroupByCellPropsUseFiltersOptionsUseExpandedStateUseExpandedRowPropsUseExpandedOptionsTableStateTableOptionsSortingRuleRowPluginHookColumnCell
*
theme-ui
^0.8.4
jsxFlexBoxPropsBox
file
imports
"./TableFilter"
GlobalFilter
"./TableGrouping"
useExpanderColumn
"./TableRowSelection"
useRowSelectionColumn
"./useTableLayout"
useTableLayout
"./TablePagination"
TablePaginationTablePaginationProps

Stories

Overview

Name
User Name
Street
City
Zip Code
Edison KeeblerDanielle_PollichJayde RapidsMontanaborough20635
London RunolfssonAudreanne.SanfordTowne CliffLangoshport65133
Sebastian GleasonJohnathan.Klocko58Haley DrivesSouth Kiannaberg58169
Gladys BaumbachDarien.GutmannAnastasia PointsWest Graycemouth33850
Ms. Jaunita LubowitzKody.McClureLindgren InletGrimesshire27558-3367

No Header

Edison KeeblerDanielle_PollichJayde RapidsMontanaborough20635
London RunolfssonAudreanne.SanfordTowne CliffLangoshport65133
Sebastian GleasonJohnathan.Klocko58Haley DrivesSouth Kiannaberg58169
Gladys BaumbachDarien.GutmannAnastasia PointsWest Graycemouth33850
Ms. Jaunita LubowitzKody.McClureLindgren InletGrimesshire27558-3367

Sortable

Age
Name
User Name
Street
City
Zip Code
25Gladys BaumbachDarien.GutmannAnastasia PointsWest Graycemouth33850
25Sebastian GleasonJohnathan.Klocko58Haley DrivesSouth Kiannaberg58169
24London RunolfssonAudreanne.SanfordTowne CliffLangoshport65133
22Ms. Jaunita LubowitzKody.McClureLindgren InletGrimesshire27558-3367
22Edison KeeblerDanielle_PollichJayde RapidsMontanaborough20635

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
22Edison KeeblerDanielle_PollichJayde RapidsMontanaborough20635
24London RunolfssonAudreanne.SanfordTowne CliffLangoshport65133
25Sebastian GleasonJohnathan.Klocko58Haley DrivesSouth Kiannaberg58169
25Gladys BaumbachDarien.GutmannAnastasia PointsWest Graycemouth33850
22Ms. Jaunita LubowitzKody.McClureLindgren InletGrimesshire27558-3367
Age
Name
User Name
Street
City
Zip Code
22Edison KeeblerDanielle_PollichJayde RapidsMontanaborough20635
24London RunolfssonAudreanne.SanfordTowne CliffLangoshport65133
25Sebastian GleasonJohnathan.Klocko58Haley DrivesSouth Kiannaberg58169
25Gladys BaumbachDarien.GutmannAnastasia PointsWest Graycemouth33850
22Ms. Jaunita LubowitzKody.McClureLindgren InletGrimesshire27558-3367
23Jacques BernhardNichole_Kozey4Ramona StationGunnerland64856
24Dr. Rylee DuBuqueLewis.Vandervort7Kelly LandingLake Gabe98806
22Nettie RunteJohnny.Marquardt30Larson SquareHannaton81636
25Isabell Feil Jr.Rafaela.Gusikowski4Kaya MountainKemmerbury01459
24Jillian HoegerAnnamae.Maggio23Darlene CourseEarlenebury70931
Total: 20 records