Table

View on GitHub

Introduction

Evergreen exports a set of building blocks for building tables. This package is also used in places such as the options list in the SelectMenu component. Currently this package does not use real table elements.

Implementation details

  • None of these components implement HTML table elements such as: table, th or tr.
  • Most components are basic Pane components combined with Text.
  • All components are presentational, no sorting build in.

Available components

Evergreen exports the following components for tables:

  • Table
  • Table.Head
  • Table.Body
  • Table.Row
  • Table.Cell
  • Table.TextCell
  • Table.HeaderCell
  • Table.TextHeaderCell
  • Table.SearchHeaderCell

Full featured table examples

The source code of this example is available in docs/src/components/examples/AdvancedTable on GitHub.

The following table is virtualized with Table.VirtualBody.

search
CC
Cheryl Carter
cheryl@skyble.com
$365
HM
Heather Morales
hmorales1@un.org
$427
SJ
Sean Jackson
sjackson2@youtu.be
$538
CA
Catherine Anderson
canderson3@theguardian.com
$171
JP
Jack Phillips
jphillips4@addthis.com
$222
JW
Julia Williamson
jwilliamson5@elegantthemes.com
$365
JM
Jonathan Martin
jmartin6@cnn.com
$392
MB
Maria Bennett
mbennett7@blogger.com
$795
SG
Sarah Garrett
sgarrett8@marriott.com
$844
CB
Carl Barnes
cbarnes9@pagesperso-orange.fr
$430
AT
Aaron Turner
aturnera@noaa.gov
$872
BR
Billy Reed
breedb@qq.com
$997
AF
Anna Fuller
afullerc@buzzfeed.com
$275
LT
Linda Torres
ltorresd@naver.com
$359
AA
Angela Allen
aallene@canalblog.com
$270
PP
Phyllis Perkins
pperkinsf@redcross.org
$314
MF
Marilyn Fuller
mfullerg@wikispaces.com
$116
RA
Ryan Alvarez
ralvarezh@yahoo.com
$192
FL
Fred Lane
flanei@homestead.com
$520

Complete table example

Use onSelect and isSelectable on a Table.Row to make it clickable.

search
Last Activity
ltv
Cheryl Carter
a few seconds ago
$365
Heather Morales
a minute ago
$427
Sean Jackson
3 minutes ago
$538
Catherine Anderson
4 minutes ago
$171
Jack Phillips
6 minutes ago
$222
Julia Williamson
7 minutes ago
$365
Jonathan Martin
8 minutes ago
$392
Maria Bennett
10 minutes ago
$795
Sarah Garrett
11 minutes ago
$844
Carl Barnes
13 minutes ago
$430
Aaron Turner
14 minutes ago
$872
Billy Reed
15 minutes ago
$997
Anna Fuller
17 minutes ago
$275
Linda Torres
18 minutes ago
$359
Angela Allen
20 minutes ago
$270
Phyllis Perkins
21 minutes ago
$314
Marilyn Fuller
22 minutes ago
$116
Ryan Alvarez
24 minutes ago
$192
Fred Lane
25 minutes ago
$520
Jane Sims
27 minutes ago
$702
Angela Ellis
28 minutes ago
$771
Diane Dunn
29 minutes ago
$849
Timothy Duncan
31 minutes ago
$439
Ronald Mendoza
32 minutes ago
$31
Michael Gilbert
34 minutes ago
$862
Kathryn Fuller
35 minutes ago
$897
Ralph Larson
36 minutes ago
$248
Karen Wagner
38 minutes ago
$372
Christina Morales
39 minutes ago
$945
Daniel Palmer
41 minutes ago
$862
Joshua Murray
42 minutes ago
$346
Timothy West
43 minutes ago
$858
Martin Bradley
an hour ago
$39
Philip Hall
an hour ago
$993
Keith Willis
an hour ago
$83
Patricia Harris
an hour ago
$465
Frances Nguyen
an hour ago
$616
Larry Ward
an hour ago
$89
Benjamin Adams
an hour ago
$300
Jane James
an hour ago
$936
The `profiles` variable is not part of Evergreen. It’s example data existing out of an array of user profiles.
<Table>
  <Table.Head>
    <Table.SearchHeaderCell />
    <Table.TextHeaderCell>
      Last Activity
    </Table.TextHeaderCell>
    <Table.TextHeaderCell>
      ltv
    </Table.TextHeaderCell>
  </Table.Head>
  <Table.Body height={240}>
    {profiles.map(profile => (
      <Table.Row key={profile.id} isSelectable onSelect={() => alert(profile.name)}>
        <Table.TextCell>{profile.name}</Table.TextCell>
        <Table.TextCell>{profile.lastActivity}</Table.TextCell>
        <Table.TextCell isNumber>
          {profile.ltv}
        </Table.TextCell>
      </Table.Row>
    ))}
  </Table.Body>
</Table>
code Hide code

Fix or change width of column

Table cells are all using flex layout. The below example shows how to create fixed width cells. Make sure to add the same properties to each cell in each row and head.

Fixed width
Flex me col 2
Flex me col 3
Fixed width
Flex me col 2
Flex me col 3
<Table.Body>
  <Table.Head>
    <Table.TextCell flexBasis={560} flexShrink={0} flexGrow={0}>
      Fixed width
    </Table.TextCell>
    <Table.TextCell>
      Flex me col 2
    </Table.TextCell>
    <Table.TextCell>
      Flex me col 3
    </Table.TextCell>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.TextCell flexBasis={560} flexShrink={0} flexGrow={0}>
        Fixed width
      </Table.TextCell>
      <Table.TextCell>
        Flex me col 2
      </Table.TextCell>
      <Table.TextCell>
        Flex me col 3
      </Table.TextCell>
    </Table.Row>
  </Table.Body>
</Table.Body>
code Hide code

Table

This component is the container of all your table components. It is simply a Pane and not an actual table element.

Table Props

This component composes ../layers

Table.Head

Table.Head Props

This component composes ../layers

heightnumber = 32
The height of the table head.
accountForScrollbarbool = true
This should always be true if you are using TableHead together with a TableBody. Because TableBody has `overflowY: scroll` by default.

Table.Body Props

This component composes ../layers

Table.Row

This component is used for table rows in your table and can be selectable and selected. Table rows can have a intent prop as well.

Table row intent

none
danger
warning
success
<Pane>
  {['none', 'danger', 'warning', 'success'].map(intent => {
    return (
      <Table.Row
        key={intent}
        isSelectable
        onSelect={() => alert(intent)}
        intent={intent}
      >
        <Table.TextCell>{intent}</Table.TextCell>
      </Table.Row>
    )
  })}
</Pane>
code Hide code

Change height of table rows

Height 32
Height 40
Auto height
based on
the content
<Pane>
  <Table.Row height={32}>
    <Table.TextCell>Height 32</Table.TextCell>
  </Table.Row>
  <Table.Row height={40}>
    <Table.TextCell>Height 40</Table.TextCell>
  </Table.Row>
  <Table.Row height="auto" paddingY={12}>
    <Table.TextCell>
      Auto height <br />based on <br />the content
    </Table.TextCell>
  </Table.Row>
</Pane>
code Hide code

Table.Row Props

This component composes ../layers

heightunion = 48
The height of the row. Remember to add paddings when using "auto".
onSelectfunc = () => {}
Function that is called on click and enter/space keypress.
onDeselectfunc = () => {}
Function that is called on click and enter/space keypress.
isSelectablebool
Makes the TableRow selectable.
isSelectedbool
Makes the TableRow selected.
isHighlightedbool
Manually set the TableRow to be highlighted.
intentenum = 'none'
The intent of the alert.
appearancestring = 'default'
The appearance of the table row. Default theme only support default.
themeobjectrequired
Theme provided by ThemeProvider.
classNamestring
Class name passed to the table row. Only use if you know what you are doing.
onKeyPress = () => {}

Table.Cell

This component is for table cells in your table. Consider using Table.TextCell when you want to display text in your table cell. This can be used as a base to build more complex table cells.

This should only be used as a base.
It doesn't have any text styling.
<Table.Row>
  <Table.Cell>This should only be used as a base.</Table.Cell>
  <Table.Cell>It doesn't have any text styling.</Table.Cell>
</Table.Row>
code Hide code

Table.Cell Props

This component composes ../layers

isSelectablebool
appearancestring = 'default'
The appearance of the table row. Default theme only support default.
rightViewnode
Optional node to be placed on the right side of the table cell. Useful for icons and icon buttons.
themeobjectrequired
Theme provided by ThemeProvider.
classNamestring
Class name passed to the table cell. Only use if you know what you are doing.

Table.TextCell

You want to use this component
When you are using text
In your table cell
<Table.Row>
  <Table.TextCell size={500}>You want to use this component</Table.TextCell>
  <Table.TextCell size={500}>When you are using text</Table.TextCell>
  <Table.TextCell size={500}>In your table cell</Table.TextCell>
</Table.Row>
code Hide code

Table.TextCell Props

This component composes TableCell

isNumberbool = false
Adds textAlign: right and fontFamily: mono.
textPropsobject
Pass additional props to the Text component.

Table.HeaderCell

You almost never want to use this component directly.
<Table.Head>
  <Table.HeaderCell>You almost never want to use this component directly.</Table.HeaderCell>
</Table.Head>
code Hide code

Table.HeaderCell Props

This component composes TableCell

Table.TextHeaderCell

Age
Email
<Table.Head>
  <Table.TextHeaderCell>Age</Table.TextHeaderCell>
  <Table.TextHeaderCell>Email</Table.TextHeaderCell>
</Table.Head>
code Hide code

Table.TextHeaderCell Props

This component composes TableHeaderCell

textPropsobjectOf
Pass additional props to the Text component.

Table.SearchHeaderCell

search
<Table.Head>
  <Table.SearchHeaderCell
    onChange={e => console.log(e.target.value)}
    placeholder='Search by email...'
  />
</Table.Head>
code Hide code

Table.SearchHeaderCell Props

This component composes TableHeaderCell

valuestring
The value of the input.
onChangefunc = () => {}
Handler to be called when the input changes.
autoFocusbool
Sets whether the component should be automatically focused on component render.
spellCheckbool = true
Sets whether to apply spell checking to the content.
placeholderstring = 'Filter...'
Text to display in the input if the input is empty.

Table.VirtualBody

Virtual tables

Virtual tables in Evergreen are easy to create. Evergreen gives some nice features when working with virtual tables:

  • Table body can be dynamic (flexed for example), no need to supply a fixed height and resizing works
  • Table.VirtualBody is a drop-in replacement for Table.Body
  • There is no need to pass the total items/rows up front
  • Rows can be dynamic per row
  • Row heights can be unknown up front with height="auto", this will reduce performance however

Simple virtual body example

search
Last Activity
ltv
Cheryl Carter
a few seconds ago
$365
Heather Morales
a minute ago
$427
Sean Jackson
3 minutes ago
$538
Catherine Anderson
4 minutes ago
$171
Jack Phillips
6 minutes ago
$222
Julia Williamson
7 minutes ago
$365
Jonathan Martin
8 minutes ago
$392
Maria Bennett
10 minutes ago
$795
Sarah Garrett
11 minutes ago
$844
Carl Barnes
13 minutes ago
$430
The `profiles` variable is not part of Evergreen. It’s example data existing out of an array of user profiles.
<Table>
  <Table.Head>
    <Table.SearchHeaderCell />
    <Table.TextHeaderCell>
      Last Activity
    </Table.TextHeaderCell>
    <Table.TextHeaderCell>
      ltv
    </Table.TextHeaderCell>
  </Table.Head>
  <Table.VirtualBody height={240}>
    {profiles.map(profile => (
      <Table.Row key={profile.id} isSelectable onSelect={() => alert(profile.name)}>
        <Table.TextCell>{profile.name}</Table.TextCell>
        <Table.TextCell>{profile.lastActivity}</Table.TextCell>
        <Table.TextCell isNumber>
          {profile.ltv}
        </Table.TextCell>
      </Table.Row>
    ))}
  </Table.VirtualBody>
</Table>
code Hide code

Complete virtual example

The source code of this example is available in docs/src/components/examples/VirtualTable on GitHub. This example features dynamic and auto heights.

Index
Height
Name
Email
0
32
Alysha Boyer
This is a static height row
1
40
Donald McKenzie
This is a static height row
2
40
Clarissa Wolff
This is a static height row
3
56
Donnell Bayer
This is a static height row
4
32
Melody Rodriguez
This is a static height row
5
56
Randall Schumm
This is a static height row

Table.VirtualBody Props

This component composes ../layers

childrenunion
Children needs to be an array of a single node.
defaultHeightnumber = 48
Default height of each row. 48 is the default height of a TableRow.
allowAutoHeightbool = false
When true, support `height="auto"` on children being rendered. This is somewhat of an expirmental feature.
overscanCountnumber = 5
The overscanCount property passed to react-tiny-virtual-list.
estimatedItemSizenumber
When passed, this is used as the `estimatedItemSize` in react-tiny-virtual-list. Only when `allowAutoHeight` and`useAverageAutoHeightEstimation` are false.
useAverageAutoHeightEstimationbool = true
When allowAutoHeight is true and this prop is true, the estimated height will be computed based on the average height of auto height rows.