Tables & Data Grids
Comprehensive table solutions for modern web applications
Powerful table components for every use case
UltraViolet provides a complete suite of table components, from simple Bootstrap tables to advanced data grids with sorting, filtering, and pagination. Choose the right solution for your application's needs.
Bootstrap Tables
Clean, responsive table designsAdvanced Data Tables
Sorting, pagination, and searchGrid.js Integration
Modern, framework-agnostic gridsMobile Responsive
Optimized for all screen sizesKey Features
- check_circleMultiple table styles
- check_circleBuilt-in sorting
- check_circlePagination support
- check_circleSearch functionality
- check_circleResponsive design
- check_circleDark theme support
Basic Tables
Bootstrap table variations
Simple, clean table designs with various Bootstrap classes including striped, bordered, hoverable, and dark theme variants.
- check_circleStriped tables
- check_circleBordered tables
- check_circleHoverable rows
- check_circleDark theme support
Data Tables
Advanced table functionality
Enhanced tables with built-in sorting, pagination, search functionality, and JSON data loading capabilities.
- check_circleColumn sorting
- check_circlePagination
- check_circleGlobal search
- check_circleJSON data loading
Grid.js
Modern data grid library
Powerful, lightweight, and framework-agnostic table library with advanced features like custom formatters and plugins.
- check_circleCustom formatters
- check_circlePlugin system
- check_circleTypeScript built
- check_circleFramework agnostic
Quick Start Examples
Basic Bootstrap Table
Simple table with Bootstrap classes for styling and responsiveness.
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john@example.com</td>
<td><span class="badge bg-success">Active</span></td>
</tr>
</tbody>
</table>
</div>Grid.js Implementation
Modern data grid with sorting, searching, and pagination.
new gridjs.Grid({
columns: [
{ name: "Name", width: "150px" },
{ name: "Email", width: "200px" },
{
name: "Status",
formatter: (cell) => gridjs.html(
`<span class="badge bg-success">${cell}</span>`
)
}
],
data: [
["John Doe", "john@example.com", "Active"],
["Jane Smith", "jane@example.com", "Inactive"]
],
search: true,
sort: true,
pagination: { limit: 10 }
}).render(document.getElementById("grid"));