[?] Component size, gzipped: 23kb
Table
Display larger amounts of information in a scannable UI. This component is best suited for applications that need to support older browsers like Internet Explorer. It is implemented with flex-box. If your application does not need legacy support, you may want to explore baseui's table-grid, components, a visually similar table, but implemented with css-grid.
Examples
Table cell examples
Name
Role
Delta
Amount
Actions
Marlyn
San Francisco
Engineering
-100%
1234.5
+1000%
Luther
Seattle
Marketing
50%
2435.2
+1000%
Kiera
Los Angeles
Operations
40%
8348.1
+1000%
Edna
Atlanta
Design
700%
2893.4
+1000%
Soraya
Denver
Finance
99%
8787.3
+1000%
Dorris
Dallas
Legal
-20%
6325.2
+1000%
Astrid
Tempe
Product
0%
7392.7
+1000%
Wendie
Pittsburgh
Engineering
-15%
9283.1
+1000%
Marna
Indianapolis
Marketing
-2%
7720.9
+1000%
Malka
New Orleans
Operations
30%
6273.3
+1000%
Jospeh
New York City
Design
-22%
8837.4
+1000%
Roselee
Oakland
Finance
4%
9277.9
+1000%
Justine
Louisville
Legal
-9%
7737.2
+1000%
Marlon
Baltimore
Engineering
-2%
2330.3
+1000%
Mellissa
Boulder
Marketing
-30%
4458.8
+1000%
Fausto
Chicago
Operations
-10%
6363.9
+1000%
Alfredia
Grand Rapids
Design
70%
2235.2
+1000%
Abel
Nashville
Finance
30%
9882.3
+1000%
Winford
Sacramento
Legal
10%
8774.7
+1000%
Neil
Columbus
Product
-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
1
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
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.
API
Table API
columns Array<union> = []
Table columns. Data passed to each header cell.
ArrayOne of string, Nodedata Array<Array<Node>> = [[]]
Table rows. Data passed to each row and cell
ArrayArrayNodehorizontalScrollWidth string
Table width fills this provided value.
isLoading boolean = false
Renders the table in a loading state. Not implemented, yet.