Source
The component uses
Example - markdown w/o alignments
| Item | In Stock | Price |
|---|---|---|
| Python Hat | True | 23.99 |
| SQL Hat | True | 23.99 |
| Codecademy Tee | False | 19.99 |
| Codecademy Hoodie | False | 42.99 |
1
2
3
4
5
6
7
| Item | In Stock | Price |
| ----------------- | -------- | ----- |
| Python Hat | True | 23.99 |
| SQL Hat | True | 23.99 |
| Codecademy Tee | False | 19.99 |
| Codecademy Hoodie | False | 42.99 |
Example - markdown w/ alignments
| Item | In Stock | Price |
|---|---|---|
| Python Hat | True | 23.99 |
| SQL Hat | True | 23.99 |
| Codecademy Tee | False | 19.99 |
| Codecademy Hoodie | False | 42.99 |
1
2
3
4
5
6
7
| Item | In Stock | Price |
| :---------------- | :------: | ----: |
| Python Hat | True | 23.99 |
| SQL Hat | True | 23.99 |
| Codecademy Tee | False | 19.99 |
| Codecademy Hoodie | False | 42.99 |
Example - table builder
Item | In Stock | Price |
|---|---|---|
| Python Hat | true | 13.99 |
| SQL Hat | true | 23.99 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<TableBuilder
columns={[
{
id: 'item',
title: 'Item'
},
{
id: 'inStock',
title: 'In Stock'
},
{
id: 'price',
title: 'Price'
}
]}
data={[
{
inStock: true,
item: 'Python Hat',
price: '13.99'
},
{
inStock: true,
item: 'SQL Hat',
price: '23.99'
}
]}
/>Example - data table builder
| pending | m@example.com | 101 |
| pending | m@example.com | 102 |
| active | m3@example.com | 103 |
| retired | m@example.com | 104 |
| active | m@example.com | 105 |
| pending | m@example.com | 101 |
| pending | m@example.com | 102 |
| active | m3@example.com | 103 |
| retired | m@example.com | 104 |
| active | m@example.com | 105 |
Rows per page
Page 1 of 2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<DataTableBuilder
columns={[
{
id: 'status',
title: 'Status'
},
{
id: 'email',
title: 'Email'
},
{
id: 'amount',
title: 'Amount'
}
]}
data={[
{
amount: 101,
email: 'm@example.com',
id: '1',
status: 'pending'
},
{
amount: 102,
email: 'm@example.com',
id: '2',
status: 'pending'
},
{
amount: 103,
email: 'm3@example.com',
id: '3',
status: 'active'
},
{
amount: 104,
email: 'm@example.com',
id: '4',
status: 'retired'
},
{
amount: 105,
email: 'm@example.com',
id: '5',
status: 'active'
},
{
amount: 101,
email: 'm@example.com',
id: '1',
status: 'pending'
},
{
amount: 102,
email: 'm@example.com',
id: '2',
status: 'pending'
},
{
amount: 103,
email: 'm3@example.com',
id: '3',
status: 'active'
},
{
amount: 104,
email: 'm@example.com',
id: '4',
status: 'retired'
},
{
amount: 105,
email: 'm@example.com',
id: '5',
status: 'active'
},
{
amount: 101,
email: 'm@example.com',
id: '1',
status: 'pending'
},
{
amount: 102,
email: 'm@example.com',
id: '2',
status: 'pending'
},
{
amount: 103,
email: 'm3@example.com',
id: '3',
status: 'active'
},
{
amount: 104,
email: 'm@example.com',
id: '4',
status: 'retired'
},
{
amount: 105,
email: 'm@example.com',
id: '5',
status: 'active'
}
]}
/>