created:3/15/2021

updated:3/15/2021

source lines:278

comments %:21

Table

3.4.5

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

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
Jacques Bernhard	Nichole_Kozey4	Ramona Station	Gunnerland	64856
Dr. Rylee DuBuque	Lewis.Vandervort7	Kelly Landing	Lake Gabe	98806
Nettie Runte	Johnny.Marquardt30	Larson Square	Hannaton	81636
Isabell Feil Jr.	Rafaela.Gusikowski4	Kaya Mountain	Kemmerbury	01459
Jillian Hoeger	Annamae.Maggio23	Darlene Course	Earlenebury	70931
Melyssa Herman	Verona_Wiza	Zulauf Circle	Corkeryland	52057-0050
Urban Towne	Kayleigh_Hauck	Bechtelar Extensions	Ruthshire	49065
Hazle Hansen	Hassie_Tillman73	Reichel Street	West Audreymouth	53056-1765
Jamarcus Stroman	Orval13	Hobart Park	West Rahul	60010
Ms. Melany Senger	Henderson.Kihn	Lia Village	DuBuqueview	93383
Granville Mann	Christine.Bahringer10	Hilpert Landing	North Autumnside	87215-3190
Delia Feeney	Greyson13	Purdy Fords	Zoilaside	96503
Mr. Johanna Turcotte	Dameon76	Mante Junctions	North Roxane	17884-9473
Renee Erdman	Ben.Hammes	Treutel Inlet	Port Maiabury	21650
Graham Brown	Eloise.Schumm35	Alia Port	Port Brandt	80217-7245

browse

docs

issues

() => {
  const data = useMemo(mockData, []);
  return (
    <ThemeProvider>
      <Table<DataType>
        header={false}
        hiddenColumns={['age']}
        columns={columns}
        data={data}
      />
    </ThemeProvider>
  );
}

Properties

	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)

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 ^7.0.0	useTableuseSortByuseRowSelectusePaginationuseGroupByuseGlobalFilteruseExpandedUseSortByStateUseSortByOptionsUseRowStateOptionsUseRowSelectStateUseRowSelectOptionsUsePaginationStateUsePaginationOptionsUseGroupByStateUseGroupByRowPropsUseGroupByOptionsUseGroupByCellPropsUseFiltersOptionsUseExpandedStateUseExpandedOptionsTableStateTableOptionsSortingRuleRowPluginHookColumnCell
theme-ui ^0.6.0-alpha.7	jsxFlexBoxPropsBox

Internal dependencies

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

Component JSX

<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
Jacques Bernhard	Nichole_Kozey4	Ramona Station	Gunnerland	64856
Dr. Rylee DuBuque	Lewis.Vandervort7	Kelly Landing	Lake Gabe	98806
Nettie Runte	Johnny.Marquardt30	Larson Square	Hannaton	81636
Isabell Feil Jr.	Rafaela.Gusikowski4	Kaya Mountain	Kemmerbury	01459
Jillian Hoeger	Annamae.Maggio23	Darlene Course	Earlenebury	70931
Melyssa Herman	Verona_Wiza	Zulauf Circle	Corkeryland	52057-0050
Urban Towne	Kayleigh_Hauck	Bechtelar Extensions	Ruthshire	49065
Hazle Hansen	Hassie_Tillman73	Reichel Street	West Audreymouth	53056-1765
Jamarcus Stroman	Orval13	Hobart Park	West Rahul	60010
Ms. Melany Senger	Henderson.Kihn	Lia Village	DuBuqueview	93383
Granville Mann	Christine.Bahringer10	Hilpert Landing	North Autumnside	87215-3190
Delia Feeney	Greyson13	Purdy Fords	Zoilaside	96503
Mr. Johanna Turcotte	Dameon76	Mante Junctions	North Roxane	17884-9473
Renee Erdman	Ben.Hammes	Treutel Inlet	Port Maiabury	21650
Graham Brown	Eloise.Schumm35	Alia Port	Port Brandt	80217-7245

browse

docs

issues

() => {
  const data = useMemo(mockData, []);
  return (
    <ThemeProvider>
      <Table<DataType> hiddenColumns={['age']} columns={columns} data={data} />
    </ThemeProvider>
  );
}

Sortable

Age	Name	User Name	Street	City	Zip Code
25	Mr. Johanna Turcotte	Dameon76	Mante Junctions	North Roxane	17884-9473
25	Granville Mann	Christine.Bahringer10	Hilpert Landing	North Autumnside	87215-3190
25	Isabell Feil Jr.	Rafaela.Gusikowski4	Kaya Mountain	Kemmerbury	01459
25	Gladys Baumbach	Darien.Gutmann	Anastasia Points	West Graycemouth	33850
25	Sebastian Gleason	Johnathan.Klocko58	Haley Drives	South Kiannaberg	58169
24	Graham Brown	Eloise.Schumm35	Alia Port	Port Brandt	80217-7245
24	Delia Feeney	Greyson13	Purdy Fords	Zoilaside	96503
24	Ms. Melany Senger	Henderson.Kihn	Lia Village	DuBuqueview	93383
24	Jillian Hoeger	Annamae.Maggio23	Darlene Course	Earlenebury	70931
24	Dr. Rylee DuBuque	Lewis.Vandervort7	Kelly Landing	Lake Gabe	98806
24	London Runolfsson	Audreanne.Sanford	Towne Cliff	Langoshport	65133
23	Renee Erdman	Ben.Hammes	Treutel Inlet	Port Maiabury	21650
23	Melyssa Herman	Verona_Wiza	Zulauf Circle	Corkeryland	52057-0050
23	Jacques Bernhard	Nichole_Kozey4	Ramona Station	Gunnerland	64856
22	Urban Towne	Kayleigh_Hauck	Bechtelar Extensions	Ruthshire	49065
22	Nettie Runte	Johnny.Marquardt30	Larson Square	Hannaton	81636
22	Ms. Jaunita Lubowitz	Kody.McClure	Lindgren Inlet	Grimesshire	27558-3367
22	Edison Keebler	Danielle_Pollich	Jayde Rapids	Montanaborough	20635
21	Jamarcus Stroman	Orval13	Hobart Park	West Rahul	60010
21	Hazle Hansen	Hassie_Tillman73	Reichel Street	West Audreymouth	53056-1765

browse

docs

issues

() => {
  const data = useMemo(mockData, []);
  return (
    <ThemeProvider>
      <Table<DataType>
        sorting={true}
        columns={columns}
        data={data}
        sortBy={[
          {
            id: 'age',
            desc: true,
          },
        ]}
      />
    </ThemeProvider>
  );
}

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
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
23	Melyssa Herman	Verona_Wiza	Zulauf Circle	Corkeryland	52057-0050
22	Urban Towne	Kayleigh_Hauck	Bechtelar Extensions	Ruthshire	49065
21	Hazle Hansen	Hassie_Tillman73	Reichel Street	West Audreymouth	53056-1765
21	Jamarcus Stroman	Orval13	Hobart Park	West Rahul	60010
24	Ms. Melany Senger	Henderson.Kihn	Lia Village	DuBuqueview	93383
25	Granville Mann	Christine.Bahringer10	Hilpert Landing	North Autumnside	87215-3190
24	Delia Feeney	Greyson13	Purdy Fords	Zoilaside	96503
25	Mr. Johanna Turcotte	Dameon76	Mante Junctions	North Roxane	17884-9473
23	Renee Erdman	Ben.Hammes	Treutel Inlet	Port Maiabury	21650
24	Graham Brown	Eloise.Schumm35	Alia Port	Port Brandt	80217-7245

browse

docs

issues

() => {
  const data = useMemo(mockData, []);
  return (
    <ThemeProvider>
      <Table filtering={true} columns={columns} data={data} />
    </ThemeProvider>
  );
}

Grouping

	Name	User Name	Street	City	Zip Code
21 (2 properties)

	Hazle Hansen	Hassie_Tillman73	Reichel Street	West Audreymouth	53056-1765
	Jamarcus Stroman	Orval13	Hobart Park	West Rahul	60010
22 (4 properties)
23 (3 properties)
24 (6 properties)
25 (5 properties)

browse

docs

issues

() => {
  const data = useMemo(mockData, []);
  return (
    <ThemeProvider>
      <Table<DataType>
        expanded={{ 'age:21': true }}
        groupBy={['age']}
        columns={columns}
        data={data}
      />
    </ThemeProvider>
  );
}

Editing

Value

browse

docs

issues

() => {
  const [data, setData] = useState([{ value: 'example' }]);
  const [skipPageReset, setSkipPageReset] = useState(false);
  useEffect(() => {
    setSkipPageReset(false);
  }, [data]);
  const columns = useMemo(
    () =>
      [
        {
          Header: 'Value',
          accessor: 'value',
          Cell: ({ cell: { value } }: any) => {
            return (
              <input
                value={value}
                onChange={e => {
                  setSkipPageReset(true);
                  setData([{ value: e.target.value }]);
                }}
              />
            );
          },
        },
      ] as Column<{ value: string }>[],
    [],
  );
  return (
    <ThemeProvider>
      <Table<{ value: string }>
        skipPageReset={skipPageReset}
        columns={columns}
        data={data}
      />
    </ThemeProvider>
  );
}

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
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
23	Melyssa Herman	Verona_Wiza	Zulauf Circle	Corkeryland	52057-0050
22	Urban Towne	Kayleigh_Hauck	Bechtelar Extensions	Ruthshire	49065
21	Hazle Hansen	Hassie_Tillman73	Reichel Street	West Audreymouth	53056-1765
21	Jamarcus Stroman	Orval13	Hobart Park	West Rahul	60010
24	Ms. Melany Senger	Henderson.Kihn	Lia Village	DuBuqueview	93383
25	Granville Mann	Christine.Bahringer10	Hilpert Landing	North Autumnside	87215-3190
24	Delia Feeney	Greyson13	Purdy Fords	Zoilaside	96503
25	Mr. Johanna Turcotte	Dameon76	Mante Junctions	North Roxane	17884-9473
23	Renee Erdman	Ben.Hammes	Treutel Inlet	Port Maiabury	21650
24	Graham Brown	Eloise.Schumm35	Alia Port	Port Brandt	80217-7245

browse

docs

issues

() => {
  const data = useMemo(mockData, []);
  return (
    <ThemeProvider>
      <Table<DataType> rowSelect={true} columns={columns} data={data} />
    </ThemeProvider>
  );
}

component-controls/SyntaxHighlighter

component-controls/Tabs

Docs

Table

Component

No Header

Properties

External dependencies

Internal dependencies

Component JSX

Stories

Overview

Sortable

Filterable

Grouping

Editing

Row Select