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 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
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

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