Tables - ANTSAND Styles

Available Variants

.material .minimal .elegant .glass .neon .striped .corporate

Add .dark to any variant for dark mode support.

Material Design

Inspired by Material Design 3 with elevation, ripple effects, and smooth transitions.

Name	Email	Role	Status
Emma Thompson	emma@company.com	Product Designer	Active
James Wilson	james@company.com	Frontend Developer	Active
Sarah Chen	sarah@company.com	Backend Engineer	Away
Michael Brown	michael@company.com	DevOps Lead	Offline

<div class="ant-table material">
    <table>...</table>
</div>

Elegant

Sophisticated design with purple gradient header and subtle row highlights.

Project	Budget	Progress	Deadline
Website Redesign	$24,500	85%	Dec 15, 2025
Mobile App v2	$48,000	62%	Jan 20, 2026
API Integration	$12,800	100%	Nov 30, 2025
Dashboard Analytics	$31,200	45%	Feb 28, 2026

<div class="ant-table elegant">
    <table>...</table>
</div>

Minimal

Clean, borderless design that lets the content speak for itself.

Product	SKU	Price	Stock
Wireless Headphones Pro	WHP-2024	$299.00	142
Smart Watch Series X	SWX-3001	$449.00	89
Portable Speaker Mini	PSM-1050	$79.00	324

<div class="ant-table minimal">
    <table>...</table>
</div>

Striped Modern

Modern striped rows with smooth hover animations and elevation effects.

Order ID	Customer	Amount	Date
#ORD-2024-001	Alice Johnson	$1,234.00	Dec 1, 2025
#ORD-2024-002	Bob Smith	$567.50	Dec 2, 2025
#ORD-2024-003	Carol White	$2,890.00	Dec 3, 2025
#ORD-2024-004	David Lee	$445.25	Dec 4, 2025
#ORD-2024-005	Eva Martinez	$1,678.00	Dec 4, 2025

<div class="ant-table striped">
    <table>...</table>
</div>

Corporate

Professional business style with navy header and status indicators.

Employee	Department	Status
Jennifer Adams	Engineering	Active
Robert Clark	Marketing	On Leave
Lisa Wang	Finance	Active
Thomas Miller	Operations	Inactive

<div class="ant-table corporate">
    <table>...</table>
</div>

Glassmorphism

Modern glass effect with blur backdrop. Best on colored backgrounds.

Feature	Basic	Pro	Enterprise
Users	5	25	Unlimited
Storage	10 GB	100 GB	1 TB
Support	Email	Priority	24/7 Dedicated

<div class="ant-table glass">
    <table>...</table>
</div>

<!-- Dark glass variant -->
<div class="ant-table glass dark">
    <table>...</table>
</div>

Neon / Cyberpunk

Futuristic design with glowing cyan accents and neon status badges.

Server	Region	Load	Status
NEXUS-PRIME-01	US-EAST	42%	ONLINE
NEXUS-PRIME-02	EU-WEST	78%	HIGH LOAD
NEXUS-BACKUP-01	ASIA-PAC	12%	ONLINE
NEXUS-DEV-01	US-WEST	0%	OFFLINE

<div class="ant-table neon">
    <table>...</table>
</div>

Colorful Striped

Add color classes to striped tables: .blue, .green, .purple, .amber, .rose, .teal

Name	Role	Status
Alex Kim	Designer	Active
Sam Lee	Developer	Active
Jordan Wu	Manager	Away

Product	Stock	Price
Widget A	142	$29
Widget B	89	$45
Widget C	234	$19

Event	Date	Attendees
Launch Party	Dec 15	120
Workshop	Dec 20	45
Conference	Jan 10	500

Task	Priority	Due
Code Review	High	Today
Bug Fix	Medium	Tomorrow
Docs Update	Low	Friday

<div class="ant-table striped blue">...</div>
<div class="ant-table striped green">...</div>
<div class="ant-table striped purple">...</div>
<div class="ant-table striped amber">...</div>
<div class="ant-table striped rose">...</div>
<div class="ant-table striped teal">...</div>

Zebra (Bold Alternating)

High contrast alternating rows with color themes: .ocean, .forest, .sunset, .royal

Server	Region	Status
PROD-01	US-East	Online
PROD-02	EU-West	Online
PROD-03	Asia-Pac	Online
DEV-01	US-West	Offline

Metric	Value	Change
Revenue	$1.2M	+12%
Users	45,231	+8%
Sessions	128K	+15%
Bounce Rate	32%	-5%

Plant	Type	Growth
Oak Tree	Deciduous	Slow
Pine	Conifer	Medium
Bamboo	Grass	Fast
Fern	Pteridophyte	Slow

Plan	Price	Features
Starter	$9/mo	5 Projects
Pro	$29/mo	25 Projects
Business	$99/mo	Unlimited
Enterprise	Custom	Custom

<div class="ant-table zebra">...</div>
<div class="ant-table zebra ocean">...</div>
<div class="ant-table zebra forest">...</div>
<div class="ant-table zebra sunset">...</div>
<div class="ant-table zebra royal">...</div>

Interactive Sorting (ES6)

Add data-ant-table to enable click-to-sort. Try clicking the column headers below!

Name	Department	Salary	Start Date
Alice Johnson	Engineering	$95,000	2022-03-15
Bob Smith	Marketing	$78,000	2021-08-22
Carol White	Engineering	$112,000	2019-01-10
David Lee	Design	$85,000	2023-06-01
Eva Martinez	Sales	$92,000	2020-11-30
Frank Brown	Engineering	$105,000	2018-04-18

<!-- Add data-ant-table to enable interactive features -->
<div class="ant-table material"
     data-ant-table
     data-searchable="true"
     data-paginate="true"
     data-per-page="10">
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Salary</th>  <!-- Auto-detects numbers -->
                <th>Date</th>    <!-- Auto-detects dates -->
            </tr>
        </thead>
        <tbody>...</tbody>
    </table>
</div>

<!-- For formatted values, use data-sort-value -->
<td data-sort-value="95000">$95,000</td>

Dark Mode

Add .dark class to any variant for dark mode support.

Material Dark

Name	Role	Status
John Doe	Developer	Active
Jane Smith	Designer	Away

Striped Dark

Item	Qty	Price
Widget A	50	$25.00
Widget B	120	$18.50

<div class="ant-table material dark">...</div>
<div class="ant-table striped dark">...</div>
<div class="ant-table corporate dark">...</div>

Usage Guide

Basic Structure

<div class="ant-table [variant] [dark]">
    <table>
        <thead>
            <tr>
                <th class="sortable">Column 1</th>
                <th class="sortable asc">Column 2</th>
                <th>Column 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data</td>
                <td>Data</td>
                <td><span class="status success">Active</span></td>
            </tr>
        </tbody>
    </table>
</div>

Status Badge Classes

.status.success .status.warning .status.error .status.info

Sortable Headers

th.sortable - Makes header clickable with sort indicator
th.sortable.asc - Shows ascending sort arrow
th.sortable.desc - Shows descending sort arrow

Databoard Integration

Use datatable_modern.volt with configuration to auto-generate tables from your data.

{
    "body": [...],  // Your data array
    "datatable": {
        "variant": "material",  // or elegant, minimal, striped, etc.
        "theme": "dark",        // optional dark mode
        "columns": ["name", "email", "status"],
        "column_labels": { "name": "Full Name" },
        "sortable": true,
        "searchable": true,
        "pagination": true,
        "per_page": 10
    }
}

Data Tables