oa/documentation/elements/content/content-tables-documentation.md

Tables

You can also use the content class to wrap an html table element to apply minimum styles to your table UI. Please refer to the Vuero components section to find more advanced table examples and layouts.

<template>
  <div class="content">
    <table>
      <thead>
        <tr>
          <th>Heroes</th>
          <th>Power</th>
          <th>Availability</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Superman</td>
          <td>
            <i class="fas fa-star warning-text" />
            <i class="fas fa-star warning-text" />
            <i class="fas fa-star warning-text" />
            <i class="fas fa-star warning-text" />
            <i class="fas fa-star warning-text" />
          </td>
          <td>
            <span class="tag is-rounded is-success">Available</span>
          </td>
        </tr>
        <tr>
          <td>Batman</td>
          <td>
            <i class="fas fa-star warning-text" />
            <i class="fas fa-star warning-text" />
            <i class="fas fa-star warning-text" />
            <i class="fas fa-star" />
            <i class="fas fa-star" />
          </td>
          <td>
            <span class="tag is-rounded">Unavailable</span>
          </td>
        </tr>
        <tr>
          <td>Deadpool</td>
          <td>
            <i class="fas fa-star warning-text" />
            <i class="fas fa-star warning-text" />
            <i class="fas fa-star" />
            <i class="fas fa-star" />
            <i class="fas fa-star" />
          </td>
          <td>
            <span class="tag is-rounded">Unavailable</span>
          </td>
        </tr>
        <tr>
          <td>Spawn</td>
          <td>
            <i class="fas fa-star warning-text" />
            <i class="fas fa-star warning-text" />
            <i class="fas fa-star warning-text" />
            <i class="fas fa-star warning-text" />
            <i class="fas fa-star" />
          </td>
          <td>
            <span class="tag is-rounded is-success">Available</span>
          </td>
        </tr>
        <tr>
          <td>Galactus</td>
          <td>
            <i class="fas fa-star warning-text" />
            <i class="fas fa-star warning-text" />
            <i class="fas fa-star warning-text" />
            <i class="fas fa-star warning-text" />
            <i class="fas fa-star warning-text" />
          </td>
          <td>
            <span class="tag is-rounded">Unavailable</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

Heroes	Power	Availability
Superman		Available
Batman		Unavailable
Deadpool		Unavailable
Spawn		Available
Galactus		Unavailable