paginate

filter sort and paginate

This tailwind example is contributed by aditya_sharma, on 01-Sep-2026. Component is made with Tailwind v3.4. It is responsive.

Other

Author aditya_sharma

Tailwind v3.4 46 1

Fork Fullscreen

<div class="space-y-6">
  <div class="flex items-center justify-between">
    <div>
      <h1 class="text-3xl font-bold text-gray-900">Heading</h1>
    </div>
  </div>

<div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
    <div class="flex gap-16">
      
      <div class="flex-1 min-w-64">
        <label class="block text-sm font-semibold text-gray-700 mb-2">
          Search
        </label>

<div>
        <label class="block text-sm font-semibold text-gray-700 mb-2">
          filter 1
        </label>

<select
          class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
        >
          <option value="">All</option>
          <option value="0">option a</option>
          <option value="1">option b</option>
          <option value="2">option c</option>
        </select>
      </div>
      <div>
        <label class="block text-sm font-semibold text-gray-700 mb-2">
          filter 2
        </label>

<div
    class="px-6 py-4 border-t mt-4 border-gray-400 flex items-center justify-between"
  >
    <div class="text-sm text-gray-600">
      page
      
      of
      
    </div>

<div class="flex items-center gap-3">
      <button
        /* (click)="previousPage()"
        [disabled]="!hasPrevious() || loading()" */
        class="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
      >
        previous
      </button>
      <button
        /* (click)="nextPage()"
        [disabled]="!hasNext() || loading()" */
        class="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
      >
        next
      </button>
    </div>
  </div>
  
</div>