{% load param_utils %} <div class="shadow-md" hx-boost="false"> <div class="relative overflow-x-auto sm:rounded-t-lg"> <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400"> {% if header_action %} <c-table-header> {{ header_action }} </c-table-header> {% endif %} <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400 [&_th:not(:first-child):not(:last-child)]:max-sm:hidden"> <tr> {% for column in columns %}<th scope="col" class="px-6 py-3">{{ column }}</th>{% endfor %} </tr> </thead> <tbody class="dark:divide-y [&_td:not(:first-child):not(:last-child)]:max-sm:hidden"> {% for row in rows %}<c-table-row :data=row />{% endfor %} </tbody> </table> </div> {% if page_obj and elided_page_range %} <nav class="flex items-center flex-col md:flex-row md:justify-between px-6 py-4 dark:bg-gray-900 sm:rounded-b-lg" aria-label="Table navigation"> <span class="text-sm text-center font-normal text-gray-500 dark:text-gray-400 mb-4 md:mb-0 block w-full md:inline md:w-auto"><span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.start_index }}</span>—<span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.end_index }}</span> of <span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.paginator.count }}</span></span> <ul class="inline-flex -space-x-px rtl:space-x-reverse text-sm h-8"> <li> {% if page_obj.has_previous %} <a href="?{% param_replace page=page_obj.previous_page_number %}" class="flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Previous</a> {% else %} <a aria-current="page" class="cursor-not-allowed flex items-center justify-center px-3 h-8 leading-tight text-gray-300 bg-white border border-gray-300 rounded-s-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-600">Previous</a> {% endif %} {% for page in elided_page_range %} <li> {% if page != page_obj.number %} <a href="?{% param_replace page=page %}" class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">{{ page }}</a> {% else %} <a aria-current="page" class="cursor-not-allowed flex items-center justify-center px-3 h-8 leading-tight text-white border bg-gray-400 border-gray-300 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-200">{{ page }}</a> {% endif %} </li> {% endfor %} {% if page_obj.has_next %} <a href="?{% param_replace page=page_obj.next_page_number %}" class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Next</a> {% else %} <a aria-current="page" class="cursor-not-allowed flex items-center justify-center px-3 h-8 leading-tight text-gray-300 bg-white border border-gray-300 rounded-e-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-600">Next</a> {% endif %} </li> </ul> </nav> {% endif %} </div>