Table

Display larger amounts of information in a scannable UI.

Table basic usage

Name
Age
Address
Sarah Brown
31
100 Broadway st. New York City, New York
Jane Smith
32
100 Market st. San Francisco, California
Joe Black
33
100 Macquarie st. Sydney, Australia

Table cell examples

Name
Role
Delta
Amount
Actions
Marlyn
San Francisco
Engineering
Arrow Down-100%
1234.5
+1000%
Luther
Seattle
Marketing
Arrow Up50%
2435.2
+1000%
Kiera
Los Angeles
Operations
Arrow Up40%
8348.1
+1000%
Edna
Atlanta
Design
Arrow Up700%
2893.4
+1000%
Soraya
Denver
Finance
Arrow Up99%
8787.3
+1000%
Dorris
Dallas
Legal
Arrow Down-20%
6325.2
+1000%
Astrid
Tempe
Product
Arrow Up0%
7392.7
+1000%
Wendie
Pittsburgh
Engineering
Arrow Down-15%
9283.1
+1000%
Marna
Indianapolis
Marketing
Arrow Down-2%
7720.9
+1000%
Malka
New Orleans
Operations
Arrow Up30%
6273.3
+1000%
Jospeh
New York City
Design
Arrow Down-22%
8837.4
+1000%
Roselee
Oakland
Finance
Arrow Up4%
9277.9
+1000%
Justine
Louisville
Legal
Arrow Down-9%
7737.2
+1000%
Marlon
Baltimore
Engineering
Arrow Down-2%
2330.3
+1000%
Mellissa
Boulder
Marketing
Arrow Down-30%
4458.8
+1000%
Fausto
Chicago
Operations
Arrow Down-10%
6363.9
+1000%
Alfredia
Grand Rapids
Design
Arrow Up70%
2235.2
+1000%
Abel
Nashville
Finance
Arrow Up30%
9882.3
+1000%
Winford
Sacramento
Legal
Arrow Up10%
8774.7
+1000%
Neil
Columbus
Product
Arrow Down-5%
2673.2
+1000%

Table with pagination

Table Example
Label
Label
Label
Label
Label
row: 1
row: 1
row: 1
row: 1
row: 1
row: 2
row: 2
row: 2
row: 2
row: 2
row: 3
row: 3
row: 3
row: 3
row: 3
row: 4
row: 4
row: 4
row: 4
row: 4
row: 5
row: 5
row: 5
row: 5
row: 5
row: 6
row: 6
row: 6
row: 6
row: 6
row: 7
row: 7
row: 7
row: 7
row: 7
row: 8
row: 8
row: 8
row: 8
row: 8
row: 9
row: 9
row: 9
row: 9
row: 9
row: 10
row: 10
row: 10
row: 10
row: 10
row: 11
row: 11
row: 11
row: 11
row: 11
row: 12
row: 12
row: 12
row: 12
row: 12

Table with sorting by a column

Marlyn
10
Luther
15
Kiera
13
Edna
20
Soraya
18
Dorris
32
Astrid
26
Wendie
17
Marna
11
Malka
14
Jospeh
10
Roselee
12
Justine
35
Marlon
30
Mellissa
32
Fausto
21
Alfredia
22
Abel
18
Winford
19
Neil
27

Table with fixed width column

ID
First Name
Last Name
Age
Address
1
Sarah
Brown
31
100 Broadway st. New York City, New York
2
Jane
Smith
32
100 Market st. San Francisco, California
3
Joe
Black
33
100 Macquarie st. Sydney, Australia
1
Sarah
Brown
31
100 Broadway st. New York City, New York
2
Jane
Smith
32
100 Market st. San Francisco, California
3
Joe
Black
33
100 Macquarie st. Sydney, Australia
1
Sarah
Brown
31
100 Broadway st. New York City, New York
2
Jane
Smith
32
100 Market st. San Francisco, California
3
Joe
Black
33
100 Macquarie st. Sydney, Australia
1
Sarah
Brown
31
100 Broadway st. New York City, New York
2
Jane
Smith
32
100 Market st. San Francisco, California
3
Joe
Black
33
100 Macquarie st. Sydney, Australia

Table with vertical scroll

Name
Age
Address
Sarah Brown
31
100 Broadway st. New York City, New York
Jane Smith
32
100 Market st. San Francisco, California
Joe Black
33
100 Macquarie st. Sydney, Australia
Sarah Brown
31
100 Broadway st. New York City, New York
Jane Smith
32
100 Market st. San Francisco, California
Joe Black
33
100 Macquarie st. Sydney, Australia
Sarah Brown
31
100 Broadway st. New York City, New York
Jane Smith
32
100 Market st. San Francisco, California
Joe Black
33
100 Macquarie st. Sydney, Australia
Sarah Brown
31
100 Broadway st. New York City, New York
Jane Smith
32
100 Market st. San Francisco, California
Joe Black
33
100 Macquarie st. Sydney, Australia

Table with horizontal scroll

Id
First Name
Last Name
Age
Address
1
Sarah
Brown
31
100 Broadway st. New York City, New York
2
Jane
Smith
32
100 Market st. San Francisco, California
3
Joe
Black
33
100 Macquarie st. Sydney, Australia
1
Sarah
Brown
31
100 Broadway st. New York City, New York
2
Jane
Smith
32
100 Market st. San Francisco, California
3
Joe
Black
33
100 Macquarie st. Sydney, Australia
1
Sarah
Brown
31
100 Broadway st. New York City, New York
2
Jane
Smith
32
100 Market st. San Francisco, California
3
Joe
Black
33
100 Macquarie st. Sydney, Australia
1
Sarah
Brown
31
100 Broadway st. New York City, New York
2
Jane
Smith
32
100 Market st. San Francisco, California
3
Joe
Black
33
100 Macquarie st. Sydney, Australia

Table with column filtering

Number
Title
0
row title
1
row title
2
row title
3
row title
4
row title
5
row title
6
row title
7
row title
8
row title
9
row title
10
row title
11
row title
12
row title
13
row title
14
row title
15
row title
16
row title
17
row title
18
row title
19
row title
20
row title
21
row title
22
row title
23
row title
24
row title
25
row title
26
row title
27
row title
28
row title
29
row title
30
row title
31
row title
32
row title
33
row title
34
row title
35
row title
36
row title
37
row title
38
row title
39
row title
40
row title
41
row title
42
row title
43
row title
44
row title
45
row title
46
row title
47
row title
48
row title
49
row title
50
row title
51
row title
52
row title
53
row title
54
row title
55
row title
56
row title
57
row title
58
row title
59
row title
60
row title
61
row title
62
row title
63
row title
64
row title
65
row title
66
row title
67
row title
68
row title
69
row title
70
row title
71
row title
72
row title
73
row title
74
row title
75
row title
76
row title
77
row title
78
row title
79
row title
80
row title
81
row title
82
row title
83
row title
84
row title
85
row title
86
row title
87
row title
88
row title
89
row title
90
row title
91
row title
92
row title
93
row title
94
row title
95
row title
96
row title
97
row title
98
row title
99
row title

Using react-vis

Description
Graph
Visitors
100%
0%
Revenue
100%
0%
Bounce Rate
100%
0%

Virtualized Table

If your product requires infinite scroll functionality rather than pagination, take a look at the examples below for how to integrate react-virtualized with the table component. Base Web does not contain react-virtualized internally. You will need to install it yourself.

Table with virtualized table body

Name
Age
Address

Table with virtualized horizontal scroll

Name
Age
Address

Table API

Warning any = "Prop types are not shown in dev mode"

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

  • FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
  • FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>