Table component with optional pagination
Features:
- Uses URL params to navigate between pages / set current page
- Accepts array to configure columns
- Cells can be displayed by a custom render function
- Each cell can be optionall aligned to left, center or right
- Every cell of a specific column can take additional classes, for styling or other purposes
- Dark / Light mode ready
- Pagination can be enabled / disabled, in the latter case all items will be displayed
- Current page and items per page can be passed on instantiation (when pagination is enabled)
- Optional click entire row, or pass a custom render function to provide a specific click element
- Ellipsis (...) are applied when text doesn't fit in a cell
- Option to sort rows, automatically or pass a custom sort function
- Define density (rows internal vertical padding)
- Define row spacing
Id
Name
State
Quantity
f211addc-8fe3-4e73-b12c-ee754020b2a0
Orange
Orange
162756867077
e00411aa-8dfd-44c1-ae08-ffce5917d5d6
Grape
Grape
93493788680
12ffef8a-7e52-4997-a2cb-e38d78904845
Banana
Banana
205003717696
9c103098-b834-498a-adc8-12da99fc9538
Strawberry
Strawberry
233559506538
9d99169e-93b0-4bf6-bca3-5ad4f7b62378
Pear
Pear
120109071563
1import { Table } from '@tempoplatform/tpds/components/table/Table'
2import { useSearchParams } from 'next/navigation'
3import { useRouter } from 'next/navigation'
4
5
6const searchParams = useSearchParams()
7const router = useRouter()
8let page = searchParams.get('page')
9if (page) {
10 page = parseInt(page)
11} else {
12 page = 1
13}
14
15<Table
16 columns={tableColumns}
17 data={data}
18 pagination={true}
19 rowsPerPage={5}
20 router={router}
21 density="medium"
22 rowSpacing="low"
23 rowClick={(item, index) => alert('clicked item with id: ' + item.id)}
24 page={page}
25/>
26
27const tableColumns = [
28 {
29 label: 'Id',
30 propName: 'id',
31 },
32 {
33 label: 'Name',
34 propName: 'name',
35 addClass: 'font-bold',
36 enableSort: true,
37 },
38 {
39 label: 'State',
40 propName: 'state',
41 enableSort: true,
42 render: (item, index) => {
43 return (
44 <Tag
45 key={index}
46 label={item.name}
47 variant={getTagVariant(item.state)}
48 className="inline-flex self-start"
49 />
50 )
51 },
52 },
53 {
54 label: 'Quantity',
55 propName: 'quantity',
56 enableSort: true,
57 },
58 {
59 label: 'Actions',
60 propName: null,
61 align: 'right',
62 render: (item, index) => (
63 <svg
64 xmlns="http://www.w3.org/2000/svg"
65 fill="none"
66 viewBox="0 0 24 24"
67 strokeWidth={1.5}
68 stroke="currentColor"
69 className="cursor-pointer w-6 h-6 text-primary"
70 key={index}
71 onClick={() => alert('click item: ' + item.name)}
72 >
73 <path
74 strokeLinecap="round"
75 strokeLinejoin="round"
76 d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z"
77 />
78 </svg>
79 ),
80 },
81]
82
83const getTagVariant = campaignState => {
84 switch (campaignState) {
85 case 'ACTIVE':
86 return 'success'
87 case 'INACTIVE':
88 return 'warning'
89 case 'UPCOMING':
90 return 'info'
91 default:
92 return 'default'
93 }
94}
95
96const data = [
97 {
98 id: 'f211addc-8fe3-4e73-b12c-ee754020b2a0',
99 name: 'Orange',
100 quantity: 162756867077,
101 state: 'ACTIVE',
102 },
103 {
104 id: 'e00411aa-8dfd-44c1-ae08-ffce5917d5d6',
105 name: 'Grape',
106 quantity: 93493788680,
107 state: 'INACTIVE',
108 },
109 {
110 id: '12ffef8a-7e52-4997-a2cb-e38d78904845',
111 name: 'Banana',
112 quantity: 205003717696,
113 state: 'ACTIVE',
114 },
115 {
116 id: '9c103098-b834-498a-adc8-12da99fc9538',
117 name: 'Strawberry',
118 quantity: 233559506538,
119 state: 'ACTIVE',
120 },
121 {
122 id: '9d99169e-93b0-4bf6-bca3-5ad4f7b62378',
123 name: 'Pear',
124 quantity: 120109071563,
125 state: 'UPCOMING',
126 },
127 {
128 id: '00791166-8b69-4a5e-8c96-8af69e430210',
129 name: 'Pineapple',
130 quantity: 262939354976,
131 state: 'UPCOMING',
132 },
133 {
134 id: 'b4796640-664c-41ae-a3c1-de5cf29be387',
135 name: 'Blueberry',
136 quantity: 104208500516,
137 state: 'INACTIVE',
138 },
139 {
140 id: 'a5c5b832-088c-4220-a507-b5b184535c3f',
141 name: 'Apple',
142 quantity: 48856636279,
143 state: 'UPCOMING',
144 },
145 {
146 id: '4170b32a-e9c0-4822-b2a7-81aab51625af',
147 name: 'Mango',
148 quantity: 125426069604,
149 state: 'ACTIVE',
150 },
151 {
152 id: '7bd2984c-2da6-4567-8ed2-4542965c40cd',
153 name: 'Lemon',
154 quantity: 109314970672,
155 state: 'ACTIVE',
156 },
157 {
158 id: '66b98469-cf54-4f8d-b9bf-ff6a888edab2',
159 name: 'Kiwi',
160 quantity: 114027869935,
161 state: 'UPCOMING',
162 },
163 {
164 id: 'ee0e8f93-e9c2-4039-8ba8-b4ab2a899f6a',
165 name: 'Watermelon',
166 quantity: 195375309150,
167 state: 'INACTIVE',
168 },
169 {
170 id: '88e5af24-726c-4cbc-b240-c89d20cd0266',
171 name: 'Peach',
172 quantity: 228749120903,
173 state: 'ACTIVE',
174 },
175 {
176 id: '96f1319b-3106-4949-ae80-f61f5711acbd',
177 name: 'Maracuja',
178 quantity: 127008928254,
179 state: 'INACTIVE',
180 },
181 {
182 id: '58205bd1-d0b9-4641-9f0e-44a0566437f5',
183 name: 'Lime',
184 quantity: 246922784751,
185 state: 'ACTIVE',
186 },
187 {
188 id: '200949f4-1404-4c0d-b2b5-242385d67922',
189 name: 'Pomegrenate',
190 quantity: 98473295591,
191 state: 'ACTIVE',
192 },
193 {
194 id: 'caee91e1-8ec3-4c0a-8ea7-e35621a1fb5a',
195 name: 'Cranberry',
196 quantity: 139727530843,
197 state: 'UPCOMING',
198 },
199 {
200 id: '80aac484-b3e9-4f2a-980a-556479af47ae',
201 name: 'Raspberry',
202 quantity: 218871853404,
203 state: 'INACTIVE',
204 },
205 {
206 id: '66cd61ca-fb4d-475c-87b0-e204f5fade1c',
207 name: 'Blackberry',
208 quantity: 293278713861,
209 state: 'ACTIVE',
210 },
211 {
212 id: '331fb692-5476-4751-9f5c-ff47d4c42523',
213 name: 'Mandarin',
214 quantity: 276906705201,
215 state: 'INACTIVE',
216 },
217]Table general props
Prop Name
Type
Default
Required
Description
columns
Array
null
yes
An array defining the columns of the table.
data
Array
null
yes
The items to be displayed in the table.
pagination
Boolean
true
no
If true, pagination will be enabled. If false, all items will be displayed.
router
Component
null
no
Only required when pagination is active. Used to navigate between pages.
rowsPerPage
Number
10
no
The number of items to be displayed per page. Only used when pagination is enabled.
rowClick
Boolean
null
no
If true, the entire row will be clickable. An hover effect will be added.
page
Number
1
no
The current page. Only used when pagination is enabled.
rowKey
String
null
yes
The key to be used as unique identifier for each row.
density
String
low
no
The density of the table. Can be 'low', 'medium' or 'high'. Defines vertical padding inside rows
rowSpacing
String
low
no
The spacing between rows. Can be 'none', 'low', 'medium' or 'high'. Defines vertical margin between rows
Table data items props
Prop Name
Type
Default
Required
Description
label
String
null
yes
The label to be displayed in the table header.
name
String
null
yes
The property name to get the value to display in the cell.
addClass
String
""
no
Additional classes to be added to every cell of this column.
enableSort
Boolean
false
no
If true, the column will be sortable.
sortFunction
Function
null
no
A custom sort function to be used when sorting this column. Otherwise falls to automatic sorting.