Table
In progress
RTL
A component for displaying large amounts of data in rows and columns.
Based on react-table.
Default
First Name
Last Name
Age
Visits
Activity
Status
Test
Test
0
0
0
0
Test
Test
30
100
100
100
Test
Test
60
200
200
200
Test
Test
90
300
300
300
Test
Test
120
400
400
400
With cell borders
First Name
Last Name
Age
Visits
Activity
Status
Test
Test
0
0
0
0
Test
Test
30
100
100
100
Test
Test
60
200
200
200
Test
Test
90
300
300
300
Test
Test
120
400
400
400
Different row gaps
First Name
Last Name
Age
Visits
Activity
Status
Test
Test
0
0
0
0
Test
Test
30
100
100
100
First Name
Last Name
Age
Visits
Activity
Status
Test
Test
0
0
0
0
Test
Test
30
100
100
100
First Name
Last Name
Age
Visits
Activity
Status
Test
Test
0
0
0
0
Test
Test
30
100
100
100
First Name
Last Name
Age
Visits
Activity
Status
Test
Test
0
0
0
0
Test
Test
30
100
100
100
First Name
Last Name
Age
Visits
Activity
Status
Test
Test
0
0
0
0
Test
Test
30
100
100
100
Different row sizes
First Name
Last Name
Age
Visits
Activity
Status
Test
Test
0
0
0
0
Test
Test
30
100
100
100
First Name
Last Name
Age
Visits
Activity
Status
Test
Test
0
0
0
0
Test
Test
30
100
100
100
First Name
Last Name
Age
Visits
Activity
Status
Test
Test
0
0
0
0
Test
Test
30
100
100
100
First Name
Last Name
Age
Visits
Activity
Status
Test
Test
0
0
0
0
Test
Test
30
100
100
100
First Name
Last Name
Age
Visits
Activity
Status
Test
Test
0
0
0
0
Test
Test
30
100
100
100
First Name
Last Name
Age
Visits
Activity
Status
Test
Test
0
0
0
0
Test
Test
30
100
100
100
Clickable rows
Name
Info
Progress
First Name
Last Name
Age
Visits
Activity
Status
Profile Progress
Test
Test
0
0
0
0
0
Test
Test
30
100
100
100
100
Test
Test
60
200
200
200
200
Test
Test
90
300
300
300
300
Test
Test
120
400
400
400
400
Test
Test
150
500
500
500
500
Test
Test
180
600
600
600
600
Test
Test
210
700
700
700
700
Test
Test
240
800
800
800
800
Test
Test
270
900
900
900
900
Test
Test
300
1000
1000
1000
1000
Test
Test
330
1100
1100
1100
1100
Test
Test
360
1200
1200
1200
1200
Test
Test
390
1300
1300
1300
1300
Test
Test
420
1400
1400
1400
1400
Test
Test
450
1500
1500
1500
1500
Test
Test
480
1600
1600
1600
1600
Test
Test
510
1700
1700
1700
1700
Test
Test
540
1800
1800
1800
1800
Test
Test
570
1900
1900
1900
1900
Test
Test
600
2000
2000
2000
2000
Test
Test
630
2100
2100
2100
2100
Test
Test
660
2200
2200
2200
2200
Test
Test
690
2300
2300
2300
2300
Test
Test
720
2400
2400
2400
2400
Test
Test
750
2500
2500
2500
2500
Test
Test
780
2600
2600
2600
2600
Test
Test
810
2700
2700
2700
2700
Test
Test
840
2800
2800
2800
2800
Test
Test
870
2900
2900
2900
2900
Test
Test
900
3000
3000
3000
3000
Test
Test
930
3100
3100
3100
3100
Test
Test
960
3200
3200
3200
3200
Test
Test
990
3300
3300
3300
3300
Test
Test
1020
3400
3400
3400
3400
Test
Test
1050
3500
3500
3500
3500
Test
Test
1080
3600
3600
3600
3600
Test
Test
1110
3700
3700
3700
3700
Test
Test
1140
3800
3800
3800
3800
Test
Test
1170
3900
3900
3900
3900
Name footer
Info footer
Progress footer
Selectable rows
Name
Info
Progress
First Name
Last Name
Age
Visits
Activity
Status
Profile Progress
Test
Test
0
0
0
0
0
Test
Test
30
100
100
100
100
Test
Test
60
200
200
200
200
Test
Test
90
300
300
300
300
Test
Test
120
400
400
400
400
Name footer
Info footer
Progress footer
Selectable checkboxes
Name
Info
Progress
First Name
Last Name
Age
Visits
Activity
Status
Profile Progress
Test
Test
0
0
0
0
0
Test
Test
30
100
100
100
100
Test
Test
60
200
200
200
200
Test
Test
90
300
300
300
300
Test
Test
120
400
400
400
400
Test
Test
150
500
500
500
500
Test
Test
180
600
600
600
600
Test
Test
210
700
700
700
700
Test
Test
240
800
800
800
800
Test
Test
270
900
900
900
900
Test
Test
300
1000
1000
1000
1000
Test
Test
330
1100
1100
1100
1100
Test
Test
360
1200
1200
1200
1200
Test
Test
390
1300
1300
1300
1300
Test
Test
420
1400
1400
1400
1400
Test
Test
450
1500
1500
1500
1500
Test
Test
480
1600
1600
1600
1600
Test
Test
510
1700
1700
1700
1700
Test
Test
540
1800
1800
1800
1800
Test
Test
570
1900
1900
1900
1900
Test
Test
600
2000
2000
2000
2000
Test
Test
630
2100
2100
2100
2100
Test
Test
660
2200
2200
2200
2200
Test
Test
690
2300
2300
2300
2300
Test
Test
720
2400
2400
2400
2400
Test
Test
750
2500
2500
2500
2500
Test
Test
780
2600
2600
2600
2600
Test
Test
810
2700
2700
2700
2700
Test
Test
840
2800
2800
2800
2800
Test
Test
870
2900
2900
2900
2900
Test
Test
900
3000
3000
3000
3000
Test
Test
930
3100
3100
3100
3100
Test
Test
960
3200
3200
3200
3200
Test
Test
990
3300
3300
3300
3300
Test
Test
1020
3400
3400
3400
3400
Test
Test
1050
3500
3500
3500
3500
Test
Test
1080
3600
3600
3600
3600
Test
Test
1110
3700
3700
3700
3700
Test
Test
1140
3800
3800
3800
3800
Test
Test
1170
3900
3900
3900
3900
Name footer
Info footer
Progress footer
Custom colors
Name
Info
Progress
First Name
Last Name
Age
Visits
Activity
Profile Progress
Test
Test
0
0
0
0
Test
Test
30
100
100
100
Test
Test
60
200
200
200
Test
Test
90
300
300
300
Test
Test
120
400
400
400
Test
Test
150
500
500
500
Test
Test
180
600
600
600
Test
Test
210
700
700
700
Test
Test
240
800
800
800
Test
Test
270
900
900
900
Test
Test
300
1000
1000
1000
Test
Test
330
1100
1100
1100
Test
Test
360
1200
1200
1200
Test
Test
390
1300
1300
1300
Test
Test
420
1400
1400
1400
Test
Test
450
1500
1500
1500
Test
Test
480
1600
1600
1600
Test
Test
510
1700
1700
1700
Test
Test
540
1800
1800
1800
Test
Test
570
1900
1900
1900
Test
Test
600
2000
2000
2000
Test
Test
630
2100
2100
2100
Test
Test
660
2200
2200
2200
Test
Test
690
2300
2300
2300
Test
Test
720
2400
2400
2400
Test
Test
750
2500
2500
2500
Test
Test
780
2600
2600
2600
Test
Test
810
2700
2700
2700
Test
Test
840
2800
2800
2800
Test
Test
870
2900
2900
2900
Test
Test
900
3000
3000
3000
Test
Test
930
3100
3100
3100
Test
Test
960
3200
3200
3200
Test
Test
990
3300
3300
3300
Test
Test
1020
3400
3400
3400
Test
Test
1050
3500
3500
3500
Test
Test
1080
3600
3600
3600
Test
Test
1110
3700
3700
3700
Test
Test
1140
3800
3800
3800
Test
Test
1170
3900
3900
3900
Name footer
Info footer
Progress footer
Expanded Rows
Expand
Name
Info
Progress
👉
First Name
Age
Visits
Activity
Status
Profile Progress
👉
Test
0
0
0
0
0
👉
Test
30
100
100
100
100
👉
Test
60
200
200
200
200
👉
Test
90
300
300
300
300
👉
Test
120
400
400
400
400
👉
Test
150
500
500
500
500
👉
Test
180
600
600
600
600
👉
Test
210
700
700
700
700
👉
Test
240
800
800
800
800
👉
Test
270
900
900
900
900
👉
Test
300
1000
1000
1000
1000
👉
Test
330
1100
1100
1100
1100
👉
Test
360
1200
1200
1200
1200
👉
Test
390
1300
1300
1300
1300
👉
Test
420
1400
1400
1400
1400
👉
Test
450
1500
1500
1500
1500
👉
Test
480
1600
1600
1600
1600
👉
Test
510
1700
1700
1700
1700
👉
Test
540
1800
1800
1800
1800
👉
Test
570
1900
1900
1900
1900
👉
Test
600
2000
2000
2000
2000
👉
Test
630
2100
2100
2100
2100
👉
Test
660
2200
2200
2200
2200
👉
Test
690
2300
2300
2300
2300
👉
Test
720
2400
2400
2400
2400
👉
Test
750
2500
2500
2500
2500
👉
Test
780
2600
2600
2600
2600
👉
Test
810
2700
2700
2700
2700
👉
Test
840
2800
2800
2800
2800
👉
Test
870
2900
2900
2900
2900
👉
Test
900
3000
3000
3000
3000
👉
Test
930
3100
3100
3100
3100
👉
Test
960
3200
3200
3200
3200
👉
Test
990
3300
3300
3300
3300
👉
Test
1020
3400
3400
3400
3400
👉
Test
1050
3500
3500
3500
3500
👉
Test
1080
3600
3600
3600
3600
👉
Test
1110
3700
3700
3700
3700
👉
Test
1140
3800
3800
3800
3800
👉
Test
1170
3900
3900
3900
3900
With Sorting
Name
Info
Progress
First Name
Last Name
Age
Visits
Activity
Status
Profile Progress
Test 0
Test 0
3
5
4
5
6
Test 1
Test 1
2
8
8
6
2
Test 2
Test 2
10
12
12
8
8
Test 3
Test 3
13
4
11
11
13
Test 4
Test 4
6
13
8
7
12
Test 5
Test 5
8
7
10
8
11
Test 6
Test 6
7
12
14
11
13
Test 7
Test 7
13
10
9
12
15
Test 8
Test 8
14
13
13
11
17
Test 9
Test 9
16
18
10
17
10
Test 10
Test 10
12
12
17
13
18
Test 11
Test 11
18
17
17
18
18
Test 12
Test 12
19
17
16
21
13
Test 13
Test 13
19
22
18
19
14
Test 14
Test 14
16
24
22
17
23
Test 15
Test 15
23
22
21
16
25
Test 16
Test 16
22
20
21
26
26
Test 17
Test 17
21
22
19
27
26
Test 18
Test 18
20
28
26
20
24
Test 19
Test 19
26
29
27
27
21
Test 20
Test 20
23
21
27
22
27
Test 21
Test 21
22
27
26
23
28
Test 22
Test 22
26
25
30
29
28
Test 23
Test 23
24
29
29
29
28
Test 24
Test 24
30
34
25
34
31
Test 25
Test 25
26
31
30
34
29
Test 26
Test 26
30
31
29
34
30
Test 27
Test 27
29
33
31
30
28
Test 28
Test 28
30
29
34
37
32
Test 29
Test 29
31
30
35
33
32
Test 30
Test 30
33
37
31
32
34
Test 31
Test 31
35
37
36
35
40
Test 32
Test 32
40
40
33
35
35
Test 33
Test 33
36
38
40
43
34
Test 34
Test 34
36
36
44
35
42
Test 35
Test 35
38
38
42
39
40
Test 36
Test 36
45
37
37
37
44
Test 37
Test 37
38
40
40
44
46
Test 38
Test 38
45
48
43
43
42
Test 39
Test 39
43
47
49
46
49
Expanded Rows with deep nesting
👉
Name
Age
Visits
Activity
👉
Test
0
0
0
👉
Test
30
100
100
👉
Test
60
200
200
👉
Test
90
300
300
👉
Test
120
400
400
👉
Test
150
500
500
👉
Test
180
600
600
👉
Test
210
700
700
👉
Test
240
800
800
👉
Test
270
900
900
👉
Test
300
1000
1000
👉
Test
330
1100
1100
👉
Test
360
1200
1200
👉
Test
390
1300
1300
👉
Test
420
1400
1400
👉
Test
450
1500
1500
👉
Test
480
1600
1600
👉
Test
510
1700
1700
👉
Test
540
1800
1800
👉
Test
570
1900
1900
Expanded rows with custom content
Expand👉
First Name
Age
👉
Test
0
👉
Test
30
👉
Test
60
👉
Test
90
👉
Test
120
👉
Test
150
👉
Test
180
👉
Test
210
👉
Test
240
👉
Test
270
👉
Test
300
👉
Test
330
👉
Test
360
👉
Test
390
👉
Test
420
👉
Test
450
👉
Test
480
👉
Test
510
👉
Test
540
👉
Test
570
👉
Test
600
👉
Test
630
👉
Test
660
👉
Test
690
👉
Test
720
👉
Test
750
👉
Test
780
👉
Test
810
👉
Test
840
👉
Test
870
👉
Test
900
👉
Test
930
👉
Test
960
👉
Test
990
👉
Test
1020
👉
Test
1050
👉
Test
1080
👉
Test
1110
👉
Test
1140
👉
Test
1170
With minimap
Name
Info
Progress
First Name
Last Name
Age
Visits
Activity
Profile Progress
Test
Test
0
0
0
0
Test
Test
30
100
100
100
Test
Test
60
200
200
200
Test
Test
90
300
300
300
Test
Test
120
400
400
400
Test
Test
150
500
500
500
Test
Test
180
600
600
600
Test
Test
210
700
700
700
Test
Test
240
800
800
800
Test
Test
270
900
900
900
Test
Test
300
1000
1000
1000
Test
Test
330
1100
1100
1100
Test
Test
360
1200
1200
1200
Test
Test
390
1300
1300
1300
Test
Test
420
1400
1400
1400
Test
Test
450
1500
1500
1500
Test
Test
480
1600
1600
1600
Test
Test
510
1700
1700
1700
Test
Test
540
1800
1800
1800
Test
Test
570
1900
1900
1900
Calendar
Age
Visits
Activity
Status
Profile Progress
January 1, 2020
0
0
0
0
0
30
100
100
100
100
60
200
200
200
200
90
300
300
300
300
120
400
400
400
400
January 2, 2020
150
500
500
500
500
180
600
600
600
600
210
700
700
700
700
240
800
800
800
800
270
900
900
900
900
January 3, 2020
300
1000
1000
1000
1000
330
1100
1100
1100
1100
360
1200
1200
1200
1200
390
1300
1300
1300
1300
420
1400
1400
1400
1400
January 4, 2020
450
1500
1500
1500
1500
480
1600
1600
1600
1600
510
1700
1700
1700
1700
540
1800
1800
1800
1800
570
1900
1900
1900
1900
January 5, 2020
600
2000
2000
2000
2000
630
2100
2100
2100
2100
660
2200
2200
2200
2200
690
2300
2300
2300
2300
720
2400
2400
2400
2400
January 6, 2020
750
2500
2500
2500
2500
780
2600
2600
2600
2600
810
2700
2700
2700
2700
840
2800
2800
2800
2800
870
2900
2900
2900
2900
January 7, 2020
900
3000
3000
3000
3000
930
3100
3100
3100
3100
960
3200
3200
3200
3200
990
3300
3300
3300
3300
1020
3400
3400
3400
3400
January 8, 2020
1050
3500
3500
3500
3500
1080
3600
3600
3600
3600
1110
3700
3700
3700
3700
1140
3800
3800
3800
3800
1170
3900
3900
3900
3900
Editable
First Name
Last Name
Age
Visits
Activity
Status
Table props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| getOnRowClickHandler | (row) => (row) => void | () => void | No | - | Callback on clicked row |
| getOnRowSelect | (rows) => void | () => void | No | - | Callback on selected row |
| height | string | number | No | - | Height of the table |
| isCellBorder | boolean | No | false | Divider between cells |
| maxHeight | string | number | No | - | Max height of the table |
| maxWidth | string | number | No | - | Max width of the table |
| rowGap | gap-0 | gap-1 | gap-2 | gap-3 | gap-4 | No | gap-1 | Gap between table body rows. TW class |
| rowSize | xs | sm | md | lg | xl | 2xl | No | md | Size of table rows |
| selectable | boolean | No | - | Allow rows to be selected |
| width | string | number | No | - | Width of the table |
| withFooter | boolean | No | - | Display table footer |
| updateMyData | () => void; | No | - | When cell renderer calls updateMyData |