Components

Tables

Tables are used to organize and display all information from a data set.

Simple table

Name Job title Leave Days Action
Sam Jones Accountant 4 View
Marlon Brando CEO 3 View
Joe Jones Secretary 3 View

<div class="flex flex-col p-4">
  <div class="-m-1.5 overflow-x-auto">
    <div class="p-1.5 min-w-full inline-block align-middle">
      <div class="overflow-hidden bg-white rounded border border-gray-200">
        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
          <thead>
            <tr>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Name</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Job title</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Leave Days</th>
              <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Action</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
            <tr>
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-200">Sam Jones</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">Accountant</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">4</td>
              <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                <a class="text-blue-500 hover:text-blue-700" href="#">View</a>
              </td>
            </tr>
             .....
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

Table with search input

Name Age Country Action
John Dillon 32 USA Delete
Toby Sky 21 Singapore Delete
Jane Dawkins 64 Malaysia Delete
Michael Knowles 16 India Delete
Samuel Colvin 73 Pakistan Delete