Component

Responsive Table

Order management table with horizontal scrolling for mobile devices. Features customer avatars, order status badges, and adapts to different screen sizes while maintaining readability.

Component
Tailwind
HTML
MIT

What it does

Capabilities

Horizontal scroll
Mobile-friendly
Customer avatars
Status badges
Adaptive layout

Preview

Live component

Interactive preview

Open preview

9:41 100%

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

fluid · no fixed width 100%

No dependencies Production-ready

Install

Add to your project

terminal

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

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

Source

Implementation

code.html

<div class="overflow-x-auto rounded-xl shadow-sm border border-gray-200 bg-white">
  <table class="w-full min-w-[800px]">
    <thead>
      <tr class="bg-gradient-to-r from-slate-800 to-slate-700 text-white">
        <th class="px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider rounded-tl-lg">Customer</th>
        <th class="px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider">Order ID</th>
        <th class="px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider">Date</th>
        <th class="px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider">Amount</th>
        <th class="px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider">Status</th>
        <th class="px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider rounded-tr-lg">Items</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-gray-100">
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-4 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-4 py-4 text-sm font-mono text-gray-600">#ORD-2026-7842</td>
        <td class="px-4 py-4 text-sm text-gray-600">Mar 12, 2026</td>
        <td class="px-4 py-4 text-sm font-semibold text-gray-900">$342.50</td>
        <td class="px-4 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">
            <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
            </svg>
            Delivered
          </span>
        </td>
        <td class="px-4 py-4 text-sm text-gray-600">12 items</td>
      </tr>
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-4 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-4 py-4 text-sm font-mono text-gray-600">#ORD-2026-7841</td>
        <td class="px-4 py-4 text-sm text-gray-600">Mar 11, 2026</td>
        <td class="px-4 py-4 text-sm font-semibold text-gray-900">$128.00</td>
        <td class="px-4 py-4">
          <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"/>
            </svg>
            Shipped
          </span>
        </td>
        <td class="px-4 py-4 text-sm text-gray-600">5 items</td>
      </tr>
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-4 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-4 py-4 text-sm font-mono text-gray-600">#ORD-2026-7840</td>
        <td class="px-4 py-4 text-sm text-gray-600">Mar 10, 2026</td>
        <td class="px-4 py-4 text-sm font-semibold text-gray-900">$567.25</td>
        <td class="px-4 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">
            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            Processing
          </span>
        </td>
        <td class="px-4 py-4 text-sm text-gray-600">18 items</td>
      </tr>
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-4 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-4 py-4 text-sm font-mono text-gray-600">#ORD-2026-7839</td>
        <td class="px-4 py-4 text-sm text-gray-600">Mar 9, 2026</td>
        <td class="px-4 py-4 text-sm font-semibold text-gray-900">$89.99</td>
        <td class="px-4 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">
            <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
            </svg>
            Delivered
          </span>
        </td>
        <td class="px-4 py-4 text-sm text-gray-600">3 items</td>
      </tr>
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-4 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-4 py-4 text-sm font-mono text-gray-600">#ORD-2026-7838</td>
        <td class="px-4 py-4 text-sm text-gray-600">Mar 8, 2026</td>
        <td class="px-4 py-4 text-sm font-semibold text-gray-900">$234.75</td>
        <td class="px-4 py-4">
          <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-violet-100 text-violet-700">
            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
            </svg>
            Paid
          </span>
        </td>
        <td class="px-4 py-4 text-sm text-gray-600">8 items</td>
      </tr>
    </tbody>
  </table>
</div>

# Responsive Table

Responsive data table.

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

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

131 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/responsive-table

Prompt instruction

I want to use this DevSnips resource in production:

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

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

This is the Responsive Table — Order management table with horizontal scrolling for mobile devices. Features customer avatars, order status badges, and adapts to different screen sizes while maintaining readability.

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