VBoard – Components

Basic Table

Clean minimal table with default header and borders on rows only.

Code

#	Name	Email	Department	Role	Status
1	James Davidson	james.davidson@vboard.io	Engineering	Admin	Active
2	Sarah Chen	sarah.chen@vboard.io	Marketing	Manager	Pending
3	Ryan Park	ryan.park@vboard.io	Sales	Editor	Active
4	Emma Wilson	emma.wilson@vboard.io	Design	Viewer	Inactive
5	Lucas Martin	lucas.martin@vboard.io	HR	Editor	Blocked

                        <table>
                        <thead><tr>
                        <th>Name</th> <th>Email</th>
                        </tr></thead>
                        <tbody><tr>
                        <td>James Davidson</td>
                        <td>james@vboard.io</td>
                        </tr></tbody>
                        </table>
                    

Striped & Hover

Alternating row shading and hover highlight for better scanability.

Code

#	Product	Category	Price	Stock	Sales	Status
1	Wireless Pro Headphones	Audio	$79.99	284	1,204	Available
2	Smart Watch Ultra	Wearables	$199.00	58	432	Available
3	MacBook Stand Pro	Accessories	$49.99	0	891	Out of Stock
4	Ergonomic Mouse	Peripherals	$34.99	142	2,031	Available
5	USB-C Hub 7-in-1	Accessories	$59.99	23	677	Low Stock
6	Mechanical Keyboard	Peripherals	$129.00	0	315	Out of Stock

                        <!-- Add tbl-striped for zebra rows, tbl-hover for hover highlight
                            -->
                        <table class="tbl-striped
                            tbl-hover">...</table>
                    

Bordered & Borderless

Full-cell borders for dense grids and a borderless style for embedded contexts.

Code

Bordered

Quarter	Revenue	Expenses	Profit	Growth
Q1 2025	$48,200	$31,400	$16,800	↑ 12.4%
Q2 2025	$52,700	$33,100	$19,600	↑ 16.7%
Q3 2025	$44,900	$34,800	$10,100	↓ 4.2%
Q4 2025	$61,300	$35,200	$26,100	↑ 23.5%

Borderless

Team Member	Task	Due	Priority
James Davidson	Design system update v4	May 5	High
Sarah Chen	API rate limit monitoring	May 10	Medium
Ryan Park	Q2 campaign launch	May 15	Low

                        <table class="tbl-bordered">...</table>
                        <table class="tbl-borderless">...</table>
                    

Table Sizes

Compact (dense), default, and cozy (spacious) row padding variants.

Code

Compact

ID	User	Action	IP Address	Time
#1042	james.davidson	Login	192.168.1.42	09:42 AM
#1041	sarah.chen	Export CSV	10.0.0.5	09:30 AM
#1040	ryan.park	Update Profile	74.12.88.1	09:12 AM
#1039	emma.wilson	Login	192.168.2.88	08:55 AM

Cozy

Plan	Users	Revenue	Status
Enterprise	5,400	$192,000/yr	Active
Pro	12,800	$374,400/yr	Active

                        <table class="tbl-compact">...</table> <!-- dense padding -->
                        <table class="tbl-cozy">...</table> <!-- spacious padding -->
                    

Header Colour Variants

Coloured thead backgrounds — primary, dark, success, warning, danger, gradient.

Code

Primary Header	Col A	Col B	Col C
Data row	Value 1	Value 2	Value 3

Dark Header	Col A	Col B	Col C
Data row	Value 1	Value 2	Value 3

Success Header	Col A	Col B	Col C
Data row	Value 1	Value 2	Value 3

Warning Header	Col A	Col B	Col C
Data row	Value 1	Value 2	Value 3

Danger Header	Col A	Col B	Col C
Data row	Value 1	Value 2	Value 3

Gradient Header	Col A	Col B	Col C
Data row	Value 1	Value 2	Value 3

                        <thead class="thead-primary">...</thead>
                        <!-- Options: thead-dark | thead-success | thead-warning | thead-danger |
                            thead-grad -->
                    

Row Highlights

Colour-coded rows for status, priority, or category differentiation.

Code

Alert ID	Service	Message	Severity	Time
#A-1001	Auth Service	Deployment completed successfully	Low	09:42 AM
#A-1002	API Gateway	Rate limit threshold at 80%	Info	09:35 AM
#A-1003	Storage Service	Disk usage exceeds 85% on node-3	Medium	09:20 AM
#A-1004	Payment Service	Payment gateway timeout — retrying	Critical	09:10 AM
#A-1005	Email Service	Bounce rate dropped below 1%	Low	08:55 AM

                        <tr class="row-success">...</tr>
                        <tr class="row-warning">...</tr>
                        <tr class="row-danger">...</tr>
                        <tr class="row-primary">...</tr>
                    

Sortable Table

Click any column header to sort ascending or descending. Active sort column is highlighted.

Code

Name	Department	Salary	Projects	Joined	Status
Alice Johnson	Engineering	$95,000	12	2022-03-15	Active
Bob Martinez	Marketing	$72,000	7	2021-08-20	Active
Carol Zhang	Design	$88,000	9	2023-01-05	Pending
David Kim	Sales	$68,000	4	2020-11-10	Active
Eva Nguyen	Engineering	$102,000	15	2019-06-01	Active
Frank Lee	HR	$65,000	3	2023-09-12	Inactive

                        <!-- Add sortable class to table, onclick to each th -->
                        <table class="tbl-hover
                            sortable">
                        <thead><tr>
                        <th onclick="sortTbl('tableId', 0)">Name</th>
                        </tr></thead>
                        </table>
                    

Expandable Rows

Click the + button to expand a row and reveal extra details inline.

Code

	User	Role	Department	Status	Joined
	JD James Davidson james.davidson@vboard.io	Admin	Engineering	Active	Mar 15, 2022
Phone+1 (415) 555-0192 LocationSan Francisco, CA TimezoneUTC-08:00 Pacific Last LoginToday, 9:42 AM Projects24 active Tasks Done186 completed Rating4.9 / 5.0 ★ Employee IDEMP-00087
	SC Sarah Chen sarah.chen@vboard.io	Editor	Marketing	Active	Jul 20, 2021
Phone+1 (310) 555-0847 LocationLos Angeles, CA TimezoneUTC-08:00 Pacific Last LoginYesterday, 3:15 PM Projects11 active Tasks Done94 completed Rating4.7 / 5.0 ★ Employee IDEMP-00124
	RP Ryan Park ryan.park@vboard.io	Manager	Sales	Pending	Nov 10, 2020
Phone+1 (212) 555-0293 LocationNew York, NY TimezoneUTC-05:00 Eastern Last LoginApr 27, 11:00 AM Projects8 active Tasks Done57 completed Rating4.5 / 5.0 ★ Employee IDEMP-00056

                        <!-- Expand button in first cell -->
                        <button class="expand-btn" onclick="toggleExpand('rowId', this)">+</button>

                        <!-- Hidden expand row -->
                        <tr class="expand-row" id="rowId">
                        <td colspan="6">
                        <div class="expand-content">...</div>
                        </td>
                        </tr>
                    

Rich Column Table

Advanced column types: avatars, role badges, status badges, progress bars, star ratings, action buttons.

Code

User	Role	Status	Tasks	Rating	Joined
JD James Davidson james.davidson@vboard.io	Admin	Active	186 / 20093%	★★★★★ 4.9	Mar 2022
SC Sarah Chen sarah.chen@vboard.io	Editor	Active	94 / 12078%	★★★★☆ 4.7	Jul 2021
RP Ryan Park ryan.park@vboard.io	Manager	Pending	57 / 8071%	★★★★☆ 4.5	Nov 2020
EW Emma Wilson emma.wilson@vboard.io	Viewer	Inactive	22 / 6037%	★★★☆☆ 3.8	Feb 2023
LM Lucas Martin lucas.martin@vboard.io	Editor	Blocked	0 / 400%	★★★★★ —	Sep 2023

                        <!-- Avatar cell -->
                        <td><div class="tbl-avatar">
                        <div class="av
                            av-1">JD</div>
                        <div><div class="av-name">James</div></div>
                        </div></td>
                        <!-- Progress bar cell -->
                        <td><div class="tbl-prog-bar"><div class="tbl-prog-fill" style="width:93%"></div></div></td>
                    

Full Data Table

Complete table with toolbar, live search, role/status filter, column sort, bulk select, per-page control, and pagination — all working live.

	User	Role	Department	Status	Joined	Last Active	Actions

Rows per page:

Showing —

Table Components