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 |
<table class="table is-selected-columns-mobile">
<thead class="table-thead">
<tr class="table-row">
<th class="table-thead-col"><span class="eyebrow-heading-3">Filename</span></th>
<th class="table-thead-col is-only-desktop" style="--p-col-width:140">
<span class="eyebrow-heading-3">Type</span>
</th>
<th class="table-thead-col is-only-desktop" style="--p-col-width:100">
<span class="eyebrow-heading-3">Size</span>
</th>
<th class="table-thead-col is-only-desktop" style="--p-col-width:120">
<span class="eyebrow-heading-3">Created</span>
</th>
<th class="table-thead-col" style="--p-col-width:40"></th>
</tr>
</thead>
<tbody class="table-tbody">
<tr class="table-row">
<td class="table-col" data-title="Name">
<div class="u-inline-flex u-cross-center u-gap-12">
<span class="image">
<img class="avatar" width="32" height="32" src="https://unsplash.it/41" alt="" />
</span>
<span class="text u-break-word u-line-height-1-5">airport.jpg</span>
</div>
</td>
<td class="table-col is-only-desktop" data-title="Type">
<div class="tag"><span class="text">image/jpeg</span></div>
</td>
<td class="table-col is-only-desktop" data-title="Size">
<span class="text">336.6 kB</span>
</td>
<td class="table-col is-only-desktop" data-title="Created">
<time class="text">11 Mar 2022</time>
</td>
<td class="table-col u-overflow-visible">
<button class="button is-text is-only-icon" aria-label="more options">
<span class="icon-dots-horizontal" aria-hidden="true"></span>
</button>
</td>
</tr>
<tr class="table-row">
<td class="table-col" data-title="Name">
<div class="u-inline-flex u-cross-center u-gap-12">
<span class="image">
<img class="avatar" width="32" height="32" src="https://unsplash.it/40" alt="" />
</span>
<span class="text u-break-word u-line-height-1-5">Mobile illustration - dark.png</span>
</div>
</td>
<td class="table-col is-only-desktop" data-title="Type">
<div class="tag"><span class="text">image/jpeg</span></div>
</td>
<td class="table-col is-only-desktop" data-title="Size">
<span class="text">336.6 kB</span>
</td>
<td class="table-col is-only-desktop" data-title="Created">
<time class="text">11 Mar 2022</time>
</td>
<td class="table-col">
<div class="u-flex">
<button class="button is-text is-only-icon u-hide" aria-label="refresh">
<span class="icon-refresh" aria-hidden="true"></span>
</button>
<button class="button is-text is-only-icon u-hide" aria-label="delete item">
<span class="icon-trash" aria-hidden="true"></span>
</button>
<button class="button is-text is-only-icon" aria-label="more options">
<span class="icon-dots-horizontal" aria-hidden="true"></span>
</button>
</div>
</td>
</tr>
<tr class="table-row">
<td class="table-col" data-title="Name">
<div class="u-inline-flex u-cross-center u-gap-12">
<span class="image">
<img class="avatar" width="32" height="32" src="https://unsplash.it/442" alt="" />
</span>
<span class="text u-break-word u-line-height-1-5">airport.jpg</span>
</div>
</td>
<td class="table-col is-only-desktop" data-title="Type">
<div class="tag"><span class="text">image/jpeg</span></div>
</td>
<td class="table-col is-only-desktop" data-title="Size">
<span class="text">336.6 kB</span>
</td>
<td class="table-col is-only-desktop" data-title="Created">
<time class="text">11 Mar 2022</time>
</td>
<td class="table-col">
<div class="u-flex">
<button class="button is-text is-only-icon u-hide" aria-label="refresh">
<span class="icon-refresh" aria-hidden="true"></span>
</button>
<button class="button is-text is-only-icon u-hide" aria-label="delete item">
<span class="icon-trash" aria-hidden="true"></span>
</button>
<button class="button is-text is-only-icon" aria-label="more options">
<span class="icon-dots-horizontal" aria-hidden="true"></span>
</button>
</div>
</td>
</tr>
</tbody>
</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 | •••••• |
<section class="card">
<table class="table is-remove-outer-styles">
<thead class="table-thead">
<tr class="table-row">
<th class="table-thead-col"><span class="eyebrow-heading-3">Name</span></th>
<th class="table-thead-col"><span class="eyebrow-heading-3">Value</span></th>
<th class="table-thead-col" style="--p-col-width:40"></th>
</tr>
</thead>
<tbody class="table-tbody">
<tr class="table-row">
<td class="table-col" data-title="Name"><span class="text">Lorem</span></td>
<td class="table-col u-overflow-visible" data-title="value">
<div class="interactive-text-output">
<span class="text">Numquam exercitationem.</span>
<div class="u-flex u-cross-child-start u-gap-8">
<button class="interactive-text-output-button" aria-label="show hidden text">
<span class="icon-eye-off" aria-hidden="true"></span>
</button>
<button class="interactive-text-output-button" aria-label="copy text">
<span class="icon-duplicate" aria-hidden="true"></span>
</button>
</div>
</div>
</td>
<td class="table-col u-overflow-visible" data-title="options">
<button class="button is-text is-only-icon" aria-label="more options">
<span class="icon-dots-horizontal" aria-hidden="true"></span>
</button>
</td>
</tr>
<tr class="table-row">
<td class="table-col" data-title="Name"><span class="text">Ipsum</span></td>
<td class="table-col u-overflow-visible" data-title="value">
<div class="interactive-text-output">
<span class="text">••••••</span>
<div class="u-flex u-cross-child-start u-gap-8">
<button class="interactive-text-output-button" aria-label="show hidden text">
<span class="icon-eye" aria-hidden="true"></span>
</button>
<button class="interactive-text-output-button" aria-label="copy text">
<span class="icon-duplicate" aria-hidden="true"></span>
</button>
</div>
</div>
</td>
<td class="table-col u-overflow-visible" data-title="options">
<button class="button is-text is-only-icon" aria-label="more options">
<span class="icon-dots-horizontal" aria-hidden="true"></span>
</button>
</td>
</tr>
</tbody>
</table>
<div class="u-flex u-margin-block-start-16">
<button class="button is-text u-padding-inline-0" type="button">
<span class="icon-plus" aria-hidden="true"></span>
<span class="text">Create variable</span>
</button>
</div>
</section>
| 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 |
<div class="table-with-scroll">
<div class="table-wrapper">
<table class="table is-sticky-scroll">
<thead class="table-thead">
<tr class="table-row">
<th class="table-thead-col" style="--p-col-width:230">
<span class="eyebrow-heading-3">Document ID</span>
</th>
<th class="table-thead-col" style="--p-col-width:185">
<span class="eyebrow-heading-3">Name</span>
</th>
<th class="table-thead-col" style="--p-col-width:185">
<span class="eyebrow-heading-3">Year</span>
</th>
<th class="table-thead-col" style="--p-col-width:185">
<span class="eyebrow-heading-3">Stars[]</span>
</th>
<th class="table-thead-col" style="--p-col-width:185">
<span class="eyebrow-heading-3">Directions[]</span>
</th>
<th class="table-thead-col" style="--p-col-width:185">
<span class="eyebrow-heading-3">Duration[]</span>
</th>
</tr>
</thead>
<tbody class="table-tbody">
<tr class="table-row">
<td class="table-col" data-title="Document ID">
<button class="tag">
<span class="icon-duplicate" aria-hidden="true"></span>
<span class="text">…y-first-collection</span>
</button>
</td>
<td class="table-col" data-title="Name"><span class="text">Hustle</span></td>
<td class="table-col" data-title="Year"><span class="text">2022</span></td>
<td class="table-col" data-title="Stars[]"><span class="text">Adam Sandler</span></td>
<td class="table-col" data-title="Directors[]">
<span class="text">Jeremiah Zagar</span>
</td>
<td class="table-col" data-title="Duration[]"><span class="text">1.57</span></td>
</tr>
<tr class="table-row">
<td class="table-col" data-title="Document ID">
<button class="tag">
<span class="icon-duplicate" aria-hidden="true"></span>
<span class="text">…y-first-collection</span>
</button>
</td>
<td class="table-col" data-title="Name"><span class="text">Hustle</span></td>
<td class="table-col" data-title="Year"><span class="text">2022</span></td>
<td class="table-col" data-title="Stars[]"><span class="text">Adam Sandler</span></td>
<td class="table-col" data-title="Directors[]">
<span class="text">Jeremiah Zagar</span>
</td>
<td class="table-col" data-title="Duration[]"><span class="text">1.57</span></td>
</tr>
<tr class="table-row">
<td class="table-col" data-title="Document ID">
<button class="tag">
<span class="icon-duplicate" aria-hidden="true"></span>
<span class="text">…y-first-collection</span>
</button>
</td>
<td class="table-col" data-title="Name"><span class="text">Hustle</span></td>
<td class="table-col" data-title="Year"><span class="text">2022</span></td>
<td class="table-col" data-title="Stars[]"><span class="text">Adam Sandler</span></td>
<td class="table-col" data-title="Directors[]">
<span class="text">Jeremiah Zagar</span>
</td>
<td class="table-col" data-title="Duration[]"><span class="text">1.57</span></td>
</tr>
</tbody>
</table>
</div>
</div>
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 |
<div class="table-with-scroll">
<div class="table-wrapper">
<table class="table">
<thead class="table-thead">
<tr class="table-row">
<th class="table-thead-col" style="--p-col-width:230">
<span class="eyebrow-heading-3">Document ID</span>
</th>
<th class="table-thead-col" style="--p-col-width:185">
<span class="eyebrow-heading-3">Name</span>
</th>
<th class="table-thead-col" style="--p-col-width:185">
<span class="eyebrow-heading-3">Year</span>
</th>
<th class="table-thead-col" style="--p-col-width:185">
<span class="eyebrow-heading-3">Stars[]</span>
</th>
<th class="table-thead-col" style="--p-col-width:185">
<span class="eyebrow-heading-3">Directions[]</span>
</th>
<th class="table-thead-col" style="--p-col-width:185">
<span class="eyebrow-heading-3">Duration[]</span>
</th>
</tr>
</thead>
<tbody class="table-tbody">
<tr class="table-row">
<td class="table-col" data-title="Document ID">
<button class="tag">
<span class="icon-duplicate" aria-hidden="true"></span>
<span class="text">…y-first-collection</span>
</button>
</td>
<td class="table-col" data-title="Name"><span class="text">Hustle</span></td>
<td class="table-col" data-title="Year"><span class="text">2022</span></td>
<td class="table-col" data-title="Stars[]"><span class="text">Adam Sandler</span></td>
<td class="table-col" data-title="Directors[]">
<span class="text">Jeremiah Zagar</span>
</td>
<td class="table-col" data-title="Duration[]"><span class="text">1.57</span></td>
</tr>
<tr class="table-row">
<td class="table-col" data-title="Document ID">
<button class="tag">
<span class="icon-duplicate" aria-hidden="true"></span>
<span class="text">…y-first-collection</span>
</button>
</td>
<td class="table-col" data-title="Name"><span class="text">Hustle</span></td>
<td class="table-col" data-title="Year"><span class="text">2022</span></td>
<td class="table-col" data-title="Stars[]"><span class="text">Adam Sandler</span></td>
<td class="table-col" data-title="Directors[]">
<span class="text">Jeremiah Zagar</span>
</td>
<td class="table-col" data-title="Duration[]"><span class="text">1.57</span></td>
</tr>
<tr class="table-row">
<td class="table-col" data-title="Document ID">
<button class="tag">
<span class="icon-duplicate" aria-hidden="true"></span>
<span class="text">…y-first-collection</span>
</button>
</td>
<td class="table-col" data-title="Name"><span class="text">Hustle</span></td>
<td class="table-col" data-title="Year"><span class="text">2022</span></td>
<td class="table-col" data-title="Stars[]"><span class="text">Adam Sandler</span></td>
<td class="table-col" data-title="Directors[]">
<span class="text">Jeremiah Zagar</span>
</td>
<td class="table-col" data-title="Duration[]"><span class="text">1.57</span></td>
</tr>
</tbody>
</table>
</div>
</div>
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.
<div class="table" role="table">
<div class="table-thead" role="rowheader">
<div class="table-row" role="row">
<div class="table-thead-col" role="columnheader">
<span class="eyebrow-heading-3">Filename</span>
</div>
<div class="table-thead-col is-only-desktop" role="columnheader" style="--p-col-width:140">
<span class="eyebrow-heading-3">Type</span>
</div>
<div class="table-thead-col is-only-desktop" role="columnheader" style="--p-col-width:100">
<span class="eyebrow-heading-3">Size</span>
</div>
<div class="table-thead-col is-only-desktop" role="columnheader" style="--p-col-width:120">
<span class="eyebrow-heading-3">Created</span>
</div>
<div class="table-thead-col" role="columnheader" style="--p-col-width:40"></div>
</div>
</div>
<div class="table-tbody" role="rowgroup">
<a class="table-row" role="row" href="#">
<div class="table-col" role="cell" data-title="Name">
<div class="u-inline-flex u-cross-center u-gap-12">
<span class="image">
<img class="avatar" width="32" height="32" src="https://unsplash.it/40" alt="" />
</span>
<span class="text u-break-word u-line-height-1-5">airport.jpg</span>
</div>
</div>
<div class="table-col is-only-desktop" role="cell" data-title="Type">
<div class="tag"><span class="text">image/jpeg</span></div>
</div>
<div class="table-col is-only-desktop" role="cell" data-title="Size">
<span class="text">336.6 kB</span>
</div>
<div class="table-col is-only-desktop" role="cell" data-title="Created">
<time class="text">11 Mar 2022</time>
</div>
<div class="table-col" role="cell" date-title="Options">
<div class="u-flex">
<button class="button is-text is-only-icon u-hide" aria-label="refresh">
<span class="icon-refresh" aria-hidden="true"></span>
</button>
<button class="button is-text is-only-icon u-hide" aria-label="delete item">
<span class="icon-trash" aria-hidden="true"></span>
</button>
<button class="button is-text is-only-icon" aria-label="more options">
<span class="icon-dots-horizontal" aria-hidden="true"></span>
</button>
</div>
</div>
</a>
<a class="table-row" role="row" href="#">
<div class="table-col" role="cell" data-title="Name">
<div class="u-inline-flex u-cross-center u-gap-12">
<span class="image">
<img class="avatar" width="32" height="32" src="https://unsplash.it/40" alt="" />
</span>
<span class="text u-break-word u-line-height-1-5">
<p class="text u-margin-block-start-8">Mobile illustration - dark.png</p>
</span>
</div>
</div>
<div class="table-col is-only-desktop" role="cell" data-title="Type">
<div class="tag"><span class="text">image/jpeg</span></div>
</div>
<div class="table-col is-only-desktop" role="cell" data-title="Size">
<span class="text">336.6 kB</span>
</div>
<div class="table-col is-only-desktop" role="cell" data-title="Created">
<time class="text">11 Mar 2022</time>
</div>
<div class="table-col" role="cell" date-title="Options">
<div class="u-flex">
<button class="button is-text is-only-icon u-hide" aria-label="refresh">
<span class="icon-refresh" aria-hidden="true"></span>
</button>
<button class="button is-text is-only-icon u-hide" aria-label="delete item">
<span class="icon-trash" aria-hidden="true"></span>
</button>
<button class="button is-text is-only-icon" aria-label="more options">
<span class="icon-dots-horizontal" aria-hidden="true"></span>
</button>
</div>
</div>
</a>
<a class="table-row" role="row" href="#">
<div class="table-col" role="cell" data-title="Name">
<div class="u-inline-flex u-cross-center u-gap-12">
<span class="image">
<img class="avatar" width="32" height="32" src="https://unsplash.it/39" alt="" />
</span>
<span class="text u-break-word u-line-height-1-5">airport.jpg</span>
</div>
</div>
<div class="table-col is-only-desktop" role="cell" data-title="Type">
<div class="tag"><span class="text">image/jpeg</span></div>
</div>
<div class="table-col is-only-desktop" role="cell" data-title="Size">
<span class="text">336.6 kB</span>
</div>
<div class="table-col is-only-desktop" role="cell" data-title="Created">
<time class="text">11 Mar 2022</time>
</div>
<div class="table-col" role="cell" date-title="Options">
<div class="u-flex">
<button class="button is-text is-only-icon u-hide" aria-label="refresh">
<span class="icon-refresh" aria-hidden="true"></span>
</button>
<button class="button is-text is-only-icon u-hide" aria-label="delete item">
<span class="icon-trash" aria-hidden="true"></span>
</button>
<button class="button is-text is-only-icon" aria-label="more options">
<span class="icon-dots-horizontal" aria-hidden="true"></span>
</button>
</div>
</div>
</a>
</div>
</div>