Build feature-rich data tables with the V2 JSON Layout API
The Smart Table component can be rendered declaratively using the V2 JSON Layout API with type: "smart-table".
Define your columns and data as arrays in the configuration, and the component automatically adds sorting, filtering, search, and pagination.
A simple data table with search, sorting, and pagination. Columns and data are defined in the JSON configuration.
const config = {
version: 2,
layoutId: "users-table",
breakpoints: { xs: 1 },
items: [{
content: {
type: "smart-table",
title: "User Directory",
searchable: true,
exportable: true,
pageSize: 5,
columns: [
{ key: "id", label: "#", sortable: true, type: "number" },
{ key: "name", label: "Name", sortable: true },
{ key: "email", label: "Email", sortable: true },
{ key: "role", label: "Role" },
{ key: "status", label: "Status", type: "status" }
],
data: [
{ id: 1, name: "John Smith", email: "john@example.com", role: "Developer", status: "Active" },
{ id: 2, name: "Sarah Johnson", email: "sarah@example.com", role: "Designer", status: "Active" },
{ id: 3, name: "Mike Wilson", email: "mike@example.com", role: "Manager", status: "Pending" },
{ id: 4, name: "Emily Brown", email: "emily@example.com", role: "Developer", status: "Active" },
{ id: 5, name: "David Lee", email: "david@example.com", role: "Designer", status: "Inactive" },
{ id: 6, name: "Lisa Chen", email: "lisa@example.com", role: "Developer", status: "Active" }
]
}
}]
};
RSL.JSONLayout.renderLayout('#container', config);Smart tables support various column types including currency, date, and status. Add filters with filterable: true or filter: "select".
const config = {
version: 2,
layoutId: "orders-table",
breakpoints: { xs: 1 },
items: [{
content: {
type: "smart-table",
title: "Order Management",
searchable: true,
pageSize: 5,
columns: [
{ key: "order", label: "Order #", sortable: true, type: "number" },
{ key: "customer", label: "Customer", sortable: true, filterable: true },
{ key: "product", label: "Product", sortable: true, filterable: true },
{ key: "status", label: "Status", sortable: true, filter: "select",
filterOptions: "Delivered,Shipped,Processing,Cancelled", type: "status" },
{ key: "total", label: "Total", sortable: true, type: "currency" },
{ key: "date", label: "Date", sortable: true, type: "date" }
],
data: [
{ order: 1001, customer: "Alice Johnson", product: "Laptop Pro 15", status: "Delivered", total: 1299.00, date: "2024-11-28" },
{ order: 1002, customer: "Bob Williams", product: "Wireless Mouse", status: "Shipped", total: 49.99, date: "2024-11-27" },
{ order: 1003, customer: "Carol Davis", product: "USB-C Hub", status: "Processing", total: 89.99, date: "2024-11-26" },
{ order: 1004, customer: "David Miller", product: "Mechanical Keyboard", status: "Delivered", total: 159.99, date: "2024-11-25" },
{ order: 1005, customer: "Emma Wilson", product: "Monitor 27\"", status: "Cancelled", total: 449.99, date: "2024-11-24" },
{ order: 1006, customer: "Frank Brown", product: "Webcam HD", status: "Shipped", total: 79.99, date: "2024-11-23" }
]
}
}]
};
RSL.JSONLayout.renderLayout('#container', config);Enable row selection for bulk operations with selectable: true. Users can select individual rows or use "Select All".
const config = {
version: 2,
layoutId: "employees-table",
breakpoints: { xs: 1 },
items: [{
content: {
type: "smart-table",
title: "Employee Directory",
selectable: true,
searchable: true,
pageSize: 5,
columns: [
{ key: "name", label: "Employee", sortable: true },
{ key: "department", label: "Department", sortable: true },
{ key: "location", label: "Location", sortable: true },
{ key: "salary", label: "Salary", sortable: true, type: "currency" }
],
data: [
{ id: "emp-1", name: "Jennifer Adams", department: "Engineering", location: "New York", salary: 125000 },
{ id: "emp-2", name: "Michael Chen", department: "Marketing", location: "San Francisco", salary: 95000 },
{ id: "emp-3", name: "Sarah Thompson", department: "Design", location: "Chicago", salary: 88000 },
{ id: "emp-4", name: "Robert Garcia", department: "Engineering", location: "Austin", salary: 115000 },
{ id: "emp-5", name: "Amanda Foster", department: "Sales", location: "Boston", salary: 102000 },
{ id: "emp-6", name: "James Wilson", department: "Engineering", location: "Seattle", salary: 130000 }
]
}
}]
};
RSL.JSONLayout.renderLayout('#container', config);Smart tables can be nested inside cards using customContent for dashboard-style layouts.
const config = {
version: 2,
layoutId: "dashboard-tables",
breakpoints: { xs: 1, xl: 2 },
gap: "2rem",
items: [
{
content: {
type: "card",
title: "Recent Sales",
customContent: {
type: "smart-table",
searchable: false,
pageSize: 4,
columns: [
{ key: "product", label: "Product", sortable: true },
{ key: "amount", label: "Amount", type: "currency", sortable: true },
{ key: "status", label: "Status", type: "status" }
],
data: [
{ product: "Widget Pro", amount: 299.99, status: "Success" },
{ product: "Gadget Plus", amount: 149.50, status: "Success" },
{ product: "Tool Kit", amount: 89.00, status: "Pending" },
{ product: "Accessory Pack", amount: 45.00, status: "Success" }
]
}
}
},
{
content: {
type: "card",
title: "Top Customers",
customContent: {
type: "smart-table",
searchable: false,
pageSize: 4,
columns: [
{ key: "name", label: "Customer", sortable: true },
{ key: "orders", label: "Orders", type: "number", sortable: true },
{ key: "total", label: "Total Spent", type: "currency", sortable: true }
],
data: [
{ name: "Acme Corp", orders: 47, total: 12500 },
{ name: "TechStart Inc", orders: 32, total: 8750 },
{ name: "Global Ltd", orders: 28, total: 7200 },
{ name: "Local Shop", orders: 15, total: 3400 }
]
}
}
}
]
};
RSL.JSONLayout.renderLayout('#container', config);