flowbite-mcp 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.md +21 -0
- package/README.md +324 -0
- package/build/index.js +975 -0
- package/build/server-runner.js +228 -0
- package/data/components/accordion.md +860 -0
- package/data/components/alerts.md +739 -0
- package/data/components/avatar.md +178 -0
- package/data/components/badge.md +420 -0
- package/data/components/banner.md +145 -0
- package/data/components/bottom-navigation.md +513 -0
- package/data/components/breadcrumb.md +273 -0
- package/data/components/button-group.md +410 -0
- package/data/components/buttons.md +405 -0
- package/data/components/card.md +711 -0
- package/data/components/carousel.md +858 -0
- package/data/components/chat-bubble.md +1063 -0
- package/data/components/clipboard.md +1029 -0
- package/data/components/datepicker.md +673 -0
- package/data/components/device-mockups.md +152 -0
- package/data/components/drawer.md +1353 -0
- package/data/components/dropdowns.md +1925 -0
- package/data/components/footer.md +299 -0
- package/data/components/forms.md +371 -0
- package/data/components/gallery.md +322 -0
- package/data/components/indicators.md +262 -0
- package/data/components/jumbotron.md +213 -0
- package/data/components/kbd.md +217 -0
- package/data/components/list-group.md +365 -0
- package/data/components/mega-menu.md +558 -0
- package/data/components/modal.md +1309 -0
- package/data/components/navbar.md +1053 -0
- package/data/components/pagination.md +472 -0
- package/data/components/popover.md +826 -0
- package/data/components/progress.md +95 -0
- package/data/components/qr-code.md +280 -0
- package/data/components/rating.md +323 -0
- package/data/components/sidebar.md +1067 -0
- package/data/components/skeleton.md +221 -0
- package/data/components/speed-dial.md +1270 -0
- package/data/components/spinner.md +222 -0
- package/data/components/stepper.md +271 -0
- package/data/components/tables.md +3127 -0
- package/data/components/tabs.md +808 -0
- package/data/components/timeline.md +304 -0
- package/data/components/toast.md +341 -0
- package/data/components/tooltips.md +524 -0
- package/data/components/typography.md +269 -0
- package/data/components/video.md +95 -0
- package/data/forms/checkbox.md +375 -0
- package/data/forms/file-input.md +98 -0
- package/data/forms/floating-label.md +185 -0
- package/data/forms/input-field.md +222 -0
- package/data/forms/number-input.md +1099 -0
- package/data/forms/phone-input.md +577 -0
- package/data/forms/radio.md +315 -0
- package/data/forms/range.md +83 -0
- package/data/forms/search-input.md +280 -0
- package/data/forms/select.md +259 -0
- package/data/forms/textarea.md +155 -0
- package/data/forms/timepicker.md +732 -0
- package/data/forms/toggle.md +176 -0
- package/data/plugins/charts.md +2683 -0
- package/data/plugins/datatables.md +1922 -0
- package/data/plugins/datepicker.md +5 -0
- package/data/plugins/wysiwyg.md +2377 -0
- package/data/quickstart.md +169 -0
- package/data/theme.md +231 -0
- package/data/toc.md +79 -0
- package/data/typography/blockquote.md +182 -0
- package/data/typography/headings.md +174 -0
- package/data/typography/hr.md +74 -0
- package/data/typography/images.md +168 -0
- package/data/typography/links.md +118 -0
- package/data/typography/lists.md +387 -0
- package/data/typography/paragraphs.md +186 -0
- package/data/typography/text.md +249 -0
- package/package.json +71 -0
|
@@ -0,0 +1,3127 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: docs
|
|
3
|
+
title: Tailwind CSS Table - Flowbite
|
|
4
|
+
description: Use the table component to show text, images, links, and other elements inside a structured set of data made up of rows and columns of table cells
|
|
5
|
+
group: components
|
|
6
|
+
toc: true
|
|
7
|
+
|
|
8
|
+
previous: Stepper
|
|
9
|
+
previousLink: components/stepper/
|
|
10
|
+
next: Tabs
|
|
11
|
+
nextLink: components/tabs/
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
The table component represents a set of structured elements made up of rows and columns as table cells that can be used to show data sets to your website users.
|
|
15
|
+
|
|
16
|
+
Get started with multiple variants and styles of these table components built with the utility classes from Tailwind CSS and components from Flowbite.
|
|
17
|
+
|
|
18
|
+
## Default table
|
|
19
|
+
|
|
20
|
+
Use the following example of a responsive table component to show multiple rows and columns of text data.
|
|
21
|
+
|
|
22
|
+
{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
|
|
23
|
+
|
|
24
|
+
<div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
|
|
25
|
+
<table class="w-full text-sm text-left rtl:text-right text-body">
|
|
26
|
+
<thead class="text-sm text-body bg-neutral-secondary-soft border-b rounded-base border-default">
|
|
27
|
+
<tr>
|
|
28
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
29
|
+
Product name
|
|
30
|
+
</th>
|
|
31
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
32
|
+
Color
|
|
33
|
+
</th>
|
|
34
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
35
|
+
Category
|
|
36
|
+
</th>
|
|
37
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
38
|
+
Price
|
|
39
|
+
</th>
|
|
40
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
41
|
+
Stock
|
|
42
|
+
</th>
|
|
43
|
+
</tr>
|
|
44
|
+
</thead>
|
|
45
|
+
<tbody>
|
|
46
|
+
<tr class="bg-neutral-primary border-b border-default">
|
|
47
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
48
|
+
Apple MacBook Pro 17"
|
|
49
|
+
</th>
|
|
50
|
+
<td class="px-6 py-4">
|
|
51
|
+
Silver
|
|
52
|
+
</td>
|
|
53
|
+
<td class="px-6 py-4">
|
|
54
|
+
Laptop
|
|
55
|
+
</td>
|
|
56
|
+
<td class="px-6 py-4">
|
|
57
|
+
$2999
|
|
58
|
+
</td>
|
|
59
|
+
<td class="px-6 py-4">
|
|
60
|
+
231
|
|
61
|
+
</td>
|
|
62
|
+
</tr>
|
|
63
|
+
<tr class="bg-neutral-primary border-b border-default">
|
|
64
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
65
|
+
Microsoft Surface Pro
|
|
66
|
+
</th>
|
|
67
|
+
<td class="px-6 py-4">
|
|
68
|
+
White
|
|
69
|
+
</td>
|
|
70
|
+
<td class="px-6 py-4">
|
|
71
|
+
Laptop PC
|
|
72
|
+
</td>
|
|
73
|
+
<td class="px-6 py-4">
|
|
74
|
+
$1999
|
|
75
|
+
</td>
|
|
76
|
+
<td class="px-6 py-4">
|
|
77
|
+
423
|
|
78
|
+
</td>
|
|
79
|
+
</tr>
|
|
80
|
+
<tr class="bg-neutral-primary">
|
|
81
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
82
|
+
Magic Mouse 2
|
|
83
|
+
</th>
|
|
84
|
+
<td class="px-6 py-4">
|
|
85
|
+
Black
|
|
86
|
+
</td>
|
|
87
|
+
<td class="px-6 py-4">
|
|
88
|
+
Accessories
|
|
89
|
+
</td>
|
|
90
|
+
<td class="px-6 py-4">
|
|
91
|
+
$99
|
|
92
|
+
</td>
|
|
93
|
+
<td class="px-6 py-4">
|
|
94
|
+
121
|
|
95
|
+
</td>
|
|
96
|
+
</tr>
|
|
97
|
+
</tbody>
|
|
98
|
+
</table>
|
|
99
|
+
</div>
|
|
100
|
+
{{< /example >}}
|
|
101
|
+
|
|
102
|
+
## Highlight
|
|
103
|
+
|
|
104
|
+
Accentuate certain elements inside the table such as the rows, columns or data cells based on your needs.
|
|
105
|
+
|
|
106
|
+
### Striped rows
|
|
107
|
+
|
|
108
|
+
Use this example to increase the readability of the data sets by alternating the background color of every second table row.
|
|
109
|
+
|
|
110
|
+
{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
|
|
111
|
+
|
|
112
|
+
<div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
|
|
113
|
+
<table class="w-full text-sm text-left rtl:text-right text-body">
|
|
114
|
+
<thead class="bg-neutral-secondary-soft border-b border-default">
|
|
115
|
+
<tr>
|
|
116
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
117
|
+
Product name
|
|
118
|
+
</th>
|
|
119
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
120
|
+
Color
|
|
121
|
+
</th>
|
|
122
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
123
|
+
Category
|
|
124
|
+
</th>
|
|
125
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
126
|
+
Price
|
|
127
|
+
</th>
|
|
128
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
129
|
+
Action
|
|
130
|
+
</th>
|
|
131
|
+
</tr>
|
|
132
|
+
</thead>
|
|
133
|
+
<tbody>
|
|
134
|
+
<tr class="odd:bg-neutral-primary even:bg-neutral-secondary-soft border-b border-default">
|
|
135
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
136
|
+
Apple MacBook Pro 17"
|
|
137
|
+
</th>
|
|
138
|
+
<td class="px-6 py-4">
|
|
139
|
+
Silver
|
|
140
|
+
</td>
|
|
141
|
+
<td class="px-6 py-4">
|
|
142
|
+
Laptop
|
|
143
|
+
</td>
|
|
144
|
+
<td class="px-6 py-4">
|
|
145
|
+
$2999
|
|
146
|
+
</td>
|
|
147
|
+
<td class="px-6 py-4">
|
|
148
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
149
|
+
</td>
|
|
150
|
+
</tr>
|
|
151
|
+
<tr class="odd:bg-neutral-primary even:bg-neutral-secondary-soft border-b border-default">
|
|
152
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
153
|
+
Microsoft Surface Pro
|
|
154
|
+
</th>
|
|
155
|
+
<td class="px-6 py-4">
|
|
156
|
+
White
|
|
157
|
+
</td>
|
|
158
|
+
<td class="px-6 py-4">
|
|
159
|
+
Laptop PC
|
|
160
|
+
</td>
|
|
161
|
+
<td class="px-6 py-4">
|
|
162
|
+
$1999
|
|
163
|
+
</td>
|
|
164
|
+
<td class="px-6 py-4">
|
|
165
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
166
|
+
</td>
|
|
167
|
+
</tr>
|
|
168
|
+
<tr class="odd:bg-neutral-primary even:bg-neutral-secondary-soft border-b border-default">
|
|
169
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
170
|
+
Magic Mouse 2
|
|
171
|
+
</th>
|
|
172
|
+
<td class="px-6 py-4">
|
|
173
|
+
Black
|
|
174
|
+
</td>
|
|
175
|
+
<td class="px-6 py-4">
|
|
176
|
+
Accessories
|
|
177
|
+
</td>
|
|
178
|
+
<td class="px-6 py-4">
|
|
179
|
+
$99
|
|
180
|
+
</td>
|
|
181
|
+
<td class="px-6 py-4">
|
|
182
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
183
|
+
</td>
|
|
184
|
+
</tr>
|
|
185
|
+
<tr class="odd:bg-neutral-primary even:bg-neutral-secondary-soft border-b border-default">
|
|
186
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
187
|
+
Google Pixel Phone
|
|
188
|
+
</th>
|
|
189
|
+
<td class="px-6 py-4">
|
|
190
|
+
Gray
|
|
191
|
+
</td>
|
|
192
|
+
<td class="px-6 py-4">
|
|
193
|
+
Phone
|
|
194
|
+
</td>
|
|
195
|
+
<td class="px-6 py-4">
|
|
196
|
+
$799
|
|
197
|
+
</td>
|
|
198
|
+
<td class="px-6 py-4">
|
|
199
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
200
|
+
</td>
|
|
201
|
+
</tr>
|
|
202
|
+
<tr class="odd:bg-neutral-primary even:bg-neutral-secondary-soft">
|
|
203
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
204
|
+
Apple Watch 5
|
|
205
|
+
</th>
|
|
206
|
+
<td class="px-6 py-4">
|
|
207
|
+
Red
|
|
208
|
+
</td>
|
|
209
|
+
<td class="px-6 py-4">
|
|
210
|
+
Wearables
|
|
211
|
+
</td>
|
|
212
|
+
<td class="px-6 py-4">
|
|
213
|
+
$999
|
|
214
|
+
</td>
|
|
215
|
+
<td class="px-6 py-4">
|
|
216
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
217
|
+
</td>
|
|
218
|
+
</tr>
|
|
219
|
+
</tbody>
|
|
220
|
+
</table>
|
|
221
|
+
</div>
|
|
222
|
+
{{< /example >}}
|
|
223
|
+
|
|
224
|
+
### Striped columns
|
|
225
|
+
|
|
226
|
+
Use this example to increase the readability of the table cells by alternating the background color of every second table column.
|
|
227
|
+
|
|
228
|
+
{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
|
|
229
|
+
|
|
230
|
+
<div class="relative overflow-x-auto bg-neutral-primary shadow-xs rounded-base border border-default">
|
|
231
|
+
<table class="w-full text-sm text-left rtl:text-right text-body">
|
|
232
|
+
<thead class="text-sm text-body border-b border-default">
|
|
233
|
+
<tr>
|
|
234
|
+
<th scope="col" class="px-6 py-3 bg-neutral-secondary-soft font-medium">
|
|
235
|
+
Product name
|
|
236
|
+
</th>
|
|
237
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
238
|
+
Color
|
|
239
|
+
</th>
|
|
240
|
+
<th scope="col" class="px-6 py-3 bg-neutral-secondary-soft font-medium">
|
|
241
|
+
Category
|
|
242
|
+
</th>
|
|
243
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
244
|
+
Price
|
|
245
|
+
</th>
|
|
246
|
+
</tr>
|
|
247
|
+
</thead>
|
|
248
|
+
<tbody>
|
|
249
|
+
<tr class="border-b border-default">
|
|
250
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap bg-neutral-secondary-soft">
|
|
251
|
+
Apple MacBook Pro 17"
|
|
252
|
+
</th>
|
|
253
|
+
<td class="px-6 py-4">
|
|
254
|
+
Silver
|
|
255
|
+
</td>
|
|
256
|
+
<td class="px-6 py-4 bg-neutral-secondary-soft">
|
|
257
|
+
Laptop
|
|
258
|
+
</td>
|
|
259
|
+
<td class="px-6 py-4">
|
|
260
|
+
$2999
|
|
261
|
+
</td>
|
|
262
|
+
</tr>
|
|
263
|
+
<tr class="border-b border-default">
|
|
264
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap bg-neutral-secondary-soft">
|
|
265
|
+
Microsoft Surface Pro
|
|
266
|
+
</th>
|
|
267
|
+
<td class="px-6 py-4">
|
|
268
|
+
White
|
|
269
|
+
</td>
|
|
270
|
+
<td class="px-6 py-4 bg-neutral-secondary-soft">
|
|
271
|
+
Laptop PC
|
|
272
|
+
</td>
|
|
273
|
+
<td class="px-6 py-4">
|
|
274
|
+
$1999
|
|
275
|
+
</td>
|
|
276
|
+
</tr>
|
|
277
|
+
<tr class="border-b border-default">
|
|
278
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap bg-neutral-secondary-soft">
|
|
279
|
+
Magic Mouse 2
|
|
280
|
+
</th>
|
|
281
|
+
<td class="px-6 py-4">
|
|
282
|
+
Black
|
|
283
|
+
</td>
|
|
284
|
+
<td class="px-6 py-4 bg-neutral-secondary-soft">
|
|
285
|
+
Accessories
|
|
286
|
+
</td>
|
|
287
|
+
<td class="px-6 py-4">
|
|
288
|
+
$99
|
|
289
|
+
</td>
|
|
290
|
+
</tr>
|
|
291
|
+
<tr class="border-b border-default">
|
|
292
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap bg-neutral-secondary-soft">
|
|
293
|
+
Google Pixel Phone
|
|
294
|
+
</th>
|
|
295
|
+
<td class="px-6 py-4">
|
|
296
|
+
Gray
|
|
297
|
+
</td>
|
|
298
|
+
<td class="px-6 py-4 bg-neutral-secondary-soft">
|
|
299
|
+
Phone
|
|
300
|
+
</td>
|
|
301
|
+
<td class="px-6 py-4">
|
|
302
|
+
$799
|
|
303
|
+
</td>
|
|
304
|
+
</tr>
|
|
305
|
+
<tr>
|
|
306
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap bg-neutral-secondary-soft">
|
|
307
|
+
Apple Watch 5
|
|
308
|
+
</th>
|
|
309
|
+
<td class="px-6 py-4">
|
|
310
|
+
Red
|
|
311
|
+
</td>
|
|
312
|
+
<td class="px-6 py-4 bg-neutral-secondary-soft">
|
|
313
|
+
Wearables
|
|
314
|
+
</td>
|
|
315
|
+
<td class="px-6 py-4">
|
|
316
|
+
$999
|
|
317
|
+
</td>
|
|
318
|
+
</tr>
|
|
319
|
+
</tbody>
|
|
320
|
+
</table>
|
|
321
|
+
</div>
|
|
322
|
+
{{< /example >}}
|
|
323
|
+
|
|
324
|
+
### Hover state
|
|
325
|
+
|
|
326
|
+
Use the `hover:{bg-*}` utility class from Tailwind CSS to change the background color of a data row when hovering over the element with the cursor.
|
|
327
|
+
|
|
328
|
+
{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
|
|
329
|
+
|
|
330
|
+
<div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
|
|
331
|
+
<table class="w-full text-sm text-left rtl:text-right text-body">
|
|
332
|
+
<thead class="text-sm text-body bg-neutral-secondary-medium border-b border-default-medium">
|
|
333
|
+
<tr>
|
|
334
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
335
|
+
Product name
|
|
336
|
+
</th>
|
|
337
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
338
|
+
Color
|
|
339
|
+
</th>
|
|
340
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
341
|
+
Category
|
|
342
|
+
</th>
|
|
343
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
344
|
+
Price
|
|
345
|
+
</th>
|
|
346
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
347
|
+
<span class="sr-only">Edit</span>
|
|
348
|
+
</th>
|
|
349
|
+
</tr>
|
|
350
|
+
</thead>
|
|
351
|
+
<tbody>
|
|
352
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
353
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
354
|
+
Apple MacBook Pro 17"
|
|
355
|
+
</th>
|
|
356
|
+
<td class="px-6 py-4">
|
|
357
|
+
Silver
|
|
358
|
+
</td>
|
|
359
|
+
<td class="px-6 py-4">
|
|
360
|
+
Laptop
|
|
361
|
+
</td>
|
|
362
|
+
<td class="px-6 py-4">
|
|
363
|
+
$2999
|
|
364
|
+
</td>
|
|
365
|
+
<td class="px-6 py-4 text-right">
|
|
366
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
367
|
+
</td>
|
|
368
|
+
</tr>
|
|
369
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
370
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
371
|
+
Microsoft Surface Pro
|
|
372
|
+
</th>
|
|
373
|
+
<td class="px-6 py-4">
|
|
374
|
+
White
|
|
375
|
+
</td>
|
|
376
|
+
<td class="px-6 py-4">
|
|
377
|
+
Laptop PC
|
|
378
|
+
</td>
|
|
379
|
+
<td class="px-6 py-4">
|
|
380
|
+
$1999
|
|
381
|
+
</td>
|
|
382
|
+
<td class="px-6 py-4 text-right">
|
|
383
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
384
|
+
</td>
|
|
385
|
+
</tr>
|
|
386
|
+
<tr class="bg-neutral-primary-soft hover:bg-neutral-secondary-medium">
|
|
387
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
388
|
+
Magic Mouse 2
|
|
389
|
+
</th>
|
|
390
|
+
<td class="px-6 py-4">
|
|
391
|
+
Black
|
|
392
|
+
</td>
|
|
393
|
+
<td class="px-6 py-4">
|
|
394
|
+
Accessories
|
|
395
|
+
</td>
|
|
396
|
+
<td class="px-6 py-4">
|
|
397
|
+
$99
|
|
398
|
+
</td>
|
|
399
|
+
<td class="px-6 py-4 text-right">
|
|
400
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
401
|
+
</td>
|
|
402
|
+
</tr>
|
|
403
|
+
</tbody>
|
|
404
|
+
</table>
|
|
405
|
+
</div>
|
|
406
|
+
{{< /example >}}
|
|
407
|
+
|
|
408
|
+
## Table layout
|
|
409
|
+
|
|
410
|
+
Use the following examples of table layouts to show the head, foot or caption of the table.
|
|
411
|
+
|
|
412
|
+
### Table head (sortable)
|
|
413
|
+
|
|
414
|
+
This example can be used to show the head of the table component with sortable icons.
|
|
415
|
+
|
|
416
|
+
{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
|
|
417
|
+
|
|
418
|
+
<div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
|
|
419
|
+
<table class="w-full text-sm text-left rtl:text-right text-body">
|
|
420
|
+
<thead class="text-sm text-body bg-neutral-secondary-medium border-b border-default-medium">
|
|
421
|
+
<tr>
|
|
422
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
423
|
+
Product name
|
|
424
|
+
</th>
|
|
425
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
426
|
+
<div class="flex items-center">
|
|
427
|
+
Color
|
|
428
|
+
<a href="#">
|
|
429
|
+
<svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/></svg>
|
|
430
|
+
</a>
|
|
431
|
+
</div>
|
|
432
|
+
</th>
|
|
433
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
434
|
+
<div class="flex items-center">
|
|
435
|
+
Category
|
|
436
|
+
<a href="#">
|
|
437
|
+
<svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/></svg>
|
|
438
|
+
</a>
|
|
439
|
+
</div>
|
|
440
|
+
</th>
|
|
441
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
442
|
+
<div class="flex items-center">
|
|
443
|
+
Price
|
|
444
|
+
<a href="#">
|
|
445
|
+
<svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/></svg>
|
|
446
|
+
</a>
|
|
447
|
+
</div>
|
|
448
|
+
</th>
|
|
449
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
450
|
+
<span class="sr-only">Edit</span>
|
|
451
|
+
</th>
|
|
452
|
+
</tr>
|
|
453
|
+
</thead>
|
|
454
|
+
<tbody>
|
|
455
|
+
<tr class="bg-neutral-primary-soft border-b border-default">
|
|
456
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
457
|
+
Apple MacBook Pro 17"
|
|
458
|
+
</th>
|
|
459
|
+
<td class="px-6 py-4">
|
|
460
|
+
Silver
|
|
461
|
+
</td>
|
|
462
|
+
<td class="px-6 py-4">
|
|
463
|
+
Laptop
|
|
464
|
+
</td>
|
|
465
|
+
<td class="px-6 py-4">
|
|
466
|
+
$2999
|
|
467
|
+
</td>
|
|
468
|
+
<td class="px-6 py-4 text-right">
|
|
469
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
470
|
+
</td>
|
|
471
|
+
</tr>
|
|
472
|
+
<tr class="bg-neutral-primary-soft border-b border-default">
|
|
473
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
474
|
+
Microsoft Surface Pro
|
|
475
|
+
</th>
|
|
476
|
+
<td class="px-6 py-4">
|
|
477
|
+
White
|
|
478
|
+
</td>
|
|
479
|
+
<td class="px-6 py-4">
|
|
480
|
+
Laptop PC
|
|
481
|
+
</td>
|
|
482
|
+
<td class="px-6 py-4">
|
|
483
|
+
$1999
|
|
484
|
+
</td>
|
|
485
|
+
<td class="px-6 py-4 text-right">
|
|
486
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
487
|
+
</td>
|
|
488
|
+
</tr>
|
|
489
|
+
<tr class="bg-neutral-primary-soft">
|
|
490
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
491
|
+
Magic Mouse 2
|
|
492
|
+
</th>
|
|
493
|
+
<td class="px-6 py-4">
|
|
494
|
+
Black
|
|
495
|
+
</td>
|
|
496
|
+
<td class="px-6 py-4">
|
|
497
|
+
Accessories
|
|
498
|
+
</td>
|
|
499
|
+
<td class="px-6 py-4">
|
|
500
|
+
$99
|
|
501
|
+
</td>
|
|
502
|
+
<td class="px-6 py-4 text-right">
|
|
503
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
504
|
+
</td>
|
|
505
|
+
</tr>
|
|
506
|
+
</tbody>
|
|
507
|
+
</table>
|
|
508
|
+
</div>
|
|
509
|
+
{{< /example >}}
|
|
510
|
+
|
|
511
|
+
### Table foot
|
|
512
|
+
|
|
513
|
+
Use this example where the `<tfoot>` HTML element can be used in conjunction with the head and caption of the table component.
|
|
514
|
+
|
|
515
|
+
{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
|
|
516
|
+
|
|
517
|
+
<div class="relative overflow-x-auto">
|
|
518
|
+
<table class="w-full text-sm text-left rtl:text-right text-body">
|
|
519
|
+
<thead class="text-sm text-body bg-neutral-secondary-medium">
|
|
520
|
+
<tr>
|
|
521
|
+
<th scope="col" class="px-6 py-3 rounded-s-base font-medium">
|
|
522
|
+
Product name
|
|
523
|
+
</th>
|
|
524
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
525
|
+
Qty
|
|
526
|
+
</th>
|
|
527
|
+
<th scope="col" class="px-6 py-3 rounded-e-base font-medium">
|
|
528
|
+
Price
|
|
529
|
+
</th>
|
|
530
|
+
</tr>
|
|
531
|
+
</thead>
|
|
532
|
+
<tbody>
|
|
533
|
+
<tr class="bg-neutral-primary">
|
|
534
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
535
|
+
Apple MacBook Pro 17"
|
|
536
|
+
</th>
|
|
537
|
+
<td class="px-6 py-4">
|
|
538
|
+
1
|
|
539
|
+
</td>
|
|
540
|
+
<td class="px-6 py-4">
|
|
541
|
+
$2999
|
|
542
|
+
</td>
|
|
543
|
+
</tr>
|
|
544
|
+
<tr class="bg-neutral-primary">
|
|
545
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
546
|
+
Microsoft Surface Pro
|
|
547
|
+
</th>
|
|
548
|
+
<td class="px-6 py-4">
|
|
549
|
+
1
|
|
550
|
+
</td>
|
|
551
|
+
<td class="px-6 py-4">
|
|
552
|
+
$1999
|
|
553
|
+
</td>
|
|
554
|
+
</tr>
|
|
555
|
+
<tr class="bg-neutral-primary">
|
|
556
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
557
|
+
Magic Mouse 2
|
|
558
|
+
</th>
|
|
559
|
+
<td class="px-6 py-4">
|
|
560
|
+
1
|
|
561
|
+
</td>
|
|
562
|
+
<td class="px-6 py-4">
|
|
563
|
+
$99
|
|
564
|
+
</td>
|
|
565
|
+
</tr>
|
|
566
|
+
</tbody>
|
|
567
|
+
<tfoot>
|
|
568
|
+
<tr class="font-semibold text-heading">
|
|
569
|
+
<th scope="row" class="px-6 py-3 text-base">Total</th>
|
|
570
|
+
<td class="px-6 py-3">3</td>
|
|
571
|
+
<td class="px-6 py-3">21,000</td>
|
|
572
|
+
</tr>
|
|
573
|
+
</tfoot>
|
|
574
|
+
</table>
|
|
575
|
+
</div>
|
|
576
|
+
{{< /example >}}
|
|
577
|
+
|
|
578
|
+
### Table caption
|
|
579
|
+
|
|
580
|
+
Improve accessibility by using a caption inside the table as a heading to better describe what the table is about for screen readers.
|
|
581
|
+
|
|
582
|
+
{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
|
|
583
|
+
|
|
584
|
+
<div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
|
|
585
|
+
<table class="w-full text-sm text-left rtl:text-right text-body">
|
|
586
|
+
<caption class="p-5 text-lg font-medium text-left rtl:text-right text-heading">
|
|
587
|
+
Our products
|
|
588
|
+
<p class="mt-1.5 text-sm font-normal text-body">Browse a list of Flowbite products designed to help you work and play, stay organized, get answers, keep in touch, grow your business, and more.</p>
|
|
589
|
+
</caption>
|
|
590
|
+
<thead class="text-sm text-body bg-neutral-secondary-medium border-b border-t border-default-medium">
|
|
591
|
+
<tr>
|
|
592
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
593
|
+
Product name
|
|
594
|
+
</th>
|
|
595
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
596
|
+
Color
|
|
597
|
+
</th>
|
|
598
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
599
|
+
Category
|
|
600
|
+
</th>
|
|
601
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
602
|
+
Price
|
|
603
|
+
</th>
|
|
604
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
605
|
+
<span class="sr-only">Edit</span>
|
|
606
|
+
</th>
|
|
607
|
+
</tr>
|
|
608
|
+
</thead>
|
|
609
|
+
<tbody>
|
|
610
|
+
<tr class="bg-neutral-primary-soft border-b border-default">
|
|
611
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
612
|
+
Apple MacBook Pro 17"
|
|
613
|
+
</th>
|
|
614
|
+
<td class="px-6 py-4">
|
|
615
|
+
Silver
|
|
616
|
+
</td>
|
|
617
|
+
<td class="px-6 py-4">
|
|
618
|
+
Laptop
|
|
619
|
+
</td>
|
|
620
|
+
<td class="px-6 py-4">
|
|
621
|
+
$2999
|
|
622
|
+
</td>
|
|
623
|
+
<td class="px-6 py-4 text-right">
|
|
624
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
625
|
+
</td>
|
|
626
|
+
</tr>
|
|
627
|
+
<tr class="bg-neutral-primary-soft border-b border-default">
|
|
628
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
629
|
+
Microsoft Surface Pro
|
|
630
|
+
</th>
|
|
631
|
+
<td class="px-6 py-4">
|
|
632
|
+
White
|
|
633
|
+
</td>
|
|
634
|
+
<td class="px-6 py-4">
|
|
635
|
+
Laptop PC
|
|
636
|
+
</td>
|
|
637
|
+
<td class="px-6 py-4">
|
|
638
|
+
$1999
|
|
639
|
+
</td>
|
|
640
|
+
<td class="px-6 py-4 text-right">
|
|
641
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
642
|
+
</td>
|
|
643
|
+
</tr>
|
|
644
|
+
<tr class="bg-neutral-primary-soft">
|
|
645
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
646
|
+
Magic Mouse 2
|
|
647
|
+
</th>
|
|
648
|
+
<td class="px-6 py-4">
|
|
649
|
+
Black
|
|
650
|
+
</td>
|
|
651
|
+
<td class="px-6 py-4">
|
|
652
|
+
Accessories
|
|
653
|
+
</td>
|
|
654
|
+
<td class="px-6 py-4">
|
|
655
|
+
$99
|
|
656
|
+
</td>
|
|
657
|
+
<td class="px-6 py-4 text-right">
|
|
658
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
659
|
+
</td>
|
|
660
|
+
</tr>
|
|
661
|
+
</tbody>
|
|
662
|
+
</table>
|
|
663
|
+
</div>
|
|
664
|
+
{{< /example >}}
|
|
665
|
+
|
|
666
|
+
## Table styles
|
|
667
|
+
|
|
668
|
+
Get started with the following table styles and choose the one that best fits your application.
|
|
669
|
+
|
|
670
|
+
### Without border
|
|
671
|
+
|
|
672
|
+
Use this example of a table component without any border between the table cells.
|
|
673
|
+
|
|
674
|
+
{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
|
|
675
|
+
|
|
676
|
+
<div class="relative overflow-x-auto">
|
|
677
|
+
<table class="w-full text-sm text-left rtl:text-right text-body">
|
|
678
|
+
<thead class="text-sm text-heading">
|
|
679
|
+
<tr>
|
|
680
|
+
<th scope="col" class="px-6 py-3 font-semibold">
|
|
681
|
+
Product name
|
|
682
|
+
</th>
|
|
683
|
+
<th scope="col" class="px-6 py-3 font-semibold">
|
|
684
|
+
Color
|
|
685
|
+
</th>
|
|
686
|
+
<th scope="col" class="px-6 py-3 font-semibold">
|
|
687
|
+
Category
|
|
688
|
+
</th>
|
|
689
|
+
<th scope="col" class="px-6 py-3 font-semibold">
|
|
690
|
+
Price
|
|
691
|
+
</th>
|
|
692
|
+
</tr>
|
|
693
|
+
</thead>
|
|
694
|
+
<tbody>
|
|
695
|
+
<tr class="bg-neutral-primary">
|
|
696
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
697
|
+
Apple MacBook Pro 17"
|
|
698
|
+
</th>
|
|
699
|
+
<td class="px-6 py-4">
|
|
700
|
+
Silver
|
|
701
|
+
</td>
|
|
702
|
+
<td class="px-6 py-4">
|
|
703
|
+
Laptop
|
|
704
|
+
</td>
|
|
705
|
+
<td class="px-6 py-4">
|
|
706
|
+
$2999
|
|
707
|
+
</td>
|
|
708
|
+
</tr>
|
|
709
|
+
<tr class="bg-neutral-primary">
|
|
710
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
711
|
+
Microsoft Surface Pro
|
|
712
|
+
</th>
|
|
713
|
+
<td class="px-6 py-4">
|
|
714
|
+
White
|
|
715
|
+
</td>
|
|
716
|
+
<td class="px-6 py-4">
|
|
717
|
+
Laptop PC
|
|
718
|
+
</td>
|
|
719
|
+
<td class="px-6 py-4">
|
|
720
|
+
$1999
|
|
721
|
+
</td>
|
|
722
|
+
</tr>
|
|
723
|
+
<tr class="bg-neutral-primary">
|
|
724
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
725
|
+
Magic Mouse 2
|
|
726
|
+
</th>
|
|
727
|
+
<td class="px-6 py-4">
|
|
728
|
+
Black
|
|
729
|
+
</td>
|
|
730
|
+
<td class="px-6 py-4">
|
|
731
|
+
Accessories
|
|
732
|
+
</td>
|
|
733
|
+
<td class="px-6 py-4">
|
|
734
|
+
$99
|
|
735
|
+
</td>
|
|
736
|
+
</tr>
|
|
737
|
+
</tbody>
|
|
738
|
+
</table>
|
|
739
|
+
</div>
|
|
740
|
+
{{< /example >}}
|
|
741
|
+
|
|
742
|
+
### Table with shadow
|
|
743
|
+
|
|
744
|
+
Use this example to apply a shadow-sm border to the table component.
|
|
745
|
+
|
|
746
|
+
{{< example github="components/tables.md" class="pb-4 overflow-hidden" show_dark=true >}}
|
|
747
|
+
|
|
748
|
+
<div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
|
|
749
|
+
<table class="w-full text-sm text-left rtl:text-right text-body">
|
|
750
|
+
<thead class="text-sm text-body bg-neutral-secondary-medium border-b border-default-medium">
|
|
751
|
+
<tr>
|
|
752
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
753
|
+
Product name
|
|
754
|
+
</th>
|
|
755
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
756
|
+
Color
|
|
757
|
+
</th>
|
|
758
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
759
|
+
Category
|
|
760
|
+
</th>
|
|
761
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
762
|
+
Price
|
|
763
|
+
</th>
|
|
764
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
765
|
+
Action
|
|
766
|
+
</th>
|
|
767
|
+
</tr>
|
|
768
|
+
</thead>
|
|
769
|
+
<tbody>
|
|
770
|
+
<tr class="bg-neutral-primary-soft border-b border-default">
|
|
771
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
772
|
+
Apple MacBook Pro 17"
|
|
773
|
+
</th>
|
|
774
|
+
<td class="px-6 py-4">
|
|
775
|
+
Silver
|
|
776
|
+
</td>
|
|
777
|
+
<td class="px-6 py-4">
|
|
778
|
+
Laptop
|
|
779
|
+
</td>
|
|
780
|
+
<td class="px-6 py-4">
|
|
781
|
+
$2999
|
|
782
|
+
</td>
|
|
783
|
+
<td class="px-6 py-4">
|
|
784
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
785
|
+
</td>
|
|
786
|
+
</tr>
|
|
787
|
+
<tr class="bg-neutral-primary-soft border-b border-default">
|
|
788
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
789
|
+
Microsoft Surface Pro
|
|
790
|
+
</th>
|
|
791
|
+
<td class="px-6 py-4">
|
|
792
|
+
White
|
|
793
|
+
</td>
|
|
794
|
+
<td class="px-6 py-4">
|
|
795
|
+
Laptop PC
|
|
796
|
+
</td>
|
|
797
|
+
<td class="px-6 py-4">
|
|
798
|
+
$1999
|
|
799
|
+
</td>
|
|
800
|
+
<td class="px-6 py-4">
|
|
801
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
802
|
+
</td>
|
|
803
|
+
</tr>
|
|
804
|
+
<tr class="bg-neutral-primary-soft">
|
|
805
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
806
|
+
Magic Mouse 2
|
|
807
|
+
</th>
|
|
808
|
+
<td class="px-6 py-4">
|
|
809
|
+
Black
|
|
810
|
+
</td>
|
|
811
|
+
<td class="px-6 py-4">
|
|
812
|
+
Accessories
|
|
813
|
+
</td>
|
|
814
|
+
<td class="px-6 py-4">
|
|
815
|
+
$99
|
|
816
|
+
</td>
|
|
817
|
+
<td class="px-6 py-4">
|
|
818
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
819
|
+
</td>
|
|
820
|
+
</tr>
|
|
821
|
+
</tbody>
|
|
822
|
+
</table>
|
|
823
|
+
</div>
|
|
824
|
+
{{< /example >}}
|
|
825
|
+
|
|
826
|
+
## Overflow scrolling
|
|
827
|
+
|
|
828
|
+
Use this example where we apply `overflow-x-auto` to enable horizontal scrolling if the content inside the table overflows that maximum width.
|
|
829
|
+
|
|
830
|
+
{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
|
|
831
|
+
|
|
832
|
+
<div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
|
|
833
|
+
<table class="w-full text-sm text-left rtl:text-right text-body">
|
|
834
|
+
<thead class="text-sm text-body bg-neutral-secondary-medium border-b border-default-medium">
|
|
835
|
+
<tr>
|
|
836
|
+
<th scope="col" class="p-4">
|
|
837
|
+
<div class="flex items-center">
|
|
838
|
+
<input id="table-checkbox" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
839
|
+
<label for="table-checkbox" class="sr-only">Table checkbox</label>
|
|
840
|
+
</div>
|
|
841
|
+
</th>
|
|
842
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
843
|
+
Product name
|
|
844
|
+
</th>
|
|
845
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
846
|
+
Color
|
|
847
|
+
</th>
|
|
848
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
849
|
+
Category
|
|
850
|
+
</th>
|
|
851
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
852
|
+
Accessories
|
|
853
|
+
</th>
|
|
854
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
855
|
+
Available
|
|
856
|
+
</th>
|
|
857
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
858
|
+
Price
|
|
859
|
+
</th>
|
|
860
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
861
|
+
Weight
|
|
862
|
+
</th>
|
|
863
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
864
|
+
Action
|
|
865
|
+
</th>
|
|
866
|
+
</tr>
|
|
867
|
+
</thead>
|
|
868
|
+
<tbody>
|
|
869
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
870
|
+
<td class="w-4 p-4">
|
|
871
|
+
<div class="flex items-center">
|
|
872
|
+
<input id="table-checkbox-2" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
873
|
+
<label for="table-checkbox-2" class="sr-only">Table checkbox</label>
|
|
874
|
+
</div>
|
|
875
|
+
</td>
|
|
876
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
877
|
+
Apple MacBook Pro 17"
|
|
878
|
+
</th>
|
|
879
|
+
<td class="px-6 py-4">
|
|
880
|
+
Silver
|
|
881
|
+
</td>
|
|
882
|
+
<td class="px-6 py-4">
|
|
883
|
+
Laptop
|
|
884
|
+
</td>
|
|
885
|
+
<td class="px-6 py-4">
|
|
886
|
+
Yes
|
|
887
|
+
</td>
|
|
888
|
+
<td class="px-6 py-4">
|
|
889
|
+
Yes
|
|
890
|
+
</td>
|
|
891
|
+
<td class="px-6 py-4">
|
|
892
|
+
$2999
|
|
893
|
+
</td>
|
|
894
|
+
<td class="px-6 py-4">
|
|
895
|
+
3.0 lb.
|
|
896
|
+
</td>
|
|
897
|
+
<td class="flex items-center px-6 py-4">
|
|
898
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
899
|
+
<a href="#" class="font-medium text-danger hover:underline ms-3">Remove</a>
|
|
900
|
+
</td>
|
|
901
|
+
</tr>
|
|
902
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
903
|
+
<td class="w-4 p-4">
|
|
904
|
+
<div class="flex items-center">
|
|
905
|
+
<input id="table-checkbox-3" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
906
|
+
<label for="table-checkbox-3" class="sr-only">Table checkbox</label>
|
|
907
|
+
</div>
|
|
908
|
+
</td>
|
|
909
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
910
|
+
Microsoft Surface Pro
|
|
911
|
+
</th>
|
|
912
|
+
<td class="px-6 py-4">
|
|
913
|
+
White
|
|
914
|
+
</td>
|
|
915
|
+
<td class="px-6 py-4">
|
|
916
|
+
Laptop PC
|
|
917
|
+
</td>
|
|
918
|
+
<td class="px-6 py-4">
|
|
919
|
+
No
|
|
920
|
+
</td>
|
|
921
|
+
<td class="px-6 py-4">
|
|
922
|
+
Yes
|
|
923
|
+
</td>
|
|
924
|
+
<td class="px-6 py-4">
|
|
925
|
+
$1999
|
|
926
|
+
</td>
|
|
927
|
+
<td class="px-6 py-4">
|
|
928
|
+
1.0 lb.
|
|
929
|
+
</td>
|
|
930
|
+
<td class="flex items-center px-6 py-4">
|
|
931
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
932
|
+
<a href="#" class="font-medium text-danger hover:underline ms-3">Remove</a>
|
|
933
|
+
</td>
|
|
934
|
+
</tr>
|
|
935
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
936
|
+
<td class="w-4 p-4">
|
|
937
|
+
<div class="flex items-center">
|
|
938
|
+
<input id="table-checkbox-4" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
939
|
+
<label for="table-checkbox-4" class="sr-only">Table checkbox</label>
|
|
940
|
+
</div>
|
|
941
|
+
</td>
|
|
942
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
943
|
+
Magic Mouse 2
|
|
944
|
+
</th>
|
|
945
|
+
<td class="px-6 py-4">
|
|
946
|
+
Black
|
|
947
|
+
</td>
|
|
948
|
+
<td class="px-6 py-4">
|
|
949
|
+
Accessories
|
|
950
|
+
</td>
|
|
951
|
+
<td class="px-6 py-4">
|
|
952
|
+
Yes
|
|
953
|
+
</td>
|
|
954
|
+
<td class="px-6 py-4">
|
|
955
|
+
No
|
|
956
|
+
</td>
|
|
957
|
+
<td class="px-6 py-4">
|
|
958
|
+
$99
|
|
959
|
+
</td>
|
|
960
|
+
<td class="px-6 py-4">
|
|
961
|
+
0.2 lb.
|
|
962
|
+
</td>
|
|
963
|
+
<td class="flex items-center px-6 py-4">
|
|
964
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
965
|
+
<a href="#" class="font-medium text-danger hover:underline ms-3">Remove</a>
|
|
966
|
+
</td>
|
|
967
|
+
</tr>
|
|
968
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
969
|
+
<td class="w-4 p-4">
|
|
970
|
+
<div class="flex items-center">
|
|
971
|
+
<input id="table-checkbox-5" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
972
|
+
<label for="table-checkbox-5" class="sr-only">Table checkbox</label>
|
|
973
|
+
</div>
|
|
974
|
+
</td>
|
|
975
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
976
|
+
Apple Watch
|
|
977
|
+
</th>
|
|
978
|
+
<td class="px-6 py-4">
|
|
979
|
+
Black
|
|
980
|
+
</td>
|
|
981
|
+
<td class="px-6 py-4">
|
|
982
|
+
Watches
|
|
983
|
+
</td>
|
|
984
|
+
<td class="px-6 py-4">
|
|
985
|
+
Yes
|
|
986
|
+
</td>
|
|
987
|
+
<td class="px-6 py-4">
|
|
988
|
+
No
|
|
989
|
+
</td>
|
|
990
|
+
<td class="px-6 py-4">
|
|
991
|
+
$199
|
|
992
|
+
</td>
|
|
993
|
+
<td class="px-6 py-4">
|
|
994
|
+
0.12 lb.
|
|
995
|
+
</td>
|
|
996
|
+
<td class="flex items-center px-6 py-4">
|
|
997
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
998
|
+
<a href="#" class="font-medium text-danger hover:underline ms-3">Remove</a>
|
|
999
|
+
</td>
|
|
1000
|
+
</tr>
|
|
1001
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
1002
|
+
<td class="w-4 p-4">
|
|
1003
|
+
<div class="flex items-center">
|
|
1004
|
+
<input id="table-checkbox-6" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
1005
|
+
<label for="table-checkbox-6" class="sr-only">Table checkbox</label>
|
|
1006
|
+
</div>
|
|
1007
|
+
</td>
|
|
1008
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
1009
|
+
Apple iMac
|
|
1010
|
+
</th>
|
|
1011
|
+
<td class="px-6 py-4">
|
|
1012
|
+
Silver
|
|
1013
|
+
</td>
|
|
1014
|
+
<td class="px-6 py-4">
|
|
1015
|
+
PC
|
|
1016
|
+
</td>
|
|
1017
|
+
<td class="px-6 py-4">
|
|
1018
|
+
Yes
|
|
1019
|
+
</td>
|
|
1020
|
+
<td class="px-6 py-4">
|
|
1021
|
+
Yes
|
|
1022
|
+
</td>
|
|
1023
|
+
<td class="px-6 py-4">
|
|
1024
|
+
$2999
|
|
1025
|
+
</td>
|
|
1026
|
+
<td class="px-6 py-4">
|
|
1027
|
+
7.0 lb.
|
|
1028
|
+
</td>
|
|
1029
|
+
<td class="flex items-center px-6 py-4">
|
|
1030
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
1031
|
+
<a href="#" class="font-medium text-danger hover:underline ms-3">Remove</a>
|
|
1032
|
+
</td>
|
|
1033
|
+
</tr>
|
|
1034
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
1035
|
+
<td class="w-4 p-4">
|
|
1036
|
+
<div class="flex items-center">
|
|
1037
|
+
<input id="table-checkbox-7" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
1038
|
+
<label for="table-checkbox-7" class="sr-only">Table checkbox</label>
|
|
1039
|
+
</div>
|
|
1040
|
+
</td>
|
|
1041
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
1042
|
+
Apple AirPods
|
|
1043
|
+
</th>
|
|
1044
|
+
<td class="px-6 py-4">
|
|
1045
|
+
White
|
|
1046
|
+
</td>
|
|
1047
|
+
<td class="px-6 py-4">
|
|
1048
|
+
Accessories
|
|
1049
|
+
</td>
|
|
1050
|
+
<td class="px-6 py-4">
|
|
1051
|
+
No
|
|
1052
|
+
</td>
|
|
1053
|
+
<td class="px-6 py-4">
|
|
1054
|
+
Yes
|
|
1055
|
+
</td>
|
|
1056
|
+
<td class="px-6 py-4">
|
|
1057
|
+
$399
|
|
1058
|
+
</td>
|
|
1059
|
+
<td class="px-6 py-4">
|
|
1060
|
+
38 g
|
|
1061
|
+
</td>
|
|
1062
|
+
<td class="flex items-center px-6 py-4">
|
|
1063
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
1064
|
+
<a href="#" class="font-medium text-danger hover:underline ms-3">Remove</a>
|
|
1065
|
+
</td>
|
|
1066
|
+
</tr>
|
|
1067
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
1068
|
+
<td class="w-4 p-4">
|
|
1069
|
+
<div class="flex items-center">
|
|
1070
|
+
<input id="table-checkbox-8" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
1071
|
+
<label for="table-checkbox-8" class="sr-only">Table checkbox</label>
|
|
1072
|
+
</div>
|
|
1073
|
+
</td>
|
|
1074
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
1075
|
+
iPad Pro
|
|
1076
|
+
</th>
|
|
1077
|
+
<td class="px-6 py-4">
|
|
1078
|
+
Gold
|
|
1079
|
+
</td>
|
|
1080
|
+
<td class="px-6 py-4">
|
|
1081
|
+
Tablet
|
|
1082
|
+
</td>
|
|
1083
|
+
<td class="px-6 py-4">
|
|
1084
|
+
No
|
|
1085
|
+
</td>
|
|
1086
|
+
<td class="px-6 py-4">
|
|
1087
|
+
Yes
|
|
1088
|
+
</td>
|
|
1089
|
+
<td class="px-6 py-4">
|
|
1090
|
+
$699
|
|
1091
|
+
</td>
|
|
1092
|
+
<td class="px-6 py-4">
|
|
1093
|
+
1.3 lb.
|
|
1094
|
+
</td>
|
|
1095
|
+
<td class="flex items-center px-6 py-4">
|
|
1096
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
1097
|
+
<a href="#" class="font-medium text-danger hover:underline ms-3">Remove</a>
|
|
1098
|
+
</td>
|
|
1099
|
+
</tr>
|
|
1100
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
1101
|
+
<td class="w-4 p-4">
|
|
1102
|
+
<div class="flex items-center">
|
|
1103
|
+
<input id="table-checkbox-9" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
1104
|
+
<label for="table-checkbox-9" class="sr-only">Table checkbox</label>
|
|
1105
|
+
</div>
|
|
1106
|
+
</td>
|
|
1107
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
1108
|
+
Magic Keyboard
|
|
1109
|
+
</th>
|
|
1110
|
+
<td class="px-6 py-4">
|
|
1111
|
+
Black
|
|
1112
|
+
</td>
|
|
1113
|
+
<td class="px-6 py-4">
|
|
1114
|
+
Accessories
|
|
1115
|
+
</td>
|
|
1116
|
+
<td class="px-6 py-4">
|
|
1117
|
+
Yes
|
|
1118
|
+
</td>
|
|
1119
|
+
<td class="px-6 py-4">
|
|
1120
|
+
Yes
|
|
1121
|
+
</td>
|
|
1122
|
+
<td class="px-6 py-4">
|
|
1123
|
+
$99
|
|
1124
|
+
</td>
|
|
1125
|
+
<td class="px-6 py-4">
|
|
1126
|
+
453 g
|
|
1127
|
+
</td>
|
|
1128
|
+
<td class="flex items-center px-6 py-4">
|
|
1129
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
1130
|
+
<a href="#" class="font-medium text-danger hover:underline ms-3">Remove</a>
|
|
1131
|
+
</td>
|
|
1132
|
+
</tr>
|
|
1133
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
1134
|
+
<td class="w-4 p-4">
|
|
1135
|
+
<div class="flex items-center">
|
|
1136
|
+
<input id="table-checkbox-10" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
1137
|
+
<label for="table-checkbox-10" class="sr-only">Table checkbox</label>
|
|
1138
|
+
</div>
|
|
1139
|
+
</td>
|
|
1140
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
1141
|
+
Apple TV 4K
|
|
1142
|
+
</th>
|
|
1143
|
+
<td class="px-6 py-4">
|
|
1144
|
+
Black
|
|
1145
|
+
</td>
|
|
1146
|
+
<td class="px-6 py-4">
|
|
1147
|
+
TV
|
|
1148
|
+
</td>
|
|
1149
|
+
<td class="px-6 py-4">
|
|
1150
|
+
Yes
|
|
1151
|
+
</td>
|
|
1152
|
+
<td class="px-6 py-4">
|
|
1153
|
+
No
|
|
1154
|
+
</td>
|
|
1155
|
+
<td class="px-6 py-4">
|
|
1156
|
+
$179
|
|
1157
|
+
</td>
|
|
1158
|
+
<td class="px-6 py-4">
|
|
1159
|
+
1.78 lb.
|
|
1160
|
+
</td>
|
|
1161
|
+
<td class="flex items-center px-6 py-4">
|
|
1162
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
1163
|
+
<a href="#" class="font-medium text-danger hover:underline ms-3">Remove</a>
|
|
1164
|
+
</td>
|
|
1165
|
+
</tr>
|
|
1166
|
+
<tr class="bg-neutral-primary-soft hover:bg-neutral-secondary-medium">
|
|
1167
|
+
<td class="w-4 p-4">
|
|
1168
|
+
<div class="flex items-center">
|
|
1169
|
+
<input id="table-checkbox-11" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
1170
|
+
<label for="table-checkbox-11" class="sr-only">Table checkbox</label>
|
|
1171
|
+
</div>
|
|
1172
|
+
</td>
|
|
1173
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
1174
|
+
AirTag
|
|
1175
|
+
</th>
|
|
1176
|
+
<td class="px-6 py-4">
|
|
1177
|
+
Silver
|
|
1178
|
+
</td>
|
|
1179
|
+
<td class="px-6 py-4">
|
|
1180
|
+
Accessories
|
|
1181
|
+
</td>
|
|
1182
|
+
<td class="px-6 py-4">
|
|
1183
|
+
Yes
|
|
1184
|
+
</td>
|
|
1185
|
+
<td class="px-6 py-4">
|
|
1186
|
+
No
|
|
1187
|
+
</td>
|
|
1188
|
+
<td class="px-6 py-4">
|
|
1189
|
+
$29
|
|
1190
|
+
</td>
|
|
1191
|
+
<td class="px-6 py-4">
|
|
1192
|
+
53 g
|
|
1193
|
+
</td>
|
|
1194
|
+
<td class="flex items-center px-6 py-4">
|
|
1195
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
1196
|
+
<a href="#" class="font-medium text-danger hover:underline ms-3">Remove</a>
|
|
1197
|
+
</td>
|
|
1198
|
+
</tr>
|
|
1199
|
+
</tbody>
|
|
1200
|
+
</table>
|
|
1201
|
+
</div>
|
|
1202
|
+
{{< /example >}}
|
|
1203
|
+
|
|
1204
|
+
## Table search
|
|
1205
|
+
|
|
1206
|
+
Use this example to show a search bar that can be used to query through data inside the table component.
|
|
1207
|
+
|
|
1208
|
+
{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
|
|
1209
|
+
|
|
1210
|
+
<div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
|
|
1211
|
+
<div class="p-4">
|
|
1212
|
+
<label for="input-group-1" class="sr-only">Search</label>
|
|
1213
|
+
<div class="relative">
|
|
1214
|
+
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
|
|
1215
|
+
<svg class="w-4 h-4 text-body" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="m21 21-3.5-3.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z"/></svg>
|
|
1216
|
+
</div>
|
|
1217
|
+
<input type="text" id="input-group-1" class="block w-full max-w-96 ps-9 pe-3 py-2 bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand px-3 py-2.5 shadow-xs placeholder:text-body" placeholder="Search">
|
|
1218
|
+
</div>
|
|
1219
|
+
</div>
|
|
1220
|
+
<table class="w-full text-sm text-left rtl:text-right text-body">
|
|
1221
|
+
<thead class="text-sm text-body bg-neutral-secondary-medium border-b border-t border-default-medium">
|
|
1222
|
+
<tr>
|
|
1223
|
+
<th scope="col" class="p-4">
|
|
1224
|
+
<div class="flex items-center">
|
|
1225
|
+
<input id="table-checkbox-12" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
1226
|
+
<label for="table-checkbox-12" class="sr-only">Table checkbox</label>
|
|
1227
|
+
</div>
|
|
1228
|
+
</th>
|
|
1229
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
1230
|
+
Product name
|
|
1231
|
+
</th>
|
|
1232
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
1233
|
+
Color
|
|
1234
|
+
</th>
|
|
1235
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
1236
|
+
Category
|
|
1237
|
+
</th>
|
|
1238
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
1239
|
+
Price
|
|
1240
|
+
</th>
|
|
1241
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
1242
|
+
Action
|
|
1243
|
+
</th>
|
|
1244
|
+
</tr>
|
|
1245
|
+
</thead>
|
|
1246
|
+
<tbody>
|
|
1247
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
1248
|
+
<td class="w-4 p-4">
|
|
1249
|
+
<div class="flex items-center">
|
|
1250
|
+
<input id="table-checkbox-13" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
1251
|
+
<label for="table-checkbox-13" class="sr-only">Table checkbox</label>
|
|
1252
|
+
</div>
|
|
1253
|
+
</td>
|
|
1254
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
1255
|
+
Apple MacBook Pro 17"
|
|
1256
|
+
</th>
|
|
1257
|
+
<td class="px-6 py-4">
|
|
1258
|
+
Silver
|
|
1259
|
+
</td>
|
|
1260
|
+
<td class="px-6 py-4">
|
|
1261
|
+
Laptop
|
|
1262
|
+
</td>
|
|
1263
|
+
<td class="px-6 py-4">
|
|
1264
|
+
$2999
|
|
1265
|
+
</td>
|
|
1266
|
+
<td class="px-6 py-4">
|
|
1267
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
1268
|
+
</td>
|
|
1269
|
+
</tr>
|
|
1270
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
1271
|
+
<td class="w-4 p-4">
|
|
1272
|
+
<div class="flex items-center">
|
|
1273
|
+
<input id="table-checkbox-14" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
1274
|
+
<label for="table-checkbox-14" class="sr-only">Table checkbox</label>
|
|
1275
|
+
</div>
|
|
1276
|
+
</td>
|
|
1277
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
1278
|
+
Microsoft Surface Pro
|
|
1279
|
+
</th>
|
|
1280
|
+
<td class="px-6 py-4">
|
|
1281
|
+
White
|
|
1282
|
+
</td>
|
|
1283
|
+
<td class="px-6 py-4">
|
|
1284
|
+
Laptop PC
|
|
1285
|
+
</td>
|
|
1286
|
+
<td class="px-6 py-4">
|
|
1287
|
+
$1999
|
|
1288
|
+
</td>
|
|
1289
|
+
<td class="px-6 py-4">
|
|
1290
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
1291
|
+
</td>
|
|
1292
|
+
</tr>
|
|
1293
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
1294
|
+
<td class="w-4 p-4">
|
|
1295
|
+
<div class="flex items-center">
|
|
1296
|
+
<input id="table-checkbox-15" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
1297
|
+
<label for="table-checkbox-15" class="sr-only">Table checkbox</label>
|
|
1298
|
+
</div>
|
|
1299
|
+
</td>
|
|
1300
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
1301
|
+
Magic Mouse 2
|
|
1302
|
+
</th>
|
|
1303
|
+
<td class="px-6 py-4">
|
|
1304
|
+
Black
|
|
1305
|
+
</td>
|
|
1306
|
+
<td class="px-6 py-4">
|
|
1307
|
+
Accessories
|
|
1308
|
+
</td>
|
|
1309
|
+
<td class="px-6 py-4">
|
|
1310
|
+
$99
|
|
1311
|
+
</td>
|
|
1312
|
+
<td class="px-6 py-4">
|
|
1313
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
1314
|
+
</td>
|
|
1315
|
+
</tr>
|
|
1316
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
1317
|
+
<td class="w-4 p-4">
|
|
1318
|
+
<div class="flex items-center">
|
|
1319
|
+
<input id="table-checkbox-16" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
1320
|
+
<label for="table-checkbox-16" class="sr-only">Table checkbox</label>
|
|
1321
|
+
</div>
|
|
1322
|
+
</td>
|
|
1323
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
1324
|
+
Apple Watch
|
|
1325
|
+
</th>
|
|
1326
|
+
<td class="px-6 py-4">
|
|
1327
|
+
Silver
|
|
1328
|
+
</td>
|
|
1329
|
+
<td class="px-6 py-4">
|
|
1330
|
+
Accessories
|
|
1331
|
+
</td>
|
|
1332
|
+
<td class="px-6 py-4">
|
|
1333
|
+
$179
|
|
1334
|
+
</td>
|
|
1335
|
+
<td class="px-6 py-4">
|
|
1336
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
1337
|
+
</td>
|
|
1338
|
+
</tr>
|
|
1339
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
1340
|
+
<td class="w-4 p-4">
|
|
1341
|
+
<div class="flex items-center">
|
|
1342
|
+
<input id="table-checkbox-17" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
1343
|
+
<label for="table-checkbox-17" class="sr-only">Table checkbox</label>
|
|
1344
|
+
</div>
|
|
1345
|
+
</td>
|
|
1346
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
1347
|
+
iPad
|
|
1348
|
+
</th>
|
|
1349
|
+
<td class="px-6 py-4">
|
|
1350
|
+
Gold
|
|
1351
|
+
</td>
|
|
1352
|
+
<td class="px-6 py-4">
|
|
1353
|
+
Tablet
|
|
1354
|
+
</td>
|
|
1355
|
+
<td class="px-6 py-4">
|
|
1356
|
+
$699
|
|
1357
|
+
</td>
|
|
1358
|
+
<td class="px-6 py-4">
|
|
1359
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
1360
|
+
</td>
|
|
1361
|
+
</tr>
|
|
1362
|
+
<tr class="bg-neutral-primary-soft hover:bg-neutral-secondary-medium">
|
|
1363
|
+
<td class="w-4 p-4">
|
|
1364
|
+
<div class="flex items-center">
|
|
1365
|
+
<input id="table-checkbox-18" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
1366
|
+
<label for="table-checkbox-18" class="sr-only">Table checkbox</label>
|
|
1367
|
+
</div>
|
|
1368
|
+
</td>
|
|
1369
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
1370
|
+
Apple iMac 27"
|
|
1371
|
+
</th>
|
|
1372
|
+
<td class="px-6 py-4">
|
|
1373
|
+
Silver
|
|
1374
|
+
</td>
|
|
1375
|
+
<td class="px-6 py-4">
|
|
1376
|
+
PC Desktop
|
|
1377
|
+
</td>
|
|
1378
|
+
<td class="px-6 py-4">
|
|
1379
|
+
$3999
|
|
1380
|
+
</td>
|
|
1381
|
+
<td class="px-6 py-4">
|
|
1382
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
1383
|
+
</td>
|
|
1384
|
+
</tr>
|
|
1385
|
+
</tbody>
|
|
1386
|
+
</table>
|
|
1387
|
+
</div>
|
|
1388
|
+
{{< /example >}}
|
|
1389
|
+
|
|
1390
|
+
<div class="mt-8 -mb-5">
|
|
1391
|
+
{{< requires_js >}}
|
|
1392
|
+
</div>
|
|
1393
|
+
|
|
1394
|
+
## Table filter
|
|
1395
|
+
|
|
1396
|
+
Use this example with a filter bar to select certain data sets inside the table based on the options that you've selected.
|
|
1397
|
+
|
|
1398
|
+
{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
|
|
1399
|
+
|
|
1400
|
+
<div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
|
|
1401
|
+
<div class="p-4 flex items-center justify-between space-x-4">
|
|
1402
|
+
<label for="input-group-1" class="sr-only">Search</label>
|
|
1403
|
+
<div class="relative">
|
|
1404
|
+
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
|
|
1405
|
+
<svg class="w-4 h-4 text-body" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="m21 21-3.5-3.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z"/></svg>
|
|
1406
|
+
</div>
|
|
1407
|
+
<input type="text" id="input-group-1" class="block w-full max-w-96 ps-9 pe-3 py-2 bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand shadow-xs placeholder:text-body" placeholder="Search">
|
|
1408
|
+
</div>
|
|
1409
|
+
<button id="dropdownDefaultButton" data-dropdown-toggle="dropdown" class="shrink-0 inline-flex items-center justify-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-4 focus:ring-neutral-tertiary shadow-xs font-medium leading-5 rounded-base text-sm px-3 py-2 focus:outline-none" type="button">
|
|
1410
|
+
<svg class="w-4 h-4 me-1.5 -ms-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M18.796 4H5.204a1 1 0 0 0-.753 1.659l5.302 6.058a1 1 0 0 1 .247.659v4.874a.5.5 0 0 0 .2.4l3 2.25a.5.5 0 0 0 .8-.4v-7.124a1 1 0 0 1 .247-.659l5.302-6.059c.566-.646.106-1.658-.753-1.658Z"/></svg>
|
|
1411
|
+
Filter by
|
|
1412
|
+
<svg class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/></svg>
|
|
1413
|
+
</button>
|
|
1414
|
+
<!-- Dropdown menu -->
|
|
1415
|
+
<div id="dropdown" class="z-10 hidden bg-neutral-primary-medium border border-default-medium rounded-base shadow-lg w-32">
|
|
1416
|
+
<ul class="p-2 text-sm text-body font-medium" aria-labelledby="dropdownDefaultButton">
|
|
1417
|
+
<li>
|
|
1418
|
+
<a href="#" class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded">Color</a>
|
|
1419
|
+
</li>
|
|
1420
|
+
<li>
|
|
1421
|
+
<a href="#" class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded">Category</a>
|
|
1422
|
+
</li>
|
|
1423
|
+
<li>
|
|
1424
|
+
<a href="#" class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded">Price</a>
|
|
1425
|
+
</li>
|
|
1426
|
+
<li>
|
|
1427
|
+
<a href="#" class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded">Sign out</a>
|
|
1428
|
+
</li>
|
|
1429
|
+
</ul>
|
|
1430
|
+
</div>
|
|
1431
|
+
</div>
|
|
1432
|
+
<table class="w-full text-sm text-left rtl:text-right text-body">
|
|
1433
|
+
<thead class="text-sm text-body bg-neutral-secondary-medium border-b border-t border-default-medium">
|
|
1434
|
+
<tr>
|
|
1435
|
+
<th scope="col" class="p-4">
|
|
1436
|
+
<div class="flex items-center">
|
|
1437
|
+
<input id="table-checkbox-20" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
1438
|
+
<label for="table-checkbox-20" class="sr-only">Table checkbox</label>
|
|
1439
|
+
</div>
|
|
1440
|
+
</th>
|
|
1441
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
1442
|
+
Product name
|
|
1443
|
+
</th>
|
|
1444
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
1445
|
+
Color
|
|
1446
|
+
</th>
|
|
1447
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
1448
|
+
Category
|
|
1449
|
+
</th>
|
|
1450
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
1451
|
+
Price
|
|
1452
|
+
</th>
|
|
1453
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
1454
|
+
Action
|
|
1455
|
+
</th>
|
|
1456
|
+
</tr>
|
|
1457
|
+
</thead>
|
|
1458
|
+
<tbody>
|
|
1459
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
1460
|
+
<td class="w-4 p-4">
|
|
1461
|
+
<div class="flex items-center">
|
|
1462
|
+
<input id="table-checkbox-21" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
1463
|
+
<label for="table-checkbox-21" class="sr-only">Table checkbox</label>
|
|
1464
|
+
</div>
|
|
1465
|
+
</td>
|
|
1466
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
1467
|
+
Apple MacBook Pro 17"
|
|
1468
|
+
</th>
|
|
1469
|
+
<td class="px-6 py-4">
|
|
1470
|
+
Silver
|
|
1471
|
+
</td>
|
|
1472
|
+
<td class="px-6 py-4">
|
|
1473
|
+
Laptop
|
|
1474
|
+
</td>
|
|
1475
|
+
<td class="px-6 py-4">
|
|
1476
|
+
$2999
|
|
1477
|
+
</td>
|
|
1478
|
+
<td class="px-6 py-4">
|
|
1479
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
1480
|
+
</td>
|
|
1481
|
+
</tr>
|
|
1482
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
1483
|
+
<td class="w-4 p-4">
|
|
1484
|
+
<div class="flex items-center">
|
|
1485
|
+
<input id="table-checkbox-22" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
1486
|
+
<label for="table-checkbox-22" class="sr-only">Table checkbox</label>
|
|
1487
|
+
</div>
|
|
1488
|
+
</td>
|
|
1489
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
1490
|
+
Microsoft Surface Pro
|
|
1491
|
+
</th>
|
|
1492
|
+
<td class="px-6 py-4">
|
|
1493
|
+
White
|
|
1494
|
+
</td>
|
|
1495
|
+
<td class="px-6 py-4">
|
|
1496
|
+
Laptop PC
|
|
1497
|
+
</td>
|
|
1498
|
+
<td class="px-6 py-4">
|
|
1499
|
+
$1999
|
|
1500
|
+
</td>
|
|
1501
|
+
<td class="px-6 py-4">
|
|
1502
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
1503
|
+
</td>
|
|
1504
|
+
</tr>
|
|
1505
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
1506
|
+
<td class="w-4 p-4">
|
|
1507
|
+
<div class="flex items-center">
|
|
1508
|
+
<input id="table-checkbox-23" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
1509
|
+
<label for="table-checkbox-23" class="sr-only">Table checkbox</label>
|
|
1510
|
+
</div>
|
|
1511
|
+
</td>
|
|
1512
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
1513
|
+
Magic Mouse 2
|
|
1514
|
+
</th>
|
|
1515
|
+
<td class="px-6 py-4">
|
|
1516
|
+
Black
|
|
1517
|
+
</td>
|
|
1518
|
+
<td class="px-6 py-4">
|
|
1519
|
+
Accessories
|
|
1520
|
+
</td>
|
|
1521
|
+
<td class="px-6 py-4">
|
|
1522
|
+
$99
|
|
1523
|
+
</td>
|
|
1524
|
+
<td class="px-6 py-4">
|
|
1525
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
1526
|
+
</td>
|
|
1527
|
+
</tr>
|
|
1528
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
1529
|
+
<td class="w-4 p-4">
|
|
1530
|
+
<div class="flex items-center">
|
|
1531
|
+
<input id="table-checkbox-24" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
1532
|
+
<label for="table-checkbox-24" class="sr-only">Table checkbox</label>
|
|
1533
|
+
</div>
|
|
1534
|
+
</td>
|
|
1535
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
1536
|
+
Apple Watch
|
|
1537
|
+
</th>
|
|
1538
|
+
<td class="px-6 py-4">
|
|
1539
|
+
Silver
|
|
1540
|
+
</td>
|
|
1541
|
+
<td class="px-6 py-4">
|
|
1542
|
+
Accessories
|
|
1543
|
+
</td>
|
|
1544
|
+
<td class="px-6 py-4">
|
|
1545
|
+
$179
|
|
1546
|
+
</td>
|
|
1547
|
+
<td class="px-6 py-4">
|
|
1548
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
1549
|
+
</td>
|
|
1550
|
+
</tr>
|
|
1551
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
1552
|
+
<td class="w-4 p-4">
|
|
1553
|
+
<div class="flex items-center">
|
|
1554
|
+
<input id="table-checkbox-25" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
1555
|
+
<label for="table-checkbox-25" class="sr-only">Table checkbox</label>
|
|
1556
|
+
</div>
|
|
1557
|
+
</td>
|
|
1558
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
1559
|
+
iPad
|
|
1560
|
+
</th>
|
|
1561
|
+
<td class="px-6 py-4">
|
|
1562
|
+
Gold
|
|
1563
|
+
</td>
|
|
1564
|
+
<td class="px-6 py-4">
|
|
1565
|
+
Tablet
|
|
1566
|
+
</td>
|
|
1567
|
+
<td class="px-6 py-4">
|
|
1568
|
+
$699
|
|
1569
|
+
</td>
|
|
1570
|
+
<td class="px-6 py-4">
|
|
1571
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
1572
|
+
</td>
|
|
1573
|
+
</tr>
|
|
1574
|
+
<tr class="bg-neutral-primary-soft hover:bg-neutral-secondary-medium">
|
|
1575
|
+
<td class="w-4 p-4">
|
|
1576
|
+
<div class="flex items-center">
|
|
1577
|
+
<input id="table-checkbox-26" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
1578
|
+
<label for="table-checkbox-26" class="sr-only">Table checkbox</label>
|
|
1579
|
+
</div>
|
|
1580
|
+
</td>
|
|
1581
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
1582
|
+
Apple iMac 27"
|
|
1583
|
+
</th>
|
|
1584
|
+
<td class="px-6 py-4">
|
|
1585
|
+
Silver
|
|
1586
|
+
</td>
|
|
1587
|
+
<td class="px-6 py-4">
|
|
1588
|
+
PC Desktop
|
|
1589
|
+
</td>
|
|
1590
|
+
<td class="px-6 py-4">
|
|
1591
|
+
$3999
|
|
1592
|
+
</td>
|
|
1593
|
+
<td class="px-6 py-4">
|
|
1594
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
1595
|
+
</td>
|
|
1596
|
+
</tr>
|
|
1597
|
+
</tbody>
|
|
1598
|
+
</table>
|
|
1599
|
+
</div>
|
|
1600
|
+
{{< /example >}}
|
|
1601
|
+
|
|
1602
|
+
## Table pagination
|
|
1603
|
+
|
|
1604
|
+
Paginate the table data when using larger data sets based on any given amount of results per page.
|
|
1605
|
+
|
|
1606
|
+
{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
|
|
1607
|
+
|
|
1608
|
+
<div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
|
|
1609
|
+
<table class="w-full text-sm text-left rtl:text-right text-body">
|
|
1610
|
+
<thead class="text-sm text-body bg-neutral-secondary-medium border-b border-default-medium">
|
|
1611
|
+
<tr>
|
|
1612
|
+
<th scope="col" class="p-4">
|
|
1613
|
+
<div class="flex items-center">
|
|
1614
|
+
<input id="table-checkbox-27" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
1615
|
+
<label for="table-checkbox-27" class="sr-only">Table checkbox</label>
|
|
1616
|
+
</div>
|
|
1617
|
+
</th>
|
|
1618
|
+
<th scope="col" class="px-6 py-3">
|
|
1619
|
+
Product name
|
|
1620
|
+
</th>
|
|
1621
|
+
<th scope="col" class="px-6 py-3">
|
|
1622
|
+
Color
|
|
1623
|
+
</th>
|
|
1624
|
+
<th scope="col" class="px-6 py-3">
|
|
1625
|
+
Category
|
|
1626
|
+
</th>
|
|
1627
|
+
<th scope="col" class="px-6 py-3">
|
|
1628
|
+
Price
|
|
1629
|
+
</th>
|
|
1630
|
+
<th scope="col" class="px-6 py-3">
|
|
1631
|
+
Action
|
|
1632
|
+
</th>
|
|
1633
|
+
</tr>
|
|
1634
|
+
</thead>
|
|
1635
|
+
<tbody>
|
|
1636
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
1637
|
+
<td class="w-4 p-4">
|
|
1638
|
+
<div class="flex items-center">
|
|
1639
|
+
<input id="table-checkbox-28" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
1640
|
+
<label for="table-checkbox-28" class="sr-only">Table checkbox</label>
|
|
1641
|
+
</div>
|
|
1642
|
+
</td>
|
|
1643
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
1644
|
+
Apple MacBook Pro 17"
|
|
1645
|
+
</th>
|
|
1646
|
+
<td class="px-6 py-4">
|
|
1647
|
+
Silver
|
|
1648
|
+
</td>
|
|
1649
|
+
<td class="px-6 py-4">
|
|
1650
|
+
Laptop
|
|
1651
|
+
</td>
|
|
1652
|
+
<td class="px-6 py-4">
|
|
1653
|
+
$2999
|
|
1654
|
+
</td>
|
|
1655
|
+
<td class="px-6 py-4">
|
|
1656
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
1657
|
+
</td>
|
|
1658
|
+
</tr>
|
|
1659
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
1660
|
+
<td class="w-4 p-4">
|
|
1661
|
+
<div class="flex items-center">
|
|
1662
|
+
<input id="table-checkbox-29" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
1663
|
+
<label for="table-checkbox-29" class="sr-only">Table checkbox</label>
|
|
1664
|
+
</div>
|
|
1665
|
+
</td>
|
|
1666
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
1667
|
+
Microsoft Surface Pro
|
|
1668
|
+
</th>
|
|
1669
|
+
<td class="px-6 py-4">
|
|
1670
|
+
White
|
|
1671
|
+
</td>
|
|
1672
|
+
<td class="px-6 py-4">
|
|
1673
|
+
Laptop PC
|
|
1674
|
+
</td>
|
|
1675
|
+
<td class="px-6 py-4">
|
|
1676
|
+
$1999
|
|
1677
|
+
</td>
|
|
1678
|
+
<td class="px-6 py-4">
|
|
1679
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
1680
|
+
</td>
|
|
1681
|
+
</tr>
|
|
1682
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
1683
|
+
<td class="w-4 p-4">
|
|
1684
|
+
<div class="flex items-center">
|
|
1685
|
+
<input id="table-checkbox-30" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
1686
|
+
<label for="table-checkbox-30" class="sr-only">Table checkbox</label>
|
|
1687
|
+
</div>
|
|
1688
|
+
</td>
|
|
1689
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
1690
|
+
Magic Mouse 2
|
|
1691
|
+
</th>
|
|
1692
|
+
<td class="px-6 py-4">
|
|
1693
|
+
Black
|
|
1694
|
+
</td>
|
|
1695
|
+
<td class="px-6 py-4">
|
|
1696
|
+
Accessories
|
|
1697
|
+
</td>
|
|
1698
|
+
<td class="px-6 py-4">
|
|
1699
|
+
$99
|
|
1700
|
+
</td>
|
|
1701
|
+
<td class="px-6 py-4">
|
|
1702
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
1703
|
+
</td>
|
|
1704
|
+
</tr>
|
|
1705
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
1706
|
+
<td class="w-4 p-4">
|
|
1707
|
+
<div class="flex items-center">
|
|
1708
|
+
<input id="table-checkbox-31" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
1709
|
+
<label for="table-checkbox-31" class="sr-only">Table checkbox</label>
|
|
1710
|
+
</div>
|
|
1711
|
+
</td>
|
|
1712
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
1713
|
+
Apple Watch
|
|
1714
|
+
</th>
|
|
1715
|
+
<td class="px-6 py-4">
|
|
1716
|
+
Black
|
|
1717
|
+
</td>
|
|
1718
|
+
<td class="px-6 py-4">
|
|
1719
|
+
Watches
|
|
1720
|
+
</td>
|
|
1721
|
+
<td class="px-6 py-4">
|
|
1722
|
+
$199
|
|
1723
|
+
</td>
|
|
1724
|
+
<td class="px-6 py-4">
|
|
1725
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
1726
|
+
</td>
|
|
1727
|
+
</tr>
|
|
1728
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
1729
|
+
<td class="w-4 p-4">
|
|
1730
|
+
<div class="flex items-center">
|
|
1731
|
+
<input id="table-checkbox-32" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
1732
|
+
<label for="table-checkbox-32" class="sr-only">Table checkbox</label>
|
|
1733
|
+
</div>
|
|
1734
|
+
</td>
|
|
1735
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
1736
|
+
Apple iMac
|
|
1737
|
+
</th>
|
|
1738
|
+
<td class="px-6 py-4">
|
|
1739
|
+
Silver
|
|
1740
|
+
</td>
|
|
1741
|
+
<td class="px-6 py-4">
|
|
1742
|
+
PC
|
|
1743
|
+
</td>
|
|
1744
|
+
<td class="px-6 py-4">
|
|
1745
|
+
$2999
|
|
1746
|
+
</td>
|
|
1747
|
+
<td class="px-6 py-4">
|
|
1748
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
1749
|
+
</td>
|
|
1750
|
+
</tr>
|
|
1751
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
1752
|
+
<td class="w-4 p-4">
|
|
1753
|
+
<div class="flex items-center">
|
|
1754
|
+
<input id="table-checkbox-33" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
1755
|
+
<label for="table-checkbox-33" class="sr-only">Table checkbox</label>
|
|
1756
|
+
</div>
|
|
1757
|
+
</td>
|
|
1758
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
1759
|
+
Apple AirPods
|
|
1760
|
+
</th>
|
|
1761
|
+
<td class="px-6 py-4">
|
|
1762
|
+
White
|
|
1763
|
+
</td>
|
|
1764
|
+
<td class="px-6 py-4">
|
|
1765
|
+
Accessories
|
|
1766
|
+
</td>
|
|
1767
|
+
<td class="px-6 py-4">
|
|
1768
|
+
$399
|
|
1769
|
+
</td>
|
|
1770
|
+
<td class="px-6 py-4">
|
|
1771
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
1772
|
+
</td>
|
|
1773
|
+
</tr>
|
|
1774
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
1775
|
+
<td class="w-4 p-4">
|
|
1776
|
+
<div class="flex items-center">
|
|
1777
|
+
<input id="table-checkbox-34" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
1778
|
+
<label for="table-checkbox-34" class="sr-only">Table checkbox</label>
|
|
1779
|
+
</div>
|
|
1780
|
+
</td>
|
|
1781
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
1782
|
+
iPad Pro
|
|
1783
|
+
</th>
|
|
1784
|
+
<td class="px-6 py-4">
|
|
1785
|
+
Gold
|
|
1786
|
+
</td>
|
|
1787
|
+
<td class="px-6 py-4">
|
|
1788
|
+
Tablet
|
|
1789
|
+
</td>
|
|
1790
|
+
<td class="px-6 py-4">
|
|
1791
|
+
$699
|
|
1792
|
+
</td>
|
|
1793
|
+
<td class="px-6 py-4">
|
|
1794
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
1795
|
+
</td>
|
|
1796
|
+
</tr>
|
|
1797
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
1798
|
+
<td class="w-4 p-4">
|
|
1799
|
+
<div class="flex items-center">
|
|
1800
|
+
<input id="table-checkbox-35" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
1801
|
+
<label for="table-checkbox-35" class="sr-only">Table checkbox</label>
|
|
1802
|
+
</div>
|
|
1803
|
+
</td>
|
|
1804
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
1805
|
+
Magic Keyboard
|
|
1806
|
+
</th>
|
|
1807
|
+
<td class="px-6 py-4">
|
|
1808
|
+
Black
|
|
1809
|
+
</td>
|
|
1810
|
+
<td class="px-6 py-4">
|
|
1811
|
+
Accessories
|
|
1812
|
+
</td>
|
|
1813
|
+
<td class="px-6 py-4">
|
|
1814
|
+
$99
|
|
1815
|
+
</td>
|
|
1816
|
+
<td class="px-6 py-4">
|
|
1817
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
1818
|
+
</td>
|
|
1819
|
+
</tr>
|
|
1820
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
1821
|
+
<td class="w-4 p-4">
|
|
1822
|
+
<div class="flex items-center">
|
|
1823
|
+
<input id="table-checkbox-36" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
1824
|
+
<label for="table-checkbox-36" class="sr-only">Table checkbox</label>
|
|
1825
|
+
</div>
|
|
1826
|
+
</td>
|
|
1827
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
1828
|
+
Smart Folio iPad Air
|
|
1829
|
+
</th>
|
|
1830
|
+
<td class="px-6 py-4">
|
|
1831
|
+
Blue
|
|
1832
|
+
</td>
|
|
1833
|
+
<td class="px-6 py-4">
|
|
1834
|
+
Accessories
|
|
1835
|
+
</td>
|
|
1836
|
+
<td class="px-6 py-4">
|
|
1837
|
+
$79
|
|
1838
|
+
</td>
|
|
1839
|
+
<td class="px-6 py-4">
|
|
1840
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
1841
|
+
</td>
|
|
1842
|
+
</tr>
|
|
1843
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
1844
|
+
<td class="w-4 p-4">
|
|
1845
|
+
<div class="flex items-center">
|
|
1846
|
+
<input id="table-checkbox-37" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
1847
|
+
<label for="table-checkbox-37" class="sr-only">Table checkbox</label>
|
|
1848
|
+
</div>
|
|
1849
|
+
</td>
|
|
1850
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
1851
|
+
AirTag
|
|
1852
|
+
</th>
|
|
1853
|
+
<td class="px-6 py-4">
|
|
1854
|
+
Silver
|
|
1855
|
+
</td>
|
|
1856
|
+
<td class="px-6 py-4">
|
|
1857
|
+
Accessories
|
|
1858
|
+
</td>
|
|
1859
|
+
<td class="px-6 py-4">
|
|
1860
|
+
$29
|
|
1861
|
+
</td>
|
|
1862
|
+
<td class="px-6 py-4">
|
|
1863
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
1864
|
+
</td>
|
|
1865
|
+
</tr>
|
|
1866
|
+
</tbody>
|
|
1867
|
+
</table>
|
|
1868
|
+
<nav class="flex items-center flex-column flex-wrap md:flex-row justify-between p-4" aria-label="Table navigation">
|
|
1869
|
+
<span class="text-sm font-normal text-body mb-4 md:mb-0 block w-full md:inline md:w-auto">Showing <span class="font-semibold text-heading">1-10</span> of <span class="font-semibold text-heading">1000</span></span>
|
|
1870
|
+
<ul class="flex -space-x-px text-sm">
|
|
1871
|
+
<li>
|
|
1872
|
+
<a href="#" class="flex items-center justify-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading font-medium rounded-s-base text-sm px-3 h-9 focus:outline-none">Previous</a>
|
|
1873
|
+
</li>
|
|
1874
|
+
<li>
|
|
1875
|
+
<a href="#" class="flex items-center justify-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading font-medium text-sm w-9 h-9 focus:outline-none">1</a>
|
|
1876
|
+
</li>
|
|
1877
|
+
<li>
|
|
1878
|
+
<a href="#" class="flex items-center justify-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading font-medium text-sm w-9 h-9 focus:outline-none">2</a>
|
|
1879
|
+
</li>
|
|
1880
|
+
<li>
|
|
1881
|
+
<a href="#" aria-current="page" class="flex items-center justify-center text-fg-brand bg-brand-softer box-border border border-default-medium hover:bg-brand-soft hover:text-fg-brand font-medium text-sm w-9 h-9 focus:outline-none">3</a>
|
|
1882
|
+
</li>
|
|
1883
|
+
<li>
|
|
1884
|
+
<a href="#" class="flex items-center justify-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading font-medium text-sm w-9 h-9 focus:outline-none">...</a>
|
|
1885
|
+
</li>
|
|
1886
|
+
<li>
|
|
1887
|
+
<a href="#" class="flex items-center justify-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading font-medium text-sm w-9 h-9 focus:outline-none">5</a>
|
|
1888
|
+
</li>
|
|
1889
|
+
<li>
|
|
1890
|
+
<a href="#" class="flex items-center justify-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading font-medium rounded-e-base text-sm px-3 h-9 focus:outline-none">Next</a>
|
|
1891
|
+
</li>
|
|
1892
|
+
</ul>
|
|
1893
|
+
</nav>
|
|
1894
|
+
</div>
|
|
1895
|
+
{{< /example >}}
|
|
1896
|
+
|
|
1897
|
+
## Checkbox selection
|
|
1898
|
+
|
|
1899
|
+
Checkboxes can be used inside table data rows to select multiple data sets and apply a bulk action.
|
|
1900
|
+
|
|
1901
|
+
{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
|
|
1902
|
+
|
|
1903
|
+
<div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
|
|
1904
|
+
<table class="w-full text-sm text-left rtl:text-right text-body">
|
|
1905
|
+
<thead class="text-sm text-body bg-neutral-secondary-medium border-b border-default-medium">
|
|
1906
|
+
<tr>
|
|
1907
|
+
<th scope="col" class="p-4">
|
|
1908
|
+
<div class="flex items-center">
|
|
1909
|
+
<input id="table-checkbox-38" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
1910
|
+
<label for="table-checkbox-38" class="sr-only">Table checkbox</label>
|
|
1911
|
+
</div>
|
|
1912
|
+
</th>
|
|
1913
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
1914
|
+
Product name
|
|
1915
|
+
</th>
|
|
1916
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
1917
|
+
Color
|
|
1918
|
+
</th>
|
|
1919
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
1920
|
+
Category
|
|
1921
|
+
</th>
|
|
1922
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
1923
|
+
Price
|
|
1924
|
+
</th>
|
|
1925
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
1926
|
+
Action
|
|
1927
|
+
</th>
|
|
1928
|
+
</tr>
|
|
1929
|
+
</thead>
|
|
1930
|
+
<tbody>
|
|
1931
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
1932
|
+
<td class="w-4 p-4">
|
|
1933
|
+
<div class="flex items-center">
|
|
1934
|
+
<input id="table-checkbox-39" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
1935
|
+
<label for="table-checkbox-39" class="sr-only">Table checkbox</label>
|
|
1936
|
+
</div>
|
|
1937
|
+
</td>
|
|
1938
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
1939
|
+
Apple MacBook Pro 17"
|
|
1940
|
+
</th>
|
|
1941
|
+
<td class="px-6 py-4">
|
|
1942
|
+
Silver
|
|
1943
|
+
</td>
|
|
1944
|
+
<td class="px-6 py-4">
|
|
1945
|
+
Laptop
|
|
1946
|
+
</td>
|
|
1947
|
+
<td class="px-6 py-4">
|
|
1948
|
+
$2999
|
|
1949
|
+
</td>
|
|
1950
|
+
<td class="px-6 py-4">
|
|
1951
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
1952
|
+
</td>
|
|
1953
|
+
</tr>
|
|
1954
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
1955
|
+
<td class="w-4 p-4">
|
|
1956
|
+
<div class="flex items-center">
|
|
1957
|
+
<input id="table-checkbox-40" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
1958
|
+
<label for="table-checkbox-40" class="sr-only">Table checkbox</label>
|
|
1959
|
+
</div>
|
|
1960
|
+
</td>
|
|
1961
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
1962
|
+
Microsoft Surface Pro
|
|
1963
|
+
</th>
|
|
1964
|
+
<td class="px-6 py-4">
|
|
1965
|
+
White
|
|
1966
|
+
</td>
|
|
1967
|
+
<td class="px-6 py-4">
|
|
1968
|
+
Laptop PC
|
|
1969
|
+
</td>
|
|
1970
|
+
<td class="px-6 py-4">
|
|
1971
|
+
$1999
|
|
1972
|
+
</td>
|
|
1973
|
+
<td class="px-6 py-4">
|
|
1974
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
1975
|
+
</td>
|
|
1976
|
+
</tr>
|
|
1977
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
1978
|
+
<td class="w-4 p-4">
|
|
1979
|
+
<div class="flex items-center">
|
|
1980
|
+
<input id="table-checkbox-41" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
1981
|
+
<label for="table-checkbox-41" class="sr-only">Table checkbox</label>
|
|
1982
|
+
</div>
|
|
1983
|
+
</td>
|
|
1984
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
1985
|
+
Magic Mouse 2
|
|
1986
|
+
</th>
|
|
1987
|
+
<td class="px-6 py-4">
|
|
1988
|
+
Black
|
|
1989
|
+
</td>
|
|
1990
|
+
<td class="px-6 py-4">
|
|
1991
|
+
Accessories
|
|
1992
|
+
</td>
|
|
1993
|
+
<td class="px-6 py-4">
|
|
1994
|
+
$99
|
|
1995
|
+
</td>
|
|
1996
|
+
<td class="px-6 py-4">
|
|
1997
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
1998
|
+
</td>
|
|
1999
|
+
</tr>
|
|
2000
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
2001
|
+
<td class="w-4 p-4">
|
|
2002
|
+
<div class="flex items-center">
|
|
2003
|
+
<input id="table-checkbox-42" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
2004
|
+
<label for="table-checkbox-42" class="sr-only">Table checkbox</label>
|
|
2005
|
+
</div>
|
|
2006
|
+
</td>
|
|
2007
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
2008
|
+
Apple Watch
|
|
2009
|
+
</th>
|
|
2010
|
+
<td class="px-6 py-4">
|
|
2011
|
+
Silver
|
|
2012
|
+
</td>
|
|
2013
|
+
<td class="px-6 py-4">
|
|
2014
|
+
Accessories
|
|
2015
|
+
</td>
|
|
2016
|
+
<td class="px-6 py-4">
|
|
2017
|
+
$179
|
|
2018
|
+
</td>
|
|
2019
|
+
<td class="px-6 py-4">
|
|
2020
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
2021
|
+
</td>
|
|
2022
|
+
</tr>
|
|
2023
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
2024
|
+
<td class="w-4 p-4">
|
|
2025
|
+
<div class="flex items-center">
|
|
2026
|
+
<input id="table-checkbox-43" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
2027
|
+
<label for="table-checkbox-43" class="sr-only">Table checkbox</label>
|
|
2028
|
+
</div>
|
|
2029
|
+
</td>
|
|
2030
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
2031
|
+
iPad
|
|
2032
|
+
</th>
|
|
2033
|
+
<td class="px-6 py-4">
|
|
2034
|
+
Gold
|
|
2035
|
+
</td>
|
|
2036
|
+
<td class="px-6 py-4">
|
|
2037
|
+
Tablet
|
|
2038
|
+
</td>
|
|
2039
|
+
<td class="px-6 py-4">
|
|
2040
|
+
$699
|
|
2041
|
+
</td>
|
|
2042
|
+
<td class="px-6 py-4">
|
|
2043
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
2044
|
+
</td>
|
|
2045
|
+
</tr>
|
|
2046
|
+
<tr class="bg-neutral-primary-soft hover:bg-neutral-secondary-medium">
|
|
2047
|
+
<td class="w-4 p-4">
|
|
2048
|
+
<div class="flex items-center">
|
|
2049
|
+
<input id="table-checkbox-44" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
2050
|
+
<label for="table-checkbox-44" class="sr-only">Table checkbox</label>
|
|
2051
|
+
</div>
|
|
2052
|
+
</td>
|
|
2053
|
+
<th scope="row" class="px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
2054
|
+
Apple iMac 27"
|
|
2055
|
+
</th>
|
|
2056
|
+
<td class="px-6 py-4">
|
|
2057
|
+
Silver
|
|
2058
|
+
</td>
|
|
2059
|
+
<td class="px-6 py-4">
|
|
2060
|
+
PC Desktop
|
|
2061
|
+
</td>
|
|
2062
|
+
<td class="px-6 py-4">
|
|
2063
|
+
$3999
|
|
2064
|
+
</td>
|
|
2065
|
+
<td class="px-6 py-4">
|
|
2066
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit</a>
|
|
2067
|
+
</td>
|
|
2068
|
+
</tr>
|
|
2069
|
+
</tbody>
|
|
2070
|
+
</table>
|
|
2071
|
+
</div>
|
|
2072
|
+
{{< /example >}}
|
|
2073
|
+
|
|
2074
|
+
<div class="mt-8 -mb-5">
|
|
2075
|
+
{{< requires_js >}}
|
|
2076
|
+
</div>
|
|
2077
|
+
|
|
2078
|
+
## Table with users
|
|
2079
|
+
|
|
2080
|
+
Use this example of a table where we show a data set of users and showing a profile picture, name, email, online status, and more.
|
|
2081
|
+
|
|
2082
|
+
{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
|
|
2083
|
+
|
|
2084
|
+
<div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
|
|
2085
|
+
<div class="flex items-center justify-between flex-column flex-wrap md:flex-row space-y-4 md:space-y-0 p-4">
|
|
2086
|
+
<div>
|
|
2087
|
+
<button id="dropdownDefaultButton" data-dropdown-toggle="dropdown" class="inline-flex items-center justify-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-4 focus:ring-neutral-tertiary shadow-xs font-medium leading-5 rounded-base text-sm px-3 py-2 focus:outline-none" type="button">
|
|
2088
|
+
Action
|
|
2089
|
+
<svg class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/></svg>
|
|
2090
|
+
</button>
|
|
2091
|
+
<!-- Dropdown menu -->
|
|
2092
|
+
<div id="dropdown" class="z-10 hidden bg-neutral-primary-medium border border-default-medium rounded-base shadow-lg w-32">
|
|
2093
|
+
<ul class="p-2 text-sm text-body font-medium" aria-labelledby="dropdownDefaultButton">
|
|
2094
|
+
<li>
|
|
2095
|
+
<a href="#" class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded">Reward</a>
|
|
2096
|
+
</li>
|
|
2097
|
+
<li>
|
|
2098
|
+
<a href="#" class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded">Promote</a>
|
|
2099
|
+
</li>
|
|
2100
|
+
<li>
|
|
2101
|
+
<a href="#" class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded">Archive</a>
|
|
2102
|
+
</li>
|
|
2103
|
+
<li>
|
|
2104
|
+
<a href="#" class="inline-flex items-center w-full p-2 text-fg-danger hover:bg-neutral-tertiary-medium rounded">Delete</a>
|
|
2105
|
+
</li>
|
|
2106
|
+
</ul>
|
|
2107
|
+
</div>
|
|
2108
|
+
</div>
|
|
2109
|
+
<label for="input-group-1" class="sr-only">Search</label>
|
|
2110
|
+
<div class="relative">
|
|
2111
|
+
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
|
|
2112
|
+
<svg class="w-4 h-4 text-body" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="m21 21-3.5-3.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z"/></svg>
|
|
2113
|
+
</div>
|
|
2114
|
+
<input type="text" id="input-group-1" class="block w-full max-w-96 ps-9 pe-3 py-2 bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand shadow-xs placeholder:text-body" placeholder="Search">
|
|
2115
|
+
</div>
|
|
2116
|
+
</div>
|
|
2117
|
+
<table class="w-full text-sm text-left rtl:text-right text-body">
|
|
2118
|
+
<thead class="text-sm text-body bg-neutral-secondary-medium border-b border-t border-default-medium">
|
|
2119
|
+
<tr>
|
|
2120
|
+
<th scope="col" class="p-4">
|
|
2121
|
+
<div class="flex items-center">
|
|
2122
|
+
<input id="table-checkbox-45" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
2123
|
+
<label for="table-checkbox-45" class="sr-only">Table checkbox</label>
|
|
2124
|
+
</div>
|
|
2125
|
+
</th>
|
|
2126
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
2127
|
+
Name
|
|
2128
|
+
</th>
|
|
2129
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
2130
|
+
Position
|
|
2131
|
+
</th>
|
|
2132
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
2133
|
+
Status
|
|
2134
|
+
</th>
|
|
2135
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
2136
|
+
Action
|
|
2137
|
+
</th>
|
|
2138
|
+
</tr>
|
|
2139
|
+
</thead>
|
|
2140
|
+
<tbody>
|
|
2141
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
2142
|
+
<td class="w-4 p-4">
|
|
2143
|
+
<div class="flex items-center">
|
|
2144
|
+
<input id="table-checkbox-46" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
2145
|
+
<label for="table-checkbox-46" class="sr-only">Table checkbox</label>
|
|
2146
|
+
</div>
|
|
2147
|
+
</td>
|
|
2148
|
+
<th scope="row" class="flex items-center px-6 py-4 text-heading whitespace-nowrap">
|
|
2149
|
+
<img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-1.jpg" alt="Jese image">
|
|
2150
|
+
<div class="ps-3">
|
|
2151
|
+
<div class="text-base font-semibold">Neil Sims</div>
|
|
2152
|
+
<div class="font-normal text-body">neil.sims@flowbite.com</div>
|
|
2153
|
+
</div>
|
|
2154
|
+
</th>
|
|
2155
|
+
<td class="px-6 py-4">
|
|
2156
|
+
React Developer
|
|
2157
|
+
</td>
|
|
2158
|
+
<td class="px-6 py-4">
|
|
2159
|
+
<div class="flex items-center">
|
|
2160
|
+
<div class="h-2.5 w-2.5 rounded-full bg-success me-2"></div> Online
|
|
2161
|
+
</div>
|
|
2162
|
+
</td>
|
|
2163
|
+
<td class="px-6 py-4">
|
|
2164
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit user</a>
|
|
2165
|
+
</td>
|
|
2166
|
+
</tr>
|
|
2167
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
2168
|
+
<td class="w-4 p-4">
|
|
2169
|
+
<div class="flex items-center">
|
|
2170
|
+
<input id="table-checkbox-47" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
2171
|
+
<label for="table-checkbox-47" class="sr-only">Table checkbox</label>
|
|
2172
|
+
</div>
|
|
2173
|
+
</td>
|
|
2174
|
+
<th scope="row" class="flex items-center px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
2175
|
+
<img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-3.jpg" alt="Jese image">
|
|
2176
|
+
<div class="ps-3">
|
|
2177
|
+
<div class="text-base font-semibold">Bonnie Green</div>
|
|
2178
|
+
<div class="font-normal text-body">bonnie@flowbite.com</div>
|
|
2179
|
+
</div>
|
|
2180
|
+
</th>
|
|
2181
|
+
<td class="px-6 py-4">
|
|
2182
|
+
Designer
|
|
2183
|
+
</td>
|
|
2184
|
+
<td class="px-6 py-4">
|
|
2185
|
+
<div class="flex items-center">
|
|
2186
|
+
<div class="h-2.5 w-2.5 rounded-full bg-danger me-2"></div> Online
|
|
2187
|
+
</div>
|
|
2188
|
+
</td>
|
|
2189
|
+
<td class="px-6 py-4">
|
|
2190
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit user</a>
|
|
2191
|
+
</td>
|
|
2192
|
+
</tr>
|
|
2193
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
2194
|
+
<td class="w-4 p-4">
|
|
2195
|
+
<div class="flex items-center">
|
|
2196
|
+
<input id="table-checkbox-48" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
2197
|
+
<label for="table-checkbox-48" class="sr-only">Table checkbox</label>
|
|
2198
|
+
</div>
|
|
2199
|
+
</td>
|
|
2200
|
+
<th scope="row" class="flex items-center px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
2201
|
+
<img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-2.jpg" alt="Jese image">
|
|
2202
|
+
<div class="ps-3">
|
|
2203
|
+
<div class="text-base font-semibold">Jese Leos</div>
|
|
2204
|
+
<div class="font-normal text-body">jese@flowbite.com</div>
|
|
2205
|
+
</div>
|
|
2206
|
+
</th>
|
|
2207
|
+
<td class="px-6 py-4">
|
|
2208
|
+
Vue JS Developer
|
|
2209
|
+
</td>
|
|
2210
|
+
<td class="px-6 py-4">
|
|
2211
|
+
<div class="flex items-center">
|
|
2212
|
+
<div class="h-2.5 w-2.5 rounded-full bg-success me-2"></div> Online
|
|
2213
|
+
</div>
|
|
2214
|
+
</td>
|
|
2215
|
+
<td class="px-6 py-4">
|
|
2216
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit user</a>
|
|
2217
|
+
</td>
|
|
2218
|
+
</tr>
|
|
2219
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
2220
|
+
<td class="w-4 p-4">
|
|
2221
|
+
<div class="flex items-center">
|
|
2222
|
+
<input id="table-checkbox-49" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
2223
|
+
<label for="table-checkbox-49" class="sr-only">Table checkbox</label>
|
|
2224
|
+
</div>
|
|
2225
|
+
</td>
|
|
2226
|
+
<th scope="row" class="flex items-center px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
2227
|
+
<img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-5.jpg" alt="Jese image">
|
|
2228
|
+
<div class="ps-3">
|
|
2229
|
+
<div class="text-base font-semibold">Thomas Lean</div>
|
|
2230
|
+
<div class="font-normal text-body">thames@flowbite.com</div>
|
|
2231
|
+
</div>
|
|
2232
|
+
</th>
|
|
2233
|
+
<td class="px-6 py-4">
|
|
2234
|
+
UI/UX Engineer
|
|
2235
|
+
</td>
|
|
2236
|
+
<td class="px-6 py-4">
|
|
2237
|
+
<div class="flex items-center">
|
|
2238
|
+
<div class="h-2.5 w-2.5 rounded-full bg-success me-2"></div> Online
|
|
2239
|
+
</div>
|
|
2240
|
+
</td>
|
|
2241
|
+
<td class="px-6 py-4">
|
|
2242
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit user</a>
|
|
2243
|
+
</td>
|
|
2244
|
+
</tr>
|
|
2245
|
+
<tr class="bg-neutral-primary-soft hover:bg-neutral-secondary-medium">
|
|
2246
|
+
<td class="w-4 p-4">
|
|
2247
|
+
<div class="flex items-center">
|
|
2248
|
+
<input id="table-checkbox-50" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
2249
|
+
<label for="table-checkbox-50" class="sr-only">Table checkbox</label>
|
|
2250
|
+
</div>
|
|
2251
|
+
</td>
|
|
2252
|
+
<th scope="row" class="flex items-center px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
2253
|
+
<img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-4.jpg" alt="Jese image">
|
|
2254
|
+
<div class="ps-3">
|
|
2255
|
+
<div class="text-base font-semibold">Leslie Livingston</div>
|
|
2256
|
+
<div class="font-normal text-body">leslie@flowbite.com</div>
|
|
2257
|
+
</div>
|
|
2258
|
+
</th>
|
|
2259
|
+
<td class="px-6 py-4">
|
|
2260
|
+
SEO Specialist
|
|
2261
|
+
</td>
|
|
2262
|
+
<td class="px-6 py-4">
|
|
2263
|
+
<div class="flex items-center">
|
|
2264
|
+
<div class="h-2.5 w-2.5 rounded-full bg-danger me-2"></div> Offline
|
|
2265
|
+
</div>
|
|
2266
|
+
</td>
|
|
2267
|
+
<td class="px-6 py-4">
|
|
2268
|
+
<a href="#" class="font-medium text-fg-brand hover:underline">Edit user</a>
|
|
2269
|
+
</td>
|
|
2270
|
+
</tr>
|
|
2271
|
+
</tbody>
|
|
2272
|
+
</table>
|
|
2273
|
+
</div>
|
|
2274
|
+
{{< /example >}}
|
|
2275
|
+
|
|
2276
|
+
## Table with products
|
|
2277
|
+
|
|
2278
|
+
Get started with this example to show a list of products inside the table and show a preview image, product name, quantity selector, price and actions tab.
|
|
2279
|
+
|
|
2280
|
+
{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
|
|
2281
|
+
|
|
2282
|
+
<div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
|
|
2283
|
+
<table class="w-full text-sm text-left rtl:text-right text-body">
|
|
2284
|
+
<thead class="text-sm text-body bg-neutral-secondary-medium border-b border-default-medium">
|
|
2285
|
+
<tr>
|
|
2286
|
+
<th scope="col" class="px-16 py-3">
|
|
2287
|
+
<span class="sr-only">Image</span>
|
|
2288
|
+
</th>
|
|
2289
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
2290
|
+
Product
|
|
2291
|
+
</th>
|
|
2292
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
2293
|
+
Qty
|
|
2294
|
+
</th>
|
|
2295
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
2296
|
+
Price
|
|
2297
|
+
</th>
|
|
2298
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
2299
|
+
Action
|
|
2300
|
+
</th>
|
|
2301
|
+
</tr>
|
|
2302
|
+
</thead>
|
|
2303
|
+
<tbody>
|
|
2304
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
2305
|
+
<td class="p-4">
|
|
2306
|
+
<img src="/docs/images/products/apple-watch.png" class="w-16 md:w-24 max-w-full max-h-full" alt="Apple Watch">
|
|
2307
|
+
</td>
|
|
2308
|
+
<td class="px-6 py-4 font-semibold text-heading">
|
|
2309
|
+
Apple Watch
|
|
2310
|
+
</td>
|
|
2311
|
+
<td class="px-6 py-4">
|
|
2312
|
+
<form class="max-w-xs mx-auto">
|
|
2313
|
+
<label for="counter-input-1" class="sr-only">Choose quantity:</label>
|
|
2314
|
+
<div class="relative flex items-center">
|
|
2315
|
+
<button type="button" id="decrement-button-1" data-input-counter-decrement="counter-input-1" class="flex items-center justify-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-4 focus:ring-neutral-tertiary rounded-full text-sm focus:outline-none h-6 w-6">
|
|
2316
|
+
<svg class="w-3 h-3 text-heading" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14"/></svg>
|
|
2317
|
+
</button>
|
|
2318
|
+
<input type="text" id="counter-input-1" data-input-counter class="shrink-0 text-heading border-0 bg-transparent text-sm font-normal focus:outline-none focus:ring-0 max-w-[2.5rem] text-center" placeholder="" value="12" required />
|
|
2319
|
+
<button type="button" id="increment-button-1" data-input-counter-increment="counter-input-1" class="flex items-center justify-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-4 focus:ring-neutral-tertiary rounded-full text-sm focus:outline-none h-6 w-6">
|
|
2320
|
+
<svg class="w-3 h-3 text-heading" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7V5"/></svg>
|
|
2321
|
+
</button>
|
|
2322
|
+
</div>
|
|
2323
|
+
</form>
|
|
2324
|
+
</td>
|
|
2325
|
+
<td class="px-6 py-4 font-semibold text-heading">
|
|
2326
|
+
$599
|
|
2327
|
+
</td>
|
|
2328
|
+
<td class="px-6 py-4">
|
|
2329
|
+
<a href="#" class="font-medium text-fg-danger hover:underline">Remove</a>
|
|
2330
|
+
</td>
|
|
2331
|
+
</tr>
|
|
2332
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
2333
|
+
<td class="p-4">
|
|
2334
|
+
<img src="/docs/images/products/imac.png" class="w-16 md:w-24 max-w-full max-h-full" alt="Apple iMac">
|
|
2335
|
+
</td>
|
|
2336
|
+
<td class="px-6 py-4 font-semibold text-heading">
|
|
2337
|
+
iMac 27"
|
|
2338
|
+
</td>
|
|
2339
|
+
<td class="px-6 py-4">
|
|
2340
|
+
<form class="max-w-xs mx-auto">
|
|
2341
|
+
<label for="counter-input-2" class="sr-only">Choose quantity:</label>
|
|
2342
|
+
<div class="relative flex items-center">
|
|
2343
|
+
<button type="button" id="decrement-button-2" data-input-counter-decrement="counter-input-2" class="flex items-center justify-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-4 focus:ring-neutral-tertiary rounded-full text-sm focus:outline-none h-6 w-6">
|
|
2344
|
+
<svg class="w-3 h-3 text-heading" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14"/></svg>
|
|
2345
|
+
</button>
|
|
2346
|
+
<input type="text" id="counter-input-2" data-input-counter class="shrink-0 text-heading border-0 bg-transparent text-sm font-normal focus:outline-none focus:ring-0 max-w-[2.5rem] text-center" placeholder="" value="12" required />
|
|
2347
|
+
<button type="button" id="increment-button-2" data-input-counter-increment="counter-input-2" class="flex items-center justify-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-4 focus:ring-neutral-tertiary rounded-full text-sm focus:outline-none h-6 w-6">
|
|
2348
|
+
<svg class="w-3 h-3 text-heading" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7V5"/></svg>
|
|
2349
|
+
</button>
|
|
2350
|
+
</div>
|
|
2351
|
+
</form>
|
|
2352
|
+
</td>
|
|
2353
|
+
<td class="px-6 py-4 font-semibold text-heading">
|
|
2354
|
+
$2499
|
|
2355
|
+
</td>
|
|
2356
|
+
<td class="px-6 py-4">
|
|
2357
|
+
<a href="#" class="font-medium text-fg-danger hover:underline">Remove</a>
|
|
2358
|
+
</td>
|
|
2359
|
+
</tr>
|
|
2360
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
2361
|
+
<td class="p-4">
|
|
2362
|
+
<img src="/docs/images/products/iphone-12.png" class="w-16 md:w-24 max-w-full max-h-full" alt="iPhone 12">
|
|
2363
|
+
</td>
|
|
2364
|
+
<td class="px-6 py-4 font-semibold text-heading">
|
|
2365
|
+
IPhone 12
|
|
2366
|
+
</td>
|
|
2367
|
+
<td class="px-6 py-4">
|
|
2368
|
+
<form class="max-w-xs mx-auto">
|
|
2369
|
+
<label for="counter-input-3" class="sr-only">Choose quantity:</label>
|
|
2370
|
+
<div class="relative flex items-center">
|
|
2371
|
+
<button type="button" id="decrement-button-3" data-input-counter-decrement="counter-input-3" class="flex items-center justify-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-4 focus:ring-neutral-tertiary rounded-full text-sm focus:outline-none h-6 w-6">
|
|
2372
|
+
<svg class="w-3 h-3 text-heading" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14"/></svg>
|
|
2373
|
+
</button>
|
|
2374
|
+
<input type="text" id="counter-input-3" data-input-counter class="shrink-0 text-heading border-0 bg-transparent text-sm font-normal focus:outline-none focus:ring-0 max-w-[2.5rem] text-center" placeholder="" value="12" required />
|
|
2375
|
+
<button type="button" id="increment-button-3" data-input-counter-increment="counter-input-3" class="flex items-center justify-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-4 focus:ring-neutral-tertiary rounded-full text-sm focus:outline-none h-6 w-6">
|
|
2376
|
+
<svg class="w-3 h-3 text-heading" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7V5"/></svg>
|
|
2377
|
+
</button>
|
|
2378
|
+
</div>
|
|
2379
|
+
</form>
|
|
2380
|
+
</td>
|
|
2381
|
+
<td class="px-6 py-4 font-semibold text-heading">
|
|
2382
|
+
$999
|
|
2383
|
+
</td>
|
|
2384
|
+
<td class="px-6 py-4">
|
|
2385
|
+
<a href="#" class="font-medium text-fg-danger hover:underline">Remove</a>
|
|
2386
|
+
</td>
|
|
2387
|
+
</tr>
|
|
2388
|
+
</tbody>
|
|
2389
|
+
</table>
|
|
2390
|
+
</div>
|
|
2391
|
+
{{< /example >}}
|
|
2392
|
+
|
|
2393
|
+
<div class="mt-8 -mb-5">
|
|
2394
|
+
{{< requires_js >}}
|
|
2395
|
+
</div>
|
|
2396
|
+
|
|
2397
|
+
## Table with modal
|
|
2398
|
+
|
|
2399
|
+
Use this example to show a modal with a form where you can edit table data by clicking on one of the rows.
|
|
2400
|
+
|
|
2401
|
+
{{< example github="components/tables.md" class="overflow-hidden" show_dark=true iframeHeight="640" >}}
|
|
2402
|
+
<div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
|
|
2403
|
+
<div class="flex items-center justify-between flex-column md:flex-row flex-wrap space-y-4 md:space-y-0 p-4">
|
|
2404
|
+
<div>
|
|
2405
|
+
<button id="dropdownDefaultButton2" data-dropdown-toggle="dropdown-2" class="inline-flex items-center justify-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-4 focus:ring-neutral-tertiary shadow-xs font-medium leading-5 rounded-base text-sm px-3 py-2 focus:outline-none" type="button">
|
|
2406
|
+
Action
|
|
2407
|
+
<svg class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/></svg>
|
|
2408
|
+
</button>
|
|
2409
|
+
<!-- Dropdown menu -->
|
|
2410
|
+
<div id="dropdown-2" class="z-10 hidden bg-neutral-primary-medium border border-default-medium rounded-base shadow-lg w-32">
|
|
2411
|
+
<ul class="p-2 text-sm text-body font-medium" aria-labelledby="dropdownDefaultButton2">
|
|
2412
|
+
<li>
|
|
2413
|
+
<a href="#" class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded">Reward</a>
|
|
2414
|
+
</li>
|
|
2415
|
+
<li>
|
|
2416
|
+
<a href="#" class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded">Promote</a>
|
|
2417
|
+
</li>
|
|
2418
|
+
<li>
|
|
2419
|
+
<a href="#" class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded">Archive</a>
|
|
2420
|
+
</li>
|
|
2421
|
+
<li>
|
|
2422
|
+
<a href="#" class="inline-flex items-center w-full p-2 text-fg-danger hover:bg-neutral-tertiary-medium rounded">Delete</a>
|
|
2423
|
+
</li>
|
|
2424
|
+
</ul>
|
|
2425
|
+
</div>
|
|
2426
|
+
</div>
|
|
2427
|
+
<label for="input-group-1" class="sr-only">Search</label>
|
|
2428
|
+
<div class="relative">
|
|
2429
|
+
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
|
|
2430
|
+
<svg class="w-4 h-4 text-body" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="m21 21-3.5-3.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z"/></svg>
|
|
2431
|
+
</div>
|
|
2432
|
+
<input type="text" id="input-group-1" class="block w-full max-w-96 ps-9 pe-3 py-2 bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand shadow-xs placeholder:text-body" placeholder="Search">
|
|
2433
|
+
</div>
|
|
2434
|
+
</div>
|
|
2435
|
+
<table class="w-full text-sm text-left rtl:text-right text-body">
|
|
2436
|
+
<thead class="text-sm text-body bg-neutral-secondary-medium border-b border-t border-default-medium">
|
|
2437
|
+
<tr>
|
|
2438
|
+
<th scope="col" class="p-4">
|
|
2439
|
+
<div class="flex items-center">
|
|
2440
|
+
<input id="table-checkbox-51" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
2441
|
+
<label for="table-checkbox-51" class="sr-only">Table checkbox</label>
|
|
2442
|
+
</div>
|
|
2443
|
+
</th>
|
|
2444
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
2445
|
+
Name
|
|
2446
|
+
</th>
|
|
2447
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
2448
|
+
Position
|
|
2449
|
+
</th>
|
|
2450
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
2451
|
+
Status
|
|
2452
|
+
</th>
|
|
2453
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
2454
|
+
Action
|
|
2455
|
+
</th>
|
|
2456
|
+
</tr>
|
|
2457
|
+
</thead>
|
|
2458
|
+
<tbody>
|
|
2459
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
2460
|
+
<td class="w-4 p-4">
|
|
2461
|
+
<div class="flex items-center">
|
|
2462
|
+
<input id="table-checkbox-52" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
2463
|
+
<label for="table-checkbox-52" class="sr-only">Table checkbox</label>
|
|
2464
|
+
</div>
|
|
2465
|
+
</td>
|
|
2466
|
+
<th scope="row" class="flex items-center px-6 py-4 text-heading whitespace-nowrap">
|
|
2467
|
+
<img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-1.jpg" alt="Jese image">
|
|
2468
|
+
<div class="ps-3">
|
|
2469
|
+
<div class="text-base font-semibold">Neil Sims</div>
|
|
2470
|
+
<div class="font-normal text-body">neil.sims@flowbite.com</div>
|
|
2471
|
+
</div>
|
|
2472
|
+
</th>
|
|
2473
|
+
<td class="px-6 py-4">
|
|
2474
|
+
React Developer
|
|
2475
|
+
</td>
|
|
2476
|
+
<td class="px-6 py-4">
|
|
2477
|
+
<div class="flex items-center">
|
|
2478
|
+
<div class="h-2.5 w-2.5 rounded-full bg-success me-2"></div> Online
|
|
2479
|
+
</div>
|
|
2480
|
+
</td>
|
|
2481
|
+
<td class="px-6 py-4">
|
|
2482
|
+
<!-- Modal toggle -->
|
|
2483
|
+
<a href="#" type="button" data-modal-target="editUserModal" data-modal-show="editUserModal" class="font-medium text-fg-brand hover:underline">Edit user</a>
|
|
2484
|
+
</td>
|
|
2485
|
+
</tr>
|
|
2486
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
2487
|
+
<td class="w-4 p-4">
|
|
2488
|
+
<div class="flex items-center">
|
|
2489
|
+
<input id="table-checkbox-53" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
2490
|
+
<label for="table-checkbox-53" class="sr-only">Table checkbox</label>
|
|
2491
|
+
</div>
|
|
2492
|
+
</td>
|
|
2493
|
+
<th scope="row" class="flex items-center px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
2494
|
+
<img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-3.jpg" alt="Jese image">
|
|
2495
|
+
<div class="ps-3">
|
|
2496
|
+
<div class="text-base font-semibold">Bonnie Green</div>
|
|
2497
|
+
<div class="font-normal text-body">bonnie@flowbite.com</div>
|
|
2498
|
+
</div>
|
|
2499
|
+
</th>
|
|
2500
|
+
<td class="px-6 py-4">
|
|
2501
|
+
Designer
|
|
2502
|
+
</td>
|
|
2503
|
+
<td class="px-6 py-4">
|
|
2504
|
+
<div class="flex items-center">
|
|
2505
|
+
<div class="h-2.5 w-2.5 rounded-full bg-success me-2"></div> Online
|
|
2506
|
+
</div>
|
|
2507
|
+
</td>
|
|
2508
|
+
<td class="px-6 py-4">
|
|
2509
|
+
<!-- Modal toggle -->
|
|
2510
|
+
<a href="#" type="button" data-modal-show="editUserModal" class="font-medium text-fg-brand hover:underline">Edit user</a>
|
|
2511
|
+
</td>
|
|
2512
|
+
</tr>
|
|
2513
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
2514
|
+
<td class="w-4 p-4">
|
|
2515
|
+
<div class="flex items-center">
|
|
2516
|
+
<input id="table-checkbox-54" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
2517
|
+
<label for="table-checkbox-54" class="sr-only">Table checkbox</label>
|
|
2518
|
+
</div>
|
|
2519
|
+
</td>
|
|
2520
|
+
<th scope="row" class="flex items-center px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
2521
|
+
<img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-2.jpg" alt="Jese image">
|
|
2522
|
+
<div class="ps-3">
|
|
2523
|
+
<div class="text-base font-semibold">Jese Leos</div>
|
|
2524
|
+
<div class="font-normal text-body">jese@flowbite.com</div>
|
|
2525
|
+
</div>
|
|
2526
|
+
</th>
|
|
2527
|
+
<td class="px-6 py-4">
|
|
2528
|
+
Vue JS Developer
|
|
2529
|
+
</td>
|
|
2530
|
+
<td class="px-6 py-4">
|
|
2531
|
+
<div class="flex items-center">
|
|
2532
|
+
<div class="h-2.5 w-2.5 rounded-full bg-success me-2"></div> Online
|
|
2533
|
+
</div>
|
|
2534
|
+
</td>
|
|
2535
|
+
<td class="px-6 py-4">
|
|
2536
|
+
<!-- Modal toggle -->
|
|
2537
|
+
<a href="#" type="button" data-modal-show="editUserModal" class="font-medium text-fg-brand hover:underline">Edit user</a>
|
|
2538
|
+
</td>
|
|
2539
|
+
</tr>
|
|
2540
|
+
<tr class="bg-neutral-primary-soft border-b border-default hover:bg-neutral-secondary-medium">
|
|
2541
|
+
<td class="w-4 p-4">
|
|
2542
|
+
<div class="flex items-center">
|
|
2543
|
+
<input id="table-checkbox-55" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
2544
|
+
<label for="table-checkbox-55" class="sr-only">Table checkbox</label>
|
|
2545
|
+
</div>
|
|
2546
|
+
</td>
|
|
2547
|
+
<th scope="row" class="flex items-center px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
2548
|
+
<img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-5.jpg" alt="Jese image">
|
|
2549
|
+
<div class="ps-3">
|
|
2550
|
+
<div class="text-base font-semibold">Thomas Lean</div>
|
|
2551
|
+
<div class="font-normal text-body">thomas@flowbite.com</div>
|
|
2552
|
+
</div>
|
|
2553
|
+
</th>
|
|
2554
|
+
<td class="px-6 py-4">
|
|
2555
|
+
UI/UX Engineer
|
|
2556
|
+
</td>
|
|
2557
|
+
<td class="px-6 py-4">
|
|
2558
|
+
<div class="flex items-center">
|
|
2559
|
+
<div class="h-2.5 w-2.5 rounded-full bg-success me-2"></div> Online
|
|
2560
|
+
</div>
|
|
2561
|
+
</td>
|
|
2562
|
+
<td class="px-6 py-4">
|
|
2563
|
+
<!-- Modal toggle -->
|
|
2564
|
+
<a href="#" type="button" data-modal-show="editUserModal" class="font-medium text-fg-brand hover:underline">Edit user</a>
|
|
2565
|
+
</td>
|
|
2566
|
+
</tr>
|
|
2567
|
+
<tr class="bg-neutral-primary-soft hover:bg-neutral-secondary-medium">
|
|
2568
|
+
<td class="w-4 p-4">
|
|
2569
|
+
<div class="flex items-center">
|
|
2570
|
+
<input id="table-checkbox-56" type="checkbox" value="" class="w-4 h-4 border border-default-medium rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft">
|
|
2571
|
+
<label for="table-checkbox-56" class="sr-only">Table checkbox</label>
|
|
2572
|
+
</div>
|
|
2573
|
+
</td>
|
|
2574
|
+
<th scope="row" class="flex items-center px-6 py-4 font-medium text-heading whitespace-nowrap">
|
|
2575
|
+
<img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-4.jpg" alt="Jese image">
|
|
2576
|
+
<div class="ps-3">
|
|
2577
|
+
<div class="text-base font-semibold">Leslie Livingston</div>
|
|
2578
|
+
<div class="font-normal text-body">leslie@flowbite.com</div>
|
|
2579
|
+
</div>
|
|
2580
|
+
</th>
|
|
2581
|
+
<td class="px-6 py-4">
|
|
2582
|
+
SEO Specialist
|
|
2583
|
+
</td>
|
|
2584
|
+
<td class="px-6 py-4">
|
|
2585
|
+
<div class="flex items-center">
|
|
2586
|
+
<div class="h-2.5 w-2.5 rounded-full bg-danger me-2"></div> Offline
|
|
2587
|
+
</div>
|
|
2588
|
+
</td>
|
|
2589
|
+
<td class="px-6 py-4">
|
|
2590
|
+
<!-- Modal toggle -->
|
|
2591
|
+
<a href="#" type="button" data-modal-show="editUserModal" class="font-medium text-fg-brand hover:underline">Edit user</a>
|
|
2592
|
+
</td>
|
|
2593
|
+
</tr>
|
|
2594
|
+
</tbody>
|
|
2595
|
+
</table>
|
|
2596
|
+
<!-- Main modal -->
|
|
2597
|
+
<div id="editUserModal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
|
|
2598
|
+
<div class="relative p-4 w-full max-w-md max-h-full">
|
|
2599
|
+
<!-- Modal content -->
|
|
2600
|
+
<div class="relative bg-neutral-primary-soft border border-default rounded-base shadow-sm p-4 md:p-6">
|
|
2601
|
+
<!-- Modal header -->
|
|
2602
|
+
<div class="flex items-center justify-between border-b border-default pb-4 md:pb-5">
|
|
2603
|
+
<h3 class="text-lg font-medium text-heading">
|
|
2604
|
+
Create new product
|
|
2605
|
+
</h3>
|
|
2606
|
+
<button type="button" class="text-body bg-transparent hover:bg-neutral-tertiary hover:text-heading rounded-base text-sm w-9 h-9 ms-auto inline-flex justify-center items-center" data-modal-hide="editUserModal">
|
|
2607
|
+
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/></svg>
|
|
2608
|
+
<span class="sr-only">Close modal</span>
|
|
2609
|
+
</button>
|
|
2610
|
+
</div>
|
|
2611
|
+
<!-- Modal body -->
|
|
2612
|
+
<form action="#">
|
|
2613
|
+
<div class="grid gap-4 grid-cols-2 py-4 md:py-6">
|
|
2614
|
+
<div class="col-span-2">
|
|
2615
|
+
<label for="name" class="block mb-2.5 text-sm font-medium text-heading">Name</label>
|
|
2616
|
+
<input type="text" name="name" id="name" class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full px-3 py-2.5 shadow-xs placeholder:text-body" placeholder="Bonnie Green" required="">
|
|
2617
|
+
</div>
|
|
2618
|
+
<div class="col-span-2 sm:col-span-1">
|
|
2619
|
+
<label for="position" class="block mb-2.5 text-sm font-medium text-heading">Position</label>
|
|
2620
|
+
<input type="text" name="position" id="position" class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full px-3 py-2.5 shadow-xs placeholder:text-body" placeholder="React Developer" required="">
|
|
2621
|
+
</div>
|
|
2622
|
+
<div class="col-span-2 sm:col-span-1">
|
|
2623
|
+
<label for="category" class="block mb-2.5 text-sm font-medium text-heading">Status</label>
|
|
2624
|
+
<select id="category" class="block w-full px-3 py-2.5 bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand px-3 py-2.5 shadow-xs placeholder:text-body">
|
|
2625
|
+
<option selected="">Online</option>
|
|
2626
|
+
<option value="offline">Offline</option>
|
|
2627
|
+
<option value="archived">Archived</option>
|
|
2628
|
+
</select>
|
|
2629
|
+
</div>
|
|
2630
|
+
<div class="col-span-2">
|
|
2631
|
+
<label for="biography" class="block mb-2.5 text-sm font-medium text-heading">Biography</label>
|
|
2632
|
+
<textarea id="biography" rows="4" class="block bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full p-3.5 shadow-xs placeholder:text-body" placeholder="Write a short biography here"></textarea>
|
|
2633
|
+
</div>
|
|
2634
|
+
</div>
|
|
2635
|
+
<div class="flex items-center space-x-4 border-t border-default pt-4 md:pt-6">
|
|
2636
|
+
<button type="submit" class="inline-flex items-center text-white bg-brand hover:bg-brand-strong box-border border border-transparent focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">
|
|
2637
|
+
Update user
|
|
2638
|
+
</button>
|
|
2639
|
+
<button data-modal-hide="crud-modal" type="button" class="text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-4 focus:ring-neutral-tertiary shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">Cancel</button>
|
|
2640
|
+
</div>
|
|
2641
|
+
</form>
|
|
2642
|
+
</div>
|
|
2643
|
+
</div>
|
|
2644
|
+
</div>
|
|
2645
|
+
</div>
|
|
2646
|
+
{{< /example >}}
|
|
2647
|
+
|
|
2648
|
+
## Table colors
|
|
2649
|
+
|
|
2650
|
+
Apply any color to the table element by using the `bg-{color}` and `text-{color}` color class variants from Tailwind CSS.
|
|
2651
|
+
|
|
2652
|
+
{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
|
|
2653
|
+
|
|
2654
|
+
<div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
|
|
2655
|
+
<table class="w-full text-sm text-left rtl:text-right text-fg-brand-subtle">
|
|
2656
|
+
<thead class="text-sm text-white bg-brand-strong">
|
|
2657
|
+
<tr>
|
|
2658
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
2659
|
+
Product name
|
|
2660
|
+
</th>
|
|
2661
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
2662
|
+
Color
|
|
2663
|
+
</th>
|
|
2664
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
2665
|
+
Category
|
|
2666
|
+
</th>
|
|
2667
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
2668
|
+
Price
|
|
2669
|
+
</th>
|
|
2670
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
2671
|
+
Action
|
|
2672
|
+
</th>
|
|
2673
|
+
</tr>
|
|
2674
|
+
</thead>
|
|
2675
|
+
<tbody>
|
|
2676
|
+
<tr class="bg-brand border-b border-brand-light">
|
|
2677
|
+
<th scope="row" class="px-6 py-4 font-medium text-fg-brand-subtle whitespace-nowrap">
|
|
2678
|
+
Apple MacBook Pro 17"
|
|
2679
|
+
</th>
|
|
2680
|
+
<td class="px-6 py-4">
|
|
2681
|
+
Silver
|
|
2682
|
+
</td>
|
|
2683
|
+
<td class="px-6 py-4">
|
|
2684
|
+
Laptop
|
|
2685
|
+
</td>
|
|
2686
|
+
<td class="px-6 py-4">
|
|
2687
|
+
$2999
|
|
2688
|
+
</td>
|
|
2689
|
+
<td class="px-6 py-4">
|
|
2690
|
+
<a href="#" class="font-medium text-white hover:underline">Edit</a>
|
|
2691
|
+
</td>
|
|
2692
|
+
</tr>
|
|
2693
|
+
<tr class="bg-brand border-b border-brand-light">
|
|
2694
|
+
<th scope="row" class="px-6 py-4 font-medium text-fg-brand-subtle whitespace-nowrap">
|
|
2695
|
+
Microsoft Surface Pro
|
|
2696
|
+
</th>
|
|
2697
|
+
<td class="px-6 py-4">
|
|
2698
|
+
White
|
|
2699
|
+
</td>
|
|
2700
|
+
<td class="px-6 py-4">
|
|
2701
|
+
Laptop PC
|
|
2702
|
+
</td>
|
|
2703
|
+
<td class="px-6 py-4">
|
|
2704
|
+
$1999
|
|
2705
|
+
</td>
|
|
2706
|
+
<td class="px-6 py-4">
|
|
2707
|
+
<a href="#" class="font-medium text-white hover:underline">Edit</a>
|
|
2708
|
+
</td>
|
|
2709
|
+
</tr>
|
|
2710
|
+
<tr class="bg-brand border-b border-brand-light">
|
|
2711
|
+
<th scope="row" class="px-6 py-4 font-medium text-fg-brand-subtle whitespace-nowrap">
|
|
2712
|
+
Magic Mouse 2
|
|
2713
|
+
</th>
|
|
2714
|
+
<td class="px-6 py-4">
|
|
2715
|
+
Black
|
|
2716
|
+
</td>
|
|
2717
|
+
<td class="px-6 py-4">
|
|
2718
|
+
Accessories
|
|
2719
|
+
</td>
|
|
2720
|
+
<td class="px-6 py-4">
|
|
2721
|
+
$99
|
|
2722
|
+
</td>
|
|
2723
|
+
<td class="px-6 py-4">
|
|
2724
|
+
<a href="#" class="font-medium text-white hover:underline">Edit</a>
|
|
2725
|
+
</td>
|
|
2726
|
+
</tr>
|
|
2727
|
+
<tr class="bg-brand border-b border-brand-light">
|
|
2728
|
+
<th scope="row" class="px-6 py-4 font-medium text-fg-brand-subtle whitespace-nowrap">
|
|
2729
|
+
Google Pixel Phone
|
|
2730
|
+
</th>
|
|
2731
|
+
<td class="px-6 py-4">
|
|
2732
|
+
Gray
|
|
2733
|
+
</td>
|
|
2734
|
+
<td class="px-6 py-4">
|
|
2735
|
+
Phone
|
|
2736
|
+
</td>
|
|
2737
|
+
<td class="px-6 py-4">
|
|
2738
|
+
$799
|
|
2739
|
+
</td>
|
|
2740
|
+
<td class="px-6 py-4">
|
|
2741
|
+
<a href="#" class="font-medium text-white hover:underline">Edit</a>
|
|
2742
|
+
</td>
|
|
2743
|
+
</tr>
|
|
2744
|
+
<tr class="bg-brand">
|
|
2745
|
+
<th scope="row" class="px-6 py-4 font-medium text-fg-brand-subtle whitespace-nowrap">
|
|
2746
|
+
Apple Watch 5
|
|
2747
|
+
</th>
|
|
2748
|
+
<td class="px-6 py-4">
|
|
2749
|
+
Red
|
|
2750
|
+
</td>
|
|
2751
|
+
<td class="px-6 py-4">
|
|
2752
|
+
Wearables
|
|
2753
|
+
</td>
|
|
2754
|
+
<td class="px-6 py-4">
|
|
2755
|
+
$999
|
|
2756
|
+
</td>
|
|
2757
|
+
<td class="px-6 py-4">
|
|
2758
|
+
<a href="#" class="font-medium text-white hover:underline">Edit</a>
|
|
2759
|
+
</td>
|
|
2760
|
+
</tr>
|
|
2761
|
+
</tbody>
|
|
2762
|
+
</table>
|
|
2763
|
+
</div>
|
|
2764
|
+
{{< /example >}}
|
|
2765
|
+
|
|
2766
|
+
### Striped rows color
|
|
2767
|
+
|
|
2768
|
+
Use this example to apply a different color to every second row inside the table.
|
|
2769
|
+
|
|
2770
|
+
{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
|
|
2771
|
+
|
|
2772
|
+
<div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
|
|
2773
|
+
<table class="w-full text-sm text-left rtl:text-right text-fg-brand-subtle">
|
|
2774
|
+
<thead class="text-sm text-white bg-brand-strong">
|
|
2775
|
+
<tr>
|
|
2776
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
2777
|
+
Product name
|
|
2778
|
+
</th>
|
|
2779
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
2780
|
+
Color
|
|
2781
|
+
</th>
|
|
2782
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
2783
|
+
Category
|
|
2784
|
+
</th>
|
|
2785
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
2786
|
+
Price
|
|
2787
|
+
</th>
|
|
2788
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
2789
|
+
Action
|
|
2790
|
+
</th>
|
|
2791
|
+
</tr>
|
|
2792
|
+
</thead>
|
|
2793
|
+
<tbody>
|
|
2794
|
+
<tr class="bg-brand border-b border-brand-light">
|
|
2795
|
+
<th scope="row" class="px-6 py-4 font-medium text-fg-brand-subtle whitespace-nowrap">
|
|
2796
|
+
Apple MacBook Pro 17"
|
|
2797
|
+
</th>
|
|
2798
|
+
<td class="px-6 py-4">
|
|
2799
|
+
Silver
|
|
2800
|
+
</td>
|
|
2801
|
+
<td class="px-6 py-4">
|
|
2802
|
+
Laptop
|
|
2803
|
+
</td>
|
|
2804
|
+
<td class="px-6 py-4">
|
|
2805
|
+
$2999
|
|
2806
|
+
</td>
|
|
2807
|
+
<td class="px-6 py-4">
|
|
2808
|
+
<a href="#" class="font-medium text-white hover:underline">Edit</a>
|
|
2809
|
+
</td>
|
|
2810
|
+
</tr>
|
|
2811
|
+
<tr class="bg-brand-strong border-b border-brand-light">
|
|
2812
|
+
<th scope="row" class="px-6 py-4 font-medium text-fg-brand-subtle whitespace-nowrap">
|
|
2813
|
+
Microsoft Surface Pro
|
|
2814
|
+
</th>
|
|
2815
|
+
<td class="px-6 py-4">
|
|
2816
|
+
White
|
|
2817
|
+
</td>
|
|
2818
|
+
<td class="px-6 py-4">
|
|
2819
|
+
Laptop PC
|
|
2820
|
+
</td>
|
|
2821
|
+
<td class="px-6 py-4">
|
|
2822
|
+
$1999
|
|
2823
|
+
</td>
|
|
2824
|
+
<td class="px-6 py-4">
|
|
2825
|
+
<a href="#" class="font-medium text-white hover:underline">Edit</a>
|
|
2826
|
+
</td>
|
|
2827
|
+
</tr>
|
|
2828
|
+
<tr class="bg-brand border-b border-brand-light">
|
|
2829
|
+
<th scope="row" class="px-6 py-4 font-medium text-fg-brand-subtle whitespace-nowrap">
|
|
2830
|
+
Magic Mouse 2
|
|
2831
|
+
</th>
|
|
2832
|
+
<td class="px-6 py-4">
|
|
2833
|
+
Black
|
|
2834
|
+
</td>
|
|
2835
|
+
<td class="px-6 py-4">
|
|
2836
|
+
Accessories
|
|
2837
|
+
</td>
|
|
2838
|
+
<td class="px-6 py-4">
|
|
2839
|
+
$99
|
|
2840
|
+
</td>
|
|
2841
|
+
<td class="px-6 py-4">
|
|
2842
|
+
<a href="#" class="font-medium text-white hover:underline">Edit</a>
|
|
2843
|
+
</td>
|
|
2844
|
+
</tr>
|
|
2845
|
+
<tr class="bg-brand-strong border-b border-brand-light">
|
|
2846
|
+
<th scope="row" class="px-6 py-4 font-medium text-fg-brand-subtle whitespace-nowrap">
|
|
2847
|
+
Google Pixel Phone
|
|
2848
|
+
</th>
|
|
2849
|
+
<td class="px-6 py-4">
|
|
2850
|
+
Gray
|
|
2851
|
+
</td>
|
|
2852
|
+
<td class="px-6 py-4">
|
|
2853
|
+
Phone
|
|
2854
|
+
</td>
|
|
2855
|
+
<td class="px-6 py-4">
|
|
2856
|
+
$799
|
|
2857
|
+
</td>
|
|
2858
|
+
<td class="px-6 py-4">
|
|
2859
|
+
<a href="#" class="font-medium text-white hover:underline">Edit</a>
|
|
2860
|
+
</td>
|
|
2861
|
+
</tr>
|
|
2862
|
+
<tr class="bg-brand">
|
|
2863
|
+
<th scope="row" class="px-6 py-4 font-medium text-fg-brand-subtle whitespace-nowrap">
|
|
2864
|
+
Apple Watch 5
|
|
2865
|
+
</th>
|
|
2866
|
+
<td class="px-6 py-4">
|
|
2867
|
+
Red
|
|
2868
|
+
</td>
|
|
2869
|
+
<td class="px-6 py-4">
|
|
2870
|
+
Wearables
|
|
2871
|
+
</td>
|
|
2872
|
+
<td class="px-6 py-4">
|
|
2873
|
+
$999
|
|
2874
|
+
</td>
|
|
2875
|
+
<td class="px-6 py-4">
|
|
2876
|
+
<a href="#" class="font-medium text-white hover:underline">Edit</a>
|
|
2877
|
+
</td>
|
|
2878
|
+
</tr>
|
|
2879
|
+
</tbody>
|
|
2880
|
+
</table>
|
|
2881
|
+
</div>
|
|
2882
|
+
{{< /example >}}
|
|
2883
|
+
|
|
2884
|
+
### Striped columns color
|
|
2885
|
+
|
|
2886
|
+
Use this example to apply a different color to every second column inside a colored table.
|
|
2887
|
+
|
|
2888
|
+
{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
|
|
2889
|
+
|
|
2890
|
+
<div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
|
|
2891
|
+
<table class="w-full text-sm text-left rtl:text-right text-fg-brand-subtle">
|
|
2892
|
+
<thead class="text-sm text-white bg-brand">
|
|
2893
|
+
<tr>
|
|
2894
|
+
<th scope="col" class="px-6 py-3 font-medium bg-brand-strong">
|
|
2895
|
+
Product name
|
|
2896
|
+
</th>
|
|
2897
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
2898
|
+
Color
|
|
2899
|
+
</th>
|
|
2900
|
+
<th scope="col" class="px-6 py-3 font-medium bg-brand-strong">
|
|
2901
|
+
Category
|
|
2902
|
+
</th>
|
|
2903
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
2904
|
+
Price
|
|
2905
|
+
</th>
|
|
2906
|
+
<th scope="col" class="px-6 py-3 font-medium bg-brand-strong">
|
|
2907
|
+
Action
|
|
2908
|
+
</th>
|
|
2909
|
+
</tr>
|
|
2910
|
+
</thead>
|
|
2911
|
+
<tbody>
|
|
2912
|
+
<tr class="bg-brand border-b border-brand-light">
|
|
2913
|
+
<th scope="row" class="px-6 py-4 font-medium text-fg-brand-subtle whitespace-nowrap bg-brand-strong">
|
|
2914
|
+
Apple MacBook Pro 17"
|
|
2915
|
+
</th>
|
|
2916
|
+
<td class="px-6 py-4">
|
|
2917
|
+
Silver
|
|
2918
|
+
</td>
|
|
2919
|
+
<td class="px-6 py-4 bg-brand-strong">
|
|
2920
|
+
Laptop
|
|
2921
|
+
</td>
|
|
2922
|
+
<td class="px-6 py-4">
|
|
2923
|
+
$2999
|
|
2924
|
+
</td>
|
|
2925
|
+
<td class="px-6 py-4 bg-brand-strong">
|
|
2926
|
+
<a href="#" class="font-medium text-white hover:underline">Edit</a>
|
|
2927
|
+
</td>
|
|
2928
|
+
</tr>
|
|
2929
|
+
<tr class="bg-brand border-b border-brand-light">
|
|
2930
|
+
<th scope="row" class="px-6 py-4 font-medium text-fg-brand-subtle whitespace-nowrap bg-brand-strong">
|
|
2931
|
+
Microsoft Surface Pro
|
|
2932
|
+
</th>
|
|
2933
|
+
<td class="px-6 py-4">
|
|
2934
|
+
White
|
|
2935
|
+
</td>
|
|
2936
|
+
<td class="px-6 py-4 bg-brand-strong">
|
|
2937
|
+
Laptop PC
|
|
2938
|
+
</td>
|
|
2939
|
+
<td class="px-6 py-4">
|
|
2940
|
+
$1999
|
|
2941
|
+
</td>
|
|
2942
|
+
<td class="px-6 py-4 bg-brand-strong">
|
|
2943
|
+
<a href="#" class="font-medium text-white hover:underline">Edit</a>
|
|
2944
|
+
</td>
|
|
2945
|
+
</tr>
|
|
2946
|
+
<tr class="bg-brand border-b border-brand-light">
|
|
2947
|
+
<th scope="row" class="px-6 py-4 font-medium text-fg-brand-subtle whitespace-nowrap bg-brand-strong">
|
|
2948
|
+
Magic Mouse 2
|
|
2949
|
+
</th>
|
|
2950
|
+
<td class="px-6 py-4">
|
|
2951
|
+
Black
|
|
2952
|
+
</td>
|
|
2953
|
+
<td class="px-6 py-4 bg-brand-strong">
|
|
2954
|
+
Accessories
|
|
2955
|
+
</td>
|
|
2956
|
+
<td class="px-6 py-4">
|
|
2957
|
+
$99
|
|
2958
|
+
</td>
|
|
2959
|
+
<td class="px-6 py-4 bg-brand-strong">
|
|
2960
|
+
<a href="#" class="font-medium text-white hover:underline">Edit</a>
|
|
2961
|
+
</td>
|
|
2962
|
+
</tr>
|
|
2963
|
+
<tr class="bg-brand border-b border-brand-light">
|
|
2964
|
+
<th scope="row" class="px-6 py-4 font-medium text-fg-brand-subtle whitespace-nowrap bg-brand-strong">
|
|
2965
|
+
Google Pixel Phone
|
|
2966
|
+
</th>
|
|
2967
|
+
<td class="px-6 py-4">
|
|
2968
|
+
Gray
|
|
2969
|
+
</td>
|
|
2970
|
+
<td class="px-6 py-4 bg-brand-strong">
|
|
2971
|
+
Phone
|
|
2972
|
+
</td>
|
|
2973
|
+
<td class="px-6 py-4">
|
|
2974
|
+
$799
|
|
2975
|
+
</td>
|
|
2976
|
+
<td class="px-6 py-4 bg-brand-strong">
|
|
2977
|
+
<a href="#" class="font-medium text-white hover:underline">Edit</a>
|
|
2978
|
+
</td>
|
|
2979
|
+
</tr>
|
|
2980
|
+
<tr class="bg-brand">
|
|
2981
|
+
<th scope="row" class="px-6 py-4 font-medium text-fg-brand-subtle whitespace-nowrap bg-brand-strong">
|
|
2982
|
+
Apple Watch 5
|
|
2983
|
+
</th>
|
|
2984
|
+
<td class="px-6 py-4">
|
|
2985
|
+
Red
|
|
2986
|
+
</td>
|
|
2987
|
+
<td class="px-6 py-4 bg-brand-strong">
|
|
2988
|
+
Wearables
|
|
2989
|
+
</td>
|
|
2990
|
+
<td class="px-6 py-4">
|
|
2991
|
+
$999
|
|
2992
|
+
</td>
|
|
2993
|
+
<td class="px-6 py-4 bg-brand-strong">
|
|
2994
|
+
<a href="#" class="font-medium text-white hover:underline">Edit</a>
|
|
2995
|
+
</td>
|
|
2996
|
+
</tr>
|
|
2997
|
+
</tbody>
|
|
2998
|
+
</table>
|
|
2999
|
+
</div>
|
|
3000
|
+
{{< /example >}}
|
|
3001
|
+
|
|
3002
|
+
### Hover state
|
|
3003
|
+
|
|
3004
|
+
Use this example to apply a different color to every second row inside the table with a colored background.
|
|
3005
|
+
|
|
3006
|
+
{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}
|
|
3007
|
+
|
|
3008
|
+
<div class="relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base border border-default">
|
|
3009
|
+
<table class="w-full text-sm text-left rtl:text-right text-fg-brand-subtle">
|
|
3010
|
+
<thead class="text-sm text-white bg-brand border-b border-brand-light">
|
|
3011
|
+
<tr>
|
|
3012
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
3013
|
+
Product name
|
|
3014
|
+
</th>
|
|
3015
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
3016
|
+
Color
|
|
3017
|
+
</th>
|
|
3018
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
3019
|
+
Category
|
|
3020
|
+
</th>
|
|
3021
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
3022
|
+
Price
|
|
3023
|
+
</th>
|
|
3024
|
+
<th scope="col" class="px-6 py-3 font-medium">
|
|
3025
|
+
Action
|
|
3026
|
+
</th>
|
|
3027
|
+
</tr>
|
|
3028
|
+
</thead>
|
|
3029
|
+
<tbody>
|
|
3030
|
+
<tr class="bg-brand border-b border-brand-light hover:bg-brand-strong">
|
|
3031
|
+
<th scope="row" class="px-6 py-4 font-medium text-fg-brand-subtle whitespace-nowrap">
|
|
3032
|
+
Apple MacBook Pro 17"
|
|
3033
|
+
</th>
|
|
3034
|
+
<td class="px-6 py-4">
|
|
3035
|
+
Silver
|
|
3036
|
+
</td>
|
|
3037
|
+
<td class="px-6 py-4">
|
|
3038
|
+
Laptop
|
|
3039
|
+
</td>
|
|
3040
|
+
<td class="px-6 py-4">
|
|
3041
|
+
$2999
|
|
3042
|
+
</td>
|
|
3043
|
+
<td class="px-6 py-4">
|
|
3044
|
+
<a href="#" class="font-medium text-white hover:underline">Edit</a>
|
|
3045
|
+
</td>
|
|
3046
|
+
</tr>
|
|
3047
|
+
<tr class="bg-brand border-b border-brand-light hover:bg-brand-strong">
|
|
3048
|
+
<th scope="row" class="px-6 py-4 font-medium text-fg-brand-subtle whitespace-nowrap">
|
|
3049
|
+
Microsoft Surface Pro
|
|
3050
|
+
</th>
|
|
3051
|
+
<td class="px-6 py-4">
|
|
3052
|
+
White
|
|
3053
|
+
</td>
|
|
3054
|
+
<td class="px-6 py-4">
|
|
3055
|
+
Laptop PC
|
|
3056
|
+
</td>
|
|
3057
|
+
<td class="px-6 py-4">
|
|
3058
|
+
$1999
|
|
3059
|
+
</td>
|
|
3060
|
+
<td class="px-6 py-4">
|
|
3061
|
+
<a href="#" class="font-medium text-white hover:underline">Edit</a>
|
|
3062
|
+
</td>
|
|
3063
|
+
</tr>
|
|
3064
|
+
<tr class="bg-brand border-b border-brand-light hover:bg-brand-strong">
|
|
3065
|
+
<th scope="row" class="px-6 py-4 font-medium text-fg-brand-subtle whitespace-nowrap">
|
|
3066
|
+
Magic Mouse 2
|
|
3067
|
+
</th>
|
|
3068
|
+
<td class="px-6 py-4">
|
|
3069
|
+
Black
|
|
3070
|
+
</td>
|
|
3071
|
+
<td class="px-6 py-4">
|
|
3072
|
+
Accessories
|
|
3073
|
+
</td>
|
|
3074
|
+
<td class="px-6 py-4">
|
|
3075
|
+
$99
|
|
3076
|
+
</td>
|
|
3077
|
+
<td class="px-6 py-4">
|
|
3078
|
+
<a href="#" class="font-medium text-white hover:underline">Edit</a>
|
|
3079
|
+
</td>
|
|
3080
|
+
</tr>
|
|
3081
|
+
<tr class="bg-brand border-b border-brand-light hover:bg-brand-strong">
|
|
3082
|
+
<th scope="row" class="px-6 py-4 font-medium text-fg-brand-subtle whitespace-nowrap">
|
|
3083
|
+
Google Pixel Phone
|
|
3084
|
+
</th>
|
|
3085
|
+
<td class="px-6 py-4">
|
|
3086
|
+
Gray
|
|
3087
|
+
</td>
|
|
3088
|
+
<td class="px-6 py-4">
|
|
3089
|
+
Phone
|
|
3090
|
+
</td>
|
|
3091
|
+
<td class="px-6 py-4">
|
|
3092
|
+
$799
|
|
3093
|
+
</td>
|
|
3094
|
+
<td class="px-6 py-4">
|
|
3095
|
+
<a href="#" class="font-medium text-white hover:underline">Edit</a>
|
|
3096
|
+
</td>
|
|
3097
|
+
</tr>
|
|
3098
|
+
<tr class="bg-brand hover:bg-brand-strong">
|
|
3099
|
+
<th scope="row" class="px-6 py-4 font-medium text-fg-brand-subtle whitespace-nowrap">
|
|
3100
|
+
Apple Watch 5
|
|
3101
|
+
</th>
|
|
3102
|
+
<td class="px-6 py-4">
|
|
3103
|
+
Red
|
|
3104
|
+
</td>
|
|
3105
|
+
<td class="px-6 py-4">
|
|
3106
|
+
Wearables
|
|
3107
|
+
</td>
|
|
3108
|
+
<td class="px-6 py-4">
|
|
3109
|
+
$999
|
|
3110
|
+
</td>
|
|
3111
|
+
<td class="px-6 py-4">
|
|
3112
|
+
<a href="#" class="font-medium text-white hover:underline">Edit</a>
|
|
3113
|
+
</td>
|
|
3114
|
+
</tr>
|
|
3115
|
+
</tbody>
|
|
3116
|
+
</table>
|
|
3117
|
+
</div>
|
|
3118
|
+
{{< /example >}}
|
|
3119
|
+
|
|
3120
|
+
## More examples
|
|
3121
|
+
|
|
3122
|
+
You can check out more table component examples from the following resources from Flowbite Blocks:
|
|
3123
|
+
|
|
3124
|
+
- [Advanced tables](https://flowbite.com/blocks/application/advanced-tables/)
|
|
3125
|
+
- [Table headers](https://flowbite.com/blocks/application/table-headers/)
|
|
3126
|
+
- [Table footers](https://flowbite.com/blocks/application/table-footers/)
|
|
3127
|
+
- [Pricing tables](https://flowbite.com/blocks/marketing/pricing/)
|