Table

In progress

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

Table

Default

ID First Name Created at
1 Name 1 Jan 29, 2024, 11:15:43
2 Name 2 Jan 29, 2024, 11:15:43
3 Name 3 Jan 29, 2024, 11:15:43
4 Name 4 Jan 29, 2024, 11:15:43
5 Name 5 Jan 29, 2024, 11:15:43

Zebra style

ID Name Created at
1 Name 1 Jan 29, 2024, 11:15:44
2 Name 2 Jan 29, 2024, 11:15:44
3 Name 3 Jan 29, 2024, 11:15:44
4 Name 4 Jan 29, 2024, 11:15:44
5 Name 5 Jan 29, 2024, 11:15:44

Headless

1 Name 1 Jan 29, 2024, 11:15:44
2 Name 2 Jan 29, 2024, 11:15:44
3 Name 3 Jan 29, 2024, 11:15:44
4 Name 4 Jan 29, 2024, 11:15:44
5 Name 5 Jan 29, 2024, 11:15:44

With cell borders

ID First Name Created at
1 Name 1 Jan 29, 2024, 11:15:43
2 Name 2 Jan 29, 2024, 11:15:43
3 Name 3 Jan 29, 2024, 11:15:43
4 Name 4 Jan 29, 2024, 11:15:43
5 Name 5 Jan 29, 2024, 11:15:43

Different row gaps

ID Name Created at
1 Name 1 Jan 29, 2024, 11:15:43
2 Name 2 Jan 29, 2024, 11:15:43
ID Name Created at
1 Name 1 Jan 29, 2024, 11:15:43
2 Name 2 Jan 29, 2024, 11:15:43
ID Name Created at
1 Name 1 Jan 29, 2024, 11:15:43
2 Name 2 Jan 29, 2024, 11:15:43
ID Name Created at
1 Name 1 Jan 29, 2024, 11:15:43
2 Name 2 Jan 29, 2024, 11:15:43
ID Name Created at
1 Name 1 Jan 29, 2024, 11:15:43
2 Name 2 Jan 29, 2024, 11:15:43

Different row sizes

ID Name Created at
1 Name 1 Jan 29, 2024, 11:15:43
2 Name 2 Jan 29, 2024, 11:15:43
ID Name Created at
1 Name 1 Jan 29, 2024, 11:15:43
2 Name 2 Jan 29, 2024, 11:15:43
ID Name Created at
1 Name 1 Jan 29, 2024, 11:15:43
2 Name 2 Jan 29, 2024, 11:15:43
ID Name Created at
1 Name 1 Jan 29, 2024, 11:15:43
2 Name 2 Jan 29, 2024, 11:15:43
ID Name Created at
1 Name 1 Jan 29, 2024, 11:15:43
2 Name 2 Jan 29, 2024, 11:15:43
ID Name Created at
1 Name 1 Jan 29, 2024, 11:15:43
2 Name 2 Jan 29, 2024, 11:15:43

Clickable rows

ID First Name Created at
1 Name 1 Jan 29, 2024, 11:15:43
2 Name 2 Jan 29, 2024, 11:15:43
3 Name 3 Jan 29, 2024, 11:15:43
4 Name 4 Jan 29, 2024, 11:15:43
5 Name 5 Jan 29, 2024, 11:15:43

Checkboxes

ID Name Created at
1
Name 1 Jan 29, 2024, 11:15:43
2
Name 2 Jan 29, 2024, 11:15:43
3
Name 3 Jan 29, 2024, 11:15:43
4
Name 4 Jan 29, 2024, 11:15:43
5
Name 5 Jan 29, 2024, 11:15:43

Sorting

ID Name User Created at Description
1 Name 1 User #1 Jan 29, 2024, 11:15:44 lorem ipsum dolor sit almet
2 Name 2 User #2 Jan 29, 2024, 11:15:44 lorem ipsum dolor sit almet
3 Name 3 User #3 Jan 29, 2024, 11:15:44 lorem ipsum dolor sit almet
4 Name 4 User #4 Jan 29, 2024, 11:15:44 lorem ipsum dolor sit almet
5 Name 5 User #5 Jan 29, 2024, 11:15:44 lorem ipsum dolor sit almet

With paging

ID Name Created at
1 Name 1 Mar 03, 2024, 06:38:45
2 Name 2 Mar 03, 2024, 06:38:45
3 Name 3 Mar 03, 2024, 06:38:45
4 Name 4 Mar 03, 2024, 06:38:45
5 Name 5 Mar 03, 2024, 06:38:45
6 Name 6 Mar 03, 2024, 06:38:45
7 Name 7 Mar 03, 2024, 06:38:45
8 Name 8 Mar 03, 2024, 06:38:45
9 Name 9 Mar 03, 2024, 06:38:45
10 Name 10 Mar 03, 2024, 06:38:45

Editable

ID First Name Created at

Responsive

#1: Name 1 by User #1 at Jan 29, 2024
Lorem Ipsum is simply dummy te...
#2: Name 2 by User #2 at Jan 29, 2024
Lorem Ipsum is simply dummy te...
#3: Name 3 by User #3 at Jan 29, 2024
Lorem Ipsum is simply dummy te...
#4: Name 4 by User #4 at Jan 29, 2024
Lorem Ipsum is simply dummy te...
#5: Name 5 by User #5 at Jan 29, 2024
Lorem Ipsum is simply dummy te...

Phoenix stream

ID First Name Created at
1 Name 1 Mar 03, 2024, 06:38:45
2 Name 2 Mar 03, 2024, 06:38:45
3 Name 3 Mar 03, 2024, 06:38:45
4 Name 4 Mar 03, 2024, 06:38:45
5 Name 5 Mar 03, 2024, 06:38:45
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. 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
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
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
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