Documentation

Vue

Tables

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
 <div>
    <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-100">
            <tr>
                <th scope="col" class="px-6 py-3 font-medium tracking-wider text-left text-gray-500 uppercase">#</th>
                <th scope="col" class="px-6 py-3 font-medium tracking-wider text-left text-gray-500 uppercase">First</th>
                <th scope="col" class="px-6 py-3 font-medium tracking-wider text-left text-gray-500 uppercase">Last</th>
                <th scope="col" class="px-6 py-3 font-medium tracking-wider text-left text-gray-500 uppercase">Handle</th>
            </tr>
        </thead>
     <tbody class="bg-white divide-y divide-gray-200">
        <tr>
            <th scope="row" class="px-6 py-4 text-justify whitespace-nowrap">1</th>
            <td class="px-6 py-4 whitespace-nowrap">Mark</td>
            <td class="px-6 py-4 whitespace-nowrap">Otto</td>
            <td class="px-6 py-4 whitespace-nowrap">@mdo</td>
        </tr>
        <tr>
            <th scope="row" class="px-6 py-4 text-justify whitespace-nowrap">2</th>
            <td class="px-6 py-4 whitespace-nowrap">Jacob</td>
            <td class="px-6 py-4 whitespace-nowrap">Thornton</td>
            <td class="px-6 py-4 whitespace-nowrap">@fat</td>
        </tr>
        <tr>
            <th scope="row" class="px-6 py-4 text-justify whitespace-nowrap">3</th>
            <td colspan="2" class="px-6 py-4 whitespace-nowrap">Larry the Bird</td>
            <td class="px-6 py-4 whitespace-nowrap">@twitter</td>
        </tr>
    </tbody>
</table>
</div>

Varients

Use the required class variant (e.g. table-primary, table-secondary) for color.

Class Heading Heading
Default Cell Cell
Primary Cell Cell
Secondary Cell Cell
Success Cell Cell
Danger Cell Cell
Warning Cell Cell
Info Cell Cell
Light Cell Cell
Dark Cell Cell 
<div class="mt-4">
  <table class="min-w-full divide-y divide-gray-200">
    <thead class="bg-gray-100">
      <tr>
        <th scope="col" class="px-6 py-3 font-medium tracking-wider text-left text-gray-600 uppercase">Class</th>
        <th scope="col" class="px-6 py-3 font-medium tracking-wider text-left text-gray-600 uppercase">Heading</th>
        <th scope="col" class="px-6 py-3 font-medium tracking-wider text-left text-gray-600 uppercase">Heading</th>
      </tr>
    </thead>
    <tbody class="bg-white divide-y divide-gray-200">
      <tr>
        <th scope="row" class="px-6 py-4 text-justify whitespace-nowrap">Default</th>
        <td class="px-6 py-4 whitespace-nowrap">Cell</td>
        <td class="px-6 py-4 whitespace-nowrap">Cell</td>
      </tr>
      <tr class="bg-blue-100 hover:bg-blue-200">
        <th scope="row" class="px-6 py-4 text-justify whitespace-nowrap">Primary</th>
        <td class="px-6 py-4 whitespace-nowrap">Cell</td>
        <td class="px-6 py-4 whitespace-nowrap">Cell</td>
      </tr>
      <tr class="bg-gray-300 hover:bg-gray-400">
        <th scope="row" class="px-6 py-4 text-justify whitespace-nowrap">Secondary</th>
        <td class="px-6 py-4 whitespace-nowrap">Cell</td>
        <td class="px-6 py-4 whitespace-nowrap">Cell</td>
      </tr>
      <tr class="bg-green-100 hover:bg-green-200">
        <th scope="row" class="px-6 py-4 text-justify whitespace-nowrap">Success</th>
        <td class="px-6 py-4 whitespace-nowrap">Cell</td>
        <td class="px-6 py-4 whitespace-nowrap">Cell</td>
      </tr>
      <tr class="bg-red-100 hover:bg-red-200">
        <th scope="row" class="px-6 py-4 text-justify whitespace-nowrap">Danger</th>
        <td class="px-6 py-4 whitespace-nowrap">Cell</td>
        <td class="px-6 py-4 whitespace-nowrap">Cell</td>
      </tr>
      <tr class="bg-orange-100 hover:bg-orange-200">
        <th scope="row" class="px-6 py-4 text-justify whitespace-nowrap">Warning</th>
        <td class="px-6 py-4 whitespace-nowrap">Cell</td>
        <td class="px-6 py-4 whitespace-nowrap">Cell</td>
      </tr>
      <tr class="bg-cyan-100 hover:bg-cyan-200">
        <th scope="row" class="px-6 py-4 text-justify whitespace-nowrap">Info</th>
        <td class="px-6 py-4 whitespace-nowrap">Cell</td>
        <td class="px-6 py-4 whitespace-nowrap">Cell</td>
      </tr>
      <tr class="bg-gray-200 hover:bg-gray-300">
        <th scope="row" class="px-6 py-4 text-justify whitespace-nowrap">Light</th>
        <td class="px-6 py-4 whitespace-nowrap">Cell</td>
        <td class="px-6 py-4 whitespace-nowrap">Cell</td>
      </tr>
      <tr class="text-white bg-gray-900 hover:bg-gray-900">
        <th scope="row" class="px-6 py-4 text-justify whitespace-nowrap">Dark</th>
        <td class="px-6 py-4 whitespace-nowrap">Cell</td>
        <td class="px-6 py-4 whitespace-nowrap">Cell</td>
      </tr>
    </tbody>
  </table>
</div>