Component

Paginated Table

Subscription management table with complete pagination controls. Features per-page selection, page numbers, previous/next navigation, and result count display.

Component
Tailwind
HTML
MIT

What it does

Capabilities

Pagination controls
Per-page selector
Page numbers
Navigation arrows
Result count

Preview

Live component

Interactive preview

Open preview

9:41 100%

devsnips.site/library/tailwind/components/tables/paginated-table/

fluid · no fixed width 100%

No dependencies Production-ready

Install

Add to your project

terminal

npx devsnips add Tailwind/Components/Tables/paginated-table

registry path: Tailwind/Components/Tables/paginated-table

Source

Implementation

code.html

<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-x-auto">
  <table class="w-full min-w-[640px]">
    <thead>
      <tr class="bg-gray-50 border-b border-gray-200">
        <th class="px-5 py-3.5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Customer</th>
        <th class="px-5 py-3.5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Subscription</th>
        <th class="px-5 py-3.5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Billing Cycle</th>
        <th class="px-5 py-3.5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Amount</th>
        <th class="px-5 py-3.5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Status</th>
        <th class="px-5 py-3.5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Next Billing</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-gray-100" id="tableBody">
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-5 py-4">
          <div class="flex items-center gap-3">
            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80&h=80&fit=crop" alt="Sarah Mitchell" class="w-10 h-10 rounded-full object-cover">
            <div>
              <p class="text-sm font-medium text-gray-900">Sarah Mitchell</p>
              <p class="text-xs text-gray-500">[email protected]</p>
            </div>
          </div>
        </td>
        <td class="px-5 py-4">
          <div class="flex items-center gap-2">
            <div class="w-8 h-8 rounded-lg bg-indigo-100 flex items-center justify-center">
              <svg class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/>
              </svg>
            </div>
            <span class="text-sm font-medium text-gray-900">Pro Plan</span>
          </div>
        </td>
        <td class="px-5 py-4 text-sm text-gray-600">Monthly</td>
        <td class="px-5 py-4 text-sm font-semibold text-gray-900">$49.00</td>
        <td class="px-5 py-4">
          <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-emerald-100 text-emerald-700">Active</span>
        </td>
        <td class="px-5 py-4 text-sm text-gray-600">Apr 12, 2026</td>
      </tr>
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-5 py-4">
          <div class="flex items-center gap-3">
            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&fit=crop" alt="James Chen" class="w-10 h-10 rounded-full object-cover">
            <div>
              <p class="text-sm font-medium text-gray-900">James Chen</p>
              <p class="text-xs text-gray-500">[email protected]</p>
            </div>
          </div>
        </td>
        <td class="px-5 py-4">
          <div class="flex items-center gap-2">
            <div class="w-8 h-8 rounded-lg bg-amber-100 flex items-center justify-center">
              <svg class="w-4 h-4 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>
              </svg>
            </div>
            <span class="text-sm font-medium text-gray-900">Enterprise</span>
          </div>
        </td>
        <td class="px-5 py-4 text-sm text-gray-600">Annual</td>
        <td class="px-5 py-4 text-sm font-semibold text-gray-900">$299.00</td>
        <td class="px-5 py-4">
          <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-emerald-100 text-emerald-700">Active</span>
        </td>
        <td class="px-5 py-4 text-sm text-gray-600">Jan 5, 2027</td>
      </tr>
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-5 py-4">
          <div class="flex items-center gap-3">
            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=80&h=80&fit=crop" alt="Emma Thompson" class="w-10 h-10 rounded-full object-cover">
            <div>
              <p class="text-sm font-medium text-gray-900">Emma Thompson</p>
              <p class="text-xs text-gray-500">[email protected]</p>
            </div>
          </div>
        </td>
        <td class="px-5 py-4">
          <div class="flex items-center gap-2">
            <div class="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center">
              <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
              </svg>
            </div>
            <span class="text-sm font-medium text-gray-900">Starter</span>
          </div>
        </td>
        <td class="px-5 py-4 text-sm text-gray-600">Monthly</td>
        <td class="px-5 py-4 text-sm font-semibold text-gray-900">$19.00</td>
        <td class="px-5 py-4">
          <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-amber-100 text-amber-700">Trial</span>
        </td>
        <td class="px-5 py-4 text-sm text-gray-600">Mar 20, 2026</td>
      </tr>
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-5 py-4">
          <div class="flex items-center gap-3">
            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=80&h=80&fit=crop" alt="Michael Park" class="w-10 h-10 rounded-full object-cover">
            <div>
              <p class="text-sm font-medium text-gray-900">Michael Park</p>
              <p class="text-xs text-gray-500">[email protected]</p>
            </div>
          </div>
        </td>
        <td class="px-5 py-4">
          <div class="flex items-center gap-2">
            <div class="w-8 h-8 rounded-lg bg-amber-100 flex items-center justify-center">
              <svg class="w-4 h-4 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>
              </svg>
            </div>
            <span class="text-sm font-medium text-gray-900">Enterprise</span>
          </div>
        </td>
        <td class="px-5 py-4 text-sm text-gray-600">Monthly</td>
        <td class="px-5 py-4 text-sm font-semibold text-gray-900">$99.00</td>
        <td class="px-5 py-4">
          <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-emerald-100 text-emerald-700">Active</span>
        </td>
        <td class="px-5 py-4 text-sm text-gray-600">Apr 3, 2026</td>
      </tr>
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-5 py-4">
          <div class="flex items-center gap-3">
            <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=80&h=80&fit=crop" alt="Olivia Wang" class="w-10 h-10 rounded-full object-cover">
            <div>
              <p class="text-sm font-medium text-gray-900">Olivia Wang</p>
              <p class="text-xs text-gray-500">[email protected]</p>
            </div>
          </div>
        </td>
        <td class="px-5 py-4">
          <div class="flex items-center gap-2">
            <div class="w-8 h-8 rounded-lg bg-indigo-100 flex items-center justify-center">
              <svg class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/>
              </svg>
            </div>
            <span class="text-sm font-medium text-gray-900">Pro Plan</span>
          </div>
        </td>
        <td class="px-5 py-4 text-sm text-gray-600">Annual</td>
        <td class="px-5 py-4 text-sm font-semibold text-gray-900">$490.00</td>
        <td class="px-5 py-4">
          <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-emerald-100 text-emerald-700">Active</span>
        </td>
        <td class="px-5 py-4 text-sm text-gray-600">Aug 15, 2026</td>
      </tr>
    </tbody>
  </table>
  
  <!-- Pagination -->
  <div class="px-5 py-4 border-t border-gray-200 bg-gray-50 flex items-center justify-between">
    <div class="flex items-center gap-2">
      <select class="px-3 py-1.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
        <option>10 per page</option>
        <option>25 per page</option>
        <option>50 per page</option>
      </select>
      <span class="text-sm text-gray-600">Showing 1-5 of 156 results</span>
    </div>
    <div class="flex items-center gap-1">
      <button class="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
        </svg>
      </button>
      <button class="w-8 h-8 bg-indigo-600 text-white text-sm font-medium rounded-lg">1</button>
      <button class="w-8 h-8 text-gray-600 text-sm font-medium rounded-lg hover:bg-gray-100 transition-colors">2</button>
      <button class="w-8 h-8 text-gray-600 text-sm font-medium rounded-lg hover:bg-gray-100 transition-colors">3</button>
      <span class="px-2 text-gray-400">...</span>
      <button class="w-8 h-8 text-gray-600 text-sm font-medium rounded-lg hover:bg-gray-100 transition-colors">16</button>
      <button class="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
        </svg>
      </button>
    </div>
  </div>
</div>

# Paginated Table

Table with pagination controls.

## Usage
```bash
npx devsnips add Tailwind/Components/Tables/paginated-table
```
Copy from `code.html`.

## File Structure
`code.html` · `preview.html` · `metadata.json` · `README.md`

180 lines UTF-8 · LF · Spaces: 2

DevSnips AI ready Claude · Cursor · Windsurf

Agent skill & Model Context Protocol

Pass this component straight into your AI workflow. DevSnips exposes each resource as a structured, addressable registry entry, so your agent installs the real files instead of approximating them.

devsnips://components/tables/paginated-table

Prompt instruction

I want to use this DevSnips resource in production:

Page:
https://devsnips.site/library/tailwind/components/tables/paginated-table/

Install: npx devsnips add
Tailwind/Components/Tables/paginated-table

This is the Paginated Table — Subscription management table with complete pagination controls. Features per-page selection, page numbers, previous/next navigation, and result count display.

Use this DevSnips resource as the starting point for my project.
Adapt it to my project's stack and conventions, fix any issues,
and make it production-ready while preserving its intended design
and behavior.

Paste into ChatGPT, Claude or your agent — it already carries the page URL and the exact install path.

Resource URI