Collection of theme-ui and external components.
Theme UI
created:3/15/2021
updated:3/15/2021
source lines:278
comments %:21

Table

@component-controls/components
3.4.5

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';

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
23Jacques BernhardNichole_Kozey4Ramona StationGunnerland64856
24Dr. Rylee DuBuqueLewis.Vandervort7Kelly LandingLake Gabe98806
22Nettie RunteJohnny.Marquardt30Larson SquareHannaton81636
25Isabell Feil Jr.Rafaela.Gusikowski4Kaya MountainKemmerbury01459
24Jillian HoegerAnnamae.Maggio23Darlene CourseEarlenebury70931
23Melyssa HermanVerona_WizaZulauf CircleCorkeryland52057-0050
22Urban TowneKayleigh_HauckBechtelar ExtensionsRuthshire49065
21Hazle HansenHassie_Tillman73Reichel StreetWest Audreymouth53056-1765
21Jamarcus StromanOrval13Hobart ParkWest Rahul60010
24Ms. Melany SengerHenderson.KihnLia VillageDuBuqueview93383
25Granville MannChristine.Bahringer10Hilpert LandingNorth Autumnside87215-3190
24Delia FeeneyGreyson13Purdy FordsZoilaside96503
25Mr. Johanna TurcotteDameon76Mante JunctionsNorth Roxane17884-9473
23Renee ErdmanBen.HammesTreutel InletPort Maiabury21650
24Graham BrownEloise.Schumm35Alia PortPort Brandt80217-7245

Name
Description
Default
TableOwnProps (16 properties)
columns

the columns object as an array.

any[]
-
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.

string
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

Record<number, boolean>
{}
onSelectRowsChange

callback when selected rows change

(selected: Record<number, boolean>) => 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: any; }) => ReactNode
-
sortBy

initial sorting

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)

package
imports
peer
TriangleUpIconTriangleDownIcon
memoize
react
^17.0.1
useEffectReactNodeReactElementFragment
*
useTableuseSortByuseRowSelectusePaginationuseGroupByuseGlobalFilteruseExpandedUseSortByStateUseSortByOptionsUseRowStateOptionsUseRowSelectStateUseRowSelectOptionsUsePaginationStateUsePaginationOptionsUseGroupByStateUseGroupByRowPropsUseGroupByOptionsUseGroupByCellPropsUseFiltersOptionsUseExpandedStateUseExpandedOptionsTableStateTableOptionsSortingRuleRowPluginHookColumnCell
theme-ui
^0.6.0-alpha.7
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
Jacques BernhardNichole_Kozey4Ramona StationGunnerland64856
Dr. Rylee DuBuqueLewis.Vandervort7Kelly LandingLake Gabe98806
Nettie RunteJohnny.Marquardt30Larson SquareHannaton81636
Isabell Feil Jr.Rafaela.Gusikowski4Kaya MountainKemmerbury01459
Jillian HoegerAnnamae.Maggio23Darlene CourseEarlenebury70931
Melyssa HermanVerona_WizaZulauf CircleCorkeryland52057-0050
Urban TowneKayleigh_HauckBechtelar ExtensionsRuthshire49065
Hazle HansenHassie_Tillman73Reichel StreetWest Audreymouth53056-1765
Jamarcus StromanOrval13Hobart ParkWest Rahul60010
Ms. Melany SengerHenderson.KihnLia VillageDuBuqueview93383
Granville MannChristine.Bahringer10Hilpert LandingNorth Autumnside87215-3190
Delia FeeneyGreyson13Purdy FordsZoilaside96503
Mr. Johanna TurcotteDameon76Mante JunctionsNorth Roxane17884-9473
Renee ErdmanBen.HammesTreutel InletPort Maiabury21650
Graham BrownEloise.Schumm35Alia PortPort Brandt80217-7245

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
Jacques BernhardNichole_Kozey4Ramona StationGunnerland64856
Dr. Rylee DuBuqueLewis.Vandervort7Kelly LandingLake Gabe98806
Nettie RunteJohnny.Marquardt30Larson SquareHannaton81636
Isabell Feil Jr.Rafaela.Gusikowski4Kaya MountainKemmerbury01459
Jillian HoegerAnnamae.Maggio23Darlene CourseEarlenebury70931
Melyssa HermanVerona_WizaZulauf CircleCorkeryland52057-0050
Urban TowneKayleigh_HauckBechtelar ExtensionsRuthshire49065
Hazle HansenHassie_Tillman73Reichel StreetWest Audreymouth53056-1765
Jamarcus StromanOrval13Hobart ParkWest Rahul60010
Ms. Melany SengerHenderson.KihnLia VillageDuBuqueview93383
Granville MannChristine.Bahringer10Hilpert LandingNorth Autumnside87215-3190
Delia FeeneyGreyson13Purdy FordsZoilaside96503
Mr. Johanna TurcotteDameon76Mante JunctionsNorth Roxane17884-9473
Renee ErdmanBen.HammesTreutel InletPort Maiabury21650
Graham BrownEloise.Schumm35Alia PortPort Brandt80217-7245

Sortable

Age
Name
User Name
Street
City
Zip Code
25Mr. Johanna TurcotteDameon76Mante JunctionsNorth Roxane17884-9473
25Granville MannChristine.Bahringer10Hilpert LandingNorth Autumnside87215-3190
25Isabell Feil Jr.Rafaela.Gusikowski4Kaya MountainKemmerbury01459
25Gladys BaumbachDarien.GutmannAnastasia PointsWest Graycemouth33850
25Sebastian GleasonJohnathan.Klocko58Haley DrivesSouth Kiannaberg58169
24Graham BrownEloise.Schumm35Alia PortPort Brandt80217-7245
24Delia FeeneyGreyson13Purdy FordsZoilaside96503
24Ms. Melany SengerHenderson.KihnLia VillageDuBuqueview93383
24Jillian HoegerAnnamae.Maggio23Darlene CourseEarlenebury70931
24Dr. Rylee DuBuqueLewis.Vandervort7Kelly LandingLake Gabe98806
24London RunolfssonAudreanne.SanfordTowne CliffLangoshport65133
23Renee ErdmanBen.HammesTreutel InletPort Maiabury21650
23Melyssa HermanVerona_WizaZulauf CircleCorkeryland52057-0050
23Jacques BernhardNichole_Kozey4Ramona StationGunnerland64856
22Urban TowneKayleigh_HauckBechtelar ExtensionsRuthshire49065
22Nettie RunteJohnny.Marquardt30Larson SquareHannaton81636
22Ms. Jaunita LubowitzKody.McClureLindgren InletGrimesshire27558-3367
22Edison KeeblerDanielle_PollichJayde RapidsMontanaborough20635
21Jamarcus StromanOrval13Hobart ParkWest Rahul60010
21Hazle HansenHassie_Tillman73Reichel StreetWest Audreymouth53056-1765

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
23Jacques BernhardNichole_Kozey4Ramona StationGunnerland64856
24Dr. Rylee DuBuqueLewis.Vandervort7Kelly LandingLake Gabe98806
22Nettie RunteJohnny.Marquardt30Larson SquareHannaton81636
25Isabell Feil Jr.Rafaela.Gusikowski4Kaya MountainKemmerbury01459
24Jillian HoegerAnnamae.Maggio23Darlene CourseEarlenebury70931
23Melyssa HermanVerona_WizaZulauf CircleCorkeryland52057-0050
22Urban TowneKayleigh_HauckBechtelar ExtensionsRuthshire49065
21Hazle HansenHassie_Tillman73Reichel StreetWest Audreymouth53056-1765
21Jamarcus StromanOrval13Hobart ParkWest Rahul60010
24Ms. Melany SengerHenderson.KihnLia VillageDuBuqueview93383
25Granville MannChristine.Bahringer10Hilpert LandingNorth Autumnside87215-3190
24Delia FeeneyGreyson13Purdy FordsZoilaside96503
25Mr. Johanna TurcotteDameon76Mante JunctionsNorth Roxane17884-9473
23Renee ErdmanBen.HammesTreutel InletPort Maiabury21650
24Graham BrownEloise.Schumm35Alia PortPort Brandt80217-7245

Grouping

Name
User Name
Street
City
Zip Code
21 (2 properties)
Hazle HansenHassie_Tillman73Reichel StreetWest Audreymouth53056-1765
Jamarcus StromanOrval13Hobart ParkWest Rahul60010
22 (4 properties)
23 (3 properties)
24 (6 properties)
25 (5 properties)

Editing

Value