🚀 VanillaJS ExceLike Table - Full Featured Demo with Settings Persistence
Features Demonstrated:
Filtering:
Text search, numeric range sliders, date hierarchy
Sorting:
Click column headers to sort ascending/descending
Column Pinning:
Pin columns to left side with sticky positioning
Column Visibility:
Show/hide columns via settings menu
Pagination:
Navigate through large datasets with configurable page sizes
Responsive Design:
Works on desktop and mobile devices
Column Resizing:
Drag column borders to resize widths
🆕 Settings Persistence:
All settings automatically saved to LocalStorage and restored on page reload
💾 Settings Persistence Feature:
Auto-Save:
Display and column settings are automatically saved to LocalStorage
Auto-Restore:
Saved settings are automatically restored when you reload the page
Persisted Settings:
Column widths, visibility, pinning, font size, cell padding, page size
Reset on Reload:
Filters and sort settings are reset to defaults (standard behavior)
Manual Controls:
Use "Save Settings Now" to force save, or "Clear Saved Settings" to reset to defaults
Test It:
Make changes, refresh the page, and see your configuration restored!
Demo Controls
Load Sample Data
Clear All Filters
Add Random Data
Toggle Loading
Change Table Size
Clear Saved Settings
Save Settings Now