Tables - X-Cart Admin UI Kit

Basic Table

Standard data table with hover states

ID	Product	SKU	Price	Stock
1	Widget Pro	WDG-001	$99.99	150
2	Gadget Plus	GDG-002	$149.99	75
3	Device Max	DVC-003	$199.99	30

<table class="xcart-table">
    <thead>
        <tr><th>ID</th><th>Product</th>...</tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>Widget Pro</td>...</tr>
    </tbody>
</table>

Row Actions with Dividers

Action icons separated by vertical dividers (from Figma)

Name	Email	Role	Actions
John Doe	john@example.com	Administrator
Jane Smith	jane@example.com	Editor

<div class="xcart-table-actions">
    <button class="xcart-btn-icon" title="View">
        <i class="fas fa-eye"></i>
    </button>
    <span class="xcart-table-actions-divider"></span>
    <button class="xcart-btn-icon" title="Edit">
        <i class="fas fa-edit"></i>
    </button>
    <span class="xcart-table-actions-divider"></span>
    <button class="xcart-btn-icon danger" title="Delete">
        <i class="fas fa-trash"></i>
    </button>
</div>

Product Table (Figma Layout)

SKU	Name	Category	Brand	Price	Stock
BRK-PAD-001	Premium Brake Pads Set	Brake Parts	Brembo	$149.99	125
FLT-AIR-042	K&N High-Flow Air Filter	Filters	K&N	$59.99	12
WHL-ALY-018	20" Alloy Wheels Set	Wheels	BBS	$1,299.99	0

<table class="xcart-table xcart-table-product">
    <tr>
        <td class="xcart-table-drag"><i class="fas fa-grip-vertical"></i></td>
        <td class="xcart-table-checkbox"><input type="checkbox"></td>
        <td class="xcart-table-enable"><label class="xcart-toggle">...</label></td>
        <td class="xcart-table-image"><img src="..." alt="Product"></td>
        <td class="xcart-table-sku">BRK-PAD-001</td>
        <td class="xcart-table-name"><a href="#">Premium Brake Pads</a></td>
        <td class="xcart-table-category">Brake Parts</td>
        <td class="xcart-table-brand">Brembo</td>
        <td class="xcart-table-price">$149.99</td>
        <td class="xcart-table-stock in-stock">125</td>
        <td><div class="xcart-table-actions">...</div></td>
    </tr>
</table>

Table with Checkboxes

Selectable rows for bulk actions

Order	Customer	Total	Status
#00001	John Doe	$299.99	Paid
#00002	Jane Smith	$149.50	Pending
#00003	Bob Wilson	$599.00	Cancelled

Sortable Headers

Clickable column headers for sorting

ID	Name	Date	Price
1	Item A	Dec 1	$50.00
2	Item B	Dec 2	$75.00
3	Item C	Dec 3	$25.00

<th class="sortable sorted-asc">
    ID <i class="fas fa-sort-up"></i>
</th>
<th class="sortable">
    Name <i class="fas fa-sort"></i>
</th>

Compact Table

Dense table with reduced padding (8px 10px)

SKU	Warehouse	Qty	Reserved	Available
SKU-001	MAIN	100	15	85
SKU-001	POLISH	50	5	45
SKU-002	MAIN	200	30	170
SKU-002	POLISH	75	10	65

<table class="xcart-table xcart-table-compact">...</table>

CSS Classes Reference

Class	Description
`.xcart-table`	Base table class with hover states
`.xcart-table-compact`	Reduced padding (8px 10px)
`.xcart-table-product`	Product table layout modifier
`.xcart-table-checkbox`	Checkbox column (40px width)
`.xcart-table-drag`	Drag handle column (30px)
`.xcart-table-enable`	Enable toggle column (50px)
`.xcart-table-image`	Image column (60x60px image)
`.xcart-table-actions`	Actions container with dividers
`.xcart-table-actions-divider`	Vertical divider (1px x 20px)
`.xcart-btn-icon`	Action icon button (32x32px)
`.xcart-btn-icon.danger`	Danger hover state (red)
`.sortable`	Clickable sortable header
`.sorted-asc` / `.sorted-desc`	Sort direction indicators
`.xcart-table-stock.in-stock`	Green stock indicator
`.xcart-table-stock.low-stock`	Yellow stock indicator
`.xcart-table-stock.out-of-stock`	Red stock indicator

Design Specifications (Figma)

Spacing

Cell padding: 15px 10px (vertical horizontal)
Compact padding: 8px 10px
Image cell: 60x60px, border-radius 4px

Typography

Header: Open Sans SemiBold 14px
Cell text: Open Sans Regular 14px
SKU/Code: Monospace 13px

Colors

Border: #E2E2E2
Text: #333333
Links: #2274A6
Secondary text: #666666

Row Actions

Icon size: 32x32px
Divider: 1px x 20px #E2E2E2
Icon color: #666 / hover #2274A6