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.

• 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.

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.

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

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

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

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.

none
danger
warning
success

Height 32
Height 40
Auto height 
based on 
the content

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.

You want to use this component
When you are using text
In your table cell

You almost never want to use this component directly.
 

Age 
Email 
 

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.

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