Sort & Filter

ReoGrid Web lets you sort columns and narrow down data using auto-filters with dropdown controls.

Sort & Filter are available in the Pro edition.

Column Sort

const ws = grid.worksheet

// Ascending sort
ws.sortColumn(0, 'asc')

// Descending sort
ws.sortColumn(0, 'desc')

// Get sort state
const state = ws.getSortState()
// { column: 0, order: 'asc' } or null

Sorting operates within the auto-filter range. If no filter is set, the entire sheet is sorted.

Auto-Filter

Displays dropdowns on the header row to filter data.

Creating a Filter

const filter = ws.createAutoFilter({
  headerRow: 0,
  startColumn: 0,
  endColumn: 4,
})

Filter Operations

// Get unique values for a column
const values = filter.getColumnValues(1)
// ['Tokyo', 'Osaka', 'Nagoya', ...]

// Set filter criteria (show only selected values)
filter.setColumnFilter(1, new Set(['Tokyo', 'Osaka']))

// Apply the filter
filter.apply()

// Get filter state for a specific column
const colFilter = filter.getColumnFilter(1)
// { selectedValues: Set, ... } or null

// Check if there are active filters
const hasFilters = filter.hasActiveFilters()

// Clear all filters
filter.clearAll()

Sorting Within a Filter

filter.sortColumn(0, 'asc')
const sortState = filter.getSortState()

Events

Subscribing to Filter Changes

filter.onFilterChange((event) => {
  console.log('Hidden rows:', event.hiddenRowCount)
})

Filter Dropdown Click

ws.onFilterDropdownClick((column) => {
  console.log('Filter dropdown clicked for column:', column)
  // Display a custom filter UI, etc.
})

Removing a Filter

ws.removeAutoFilter()

// Get the current filter
const currentFilter = ws.getAutoFilter() // AutoColumnFilter | null

Complete Example: Data Table

const ws = grid.worksheet

ws.suspendRender()

// Headers
const headers = ['ID', 'Name', 'Department', 'Hire Year', 'Sales']
headers.forEach((h, i) => {
  ws.cell(0, i).setValue(h).setStyle({ bold: true })
})

// Data
const data = [
  [1, 'Tanaka', 'Sales', 2020, 1200000],
  [2, 'Suzuki', 'Engineering', 2019, 980000],
  [3, 'Sato', 'Sales', 2021, 1500000],
  // ...
]
data.forEach((row, r) => {
  row.forEach((val, c) => {
    ws.setCellInput(r + 1, c, String(val))
  })
})

// Freeze header row
ws.setFrozenRows(1)

// Alternating row colors
ws.setAlternateRowColors({ evenColor: '#ffffff', oddColor: '#f8fafc' })

// Set up auto-filter
const filter = ws.createAutoFilter({
  headerRow: 0,
  startColumn: 0,
  endColumn: 4,
})

ws.resumeRender()

// Filter operation example — show only Sales department
filter.setColumnFilter(2, new Set(['Sales']))
filter.apply()

Notes

• Sorting operates within the auto-filter range. If no filter is set, the entire sheet is sorted.
• Filtering works by toggling row visibility. Data in hidden rows is preserved.