Tables - Quick Start Guide

3 Responsive Table Patterns

RSL includes three table styles optimized for different use cases:

Scrollable - Horizontal scroll on small screens (maintains table structure)
Responsive - Stacks rows vertically on mobile with inline labels
Responsive-Card - Transforms into card-style layout on mobile

3-Minute Setup

1 Include Files

2 Choose Your Table Type

Pattern 1: Scrollable Table

Best for: Data tables with many columns

Maintains table structure, adds horizontal scrolling on mobile



    
        
            
                Name
                Email
                Phone
                Status
            
        
        
            
                John Doe
                john@example.com
                555-1234
                Active

Name	Email	Phone	Status
John Doe	john@example.com	555-1234	Active

Pattern 2: Responsive Table

Best for: Tables that need to stack on mobile

Stacks rows vertically, shows labels inline with data

⚠ Important: You MUST add data-label="Column Name" to each <td> for this to work!



    
        
            Name
            Email
            Status
        
    
    
        
            John Doe
            john@example.com
            Active

Name	Email	Status
John Doe	john@example.com	Active

Pattern 3: Responsive-Card Table

Best for: Product lists, user profiles

Transforms into card-style layout on mobile devices

⚠ Important: Requires data-label on each <td> like responsive tables.



    
        
            Product
            Price
            Stock
        
    
    
        
            Widget A
            $19.99
            In Stock

Product	Price	Stock
Widget A	$19.99	In Stock

Quick Reference

Class/Attribute	Purpose
`.scrollable`	Horizontal scroll on mobile
`.responsive`	Stacks rows vertically on mobile
`.responsive-card`	Card-style layout on mobile
`.sortable`	Visual sort indicators (requires custom JS)
`data-label="..."`	Column label for mobile view (required for responsive/card tables)
`.table-scroll-wrapper`	Wrapper for scrollable tables

Pro Tips

✨ Tip 1: Use .scrollable for data-heavy tables with 6+ columns

✨ Tip 2: Use .responsive for simple tables with 3-5 columns

✨ Tip 3: Use .responsive-card for product/user lists that look better as cards

✨ Tip 4: Always include data-label attributes—they're required for mobile views!

✨ Tip 5: Test on mobile devices to ensure data-label text makes sense

ADA Compliance

RSL Tables are accessibility-friendly:

✅ Semantic <table>, <thead>, <tbody> structure
✅ data-label provides context for screen readers on mobile
✅ Keyboard navigable
✅ High contrast styling