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, there is no built-in sorting.

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

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

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.
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
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 | string
The height of the table head.
accountForScrollbarbool
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
Hide code

Change height of table rows

Height 32
Height 40
Auto height
based on
the content
Hide code

Table.Row Props

This component composes ../layers

heightnumber | string
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.
intent'none' | 'success' | 'warning' | 'danger'
The intent of the alert.
appearancestring
The appearance of the table row. Default theme only support default.
classNamestring
Class name passed to the table row. Only use if you know what you are doing.

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.
Hide code

Table.Cell Props

This component composes ../layers

isSelectablebool
appearancestring
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.
arrowKeysOverrides{ up?: string | func | element | false, down?: string | func | element | false, left?: string | func | element | false, right?: string | func | element | false }
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
Hide code

Table.TextCell Props

This component composes TableCell

isNumberbool
Adds fontFamily: mono.
textPropsobject
Pass additional props to the Text component.

Table.HeaderCell

You almost never want to use this component directly.
Hide code

Table.HeaderCell Props

This component composes TableCell

Table.TextHeaderCell

Age
Email
Hide code

Table.TextHeaderCell Props

This component composes TableHeaderCell

textPropsobjectOf
Pass additional props to the Text component.

Table.SearchHeaderCell

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
Sets whether to apply spell checking to the content.
placeholderstring
Text to display in the input if the input is empty.
iconelementType | element
The Evergreen or custom icon before the label.

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
The `profiles` variable is not part of Evergreen. It’s example data existing out of an array of user profiles.
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
auto
Olga Gutmann

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.

1
auto
Haven Green

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.

2
32
Maurine Borer
This is a static height row
3
32
Sonya Wolf
This is a static height row
4
56
Noelia Raynor
This is a static height row
5
56
Xavier Dach
This is a static height row

Table.VirtualBody Props

This component composes ../layers

childrenArray<node> | node
Children needs to be an array of a single node.
defaultHeightnumber
Default height of each row. 48 is the default height of a TableRow.
allowAutoHeightbool
When true, support `height="auto"` on children being rendered. This is somewhat of an expirmental feature.
overscanCountnumber
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
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
scrollToAlignment'start' | 'center' | 'end' | 'auto'
The scrollToAlignment property passed to react-tiny-virtual-list
onScrollfunc
The onScroll callback passed to react-tiny-virtual-list