Data grid
A data grid lays out label/value pairs in a compact, aligned grid.
Base info
Registrar
Third Party
Nameservers
Third Party
Port number
3306
Expiration date
–
Creator
Paweł Kuna
Age
15 days
Edge network
Active
Avatars list
+3
Checkbox
Icon
Checked
Form control
Longer description
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Basic
A .datagrid with plain text values.
Plan
Business
Billing period
Monthly
Next invoice
October 18, 2026
Seats
8 of 10 used
Description list
Use dl, dt and dd so screen readers announce the pairs.
- Company
- Tabler Ltd.
- Tax ID
- EU123456789
- Billing email
- [email protected]
- Country
- Poland
Narrow columns
Lower --tblr-datagrid-item-width to fit more columns in a row.
CPU
8 cores
Memory
32 GB
Storage
512 GB
Region
eu-central
Uptime
99.98%
Backups
Daily
IPv6
Enabled
Port
3306
Compact gap
Lower --tblr-datagrid-padding to bring the items closer together.
CPU
8 cores
Memory
32 GB
Storage
512 GB
Region
eu-central
Uptime
99.98%
Backups
Daily
IPv6
Enabled
Port
3306
Horizontal
Add .datagrid-horizontal to put the label beside the value.
Plan
Business
Status
Active
Next invoice
October 18, 2026
Address
44 Harbor Street, Portland, OR 97209, United States
Horizontal in columns
Add .datagrid-cols-2 and lower --tblr-datagrid-title-width to fit two pairs in a row.
CPU
8 cores
Memory
32 GB
Storage
512 GB
Region
eu-central
Uptime
99.98%
Backups
Daily
Single column
Add .datagrid-cols-1 to stack the items.
Customer
Mallory Hulme
Email
Shipping address
44 Harbor Street, Portland, OR 97209, United States
Notes
Not set
Two columns
Add .datagrid-cols-2 to keep two columns at any width.
Order
#48213
Status
Paid
Placed
September 12, 2026
Delivery
September 16, 2026
Items
3
Total
$248.00
Payment
Visa ending 4242
Carrier
DHL Express
Statuses and progress
A value can hold a status, a badge or a progress bar.
State
Running
Health
Degraded
Environment
Production
Version
v1.6.1
Disk usage
68%
Memory usage
41%
Domain details
Domain
Registrar
Third Party
SSL certificate
Valid until May 2, 2027
Auto renew
Owner
Emmy Levet
Expiration date
–
API credentials
Add a data-bs-toggle="clipboard" button to let users copy a value.
Client ID
tblr_live_8f3a2c91d7e4
Webhook URL
https://example.com/hooks/tabler
Last used
2 hours ago