Tables Component

Three responsive table variants for different use cases

Back to Component Examples
About Table Variants
RSL provides three responsive table types:
scrollable - Horizontal scrolling on small screens (preserves table structure)
responsive - Stacks vertically on mobile with inline labels
responsive-card - Transforms into card layout on mobile devices

Example 1: Scrollable Table

Perfect for tables with many columns that need to maintain their structure. Adds horizontal scrolling on smaller screens.

Scrollable Table • JavaScript
RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "scrollable-table",
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: "table",
            variant: "scrollable",
            caption: "Employee Directory",
            headers: ["ID", "First Name", "Last Name", "Email", "Phone", "Department", "Title", "Start Date"],
            rows: [
                ["001", "John", "Smith", "john.smith@example.com", "(555) 123-4567", "Engineering", "Senior Developer", "2020-01-15"],
                ["002", "Jane", "Doe", "jane.doe@example.com", "(555) 234-5678", "Marketing", "Marketing Manager", "2019-06-20"],
                ["003", "Bob", "Johnson", "bob.johnson@example.com", "(555) 345-6789", "Sales", "Sales Rep", "2021-03-10"],
                ["004", "Alice", "Williams", "alice.williams@example.com", "(555) 456-7890", "HR", "HR Specialist", "2020-09-05"]
            ]
        }
    }]
});

Example 2: Responsive Table

On mobile devices, rows stack vertically with labels appearing inline next to each data cell. The data-label attributes are automatically added from headers.

Responsive Table • JavaScript
RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "responsive-table",
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: "table",
            variant: "responsive",
            headers: ["Name", "Email", "Role", "Status"],
            rows: [
                ["John Smith", "john.smith@example.com", "Administrator", "Active"],
                ["Jane Doe", "jane.doe@example.com", "Editor", "Active"],
                ["Bob Johnson", "bob.johnson@example.com", "Viewer", "Inactive"],
                ["Alice Williams", "alice.williams@example.com", "Editor", "Active"]
            ]
        }
    }]
});

Example 3: Responsive Card Table

Transforms into a card-based layout on mobile devices, providing a more visually distinct presentation for each row.

Responsive Card Table • JavaScript
RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "responsive-card-table",
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: "table",
            variant: "responsive-card",
            headers: ["Product", "Category", "Price", "Stock"],
            rows: [
                ["Wireless Mouse", "Electronics", "$29.99", "In Stock"],
                ["USB-C Cable", "Accessories", "$12.99", "In Stock"],
                ["Laptop Stand", "Office", "$49.99", "Low Stock"],
                ["Mechanical Keyboard", "Electronics", "$89.99", "Out of Stock"]
            ]
        }
    }]
});

Example 4: Table with Rich HTML Content

Cells can contain HTML for rich formatting including links, badges, and other styled content.

Table with HTML Content • JavaScript
RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "html-content-table",
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: "table",
            variant: "responsive-card",
            headers: ["User", "Contact", "Status"],
            rows: [
                [
                    { html: '<strong>John Smith</strong><br><small style="color: #666;">Engineering</small>' },
                    { html: '<a href="mailto:john@example.com">john@example.com</a>' },
                    { html: '<span style="background: #d4edda; color: #155724; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.85rem;">Active</span>' }
                ],
                [
                    { html: '<strong>Jane Doe</strong><br><small style="color: #666;">Marketing</small>' },
                    { html: '<a href="mailto:jane@example.com">jane@example.com</a>' },
                    { html: '<span style="background: #fff3cd; color: #856404; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.85rem;">On Leave</span>' }
                ]
            ]
        }
    }]
});

Example 5: Sortable Table (Visual Indicators)

Add the sortable option to display sort indicators on headers. Note: Actual sorting requires custom JavaScript implementation.

Sortable Table • JavaScript
RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "sortable-table",
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: "table",
            sortable: true,
            caption: "Click headers to sort (requires custom JS)",
            headers: ["Name", "Department", "Salary", "Start Date"],
            rows: [
                ["John Smith", "Engineering", "$85,000", "2020-01-15"],
                ["Jane Doe", "Marketing", "$72,000", "2019-06-20"],
                ["Bob Johnson", "Sales", "$68,000", "2021-03-10"],
                ["Alice Williams", "HR", "$65,000", "2020-09-05"]
            ]
        }
    }]
});

Example 6: Compare All Variants

See all three table variants side by side. Resize your browser window to see how each variant responds on smaller screens.

All Variants • JavaScript
// Compare all three table variants
const sampleData = {
    headers: ["Name", "Role", "Status"],
    rows: [
        ["John Smith", "Developer", "Active"],
        ["Jane Doe", "Designer", "Active"]
    ]
};

RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "compare-tables",
    breakpoints: { xs: 1 },
    gap: "2rem",
    items: [
        { content: { type: "heading", level: 4, text: "Scrollable Variant" } },
        { content: { type: "table", variant: "scrollable", ...sampleData } },
        { content: { type: "heading", level: 4, text: "Responsive Variant" } },
        { content: { type: "table", variant: "responsive", ...sampleData } },
        { content: { type: "heading", level: 4, text: "Responsive Card Variant" } },
        { content: { type: "table", variant: "responsive-card", ...sampleData } }
    ]
});