Data Table Pattern

Complete data table pattern with filters, sorting, pagination, and bulk actions. Used for orders, products, customers lists.

Filter Tab Pills

Quick filter tabs like in real X-Cart admin

No filters Awaiting processing 3 Unpaid Paid but not shipped Draft

Code

<div class="xcart-filter-pills">
    <a href="#" class="xcart-filter-pill">No filters</a>
    <a href="#" class="xcart-filter-pill active">
        Awaiting processing
        <span class="xcart-filter-pill-badge">3</span>
    </a>
    <a href="#" class="xcart-filter-pill">
        Unpaid
        <button class="xcart-filter-pill-remove">&times;</button>
    </a>
</div>

Inline Status Dropdowns

Colored status dropdowns for tables

Payment Status

Fulfillment Status

Status Indicators

Sync status with icons

Synced
Not synced
Sync error

Widget Badges

Notification widgets with counts

Low stock info
12
License warnings
6

Complete Orders Table

Full data table pattern with all elements

No filters Awaiting processing 3 Unpaid Paid but not shipped
Order # Date Customer Channel Total Payment Acumatica Actions
#00060 Dec 2, 2025
John Smith
john@example.com
 Online Store $1,299.00 Paid SO/200060
#00059 Dec 2, 2025
AutoParts Inc.
orders@autoparts.com
 Keystone $3,450.50 Pending Pending
#00058 Dec 1, 2025
Tire World
sales@tireworld.com
 ATD $899.00 Paid Error
#00057 Dec 1, 2025
Custom Rides LLC
info@customrides.com
 Multi $2,150.00 Refunded Not synced
Showing 1-20 of 1,234 orders

Products Data Table

Product catalog with inventory status

Image Name SKU Price Stock Acumatica ID Actions
Pro Wheel 18" Chrome
Category: Wheels
 WHL-18-CHR $299.99 145 INVENTORY-001234
All-Season Tire 225/45R17
Category: Tires
 TIR-225-45-17 $189.99 12 INVENTORY-002345
Floor Mats Set - Universal
Category: Accessories
 ACC-MAT-UNV $49.99 0 Not linked

Expandable Row

Table with expandable row details

Order # Customer Total Items Status
#00055 AutoParts Inc. $1,299.00 3 items Synced
Order Items
SKU Product Qty Warehouse Price
WHL-18-CHR Pro Wheel 18" Chrome 4 MAIN $1,199.96
ACC-LUG-SET Lug Nut Set 1 MAIN $49.04
ACC-CAP-CHR Center Caps Chrome 4 POLISH $50.00
#00054 Tire World $599.00 1 item Pending

CSS Classes Reference

Class Description
.xcart-table Base table class
.xcart-table-compact Reduced padding table
.xcart-sortable Sortable column header
.xcart-table-footer Footer with pagination
.xcart-table-info Showing X of Y text
.xcart-row-expandable Row that can be expanded
.xcart-row-expanded Expanded detail row
.xcart-expand-btn Expand/collapse button