Tables - Skeleton

0	Fe	Iron	26
1	Rh	Rhodium	45
2	I	Iodine	53
3	Rn	Radon	86
4	Tc	Technetium	43

---
const tableData = [
  { position: '0', name: 'Iron', symbol: 'Fe', atomic_no: '26' },
  { position: '1', name: 'Rhodium', symbol: 'Rh', atomic_no: '45' },
  { position: '2', name: 'Iodine', symbol: 'I', atomic_no: '53' },
  { position: '3', name: 'Radon', symbol: 'Rn', atomic_no: '86' },
  { position: '4', name: 'Technetium', symbol: 'Tc', atomic_no: '43' }
];
---

<div class="table-wrap">
  <table class="table caption-bottom">
    <tbody class="[&>tr]:hover:preset-tonal-primary">
      {
        tableData.map((row) => (
          <tr>
            <td>{row.position}</td>
            <td>{row.symbol}</td>
            <td>{row.name}</td>
            <td class="text-right">{row.atomic_no}</td>
          </tr>
        ))
      }
    </tbody>
  </table>
</div>

Extras

Optionally add a header, footer, and caption.

A list of elements from the periodic table.
Position	Symbol	Name	Weight
0	Fe	Iron	26
1	Rh	Rhodium	45
2	I	Iodine	53
3	Rn	Radon	86
4	Tc	Technetium	43
Total			5 Elements

---
const tableData = [
  { position: '0', name: 'Iron', symbol: 'Fe', atomic_no: '26' },
  { position: '1', name: 'Rhodium', symbol: 'Rh', atomic_no: '45' },
  { position: '2', name: 'Iodine', symbol: 'I', atomic_no: '53' },
  { position: '3', name: 'Radon', symbol: 'Rn', atomic_no: '86' },
  { position: '4', name: 'Technetium', symbol: 'Tc', atomic_no: '43' }
];
---

<div class="table-wrap">
  <table class="table caption-bottom">
    <caption class="pt-4">A list of elements from the periodic table.</caption>
    <thead>
      <tr>
        <th>Position</th>
        <th>Symbol</th>
        <th>Name</th>
        <th class="!text-right">Weight</th>
      </tr>
    </thead>
    <tbody class="[&>tr]:hover:preset-tonal-primary">
      {
        tableData.map((row) => (
          <tr>
            <td>{row.position}</td>
            <td>{row.symbol}</td>
            <td>{row.name}</td>
            <td class="text-right">{row.atomic_no}</td>
          </tr>
        ))
      }
    </tbody>
    <tfoot>
      <tr>
        <td colspan="3">Total</td>
        <td class="text-right">{tableData.length} Elements</td>
      </tr>
    </tfoot>
  </table>
</div>

Navigation

Native HTML tables do not support interaction. For accessibility, use anchors or buttons within the last cell.

First Name	Last Name	Email
Liam	Steele	liam@email.com	View →
Athena	Marks	athena@email.com	View →
Angela	Rivers	angela@email.com	View →

---
const tableData = [
  { first: 'Liam', last: 'Steele', email: 'liam@email.com' },
  { first: 'Athena', last: 'Marks', email: 'athena@email.com' },
  { first: 'Angela', last: 'Rivers', email: 'angela@email.com' }
];
---

<div class="table-wrap">
  <table class="table caption-bottom">
    <tbody>
      <thead>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Email</th>
          <th>&nbsp;</th>
        </tr>
      </thead>
      {
        tableData.map((row) => (
          <tr>
            <td>{row.first}</td>
            <td>{row.last}</td>
            <td>{row.email}</td>
            <td class="text-right">
              <a class="btn btn-sm preset-filled" href="#">
                View &rarr;
              </a>
            </td>
          </tr>
        ))
      }
    </tbody>
  </table>
</div>

Layout

See Tailwind’s utility classes for adjusting the table layout algorithm. Apply this to the Table element.

Hover Rows

Add a visual hover effect using the following Tailwind syntax.

<tbody class="[&>tr]:hover:preset-tonal-primary">
  ...
</tbody>

Pagination

Pair with the Skeleton Pagination component for large data sets.