Table
A component for displaying large amounts of data in rows and columns.
Default
| ID | First Name | Created at |
|---|---|---|
| 1 | Name 1 | Jan 23, 2025, 15:10:53 |
| 2 | Name 2 | Jan 23, 2025, 15:10:53 |
| 3 | Name 3 | Jan 23, 2025, 15:10:53 |
| 4 | Name 4 | Jan 23, 2025, 15:10:53 |
| 5 | Name 5 | Jan 23, 2025, 15:10:53 |
Zebra style
| ID | Name | Created at |
|---|---|---|
| 1 | Name 1 | Jan 23, 2025, 15:10:53 |
| 2 | Name 2 | Jan 23, 2025, 15:10:53 |
| 3 | Name 3 | Jan 23, 2025, 15:10:53 |
| 4 | Name 4 | Jan 23, 2025, 15:10:53 |
| 5 | Name 5 | Jan 23, 2025, 15:10:53 |
Headless
| 1 | Name 1 | Jan 23, 2025, 15:10:53 |
| 2 | Name 2 | Jan 23, 2025, 15:10:53 |
| 3 | Name 3 | Jan 23, 2025, 15:10:53 |
| 4 | Name 4 | Jan 23, 2025, 15:10:53 |
| 5 | Name 5 | Jan 23, 2025, 15:10:53 |
With cell borders
| ID | First Name | Created at |
|---|---|---|
| 1 | Name 1 | Jan 23, 2025, 15:10:53 |
| 2 | Name 2 | Jan 23, 2025, 15:10:53 |
| 3 | Name 3 | Jan 23, 2025, 15:10:53 |
| 4 | Name 4 | Jan 23, 2025, 15:10:53 |
| 5 | Name 5 | Jan 23, 2025, 15:10:53 |
Different row gaps
| ID | Name | Created at |
|---|---|---|
| 1 | Name 1 | Jan 23, 2025, 15:10:53 |
| 2 | Name 2 | Jan 23, 2025, 15:10:53 |
| ID | Name | Created at |
|---|---|---|
| 1 | Name 1 | Jan 23, 2025, 15:10:53 |
| 2 | Name 2 | Jan 23, 2025, 15:10:53 |
| ID | Name | Created at |
|---|---|---|
| 1 | Name 1 | Jan 23, 2025, 15:10:53 |
| 2 | Name 2 | Jan 23, 2025, 15:10:53 |
| ID | Name | Created at |
|---|---|---|
| 1 | Name 1 | Jan 23, 2025, 15:10:53 |
| 2 | Name 2 | Jan 23, 2025, 15:10:53 |
| ID | Name | Created at |
|---|---|---|
| 1 | Name 1 | Jan 23, 2025, 15:10:53 |
| 2 | Name 2 | Jan 23, 2025, 15:10:53 |
Different row sizes
| ID | Name | Created at |
|---|---|---|
| 1 | Name 1 | Jan 23, 2025, 15:10:53 |
| 2 | Name 2 | Jan 23, 2025, 15:10:53 |
| ID | Name | Created at |
|---|---|---|
| 1 | Name 1 | Jan 23, 2025, 15:10:53 |
| 2 | Name 2 | Jan 23, 2025, 15:10:53 |
| ID | Name | Created at |
|---|---|---|
| 1 | Name 1 | Jan 23, 2025, 15:10:53 |
| 2 | Name 2 | Jan 23, 2025, 15:10:53 |
| ID | Name | Created at |
|---|---|---|
| 1 | Name 1 | Jan 23, 2025, 15:10:53 |
| 2 | Name 2 | Jan 23, 2025, 15:10:53 |
| ID | Name | Created at |
|---|---|---|
| 1 | Name 1 | Jan 23, 2025, 15:10:53 |
| 2 | Name 2 | Jan 23, 2025, 15:10:53 |
| ID | Name | Created at |
|---|---|---|
| 1 | Name 1 | Jan 23, 2025, 15:10:53 |
| 2 | Name 2 | Jan 23, 2025, 15:10:53 |
Clickable rows
| ID | First Name | Created at |
|---|---|---|
| 1 | Name 1 | Jan 23, 2025, 15:10:53 |
| 2 | Name 2 | Jan 23, 2025, 15:10:53 |
| 3 | Name 3 | Jan 23, 2025, 15:10:53 |
| 4 | Name 4 | Jan 23, 2025, 15:10:53 |
| 5 | Name 5 | Jan 23, 2025, 15:10:53 |
Checkboxes
| ID | Name | Created at |
|---|---|---|
|
|
Name 1 | Jan 23, 2025, 15:10:53 |
|
|
Name 2 | Jan 23, 2025, 15:10:53 |
|
|
Name 3 | Jan 23, 2025, 15:10:53 |
|
|
Name 4 | Jan 23, 2025, 15:10:53 |
|
|
Name 5 | Jan 23, 2025, 15:10:53 |
Sorting
| ID | Name | User | Created at | Description |
|---|---|---|---|---|
| 1 | Name 1 | User #1 | Jan 23, 2025, 15:10:53 | lorem ipsum dolor sit almet |
| 2 | Name 2 | User #2 | Jan 23, 2025, 15:10:53 | lorem ipsum dolor sit almet |
| 3 | Name 3 | User #3 | Jan 23, 2025, 15:10:53 | lorem ipsum dolor sit almet |
| 4 | Name 4 | User #4 | Jan 23, 2025, 15:10:53 | lorem ipsum dolor sit almet |
| 5 | Name 5 | User #5 | Jan 23, 2025, 15:10:53 | lorem ipsum dolor sit almet |
With paging
| ID | Name | Created at |
|---|---|---|
| 1 | Name 1 | May 17, 2025, 10:02:54 |
| 2 | Name 2 | May 17, 2025, 10:02:54 |
| 3 | Name 3 | May 17, 2025, 10:02:54 |
| 4 | Name 4 | May 17, 2025, 10:02:54 |
| 5 | Name 5 | May 17, 2025, 10:02:54 |
| 6 | Name 6 | May 17, 2025, 10:02:54 |
| 7 | Name 7 | May 17, 2025, 10:02:54 |
| 8 | Name 8 | May 17, 2025, 10:02:54 |
| 9 | Name 9 | May 17, 2025, 10:02:54 |
| 10 | Name 10 | May 17, 2025, 10:02:54 |
Editable
| ID | First Name | Created at |
|---|---|---|
Responsive
| ID | Name | Created at | User | Short text | Long text | |
|---|---|---|---|---|---|---|
| 1 | Name 1 |
Jan 23, 2025, 15:10:54 Jan 23, 2025 |
User #1 | lorem ipsum dolor sit almet |
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting indus... |
#1: Name 1 by User #1 at Jan 23, 2025
Lorem Ipsum is simply dummy te... |
| 2 | Name 2 |
Jan 23, 2025, 15:10:54 Jan 23, 2025 |
User #2 | lorem ipsum dolor sit almet |
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting indus... |
#2: Name 2 by User #2 at Jan 23, 2025
Lorem Ipsum is simply dummy te... |
| 3 | Name 3 |
Jan 23, 2025, 15:10:54 Jan 23, 2025 |
User #3 | lorem ipsum dolor sit almet |
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting indus... |
#3: Name 3 by User #3 at Jan 23, 2025
Lorem Ipsum is simply dummy te... |
| 4 | Name 4 |
Jan 23, 2025, 15:10:54 Jan 23, 2025 |
User #4 | lorem ipsum dolor sit almet |
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting indus... |
#4: Name 4 by User #4 at Jan 23, 2025
Lorem Ipsum is simply dummy te... |
| 5 | Name 5 |
Jan 23, 2025, 15:10:54 Jan 23, 2025 |
User #5 | lorem ipsum dolor sit almet |
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting indus... |
#5: Name 5 by User #5 at Jan 23, 2025
Lorem Ipsum is simply dummy te... |
Phoenix stream
| ID | First Name | Created at |
|---|---|---|
| 1 | Name 1 | May 17, 2025, 10:02:54 |
| 2 | Name 2 | May 17, 2025, 10:02:54 |
| 3 | Name 3 | May 17, 2025, 10:02:54 |
| 4 | Name 4 | May 17, 2025, 10:02:54 |
| 5 | Name 5 | May 17, 2025, 10:02:54 |
| 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. Able to work with streams |
| 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 |
| sortable | boolean | No | true | Flag to sort items locally, default: true |
| row_click | event | No | - | Event that fires on row click |
| row_click_cb | any | No | - | Callback for generating on_click per row. row and row_id will be given as parameters |
| 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-goku" | 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-transparent" | 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 |
| body_attrs | map | No | %{} | Additional attributes for tbody tag |
| sorting_icon | string | No | "controls_chevron_up_small" | Icon for sorting |
| sorting_icon_color | string | No | - | Icon color for sorting |
| cols | slot | No | - | The list of columns defining the Grid |
| 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 |
| 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 |
| side_values | any | No | %{} | Additional values to be passed |
| 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 |