Table Variations

Eight production-ready data table designs using the same Databoard datatable contract. Data stays JSON, behavior comes from antsand-v2.js, and the visual system changes through the table variant class.

sass_v2 · components/_tables.scss

Material

MD3 elevation, soft shadows, status pills.

material

Minimal

Borderless content-first table.

minimal

Elegant

Purple gradient header and refined row tint.

elegant

Glass

Frosted blur for gradient backgrounds.

glass

Neon

Cyberpunk glow and dark data surface.

neon

Striped

Classic alternating rows with color themes.

striped

Zebra

Bold row contrast and color themes.

zebra

Corporate

Navy business table with precise status dots.

corporate

Contract: body[0].datatable provides rows; body[0].datatable_config.data_field defines columns; and datatable_config selects the Sass v2 variant, search, and pagination. The generated controls are styled by components/_tables.scss.

The table starts as rows, columns, and config.

A table can come from JSON, a database query, or an API endpoint. Antsand only needs a predictable row array plus metadata that explains labels, types, order, and behavior.

The renderer then turns that contract into the selected Sass v2 table variant.

Data first

Source rows

Rows are plain objects. They can be authored as JSON, loaded from Mongo/MySQL, or returned by an endpoint.

JSON rows json

{
  "datatable": [
    {"name":"Sarah Chen","role":"Senior Engineer","status":"Active"},
    {"name":"Aisha Patel","role":"UX Designer","status":"Pending"},
    {"name":"Tom Anderson","role":"Frontend Dev","status":"Inactive"}
  ]
}

1 · Rows

Column metadata

For the generated static renderer, put column labels, visibility, order, and formatting in datatable_config.data_field. The older datatable_columns field is not read by this renderer.

Column contract json

{
  "datatable_config": {
    "data_field": [
      {"name":"name", "rename":"Name", "visible":true, "order":1},
      {"name":"role", "rename":"Role", "visible":true, "order":2},
      {"name":"status", "rename":"Status", "type":"status", "visible":true, "order":3}
    ]
  }
}

2 · Columns

Renderer config

The same rows can become material, glass, neon, striped, or corporate by changing the variant.

Table config json

{
  "datatable_config": {
    "mode": "static",
    "variant": "material",
    "searchable": true,
    "pagination": true,
    "per_page": 5
  }
}

3 · Behavior

Database or API source

A controller can fetch records from storage, normalize field names, and pass the same row array into datatable.

Source normalization php

$rows = $orders-&gt;find(['status' =&gt; 'paid'])-&gt;toArray();
$api_data['body'][]['datatable'] = array_map(function ($row) {
    return [
        'customer' =&gt; $row['customer_name'],
        'total' =&gt; $row['total'],
        'status' =&gt; $row['status']
    ];
}, $rows);

4 · DB/API

Databoard mapping

The page section maps its api_data destination to a real menu/data source. The deployment renderer does not guess; it receives resolved data.

Data mapping json

{
  "data_mapping": {
    "api_data": [
      ["api_data"],
      ["databoard", "menu", "component_tables_material"]
    ]
  }
}

5 · Mapping

Complete table contract: body[0].datatable is the row data, body[0].datatable_config.data_field defines the displayed columns, and body[0].datatable_config also selects search, pagination, page size, and visual variant. data_mapping points the section to that source.

Search, page size, and pagination

Try searching the rows, changing the page size, or moving to page two. Sass v2 styles the controls; the table module filters and pages the same row data used by generated sites.

Interactive controls

Show entries

Feature	Owner	Status
Search input	Sass v2 + table module	Ready
Pagination buttons	Sass v2 + table module	Ready
Page-size selector	Sass v2 + table module	Ready
Column sorting	Table module	Ready
Responsive rows	Sass v2	Ready
Row data mapping	Databoard	Ready
Column labels	Databoard	Ready
Date formatting	Table renderer	Ready
Keyboard focus	Sass v2	Ready
Theme variant	Sass v2	Ready
Generated site	Antsand	Ready
Documentation preview	StylesDoc	Ready

Showing 1 to 5 of 12 entries

Databoard table controls json

{
  "body": [{
    "datatable": [{"feature": "Search input", "layer": "Sass v2", "status": "Ready"}],
    "datatable_config": {
      "mode": "static",
      "variant": "elegant",
      "searchable": true,
      "pagination": true,
      "per_page": 5,
      "data_field": [{"name": "feature", "rename": "Feature", "visible": true, "order": 1}]
    }
  }]
}

Material Design 3

Elevated card, subtle shadow, soft header gradient, and status badges. Use this for product dashboards and admin screens.

material

Show entries

Name	Role	Department	Start Date	Status
Sarah Chen	Senior Engineer	Platform	Mar 15, 2022	Active
Marcus Johnson	Product Manager	Growth	Aug 1, 2021	Active
Aisha Patel	UX Designer	Design	Jan 10, 2023	Pending
James Wilson	DevOps Lead	Infrastructure	Nov 22, 2020	Active
Elena Rodriguez	Data Scientist	AI/ML	Jun 5, 2023	Active
Tom Anderson	Frontend Dev	Platform	Sep 20, 2022	Inactive

Showing 1 to 5 of 6 entries

Databoard data contract json

{
  "body": [{
    "datatable": [{"name":"Sarah Chen","status":"Active"}],
    "datatable_config": {"variant":"material","searchable":true,"pagination":true}
  }]
}

Minimal

Borderless and content-first. Good for docs, package lists, and pages where the table should not dominate the layout.

minimal

Package	Version	Downloads	Size Kb	License
@antsand/core	4.2.1	1245890	42	MIT
@antsand/cli	3.8.0	892340	18	MIT
@antsand/forms	2.1.4	567120	35	MIT
@antsand/deploy	1.5.2	423780	28	Apache-2.0
@antsand/tables	1.0.0	89450	14	MIT

Class contract html

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

Elegant

Purple gradient header and alternating row tint for polished dashboards and project management views.

elegant

Project	Client	Budget	Progress	Deadline
Website Redesign	Acme Corp	48000	87%	2026-06-15
Mobile App v2	TechStart	125000	42%	2026-09-01
API Platform	DataFlow	92500	95%	2026-05-30
E-commerce Suite	ShopMax	67000	23%	2026-11-20

Class contract html

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

Glassmorphism

Frosted table surface for gradient or image-backed sections. The wrapper provides the background; the table remains standard data.

glass

Event	Location	Event Date	Attendees	Type
AI Summit 2026	San Francisco	Jun 12, 2026	2400	Conference
Design Systems Live	Toronto	Jul 8, 2026	850	Workshop
Open Source Week	Berlin	Sep 21, 2026	5200	Festival
Phalcon Camp	Vancouver	Oct 2, 2026	430	Meetup

Class contract html

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

Neon

High-contrast cyberpunk surface for monitoring, gaming, and experimental dashboards.

neon

Node	Region	Load	Latency	Status
edge-01	us-west	72%	18ms	Active
edge-02	us-east	34%	23ms	Active
core-01	eu-central	89%	41ms	Pending
gpu-07	ca-west	96%	12ms	Active

Class contract html

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

Striped

Classic alternating rows with color theme modifiers. The demo uses the blue modifier.

striped · blue/green/purple/amber/rose/teal

Invoice	Customer	Amount	Due Date	Status
INV-1001	Northwind	1240	Jun 1, 2026	Active
INV-1002	Acme Corp	2840	Jun 8, 2026	Pending
INV-1003	Globex	980	Jun 13, 2026	Active
INV-1004	Initech	4300	Jun 18, 2026	Inactive

Color modifiers html

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

Zebra

Bolder row contrast for dense data. The demo uses the royal modifier.

zebra · ocean/forest/sunset/royal

Rank	Product	Sales	Growth	Segment
1	ANTSAND Pro	24890	18%	SaaS
2	Forms Engine	16320	11%	Workflow
3	Databoard API	9840	34%	Platform
4	Styles v2	7310	26%	CSS

Color modifiers html

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

Corporate

Navy business table with precise lines, compact cells, and executive-dashboard tone.

corporate

Account	Owner	Value	Stage	Close Date
Enterprise North	R. Moore	245000	Approved	Jun 30, 2026
West Coast Labs	S. Chen	98000	Pending	Jul 10, 2026
DataFlow Inc	M. Johnson	312000	Active	Aug 1, 2026
Civic Systems	A. Patel	76000	Rejected	Aug 18, 2026

Class contract html

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

Table Variations

Material

Minimal

Elegant

Glass

Neon

Striped

Zebra

Corporate

The table starts as rows, columns, and config.

Source rows

Column metadata

Renderer config

Database or API source

Databoard mapping

Search, page size, and pagination

Material Design 3

Minimal

Elegant

Glassmorphism

Neon

Striped

Zebra

Corporate

ANTSAND

Framework

Integration

Ecosystem