A feature-rich data table component for RSL. Try out the examples below!
Just add data-rsl-smart-table to enable search, export, and pagination.
| Name | Department | Status | Joined | |
|---|---|---|---|---|
| John Smith | john.smith@example.com | Engineering | Active | 2023-01-15 |
| Sarah Johnson | sarah.j@example.com | Marketing | Active | 2022-06-20 |
| Mike Williams | mike.w@example.com | Sales | Pending | 2024-02-10 |
| Emily Brown | emily.b@example.com | Engineering | Active | 2021-11-05 |
| David Lee | david.l@example.com | HR | Inactive | 2020-03-22 |
| Lisa Chen | lisa.c@example.com | Finance | Active | 2022-09-18 |
| James Wilson | james.w@example.com | Engineering | Active | 2023-04-30 |
| Amanda Taylor | amanda.t@example.com | Marketing | Pending | 2024-01-08 |
Add data-filterable for per-column filtering. Use data-filter="select" on columns for dropdown filters.
| Product | Category | Price | Stock | Status |
|---|---|---|---|---|
| Wireless Headphones | Electronics | $149.99 | 234 | In Stock |
| Cotton T-Shirt | Clothing | $29.99 | 567 | In Stock |
| Desk Lamp | Home | $45.00 | 12 | Low Stock |
| Running Shoes | Sports | $89.99 | 0 | Out of Stock |
| Bluetooth Speaker | Electronics | $79.99 | 156 | In Stock |
| Yoga Mat | Sports | $35.00 | 89 | In Stock |
| Winter Jacket | Clothing | $199.99 | 23 | Low Stock |
| Coffee Maker | Home | $129.00 | 45 | In Stock |
Add data-selectable for checkbox selection. Try shift-clicking for range selection!
| Task | Assignee | Priority | Due Date |
|---|---|---|---|
| Update documentation | John Smith | Medium | 2024-12-15 |
| Fix login bug | Emily Brown | High | 2024-12-05 |
| Design new landing page | Sarah Johnson | Medium | 2024-12-20 |
| API integration | James Wilson | High | 2024-12-10 |
| User testing | Lisa Chen | Low | 2024-12-25 |
| Performance optimization | Mike Williams | Medium | 2024-12-18 |
Add data-sticky-header to keep headers visible while scrolling.
| ID | Name | City | Revenue |
|---|---|---|---|
| 1001 | Alpha Corp | New York | $125,000 |
| 1002 | Beta Inc | Los Angeles | $98,000 |
| 1003 | Gamma LLC | Chicago | $156,000 |
| 1004 | Delta Co | Houston | $87,500 |
| 1005 | Epsilon Ltd | Phoenix | $234,000 |
| 1006 | Zeta Group | Philadelphia | $178,000 |
| 1007 | Eta Partners | San Antonio | $145,000 |
| 1008 | Theta Systems | San Diego | $289,000 |
| 1009 | Iota Tech | Dallas | $167,000 |
| 1010 | Kappa Solutions | San Jose | $312,000 |
| 1011 | Lambda Digital | Austin | $198,000 |
| 1012 | Mu Enterprises | Jacksonville | $76,000 |
| 1013 | Nu Industries | Fort Worth | $234,500 |
| 1014 | Xi Corporation | Columbus | $187,000 |
| 1015 | Omicron Labs | Charlotte | $156,700 |
All features enabled: sorting, filtering, selection, pagination, export, and sticky header.
| Employee | Department | Location | Salary | Status | Start Date |
|---|---|---|---|---|---|
| Alice Johnson | Engineering | San Francisco | $145,000 | Active | 2019-03-15 |
| Bob Martinez | Marketing | New York | $95,000 | Active | 2020-07-22 |
| Carol White | Sales | Chicago | $87,000 | On Leave | 2018-11-30 |
| Daniel Kim | Engineering | Seattle | $165,000 | Active | 2017-06-01 |
| Eva Chen | HR | Austin | $78,000 | Active | 2021-02-14 |
| Frank Rodriguez | Finance | Miami | $110,000 | Terminated | 2016-09-08 |
| Grace Lee | Engineering | Denver | $135,000 | Active | 2020-04-20 |
| Henry Brown | Marketing | Boston | $89,000 | Active | 2022-01-10 |
| Ivy Thompson | Sales | Portland | $92,000 | Active | 2019-08-25 |
| Jack Wilson | Finance | Atlanta | $125,000 | On Leave | 2018-05-15 |
Add data-column-resizing to drag column borders. Add data-column-reordering to drag headers to reorder.
| Event | Location | Date | Attendees | Status |
|---|---|---|---|---|
| Annual Conference | San Francisco, CA | 2024-03-15 | 500 | Confirmed |
| Product Launch | New York, NY | 2024-04-22 | 200 | Planning |
| Team Building | Austin, TX | 2024-05-10 | 75 | Confirmed |
| Training Workshop | Chicago, IL | 2024-06-05 | 30 | Planning |
| Client Summit | Miami, FL | 2024-07-18 | 150 | Cancelled |
Add data-selectable and data-bulk-actions to enable bulk operations on selected rows.
| Customer | Total Orders | Status | |
|---|---|---|---|
| Acme Corporation | contact@acme.com | $45,000 | Active |
| Global Tech Inc | sales@globaltech.com | $78,500 | Active |
| Startup Labs | hello@startuplabs.io | $12,000 | Pending |
| Enterprise Solutions | info@enterprise.com | $156,000 | Active |
| Small Biz Co | owner@smallbiz.com | $8,500 | Inactive |
Add data-saved-views to save/load table configurations. Add data-full-page-mode for expand button.
| Project | Team | Progress | Deadline | Status |
|---|---|---|---|---|
| Website Redesign | Design | 75% | 2024-04-30 | On Track |
| Mobile App v2.0 | Development | 45% | 2024-06-15 | At Risk |
| Q2 Campaign | Marketing | 90% | 2024-03-31 | On Track |
| User Research | Research | 30% | 2024-05-20 | Behind |
| API Integration | Development | 60% | 2024-04-15 | On Track |
| Brand Guidelines | Design | 100% | 2024-02-28 | On Track |
Use data-frozen-columns='{"left":["col1"],"right":["col2"]}' to pin columns. The first and last columns stay visible while scrolling.
| ID | First Name | Last Name | Phone | Department | Title | Actions | |
|---|---|---|---|---|---|---|---|
| EMP001 | John | Smith | john.smith@company.com | (555) 123-4567 | Engineering | Senior Developer | |
| EMP002 | Sarah | Johnson | sarah.j@company.com | (555) 234-5678 | Marketing | Marketing Manager | |
| EMP003 | Michael | Williams | mike.w@company.com | (555) 345-6789 | Sales | Sales Representative | |
| EMP004 | Emily | Brown | emily.b@company.com | (555) 456-7890 | HR | HR Specialist | |
| EMP005 | David | Lee | david.l@company.com | (555) 567-8901 | Finance | Financial Analyst |
Control Smart Tables programmatically.
| Name | Role | Status |
|---|---|---|
| Alex Morgan | Developer | Active |
| Beth Cooper | Designer | Active |
| Chris Davis | Manager | Pending |
| Diana Evans | Developer | Active |
| Eric Foster | QA Engineer | Inactive |