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.

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.

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>
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>
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>
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>
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>
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.
arrowKeysOverridesshape
Advanced arrow keys overrides for selectable cells. A string will be used as a selector.
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>
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>
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>
Hide code

Table.TextHeaderCell Props

This component composes TableHeaderCell

textPropsobjectOf
Pass additional props to the Text component.

Table.SearchHeaderCell

<Table.Head>
  <Table.SearchHeaderCell
    onChange={value => console.log(value)}
    placeholder='Search by email...'
  />
</Table.Head>
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.
iconstring = 'search'
Icon to display in the input.

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
  • The scroll position can be controlled using scrollOffset, scrollToIndex and scrollToAlignment that are passed down to VirtualList from react-tiny-virtual-list.

Simple virtual body example

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>
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
40
Fanny Gleason
This is a static height row
1
56
Lea Schuppe
This is a static height row
2
40
Gaetano Powlowski
This is a static height row
3
40
Helmer Von
This is a static height row
4
auto
Ms. Eldon Murazik

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

5
56
Edd Orn
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.
scrollToIndexnumber
The scrollToIndex property passed to react-tiny-virtual-list
scrollOffsetnumber
The scrollOffset property passed to react-tiny-virtual-list
scrollToAlignmentenum
The scrollToAlignment property passed to react-tiny-virtual-list