Data Filter & Sort
Click column header dropdowns to filter and sort rows. Switch between 300, 1K, and 10K rows to test performance.
How it works
This demo loads an employee dataset and wires up ReoGrid's built-in Auto Filter. Each column header gets a dropdown that lets you filter rows by value and sort ascending or descending.
- Click the ▼ arrow in any column header to open the filter panel — check/uncheck values to show or hide matching rows
- The row count selector (300 / 1K / 10K) regenerates the dataset so you can feel the rendering speed difference
- Alternate row colors are set in one line — no CSS loops or manual cell iteration needed
- Data is loaded with suspendRender / resumeRender so the grid repaints exactly once, keeping load times near-instant even at 10K rows
- All filter state is managed by the grid; no external state machine or event handlers required
Key APIs used
ws.createAutoFilter(options) Enable column-header filter dropdowns on a specified row range, with configurable column indices
ws.setAlternateRowColors(options) Apply zebra-stripe background colors to even and odd data rows in a single call
ws.setCellInput(row, col, value) Write a value to a cell by row/col index — faster than chaining cell().setValue() for bulk writes
ws.suspendRender() / ws.resumeRender() Defer all DOM/Canvas updates until resumeRender() is called — essential for bulk data writes
ws.setGridSize(rows, cols) Resize the sheet before bulk-writing data to avoid incremental reallocation
Source Code
Related Documentation
Related Articles
Related Demos
Cell Types Dashboard
Progress bars, star ratings, sparkline charts, checkboxes, and hyperlinks — all rendered inside spreadsheet cells.
Cell Styles
Font styles, colors, backgrounds, text alignment, and border options — a showcase of the Cell Style API.
Freeze Panes
Toggle frozen rows and columns interactively. Scroll a 50-row dataset while headers stay fixed.