Table
One of easiest way to display a large amount of data is to display the table. Here is a component that allow to display data in a pretty way and to let users have some controls (sort, filter, ...) on it.
Basic table
| ID | Name | Quantity | Buying date |
|---|---|---|---|
| 1 | banana | 28 | 2023-10-01 |
| 2 | apple | 15 | 2023-10-05 |
| 3 | orange | 42 | 2023-10-10 |
| 4 | grape | 8 | 2023-10-12 |
Header row
Automatically, the titles of column are set to the keyname of the dictionnary, you can change that.
id | name | quantity | buying_date |
|---|---|---|---|
| 1 | banana | 28 | 2023-10-01 |
| 2 | apple | 15 | 2023-10-05 |
| 3 | orange | 42 | 2023-10-10 |
| 4 | grape | 8 | 2023-10-12 |
id | name | quantity | buying_date |
|---|---|---|---|
| 1 | banana | 28 | 2023-10-01 |
| 2 | apple | 15 | 2023-10-05 |
| 3 | orange | 42 | 2023-10-10 |
| 4 | grape | 8 | 2023-10-12 |
Clikable row
Allow the user to get more informations about a row.
id | name | quantity | buying_date |
|---|---|---|---|
| 1 | banana | 28 | 2023-10-01 |
| 2 | apple | 15 | 2023-10-05 |
| 3 | orange | 42 | 2023-10-10 |
| 4 | grape | 8 | 2023-10-12 |
Clikable cell
Allow the user to get more informations about a cell.
id | name | quantity | buying_date |
|---|---|---|---|
| 1 | banana | 28 | 2023-10-01 |
| 2 | apple | 15 | 2023-10-05 |
| 3 | orange | 42 | 2023-10-10 |
| 4 | grape | 8 | 2023-10-12 |
Box and Title
The table can be directly put on a box with a title
Fruit information
id | name | quantity | buying_date |
|---|---|---|---|
| 1 | banana | 28 | 2023-10-01 |
| 2 | apple | 15 | 2023-10-05 |
| 3 | orange | 42 | 2023-10-10 |
| 4 | grape | 8 | 2023-10-12 |
Sort
The table can be sortable by clicking on incons in the header of the column.
| 1 | banana | 28 | 2023-10-01 |
| 2 | apple | 15 | 2023-10-05 |
| 3 | orange | 42 | 2023-10-10 |
| 4 | grape | 8 | 2023-10-12 |
Filterable column
It is possible to filter some columns to hide them from display.
Icons appear on hover
| 1 | banana | 28 | 2023-10-01 |
| 2 | apple | 15 | 2023-10-05 |
| 3 | orange | 42 | 2023-10-10 |
| 4 | grape | 8 | 2023-10-12 |
Icons appear always
| 1 | banana | 28 | 2023-10-01 |
| 2 | apple | 15 | 2023-10-05 |
| 3 | orange | 42 | 2023-10-10 |
| 4 | grape | 8 | 2023-10-12 |
Icons appear outside box
| 1 | banana | 28 | 2023-10-01 |
| 2 | apple | 15 | 2023-10-05 |
| 3 | orange | 42 | 2023-10-10 |
| 4 | grape | 8 | 2023-10-12 |
Download
It is possible to get only information that the user want to display, for downloading them for instance.
Downloadable table
| 1 | banana | 28 | 2023-10-01 |
| 2 | apple | 15 | 2023-10-05 |
| 3 | orange | 42 | 2023-10-10 |
| 4 | grape | 8 | 2023-10-12 |
Paginated
Coming soon !
Virtual table
When you have a lot of columns, you can use the virtual table to display only the columns that are visible on the screen.
Virtual table
id | name | quantity | buying_date |
|---|