evodata/app/views/checks/index.html.erb

<div class="w-full">

  <div class="flex justify-between items-center">
    <h1 class="font-bold text-4xl">Checks</h1>
  </div>

  <div id="checks" class="min-w-full px-4 py-8 sm:px-0">

    <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
      <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
        <% if @checks.present? %>
          <!-- BEGIN Table -->
          <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
            <table class="min-w-full divide-y divide-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Hostname
                  </th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Name
                  </th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Description
                  </th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Date
                  </th>
                  <th scope="col" class="relative px-6 py-3">
                    <span class="sr-only">Actions</span>
                  </th>
                </tr>
              </thead>
              <tbody>
                <% @checks.each do |check| %>
                  <tr class="<%= cycle("bg-white", "bg-gray-50") %>">
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                      <%= check.hostname %>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                      <%= check.name %>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                      <%= truncate check.description, length: 60 %>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                      <%= check.date %>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                      <%= link_to "Show", check, class: "text-indigo-600 hover:text-indigo-900" %>
                    </td>
                  </tr>
                <% end %>
              </tbody>
            </table>
          </div>
          <!-- END Table -->

          <div class="px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
            <div class="flex-1 flex justify-between sm:hidden">
              <%= link_to_previous_page @checks, 'Previous page', class: "ml-3 paginate-page paginate-page-single" %>
              <%= link_to_next_page @checks, 'Next Page', class: "paginate-page paginate-page-single" %>
            </div>
            <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
              <div>
                <p class="text-sm text-gray-700 ">
                  Showing
                  <span class="font-medium"><%= @checks.offset_value + 1 %></span>
                  to
                  <span class="font-medium"><%= @checks.offset_value + (@checks.respond_to?(:records) ? @checks.records : @checks.to_a).size %></span>
                  of
                  <span class="font-medium"><%= @checks.total_count %></span>
                  results
                </p>
              </div>
              <%= paginate @checks %>
            </div>
          </div>
        <% else %>
          <div class="block w-full border-2 border-gray-300 border-dashed rounded-lg p-6 text-center">
            <p class="italic ">No results</p>
          </div>
        <% end %>
      </div>
    </div>

  </div>
</div>