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

Default
ID | First Name | Created at |
---|---|---|
1 | Name 1 | Sep 22, 2023, 07:01:31 |
2 | Name 2 | Sep 22, 2023, 07:01:32 |
3 | Name 3 | Sep 22, 2023, 07:01:33 |
4 | Name 4 | Sep 22, 2023, 07:01:34 |
5 | Name 5 | Sep 22, 2023, 07:01:35 |
Zebra style
ID | Name | Created at |
---|---|---|
1 | Name 1 | Sep 22, 2023, 07:01:32 |
2 | Name 2 | Sep 22, 2023, 07:01:33 |
3 | Name 3 | Sep 22, 2023, 07:01:34 |
4 | Name 4 | Sep 22, 2023, 07:01:35 |
5 | Name 5 | Sep 22, 2023, 07:01:36 |
Headless
1 | Name 1 | Sep 22, 2023, 07:01:32 |
2 | Name 2 | Sep 22, 2023, 07:01:33 |
3 | Name 3 | Sep 22, 2023, 07:01:34 |
4 | Name 4 | Sep 22, 2023, 07:01:35 |
5 | Name 5 | Sep 22, 2023, 07:01:36 |
With cell borders
ID | First Name | Created at |
---|---|---|
1 | Name 1 | Sep 22, 2023, 07:01:32 |
2 | Name 2 | Sep 22, 2023, 07:01:33 |
3 | Name 3 | Sep 22, 2023, 07:01:34 |
4 | Name 4 | Sep 22, 2023, 07:01:35 |
5 | Name 5 | Sep 22, 2023, 07:01:36 |
Different row gaps
ID | Name | Created at |
---|---|---|
1 | Name 1 | Sep 22, 2023, 07:01:32 |
2 | Name 2 | Sep 22, 2023, 07:01:33 |
ID | Name | Created at |
---|---|---|
1 | Name 1 | Sep 22, 2023, 07:01:32 |
2 | Name 2 | Sep 22, 2023, 07:01:33 |
ID | Name | Created at |
---|---|---|
1 | Name 1 | Sep 22, 2023, 07:01:32 |
2 | Name 2 | Sep 22, 2023, 07:01:33 |
ID | Name | Created at |
---|---|---|
1 | Name 1 | Sep 22, 2023, 07:01:32 |
2 | Name 2 | Sep 22, 2023, 07:01:33 |
ID | Name | Created at |
---|---|---|
1 | Name 1 | Sep 22, 2023, 07:01:32 |
2 | Name 2 | Sep 22, 2023, 07:01:33 |
Different row sizes
ID | Name | Created at |
---|---|---|
1 | Name 1 | Sep 22, 2023, 07:01:32 |
2 | Name 2 | Sep 22, 2023, 07:01:33 |
ID | Name | Created at |
---|---|---|
1 | Name 1 | Sep 22, 2023, 07:01:32 |
2 | Name 2 | Sep 22, 2023, 07:01:33 |
ID | Name | Created at |
---|---|---|
1 | Name 1 | Sep 22, 2023, 07:01:32 |
2 | Name 2 | Sep 22, 2023, 07:01:33 |
ID | Name | Created at |
---|---|---|
1 | Name 1 | Sep 22, 2023, 07:01:32 |
2 | Name 2 | Sep 22, 2023, 07:01:33 |
ID | Name | Created at |
---|---|---|
1 | Name 1 | Sep 22, 2023, 07:01:32 |
2 | Name 2 | Sep 22, 2023, 07:01:33 |
ID | Name | Created at |
---|---|---|
1 | Name 1 | Sep 22, 2023, 07:01:32 |
2 | Name 2 | Sep 22, 2023, 07:01:33 |
Clickable rows
ID | First Name | Created at |
---|---|---|
1 | Name 1 | Sep 22, 2023, 07:01:31 |
2 | Name 2 | Sep 22, 2023, 07:01:32 |
3 | Name 3 | Sep 22, 2023, 07:01:33 |
4 | Name 4 | Sep 22, 2023, 07:01:34 |
5 | Name 5 | Sep 22, 2023, 07:01:35 |
Checkboxes
ID | Name | Created at |
---|---|---|
|
Name 1 | Sep 22, 2023, 07:01:31 |
|
Name 2 | Sep 22, 2023, 07:01:32 |
|
Name 3 | Sep 22, 2023, 07:01:33 |
|
Name 4 | Sep 22, 2023, 07:01:34 |
|
Name 5 | Sep 22, 2023, 07:01:35 |
Sorting
ID | Name | User | Created at | Description |
---|---|---|---|---|
1 | Name 1 | User #1 | Sep 22, 2023, 07:01:31 | lorem ipsum dolor sit almet |
2 | Name 2 | User #2 | Sep 22, 2023, 06:01:31 | lorem ipsum dolor sit almet |
3 | Name 3 | User #3 | Sep 22, 2023, 05:01:31 | lorem ipsum dolor sit almet |
4 | Name 4 | User #4 | Sep 22, 2023, 04:01:31 | lorem ipsum dolor sit almet |
5 | Name 5 | User #5 | Sep 22, 2023, 03:01:31 | lorem ipsum dolor sit almet |
With paging
ID | Name | Created at |
---|---|---|
1 | Name 1 | Sep 27, 2023, 21:23:57 |
2 | Name 2 | Sep 27, 2023, 21:23:58 |
3 | Name 3 | Sep 27, 2023, 21:23:59 |
4 | Name 4 | Sep 27, 2023, 21:24:00 |
5 | Name 5 | Sep 27, 2023, 21:24:01 |
6 | Name 6 | Sep 27, 2023, 21:24:02 |
7 | Name 7 | Sep 27, 2023, 21:24:03 |
8 | Name 8 | Sep 27, 2023, 21:24:04 |
9 | Name 9 | Sep 27, 2023, 21:24:05 |
10 | Name 10 | Sep 27, 2023, 21:24:06 |
Editable
ID | First Name | Created at |
---|---|---|
Responsive
#1: Name 1 by User #1 at Sep 22, 2023
Lorem Ipsum is simply dummy te... |
#2: Name 2 by User #2 at Sep 22, 2023
Lorem Ipsum is simply dummy te... |
#3: Name 3 by User #3 at Sep 22, 2023
Lorem Ipsum is simply dummy te... |
#4: Name 4 by User #4 at Sep 22, 2023
Lorem Ipsum is simply dummy te... |
#5: Name 5 by User #5 at Sep 22, 2023
Lorem Ipsum is simply dummy te... |
Table props
Name | Type | Required | Default | Description |
---|---|---|---|---|
id | string | No | - | Just an id for a table tag |
items | generator | Yes | - | The list of items to be rendered. If item does not have id - than index is used instead |
selected | any | No | [] | List of selected ids, or just id, or [], or nil |
sort | keyword | No | [] | Sorting of the table, format [field:, "ASC"|"DESC"]. If given, component will sort given items before displaying |
row_click | event | No | - | Event that firset on row click |
sorting_click | event | No | - | Sorting stuff |
row_gap | css_class | No | "border-spacing-y-1" | Can be used to add any class to the table |
row_size | xs | sm | md | lg | xl | 2xl | No | "md" | Size of the row. not a css class! |
is_cell_border | boolean | No | false | If cell has border |
is_headless | boolean | No | false | If table has column headers or not |
is_zebra_style | boolean | No | false | If table is styled to present its rows in automatically alternating colours |
row_bg | css_class | No | "bg-gohan" | Can be used as an additional class for all the rows |
selected_bg | css_class | No | "bg-beerus" | Can be used as an additional class for selected rows |
header_row_class | css_class | No | - | Can be used as an additional class for header row |
even_row_bg | css_class | No | "bg-none" | Can be used as an additional class for even rows in zebra-style table |
hover_bg | css_class | No | - | Can be used as an additional class for all rows. please use hover:... tailwind's format |
testid | string | No | - | Data-testid attribute for a table tag |
class | css_class | No | - | Additional classes for a table tag |
cols | slot | No | - | The list of columns defining the Grid |
Table.Column props
Name | Type | Required | Default | Description |
---|---|---|---|---|
name | string | No | - | Is used for sorting |
label | string | No | - | The title of the column |
sortable | boolean | No | false | The is the column sortable |
width | css_class | No | - | Can be used for adding any class to both th & td tags |
class | css_class | No | - | Simple additional css class, will be added to td tag only |
Table.Input props
Input styled to use inside the tables
Name | Type | Required | Default | Description |
---|---|---|---|---|
id | string | No | - | Id attribute for html tag |
testid | string | No | - | Data-testid attribute for html tag |
class | css_class | No | - | Additional CSS classes for the html tag |
placeholder | string | No | - | Text to be shown when no value given |
value | string | No | - | Value to be shown |
disabled | boolean | No | - | If the item should be marked as disabled |
opts | any | No | %{} | Keyword | Map of additional attributes for the input |
on_change | event | No | - | On change event for the input |
on_keyup | event | No | - | On keyup event for the input |
on_focus | event | No | - | On focus event for the input |
on_blur | event | No | - | On blur event for the input |