Table

A component for displaying large amounts of data in rows and columns.

Table

Default

ID Name Created at
1 Name 1 Mar 31, 2023, 12:14:04
2 Name 2 Mar 31, 2023, 12:14:05
3 Name 3 Mar 31, 2023, 12:14:06
4 Name 4 Mar 31, 2023, 12:14:07
5 Name 5 Mar 31, 2023, 12:14:08

Headless

1 Name 1 Mar 31, 2023, 12:14:04
2 Name 2 Mar 31, 2023, 12:14:05
3 Name 3 Mar 31, 2023, 12:14:06
4 Name 4 Mar 31, 2023, 12:14:07
5 Name 5 Mar 31, 2023, 12:14:08

With cell borders

ID Name Created at
1 Name 1 Mar 31, 2023, 12:14:04
2 Name 2 Mar 31, 2023, 12:14:05
3 Name 3 Mar 31, 2023, 12:14:06
4 Name 4 Mar 31, 2023, 12:14:07
5 Name 5 Mar 31, 2023, 12:14:08

Different row gaps

ID Name Created at
1 Name 1 Mar 31, 2023, 12:14:04
2 Name 2 Mar 31, 2023, 12:14:05
ID Name Created at
1 Name 1 Mar 31, 2023, 12:14:04
2 Name 2 Mar 31, 2023, 12:14:05
ID Name Created at
1 Name 1 Mar 31, 2023, 12:14:04
2 Name 2 Mar 31, 2023, 12:14:05
ID Name Created at
1 Name 1 Mar 31, 2023, 12:14:04
2 Name 2 Mar 31, 2023, 12:14:05
ID Name Created at
1 Name 1 Mar 31, 2023, 12:14:04
2 Name 2 Mar 31, 2023, 12:14:05

Different row sizes

ID Name Created at
1 Name 1 Mar 31, 2023, 12:14:04
2 Name 2 Mar 31, 2023, 12:14:05
ID Name Created at
1 Name 1 Mar 31, 2023, 12:14:04
2 Name 2 Mar 31, 2023, 12:14:05
ID Name Created at
1 Name 1 Mar 31, 2023, 12:14:04
2 Name 2 Mar 31, 2023, 12:14:05
ID Name Created at
1 Name 1 Mar 31, 2023, 12:14:04
2 Name 2 Mar 31, 2023, 12:14:05
ID Name Created at
1 Name 1 Mar 31, 2023, 12:14:04
2 Name 2 Mar 31, 2023, 12:14:05
ID Name Created at
1 Name 1 Mar 31, 2023, 12:14:04
2 Name 2 Mar 31, 2023, 12:14:05
ID Name Created at
1 Name 1 Mar 31, 2023, 12:14:04
2 Name 2 Mar 31, 2023, 12:14:05

Clickable rows

ID Name Created at
1 Name 1 Mar 31, 2023, 12:14:04
2 Name 2 Mar 31, 2023, 12:14:05
3 Name 3 Mar 31, 2023, 12:14:06
4 Name 4 Mar 31, 2023, 12:14:07
5 Name 5 Mar 31, 2023, 12:14:08

Checkboxes

ID Name Created at
1 		Name 1 Mar 31, 2023, 12:14:04
2 		Name 2 Mar 31, 2023, 12:14:05
3 		Name 3 Mar 31, 2023, 12:14:06
4 		Name 4 Mar 31, 2023, 12:14:07
5 		Name 5 Mar 31, 2023, 12:14:08

Sorting and paging

1-10 of 100
Label Name Created at
1 Name 1 Mar 31, 2023, 12:14:04
10 Name 10 Mar 31, 2023, 12:14:13
100 Name 100 Mar 31, 2023, 12:15:43
11 Name 11 Mar 31, 2023, 12:14:14
12 Name 12 Mar 31, 2023, 12:14:15
13 Name 13 Mar 31, 2023, 12:14:16
14 Name 14 Mar 31, 2023, 12:14:17
15 Name 15 Mar 31, 2023, 12:14:18
16 Name 16 Mar 31, 2023, 12:14:19
17 Name 17 Mar 31, 2023, 12:14:20
Table props
Name Type Required Default Description
cols slot Yes - List of columns for the table
items generator Yes - Rows / data for the table. Each row should have unique `id` key
selected list[string] No [] list of ids of selected rows.
is_cell_border boolean No false Has borders between cells in row
is_headless boolean No false Does not have table/column headers
row_gap css_class No border-spacing-y-1 Gap between rows, TW class
row_size 2xs | xs | sm | md | lg | xl | 2xl No md Text and padding sizes for rows
row_click event No - When row is clicked
row_bg css_class No bg-gohan Regular row background, TW class
selected_bg css_class No bg-beerus Selected row background, TW class
hover_bg css_class No - Hover row background, e.g. hover:bg-heles