Table

div(class: "w-full rounded-sm border overflow-scroll") do
  render Components::Table.new do |table|
    table.head do
      table.column { "Name" }
      table.column { "Title" }
      table.column { "Email" }
      table.column { "Role" }
    end

    table.body do
      12.times do
        table.row do
          table.cell { "John Doe" }
          table.cell { "Front-end Developer" }
          table.cell { "[email protected]" }
          table.cell { "Owner" }
        end
      end
    end
    table.caption do
      div(class: "border-t w-full flex items-center justify-between text-xs py-2 px-4") do
        div(class: "text-gray-500") { "Displaying items 1-16 of 365 in total" }
        div(class: "text-gray-800") { "Next »" }
      end
    end
  end
end