devsnips
Search docs, APIs, guides…

Component

Order Management Table

E-commerce order tracking table with customer info, order details, status badges with animations, shipping locations, and action buttons for order management.

  • Component
  • Tailwind
  • HTML
  • MIT

What it does

Capabilities

  • Order IDs
  • Customer avatars
  • Status badges
  • Shipping locations
  • Action buttons

Preview

Live component

Interactive preview
Open preview
9:41 100%
devsnips.site/library/tailwind/components/tables/order-management-table/
fluid · no fixed width 100%
No dependencies Production-ready

Install

Add to your project

terminal
npx devsnips add Tailwind/Components/Tables/order-management-table
registry path: Tailwind/Components/Tables/order-management-table

Source

Implementation

code.html 
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
  <table class="w-full">
    <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">Order</th>
        <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">Items</th>
        <th class="px-5 py-3.5 text-right text-xs font-bold text-gray-600 uppercase tracking-wider">Total</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">Shipping</th>
        <th class="px-5 py-3.5 text-right text-xs font-bold text-gray-600 uppercase tracking-wider">Actions</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-gray-100">
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-5 py-4">
          <div>
            <p class="text-sm font-semibold text-gray-900">#ORD-7824</p>
            <p class="text-xs text-gray-500">Mar 12, 2026 at 2:34 PM</p>
          </div>
        </td>
        <td class="px-5 py-4">
          <div class="flex items-center gap-2">
            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=40&h=40&fit=crop" alt="Sarah Mitchell" class="w-8 h-8 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 text-sm text-gray-600">3 items</td>
        <td class="px-5 py-4 text-right text-sm font-semibold text-gray-900">$342.50</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-blue-100 text-blue-700">
            <span class="w-1.5 h-1.5 bg-blue-500 rounded-full mr-1.5 animate-pulse"></span>
            Processing
          </span>
        </td>
        <td class="px-5 py-4">
          <div class="flex items-center gap-2 text-sm text-gray-600">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
            San Francisco, CA
          </div>
        </td>
        <td class="px-5 py-4 text-right">
          <button class="p-2 text-gray-400 hover:text-indigo-600 hover:bg-indigo-50 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 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
          </button>
        </td>
      </tr>
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-5 py-4">
          <div>
            <p class="text-sm font-semibold text-gray-900">#ORD-7823</p>
            <p class="text-xs text-gray-500">Mar 12, 2026 at 11:20 AM</p>
          </div>
        </td>
        <td class="px-5 py-4">
          <div class="flex items-center gap-2">
            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=40&h=40&fit=crop" alt="James Chen" class="w-8 h-8 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 text-sm text-gray-600">5 items</td>
        <td class="px-5 py-4 text-right text-sm font-semibold text-gray-900">$128.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-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="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-5 py-4">
          <div class="flex items-center gap-2 text-sm text-gray-600">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
            New York, NY
          </div>
        </td>
        <td class="px-5 py-4 text-right">
          <button class="p-2 text-gray-400 hover:text-indigo-600 hover:bg-indigo-50 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 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
          </button>
        </td>
      </tr>
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-5 py-4">
          <div>
            <p class="text-sm font-semibold text-gray-900">#ORD-7822</p>
            <p class="text-xs text-gray-500">Mar 11, 2026 at 4:15 PM</p>
          </div>
        </td>
        <td class="px-5 py-4">
          <div class="flex items-center gap-2">
            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=40&h=40&fit=crop" alt="Emma Thompson" class="w-8 h-8 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 text-sm text-gray-600">1 item</td>
        <td class="px-5 py-4 text-right text-sm font-semibold text-gray-900">$567.25</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">
            <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-5 py-4">
          <div class="flex items-center gap-2 text-sm text-gray-600">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
            Austin, TX
          </div>
        </td>
        <td class="px-5 py-4 text-right">
          <button class="p-2 text-gray-400 hover:text-indigo-600 hover:bg-indigo-50 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 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
          </button>
        </td>
      </tr>
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-5 py-4">
          <div>
            <p class="text-sm font-semibold text-gray-900">#ORD-7821</p>
            <p class="text-xs text-gray-500">Mar 11, 2026 at 9:45 AM</p>
          </div>
        </td>
        <td class="px-5 py-4">
          <div class="flex items-center gap-2">
            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=40&h=40&fit=crop" alt="Michael Park" class="w-8 h-8 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 text-sm text-gray-600">8 items</td>
        <td class="px-5 py-4 text-right text-sm font-semibold text-gray-900">$89.99</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">
            <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>
            Pending
          </span>
        </td>
        <td class="px-5 py-4">
          <div class="flex items-center gap-2 text-sm text-gray-600">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
            Seattle, WA
          </div>
        </td>
        <td class="px-5 py-4 text-right">
          <button class="p-2 text-gray-400 hover:text-indigo-600 hover:bg-indigo-50 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 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
          </button>
        </td>
      </tr>
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-5 py-4">
          <div>
            <p class="text-sm font-semibold text-gray-900">#ORD-7820</p>
            <p class="text-xs text-gray-500">Mar 10, 2026 at 6:30 PM</p>
          </div>
        </td>
        <td class="px-5 py-4">
          <div class="flex items-center gap-2">
            <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=40&h=40&fit=crop" alt="Olivia Wang" class="w-8 h-8 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 text-sm text-gray-600">2 items</td>
        <td class="px-5 py-4 text-right text-sm font-semibold text-gray-900">$234.75</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">
            <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-5 py-4">
          <div class="flex items-center gap-2 text-sm text-gray-600">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
            Denver, CO
          </div>
        </td>
        <td class="px-5 py-4 text-right">
          <button class="p-2 text-gray-400 hover:text-indigo-600 hover:bg-indigo-50 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 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</div>
197 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/order-management-table
Prompt instruction 
I want to use this DevSnips resource in production:

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

Install: npx devsnips add
Tailwind/Components/Tables/order-management-table

This is the Order Management Table — E-commerce order tracking table with customer info, order details, status badges with animations, shipping locations, and action buttons for order management.

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
devsnips://components/tables/order-management-table