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.
FilenameTypeSizeCreated
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-table-row-medium-size Narrow rows Change heght from 72px to 54px
FilenameTypeSizeCreated
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-table-row-medium-size">
  <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.
NameValue
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 IDNameYearStars[]Directions[]Duration[]
Hustle2022Adam SandlerJeremiah Zagar1.57
Hustle2022Adam SandlerJeremiah Zagar1.57
Hustle2022Adam SandlerJeremiah Zagar1.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>
Collection ID
NameUpdatedCreated
637a40ba7a703e3936e1
Movie
<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="">
            <div class="u-flex u-cross-center u-gap-16">
              <label
                class="u-flex u-cross-center u-cursor-pointer"
                aria-label="select/deselect all visible item on table"
              >
                <div class="u-padding-16 u-margin-16-negative"><input type="checkbox" /></div>
              </label>
              <span class="eyebrow-heading-3">Collection ID</span>
            </div>
          </th>
          <th class="table-thead-col" style=""><span class="eyebrow-heading-3">Name</span></th>
          <th class="table-thead-col" style=""><span class="eyebrow-heading-3">Updated</span></th>
          <th class="table-thead-col" style="--p-col-width:185">
            <span class="eyebrow-heading-3">Created</span>
          </th>
        </tr>
      </thead>
      <tbody class="table-tbody">
        <tr class="table-row">
          <td class="table-col" data-title="Collection ID">
            <div class="u-flex u-cross-center u-gap-16">
              <label class="u-flex u-cursor-pointer">
                <div class="u-padding-16 u-margin-16-negative">
                  <input type="checkbox" aria-label="select item that start in: 637a4" />
                </div>
              </label>
              <div
                class="interactive-text-output is-buttons-on-top u-padding-inline-end-12 u-max-width-250"
              >
                <div class="text u-trim">637a40ba7a703e3936e1</div>
                <div class="interactive-text-output-buttons">
                  <button class="interactive-text-output-button is-hidden" aria-label="copy text">
                    <span class="icon-duplicate" aria-hidden="true"></span>
                  </button>
                </div>
              </div>
            </div>
          </td>
          <td class="table-col" data-title="Name"><span class="text">Movie</span></td>
          <td class="table-col" data-title="Updated">
            <time class="text">May 3, 2023, 17:32</time>
          </td>
          <td class="table-col" data-title="Created">
            <time class="text">May 3, 2023, 16:59</time>
          </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 IDNameYearStars[]Directions[]Duration[]
Hustle2022Adam SandlerJeremiah Zagar1.57
Hustle2022Adam SandlerJeremiah Zagar1.57
Hustle2022Adam SandlerJeremiah Zagar1.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>