Data Table

Class Type
inline-code Inline Code A class representing an inline code
ID
Title
Release date
Genre[]
Direction[]
Created at
Updated
65e89…9249db8df
The Shawshank Redemption
1994
Drama
Frank Darabont
65e89…9249db8df
The Shawshank Redemption
1994
Drama
Frank Darabont
65e89…9249db8df
The Shawshank Redemption
1994
Drama
Frank Darabont
65e89…9249db8df
The Shawshank Redemption
1994
Drama
Frank Darabont
65e89…9249db8df
The Shawshank Redemption
1994
Drama
Frank Darabont
65e89…9249db8df
The Shawshank Redemption
1994
Drama
Frank Darabont
65e89…9249db8df
The Shawshank Redemption
1994
Drama
Frank Darabont
65e89…9249db8df
The Shawshank Redemption
1994
Drama
Frank Darabont
65e89…9249db8df
The Shawshank Redemption
1994
Drama
Frank Darabont
65e89…9249db8df
The Shawshank Redemption
1994
Drama
Frank Darabont
65e89…9249db8df
The Shawshank Redemption
1994
Drama
Frank Darabont
65e89…9249db8df
The Shawshank Redemption
1994
Drama
Frank Darabont
65e89…9249db8df
The Shawshank Redemption
1994
Drama
Frank Darabont
65e89…9249db8df
The Shawshank Redemption
1994
Drama
Frank Darabont
<table class="data-table">
  <thead class="data-table-thead">
    <tr class="data-table-thead-row">
      <th class="data-table-thead-col" style="--p-col-width:48;">
        <input type="checkbox" class="is-small" />
      </th>
      <th class="data-table-thead-col" style="--p-col-width:170;">
        <div class="u-flex u-cross-center u-gap-8">
          <span class="icon-finger-print" aria-hidden="true"></span>
          <span>ID</span>
        </div>
      </th>
      <th class="data-table-thead-col" style="--p-col-width:170;">
        <div class="u-flex u-cross-center u-gap-8">
          <span class="icon-text" aria-hidden="true"></span>
          <span>Title</span>
        </div>
      </th>
      <th class="data-table-thead-col" style="--p-col-width:170;">
        <div class="u-flex u-cross-center u-gap-8">
          <span class="icon-hashtag" aria-hidden="true"></span>
          <span>Release date</span>
        </div>
      </th>
      <th class="data-table-thead-col" style="--p-col-width:170;">
        <div class="u-flex u-cross-center u-gap-8">
          <span class="icon-text" aria-hidden="true"></span>
          <span>Genre[]</span>
        </div>
      </th>
      <th class="data-table-thead-col" style="--p-col-width:170;">
        <div class="u-flex u-cross-center u-gap-8">
          <span class="icon-text" aria-hidden="true"></span>
          <span>Direction[]</span>
        </div>
      </th>
      <th class="data-table-thead-col" style="--p-col-width:170;">
        <div class="u-flex u-cross-center u-gap-8">
          <span class="icon-calendar" aria-hidden="true"></span>
          <span>Created at</span>
        </div>
      </th>
      <th class="data-table-thead-col" style="--p-col-width:170;">
        <div class="u-flex u-cross-center u-gap-8">
          <span class="icon-calendar" aria-hidden="true"></span>
          <span>Updated</span>
        </div>
      </th>
      <th class="data-table-thead-col" style="--p-col-width:48;">
        <button class="u-flex u-cross-center u-gap-8 u-margin-inline-auto" aria-label="edit item">
          <span class="icon-plus" aria-hidden="true"></span>
        </button>
      </th>
    </tr>
  </thead>
  <tbody class="data-table-tbody">
    <tr class="data-table-row">
      <td class="data-table-col"><input type="checkbox" class="is-small" /></td>
      <td class="data-table-col">
        <div class="u-flex u-gap-8"><div class="u-trim">65e89…9249db8df</div></div>
      </td>
      <td class="data-table-col">
        <div class="u-position-relative"><div class="u-trim">The Shawshank Redemption</div></div>
      </td>
      <td class="data-table-col"><div class="u-trim">1994</div></td>
      <td class="data-table-col"><div class="u-trim">Drama</div></td>
      <td class="data-table-col"><div class="u-trim">Frank Darabont</div></td>
      <td class="data-table-col"><time class="u-block u-trim">FFeb 25, 2024, 11:50</time></td>
      <td class="data-table-col"><time class="u-block u-trim">FFeb 25, 2024, 11:50</time></td>
      <td class="data-table-col">
        <button class="u-margin-inline-8" aria-label="edit item">
          <span class="icon-pencil" aria-hidden="true"></span>
        </button>
      </td>
    </tr>
    <tr class="data-table-row">
      <td class="data-table-col"><input type="checkbox" class="is-small" /></td>
      <td class="data-table-col">
        <div class="u-flex u-gap-8"><div class="u-trim">65e89…9249db8df</div></div>
      </td>
      <td class="data-table-col">
        <div class="u-position-relative"><div class="u-trim">The Shawshank Redemption</div></div>
      </td>
      <td class="data-table-col"><div class="u-trim">1994</div></td>
      <td class="data-table-col"><div class="u-trim">Drama</div></td>
      <td class="data-table-col"><div class="u-trim">Frank Darabont</div></td>
      <td class="data-table-col"><time class="u-block u-trim">FFeb 25, 2024, 11:50</time></td>
      <td class="data-table-col"><time class="u-block u-trim">FFeb 25, 2024, 11:50</time></td>
      <td class="data-table-col">
        <button class="u-margin-inline-8" aria-label="edit item">
          <span class="icon-pencil" aria-hidden="true"></span>
        </button>
      </td>
    </tr>
    <tr class="data-table-row">
      <td class="data-table-col"><input type="checkbox" class="is-small" /></td>
      <td class="data-table-col">
        <div class="u-flex u-gap-8"><div class="u-trim">65e89…9249db8df</div></div>
      </td>
      <td class="data-table-col">
        <div class="u-position-relative"><div class="u-trim">The Shawshank Redemption</div></div>
      </td>
      <td class="data-table-col"><div class="u-trim">1994</div></td>
      <td class="data-table-col"><div class="u-trim">Drama</div></td>
      <td class="data-table-col"><div class="u-trim">Frank Darabont</div></td>
      <td class="data-table-col"><time class="u-block u-trim">FFeb 25, 2024, 11:50</time></td>
      <td class="data-table-col"><time class="u-block u-trim">FFeb 25, 2024, 11:50</time></td>
      <td class="data-table-col">
        <button class="u-margin-inline-8" aria-label="edit item">
          <span class="icon-pencil" aria-hidden="true"></span>
        </button>
      </td>
    </tr>
    <tr class="data-table-row">
      <td class="data-table-col"><input type="checkbox" class="is-small" /></td>
      <td class="data-table-col">
        <div class="u-flex u-gap-8"><div class="u-trim">65e89…9249db8df</div></div>
      </td>
      <td class="data-table-col">
        <div class="u-position-relative"><div class="u-trim">The Shawshank Redemption</div></div>
      </td>
      <td class="data-table-col"><div class="u-trim">1994</div></td>
      <td class="data-table-col"><div class="u-trim">Drama</div></td>
      <td class="data-table-col"><div class="u-trim">Frank Darabont</div></td>
      <td class="data-table-col"><time class="u-block u-trim">FFeb 25, 2024, 11:50</time></td>
      <td class="data-table-col"><time class="u-block u-trim">FFeb 25, 2024, 11:50</time></td>
      <td class="data-table-col">
        <button class="u-margin-inline-8" aria-label="edit item">
          <span class="icon-pencil" aria-hidden="true"></span>
        </button>
      </td>
    </tr>
    <tr class="data-table-row">
      <td class="data-table-col"><input type="checkbox" class="is-small" /></td>
      <td class="data-table-col">
        <div class="u-flex u-gap-8"><div class="u-trim">65e89…9249db8df</div></div>
      </td>
      <td class="data-table-col">
        <div class="u-position-relative"><div class="u-trim">The Shawshank Redemption</div></div>
      </td>
      <td class="data-table-col"><div class="u-trim">1994</div></td>
      <td class="data-table-col"><div class="u-trim">Drama</div></td>
      <td class="data-table-col"><div class="u-trim">Frank Darabont</div></td>
      <td class="data-table-col"><time class="u-block u-trim">FFeb 25, 2024, 11:50</time></td>
      <td class="data-table-col"><time class="u-block u-trim">FFeb 25, 2024, 11:50</time></td>
      <td class="data-table-col">
        <button class="u-margin-inline-8" aria-label="edit item">
          <span class="icon-pencil" aria-hidden="true"></span>
        </button>
      </td>
    </tr>
    <tr class="data-table-row">
      <td class="data-table-col"><input type="checkbox" class="is-small" /></td>
      <td class="data-table-col">
        <div class="u-flex u-gap-8"><div class="u-trim">65e89…9249db8df</div></div>
      </td>
      <td class="data-table-col">
        <div class="u-position-relative"><div class="u-trim">The Shawshank Redemption</div></div>
      </td>
      <td class="data-table-col"><div class="u-trim">1994</div></td>
      <td class="data-table-col"><div class="u-trim">Drama</div></td>
      <td class="data-table-col"><div class="u-trim">Frank Darabont</div></td>
      <td class="data-table-col"><time class="u-block u-trim">FFeb 25, 2024, 11:50</time></td>
      <td class="data-table-col"><time class="u-block u-trim">FFeb 25, 2024, 11:50</time></td>
      <td class="data-table-col">
        <button class="u-margin-inline-8" aria-label="edit item">
          <span class="icon-pencil" aria-hidden="true"></span>
        </button>
      </td>
    </tr>
    <tr class="data-table-row">
      <td class="data-table-col"><input type="checkbox" class="is-small" /></td>
      <td class="data-table-col">
        <div class="u-flex u-gap-8"><div class="u-trim">65e89…9249db8df</div></div>
      </td>
      <td class="data-table-col">
        <div class="u-position-relative"><div class="u-trim">The Shawshank Redemption</div></div>
      </td>
      <td class="data-table-col"><div class="u-trim">1994</div></td>
      <td class="data-table-col"><div class="u-trim">Drama</div></td>
      <td class="data-table-col"><div class="u-trim">Frank Darabont</div></td>
      <td class="data-table-col"><time class="u-block u-trim">FFeb 25, 2024, 11:50</time></td>
      <td class="data-table-col"><time class="u-block u-trim">FFeb 25, 2024, 11:50</time></td>
      <td class="data-table-col">
        <button class="u-margin-inline-8" aria-label="edit item">
          <span class="icon-pencil" aria-hidden="true"></span>
        </button>
      </td>
    </tr>
    <tr class="data-table-row">
      <td class="data-table-col"><input type="checkbox" class="is-small" /></td>
      <td class="data-table-col">
        <div class="u-flex u-gap-8"><div class="u-trim">65e89…9249db8df</div></div>
      </td>
      <td class="data-table-col">
        <div class="u-position-relative"><div class="u-trim">The Shawshank Redemption</div></div>
      </td>
      <td class="data-table-col"><div class="u-trim">1994</div></td>
      <td class="data-table-col"><div class="u-trim">Drama</div></td>
      <td class="data-table-col"><div class="u-trim">Frank Darabont</div></td>
      <td class="data-table-col"><time class="u-block u-trim">FFeb 25, 2024, 11:50</time></td>
      <td class="data-table-col"><time class="u-block u-trim">FFeb 25, 2024, 11:50</time></td>
      <td class="data-table-col">
        <button class="u-margin-inline-8" aria-label="edit item">
          <span class="icon-pencil" aria-hidden="true"></span>
        </button>
      </td>
    </tr>
    <tr class="data-table-row">
      <td class="data-table-col"><input type="checkbox" class="is-small" /></td>
      <td class="data-table-col">
        <div class="u-flex u-gap-8"><div class="u-trim">65e89…9249db8df</div></div>
      </td>
      <td class="data-table-col">
        <div class="u-position-relative"><div class="u-trim">The Shawshank Redemption</div></div>
      </td>
      <td class="data-table-col"><div class="u-trim">1994</div></td>
      <td class="data-table-col"><div class="u-trim">Drama</div></td>
      <td class="data-table-col"><div class="u-trim">Frank Darabont</div></td>
      <td class="data-table-col"><time class="u-block u-trim">FFeb 25, 2024, 11:50</time></td>
      <td class="data-table-col"><time class="u-block u-trim">FFeb 25, 2024, 11:50</time></td>
      <td class="data-table-col">
        <button class="u-margin-inline-8" aria-label="edit item">
          <span class="icon-pencil" aria-hidden="true"></span>
        </button>
      </td>
    </tr>
    <tr class="data-table-row">
      <td class="data-table-col"><input type="checkbox" class="is-small" /></td>
      <td class="data-table-col">
        <div class="u-flex u-gap-8"><div class="u-trim">65e89…9249db8df</div></div>
      </td>
      <td class="data-table-col">
        <div class="u-position-relative"><div class="u-trim">The Shawshank Redemption</div></div>
      </td>
      <td class="data-table-col"><div class="u-trim">1994</div></td>
      <td class="data-table-col"><div class="u-trim">Drama</div></td>
      <td class="data-table-col"><div class="u-trim">Frank Darabont</div></td>
      <td class="data-table-col"><time class="u-block u-trim">FFeb 25, 2024, 11:50</time></td>
      <td class="data-table-col"><time class="u-block u-trim">FFeb 25, 2024, 11:50</time></td>
      <td class="data-table-col">
        <button class="u-margin-inline-8" aria-label="edit item">
          <span class="icon-pencil" aria-hidden="true"></span>
        </button>
      </td>
    </tr>
    <tr class="data-table-row">
      <td class="data-table-col"><input type="checkbox" class="is-small" /></td>
      <td class="data-table-col">
        <div class="u-flex u-gap-8"><div class="u-trim">65e89…9249db8df</div></div>
      </td>
      <td class="data-table-col">
        <div class="u-position-relative"><div class="u-trim">The Shawshank Redemption</div></div>
      </td>
      <td class="data-table-col"><div class="u-trim">1994</div></td>
      <td class="data-table-col"><div class="u-trim">Drama</div></td>
      <td class="data-table-col"><div class="u-trim">Frank Darabont</div></td>
      <td class="data-table-col"><time class="u-block u-trim">FFeb 25, 2024, 11:50</time></td>
      <td class="data-table-col"><time class="u-block u-trim">FFeb 25, 2024, 11:50</time></td>
      <td class="data-table-col">
        <button class="u-margin-inline-8" aria-label="edit item">
          <span class="icon-pencil" aria-hidden="true"></span>
        </button>
      </td>
    </tr>
    <tr class="data-table-row">
      <td class="data-table-col"><input type="checkbox" class="is-small" /></td>
      <td class="data-table-col">
        <div class="u-flex u-gap-8"><div class="u-trim">65e89…9249db8df</div></div>
      </td>
      <td class="data-table-col">
        <div class="u-position-relative"><div class="u-trim">The Shawshank Redemption</div></div>
      </td>
      <td class="data-table-col"><div class="u-trim">1994</div></td>
      <td class="data-table-col"><div class="u-trim">Drama</div></td>
      <td class="data-table-col"><div class="u-trim">Frank Darabont</div></td>
      <td class="data-table-col"><time class="u-block u-trim">FFeb 25, 2024, 11:50</time></td>
      <td class="data-table-col"><time class="u-block u-trim">FFeb 25, 2024, 11:50</time></td>
      <td class="data-table-col">
        <button class="u-margin-inline-8" aria-label="edit item">
          <span class="icon-pencil" aria-hidden="true"></span>
        </button>
      </td>
    </tr>
    <tr class="data-table-row">
      <td class="data-table-col"><input type="checkbox" class="is-small" /></td>
      <td class="data-table-col">
        <div class="u-flex u-gap-8"><div class="u-trim">65e89…9249db8df</div></div>
      </td>
      <td class="data-table-col">
        <div class="u-position-relative"><div class="u-trim">The Shawshank Redemption</div></div>
      </td>
      <td class="data-table-col"><div class="u-trim">1994</div></td>
      <td class="data-table-col"><div class="u-trim">Drama</div></td>
      <td class="data-table-col"><div class="u-trim">Frank Darabont</div></td>
      <td class="data-table-col"><time class="u-block u-trim">FFeb 25, 2024, 11:50</time></td>
      <td class="data-table-col"><time class="u-block u-trim">FFeb 25, 2024, 11:50</time></td>
      <td class="data-table-col">
        <button class="u-margin-inline-8" aria-label="edit item">
          <span class="icon-pencil" aria-hidden="true"></span>
        </button>
      </td>
    </tr>
    <tr class="data-table-row">
      <td class="data-table-col"><input type="checkbox" class="is-small" /></td>
      <td class="data-table-col">
        <div class="u-flex u-gap-8"><div class="u-trim">65e89…9249db8df</div></div>
      </td>
      <td class="data-table-col">
        <div class="u-position-relative"><div class="u-trim">The Shawshank Redemption</div></div>
      </td>
      <td class="data-table-col"><div class="u-trim">1994</div></td>
      <td class="data-table-col"><div class="u-trim">Drama</div></td>
      <td class="data-table-col"><div class="u-trim">Frank Darabont</div></td>
      <td class="data-table-col"><time class="u-block u-trim">FFeb 25, 2024, 11:50</time></td>
      <td class="data-table-col"><time class="u-block u-trim">FFeb 25, 2024, 11:50</time></td>
      <td class="data-table-col">
        <button class="u-margin-inline-8" aria-label="edit item">
          <span class="icon-pencil" aria-hidden="true"></span>
        </button>
      </td>
    </tr>
  </tbody>
</table>