Table Group

A data table component

Properties#

Features#

default#

<table class="table-group">
  <thead>
    <tr>
      <th>Product Name</th>
      <th>Manufacturer</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Gift Box</td>
      <td>Alpha Inc.</td>
      <td>$1.5</td>
    </tr>
    <tr>
      <td>Table Sheet</td>
      <td>Beta Manufacture</td>
      <td>$9</td>
    </tr>
    <tr>
      <td>Notebook</td>
      <td>Cheer co.</td>
      <td>$3</td>
    </tr>
  </tbody>
</table>

outline#

Style with horizontal lines

.table-group {
  td,
  th {
    @apply border-b border-solid border-gray-300;
  }

  thead th {
    @apply border-b-2 border-solid border-gray-300;
  }
}