Component size, gzipped: 36kb

Table

Loading
API

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 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
of 4

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

API

Table props

NameTypeDescription
columns
array
Table columns. Data passed to each header cell.
data
array
Table rows. Data passed to each row and cell
horizontalScrollWidth
string
Table width fills this provided value.
overrides
custom
Lets you customize all aspects of the component.

Table exports

You can import this module like so:

import {SortableHeadCell} from 'baseui/table'

It exports the following components or utility functions: