Table
Tables are used throughout the Appwrite console to organize and display data.
| Class | Type | |
|---|---|---|
table
|
Table | A class representing a table |
Components
Tables consist of five components:
| Class | Type | |
|---|---|---|
table-thead
|
Head | |
table-thead-col
|
Head Column | |
table-tbody
|
Body | |
table-row
|
Row | |
table-col
|
Column |
Styles
In the Appwrite console, we use three styles of tables:
| Class | Type | |
|---|---|---|
| - | Default Table | The default table can have two or more columns. If the table width exceeds the size of the user’s screen, it should scroll horizontally. |
| Filename | Type | Size | Created | |
|---|---|---|---|---|
 airport.jpg | image/jpeg | 336.6 kB | ||
 Mobile illustration - dark.png | image/jpeg | 336.6 kB | ||
 airport.jpg | image/jpeg | 336.6 kB |
Filename
Type
Size
Created
airport.jpg
image/jpeg
336.6 kB
Mobile illustration - dark.png
image/jpeg
336.6 kB
airport.jpg
image/jpeg
336.6 kB
| Class | Type | |
|---|---|---|
is-table-row-medium-size
|
Narrow rows | Change heght from 72px to 54px |
| Filename | Type | Size | Created | |
|---|---|---|---|---|
| airport.jpg | image/jpeg | 336.6 kB | ||
| Mobile illustration - dark.png | image/jpeg | 336.6 kB | ||
| airport.jpg | image/jpeg | 336.6 kB |
Filename
Type
Size
Created
airport.jpg
image/jpeg
336.6 kB
Mobile illustration - dark.png
image/jpeg
336.6 kB
airport.jpg
image/jpeg
336.6 kB
Remove Outer Style Table
| Class | Type | |
|---|---|---|
is-remove-outer-styles
|
Without Outer Styles | Secondary table - in the Appwrite console used mostly inside a card or a wizard. |
| Name | Value | |
|---|---|---|
| Lorem | Numquam exercitationem. | |
| Ipsum | •••••• |
Name
Value
Lorem
Numquam exercitationem.
Ipsum
••••••
Create variable
Remove Outer Style Table - List with Table View
repo-name
repo-name
repo-name
| Class | Type | |
|---|---|---|
is-sticky-scroll
|
Inner Scroll | Used in case the content of a table exceeds the maximum width and the first column should be sticky. |
| Document ID | Name | Year | Stars[] | Directions[] | Duration[] |
|---|---|---|---|---|---|
| Hustle | 2022 | Adam Sandler | Jeremiah Zagar | 1.57 | |
| Hustle | 2022 | Adam Sandler | Jeremiah Zagar | 1.57 | |
| Hustle | 2022 | Adam Sandler | Jeremiah Zagar | 1.57 |
Document ID
Name
Year
Stars[]
Directions[]
Duration[]
…y-first-collection
Hustle
2022
Adam Sandler
Jeremiah Zagar
1.57
…y-first-collection
Hustle
2022
Adam Sandler
Jeremiah Zagar
1.57
…y-first-collection
Hustle
2022
Adam Sandler
Jeremiah Zagar
1.57
Collection ID | Name | Updated | Created |
|---|---|---|---|
| Movie |
class="u-flex u-cross-center u-cursor-pointer"
aria-label="select/deselect all visible item on table"
>
Collection ID
Name
Updated
Created
class="interactive-text-output is-buttons-on-top u-padding-inline-end-12 u-max-width-250"
>
637a40ba7a703e3936e1
Movie
Scrolling tables without a sticky column should be wrapped by <div class="table-with-scroll"> and <div class="table-wrapper">.
| Document ID | Name | Year | Stars[] | Directions[] | Duration[] |
|---|---|---|---|---|---|
| Hustle | 2022 | Adam Sandler | Jeremiah Zagar | 1.57 | |
| Hustle | 2022 | Adam Sandler | Jeremiah Zagar | 1.57 | |
| Hustle | 2022 | Adam Sandler | Jeremiah Zagar | 1.57 |
Document ID
Name
Year
Stars[]
Directions[]
Duration[]
…y-first-collection
Hustle
2022
Adam Sandler
Jeremiah Zagar
1.57
…y-first-collection
Hustle
2022
Adam Sandler
Jeremiah Zagar
1.57
…y-first-collection
Hustle
2022
Adam Sandler
Jeremiah Zagar
1.57
Clickable Row Tables
Clickable rows allow you to use rows as links. They are useful when you want to maintain native browser behavior for links, like opening in a new tab.
