How to Sort, Filter, and Group Data With JavaScript and the Ext JS Grid

Last Updated: June 25, 2026
Data manipulation is essential for any application that displays records to users, and the Ext JS Grid provides comprehensive built-in support for sorting, filtering, and grouping large datasets. This guide explains how to implement multi-column sorting, programmatic single-column sorting, programmatic and binding-based filtering, field-based grouping, and advanced data manipulation through grid plugins, including Row Operations and Row Drag and Drop. The patterns covered work for both small datasets and the very large datasets common in enterprise applications, with the framework’s native virtualization handling rendering performance automatically. Whether building a flight booking application, a product catalog, or a financial dashboard, the Ext JS Grid provides the data manipulation capabilities enterprise applications routinely need without requiring teams to assemble these features from separate libraries.

Why Data Manipulation Matters for Enterprise Applications

Data manipulation is the process of querying, modifying, and organizing data to make it more useful for users. Despite its reputation for complexity, data manipulation does not need to be difficult when the framework provides the right primitives. The Ext JS Grid lets developers implement sorting, filtering, and grouping with concise configuration that handles the underlying complexity automatically.

This guide covers the core data manipulation capabilities of the Ext JS Grid, including multi-column sorting, programmatic filtering with view model bindings, field-based grouping, and advanced operations through grid plugins. The patterns work consistently from small datasets through the very large datasets common in enterprise dashboards, financial trading interfaces, and operational consoles. Other JavaScript frameworks can produce similar capabilities by integrating specialized grid libraries such as ag-Grid Enterprise or TanStack Virtual, but the Ext JS approach provides these capabilities natively without separate library integration.

What Is the Ext JS Grid?

The Grid is one of the centerpieces of Sencha Ext JS. It provides comprehensive functionality for fetching, displaying, sorting, filtering, and editing large amounts of data. The grid is built from two main components: an Ext. data.Store containing the records, and a set of column definitions controlling how those records render in the UI.

The data store is more than a passive container. It manages CRUD operations against backend services through its proxy configuration, handles sorting and filtering, supports grouping, and emits events that the grid listens to for rendering updates. This architecture separates data concerns from presentation concerns, which makes it straightforward to swap data sources, update display configuration, or apply multiple grids to the same store without duplicating data logic. The grid’s native virtualization renders only the cells visible in the viewport plus a small buffer, which lets the grid handle very large datasets without overwhelming the browser.

Sorting Data With the Ext JS Grid

Sorting is one of the most common data manipulation operations. The Ext JS Grid supports sorting through column headers (clicking a column sorts by that column), declarative configuration (sorters defined on the store), and programmatic control (calling sort methods from application code). Each approach suits different scenarios, and the grid combines them seamlessly into a single user experience.

Multi-column sorting

Multi-column sorting lets users sort by multiple columns simultaneously, with secondary sort criteria breaking ties from the primary sort. For example, in a flight booking application showing departures from Reykjavik, users might want to sort first by Airline and then by Destination within each airline, which produces a hierarchically organized view of available flights.

Enabling multi-column sorting requires two pieces of configuration. First, set the grid’s multiColumnSort configuration to true, which enables the user-facing interaction (typically Shift+click on additional column headers to add them to the sort). Second, optionally configure initial sorters on the store using the sorters array, which accepts objects specifying the property to sort by and the direction. The grid renders sort indicators on column headers automatically, showing users the current sort state without additional configuration.

Column configuration uses the columns array, with each column object specifying the column type (xtype), header text, data field (dataIndex), and any column-specific options, including width, alignment, or rendering. The datecolumn xtype provides date-specific formatting through its format property. The default column xtype handles strings and numbers, and many specialized column types, including numbercolumn, checkcolumn, and treecolumn, handle specific data types. For exact configuration syntax, the Sencha documentation at docs.sencha.com provides complete API references and working examples.

Programmatic sorting under code control

Some applications need to trigger sorting from application code rather than relying solely on user clicks. For example, an application might provide a Sort On Destination button that programmatically sorts the destination column when clicked. This pattern is useful for guided workflows, dashboards that need preset sort orders, and complex UIs where sorting is triggered by interactions other than clicking column headers.

Programmatic sorting uses the data store’s sort method, passing the property name to sort by. The grid receives the store’s sort event and updates the column header indicators automatically, which keeps the visual sort state consistent with the actual data state. Combine programmatic sorting with toolbar buttons, menu items, or other UI elements by adding handlers that retrieve the store via the grid’s getStore method and call sort with the appropriate property.

Remote sorting for large datasets

For very large datasets where loading all records into the browser would be impractical, the store’s remoteSort configuration pushes sorting to the server. With remoteSort enabled, the store sends sort parameters with each load request, and the server returns records pre-sorted according to those parameters. This produces fast sorting performance regardless of dataset size because the client only receives the page of records currently being viewed.

Remote sorting pairs naturally with server-side pagination. The store sends the current page, page size, and sort parameters with each request, and the server returns the requested page with the appropriate sort applied. For applications integrating with REST APIs, the proxy configuration controls how sort parameters are formatted in the request. For applications using SOAP or other protocols, the proxy can be customized to format parameters appropriately for the backend.

Filtering Data With the Ext JS Grid

Filtering reduces the displayed records to those matching specific criteria. The Ext JS Grid supports several filtering approaches, including programmatic filterBy callbacks for custom filter logic, declarative filter configurations on the store, view model bindings that update filters reactively, and remote filtering that pushes filter operations to the server. Each approach suits different scenarios, and applications often combine multiple approaches as requirements grow.

Programmatic filtering with filterBy

The filterBy method on the store accepts a callback function that returns true for records that should pass through the filter and false for records that should be excluded. This is the most flexible filtering approach because the callback can implement arbitrary logic, including comparisons across multiple fields, computed values, or references to external state.

Consider a product catalog where users can filter products by minimum stock level. Adding a spinner field to the toolbar lets users specify the threshold; a change handler on the spinner calls the store’s clearFilter and filterBy methods to apply the new filter. The filterBy callback receives each record as a parameter and returns true when the record’s stock level meets or exceeds the threshold. The grid updates automatically as the store’s filtered record set changes, producing a smooth interactive filtering experience.

Programmatic filterBy is the right choice when filter logic is complex enough that declarative filter configurations cannot express it cleanly. For simpler filtering scenarios, the declarative configurations covered next produce cleaner code with less imperative logic scattered across event handlers.

Filtering with view model bindings

Filter binding produces reactive filtering, where filters update automatically when source values change. This pattern uses Ext JS view models to coordinate state between UI elements and the data store, eliminating the manual event handling that programmatic filtering requires.

Setting up filter binding involves three pieces. First, define a view model that holds the filter value and the store. The view model’s stores configuration includes a filters array, with each filter specifying a binding through the val property (using the curly-brace bind syntax to reference the view model data) and a filterFn that implements the filter logic with access to the bound value through this.val. Second, bind the UI element controlling the filter value (such as a spinnerfield) to the same view model property using its bind configuration. Third, bind the grid’s store to the view model store using the bind configuration on the grid.

Once configured, changes to the UI element automatically update the view model property, which triggers re-running the filterFn against all records. The grid updates seamlessly without any manual event handling code. This pattern produces significantly cleaner code than programmatic filtering for cases where the filter depends on values bound to UI elements, and it scales well as applications add multiple bound filters or complex filter dependencies.

Declarative filter configurations

For static filter requirements (filters that apply consistently rather than responding to user input), the store’s filters configuration accepts an array of filter objects that apply when the store loads. Each filter object specifies the property to filter on, the value to match against, and optional operators including eq, neq, lt, gt, lte, and gte. The filter ID property is significant: filters with the same ID replace each other rather than accumulating, which prevents filter buildup when filters are reconfigured.

Declarative filters work well for default views (showing only active records by default, only the current user’s records, only records from a specific date range), security filters that should always apply regardless of user interaction, and combined with binding-based filters for cases where some filters are user-controlled, and others are always applied.

Remote filtering

For very large datasets where filtering client-side would require loading too many records, the store’s remoteFilter configuration pushes filtering to the server. With remoteFilter enabled, the store sends filter parameters with each load request, and the server returns only records matching the filters. Remote filtering combines naturally with remote sorting and pagination, which together let the grid handle datasets that would be impractical to load entirely.

Grouping Data With the Ext JS Grid

Grouping organizes records by shared field values into collapsible groups, which lets users navigate large datasets by category rather than scrolling through every record. Common grouping scenarios include flights grouped by airline, products grouped by category, customers grouped by region, transactions grouped by month, or any other field where users benefit from a hierarchical organization.

Enabling grouping by field

Enabling grouping on the Ext JS Grid requires setting the grouped configuration to true on the grid and configuring a grouper on the store that specifies which field to group by. The grouper can be a simple property name string or a more complex object with property and direction. The grid renders group headers automatically, showing the group field value and the count of records in each group.

Users can collapse and expand groups by clicking the group headers, which keeps the grid manageable even for datasets with many groups. Programmatic control of group state is available through methods on the grid including expandAll and collapseAll, which is useful for guided workflows or interactions that should reveal or hide all groups at once.

Customizing group headers

Group headers can be customized through the groupHeader configuration on the grid, which accepts a template (tpl) that controls how each group header renders. The template has access to the group name and the group’s records, which lets developers include group-specific information including aggregate counts, summary values, or icons that visually distinguish different group types. For applications where the default group headers are not sufficient, custom group headers significantly improve usability for users navigating grouped data.

Group summaries

The grid summary row plugin combines naturally with grouping to display per-group aggregates. Each column can specify a summary computation including count, sum, average, min, max, or a custom summary function. The grid renders summary rows at the foot of each group showing the computed aggregates, which is particularly useful for financial data, sales summaries, and operational reports where users need totals alongside the underlying records.

Grid Plugins for Enhanced Data Manipulation

The Ext JS Grid plugin architecture lets developers add advanced functionality without modifying the base grid. Several plugins are particularly valuable for enterprise data manipulation scenarios.

Row Operations plugin

The Row Operations plugin (rowoperations) enables bulk operations on selected rows. Common use cases include bulk archive, bulk delete, bulk status changes, and bulk export. The plugin adds an Operations button to the grid that displays a menu of available actions; users select rows using the grid’s standard selection model and then choose an action from the menu.

Configuring Row Operations involves adding a plugins configuration to the grid with rowoperations and an operation object specifying the menu structure. Each menu item has a text label, an optional iconCls for visual indication, and a handler that fires when the user selects the item. Handlers typically retrieve the selected records using the grid’s getSelections method, display a confirmation dialog through Ext.Msg.confirm, and perform the operation on the selected records when the user confirms. The plugin handles the UI plumbing including menu rendering, selection state, and disabling operations when no rows are selected.

Row Operations work well for enterprise scenarios where users routinely operate on multiple records at once including content moderation interfaces, inventory management screens, and bulk administrative actions. The plugin’s structured approach produces consistent UI patterns across the application rather than ad hoc bulk action implementations that vary between screens.

Row Drag and Drop plugin

The Row Drag and Drop plugin (gridrowdragdrop) enables users to reorder rows by dragging them to new positions, drag rows between grids for transfer operations, and drag rows to other UI elements for assignment workflows. The plugin handles the drag interactions including visual feedback during dragging, drop position indicators, and the actual reordering of underlying records once a drop completes.

Enabling row drag and drop requires only adding the plugin to the grid’s plugins configuration. Additional configuration controls behavior including whether copies or moves occur, which other components accept drops, and what visual feedback shows during dragging. For more complex scenarios including drag between grids with different data structures, additional configuration controls the data transformation between source and target.

Grid Filters plugin

The Grid Filters plugin (gridfilters) provides user-facing filter UI integrated with column headers. Each column can be configured with a filter type including string, number, date, list, or boolean, and the plugin renders filter controls in column header menus. Users can apply filters by interacting directly with column headers rather than through separate filter UI.

Grid Filters works well for spreadsheet-like data manipulation scenarios where users expect Excel-style filter dropdowns. The plugin integrates with the store’s filter system, so filters applied through the UI work the same way as filters applied programmatically or through view model bindings. Combined with sorting through column header clicks and the grouping configurations covered earlier, this produces a complete spreadsheet-like data manipulation experience without custom UI development.

Other useful plugins

Several other plugins extend the grid with capabilities common in enterprise data manipulation. The Row Edit plugin lets users edit records directly in the grid through a row-based editor that appears when users double-click a row. The Cell Edit plugin enables similar editing at the individual cell level. The Selection plugin extends the grid’s selection model with advanced selection patterns including check selection columns. The Grid Summary Row plugin provides per-group and overall summary rows. The Grid Export plugin supports exporting grid contents to formats including Excel, CSV, and PDF.

Performance Considerations for Large Datasets

The Ext JS Grid handles large datasets through native virtualization built into the framework. Only the cells visible in the viewport plus a small buffer are rendered at any time, which lets the grid display large datasets smoothly without overwhelming the browser. This is a meaningful architectural advantage over frameworks that require integration with separate virtualization libraries to handle equivalent dataset sizes.

Buffered rendering and horizontal buffering

Buffered rendering controls how many rows the grid renders ahead of and behind the visible viewport. Larger buffers smooth out scrolling at the cost of more rendered DOM elements. Smaller buffers conserve memory at the cost of brief render delays when scrolling fast. The framework’s defaults work well for most scenarios, but very large datasets or constrained devices may benefit from tuning buffer sizes for the specific application.

Horizontal buffering extends the same technique to wide grids with many columns. Only the columns visible in the horizontal viewport plus a buffer are rendered, which keeps performance consistent regardless of total column count. This is particularly valuable for financial dashboards and reporting interfaces where grids commonly have dozens of columns that could not all be visible simultaneously.

Pagination versus infinite scroll

For datasets too large to load entirely, pagination and infinite scroll are the two primary strategies. Pagination loads one page at a time, with navigation controls letting users move between pages. Infinite scroll loads additional records as the user scrolls toward the end of the loaded data. The Ext JS Grid supports both patterns through the data store’s paging configuration.

Pagination tends to suit applications where users navigate to specific records or need precise position references including operational systems where users frequently reference specific data by row position. Infinite scroll suits applications where users browse continuously through data including dashboards, content feeds, and analytics interfaces where the exact position of records is less important than the flow of browsing through them.

Memory management for long sessions

Ext JS provides automatic cleanup and memory management for components through the framework’s lifecycle. For long-running enterprise applications where users keep the application open across full working days, this discipline prevents the memory accumulation that careless component management produces. The framework’s component disposal model ensures that grids destroyed during navigation release their resources cleanly, which keeps memory profiles stable across long sessions.

Best Practices for Grid Data Manipulation

Choose the right filtering approach

Use declarative filter configurations for static filters that always apply. Use view model binding for filters that respond to UI elements. Use programmatic filterBy for complex filter logic that declarative configurations cannot express cleanly. Use remote filtering for datasets too large to load entirely. Mixing approaches is fine; applications typically use multiple approaches across different grids and different filter types.

Configure remote operations for large datasets

When working with datasets that would be impractical to load entirely in the browser, enable remoteSort, remoteFilter, and pagination on the store. These configurations push the heavy lifting to the server, which produces faster client-side performance and reduced memory usage. The trade-off is that interactions involve network round trips rather than instant client-side updates, which may produce perceptible delays for sort and filter operations.

Design columns thoughtfully

Use specialized column types including datecolumn for dates, numbercolumn for formatted numbers, and checkcolumn for boolean values rather than relying on the default column type with manual formatting. Specialized columns provide appropriate alignment, formatting, and sorting behavior automatically. Set explicit widths or flex values on columns to control how the grid uses horizontal space, particularly for wide grids where automatic sizing produces inconsistent results.

Use grouping selectively

Grouping works well for datasets with a clear hierarchical structure (records that naturally divide into categories), but it can produce confusing UX when applied to datasets without obvious grouping. Choose group fields that produce meaningful, balanced groups rather than fields that produce many tiny groups or one giant group. Provide users with the ability to change grouping when the data supports multiple meaningful grouping perspectives.

Support accessibility

The Ext JS Modern toolkit provides ARIA accessibility built into grid components, which supports WCAG 2.2 compliance for grids without per-component implementation work. Keyboard navigation works through tab and arrow keys for selecting cells and rows. Screen reader announcements include column headers and row positions. Filter and sort controls have appropriate ARIA labels. For enterprise applications subject to accessibility requirements, this built-in support is significantly cheaper than retrofitting accessibility into grids built on frameworks without native accessibility.

Test with realistic data

Develop and test the grid with data shapes and volumes that match production rather than with simplified demo data. Performance characteristics, sort and filter behavior, and group organization all depend on the specific data the application encounters in production. Synthetic test data often hides issues that only become visible with real data shapes including unexpected null values, inconsistent formatting, very long strings, and edge cases in numeric values.

Conclusion

The Ext JS Grid provides comprehensive data manipulation capabilities including multi-column sorting, programmatic and binding-based filtering, field-based grouping, and advanced operations through the plugin architecture. The framework handles large datasets natively through virtualization and horizontal buffering, which removes the operational complexity that other JavaScript frameworks require for equivalent functionality. For enterprise applications where data interaction is the application’s core value, the grid’s native capabilities reduce assembly work compared to approaches that integrate separate grid libraries.

Beyond the core capabilities covered in this guide, the broader Ext JS framework includes 140+ pre-built components covering everything enterprise applications routinely need including charts, calendars, forms, dialogs, navigation, and many other UI elements. The framework’s coherent architecture means that components work together consistently rather than requiring developers to bridge gaps between separately developed libraries. Teams can evaluate Ext JS against their own enterprise application requirements including data manipulation needs to determine fit.

Frequently Asked Questions About Sort, Filter, and Group With the Ext JS Grid

How do I sort data in the Ext JS Grid?

The Ext JS Grid supports sorting through several mechanisms. Users can click column headers to sort by that column, with subsequent clicks toggling between ascending and descending. Setting multiColumnSort to true enables sorting by multiple columns simultaneously with Shift-click. Initial sort order can be specified declaratively through the sorters configuration on the store.

Programmatic sorting through application code uses the store’s sort method, passing the property name to sort by. The grid automatically updates column header indicators to reflect the current sort state. For specialized columns including datecolumn and numbercolumn, the framework handles type-appropriate sorting automatically, so dates sort chronologically and numbers sort numerically rather than as strings.

Can I apply multiple filters to a grid in Ext JS?

Yes. The Ext JS Grid supports multiple simultaneous filters through several mechanisms. The store’s filters configuration accepts an array of filter objects, with each filter specifying its property, value, and optional operator. The Grid Filters plugin provides user-facing filter UI integrated with column headers, with users able to apply multiple filters simultaneously across different columns.

View model bindings enable reactive multi-filter scenarios where each filter responds to a different UI element. Applications can mix approaches as needed, combining declarative filters that always apply (such as security filters) with user-controlled filters bound to UI elements with programmatic filters for complex logic. The store’s filter system handles all approaches consistently, so the grid updates automatically as filters change regardless of how they were applied.

What is data grouping in the Ext JS Grid?

Data grouping organizes records by shared field values into collapsible groups, which lets users navigate large datasets by category. Common scenarios include grouping customers by region, products by category, transactions by month, or any other field where users benefit from hierarchical organization rather than flat lists of records.

Enabling grouping requires setting the grid’s grouped configuration to true and configuring a grouper on the store specifying which field to group by. The framework renders collapsible group headers automatically, with users able to expand and collapse groups by clicking the headers. Group headers can be customized through templates, and the grid summary row plugin enables per-group aggregations including counts, sums, and averages.

How do I implement custom filters in Ext JS?

Custom filters are implemented through the store’s filterBy method, which accepts a callback function returning true for records that should pass the filter and false for records to exclude. This gives complete control over filter logic and supports arbitrary filtering scenarios including comparisons across multiple fields, computed values, and references to external state outside the record itself.

For filters that should respond reactively to UI elements, combining filterBy with view model bindings produces clean, declarative filter UX. The view model holds the filter values, UI elements bind to those values, and the store’s filter configuration uses bindings that automatically re-run filter functions when bound values change. This pattern produces significantly less imperative code than manual event handling while supporting the same flexibility as programmatic filterBy.

Can sorting, filtering, and grouping work together in Ext JS?

Yes. The Ext JS Grid handles combined sort, filter, and group operations efficiently. The store applies operations in the appropriate order: filters reduce the record set, sorts order the filtered records, and groups organize the sorted records into hierarchical categories. All operations update reactively, so changes to any of them trigger seamless updates to the displayed data without manual coordination from application code.

Combining operations works well in practice. Users can filter to a subset of records, sort the filtered subset, and group the sorted subset into categories, with the grid rendering smoothly throughout. This combined operation capability is one of the meaningful advantages of using a comprehensive grid component versus assembling sort, filter, and group features from separate libraries that would need explicit coordination.

Does Ext JS support remote sorting and filtering?

Yes. When working with large datasets or backend services, the store’s remoteSort and remoteFilter configurations push these operations to the server. With remote operations enabled, the store sends sort and filter parameters with each load request, and the server returns records pre-sorted and pre-filtered. This produces fast client-side performance regardless of underlying dataset size because the client only receives the records currently being viewed.

Remote operations pair naturally with server-side pagination for handling datasets too large to load entirely. The store sends the current page, page size, sort parameters, and filter parameters with each request. The proxy configuration controls how these parameters are formatted in the HTTP request, which lets the grid integrate with REST APIs, GraphQL backends, SOAP services, or custom backend protocols. The grid’s user experience remains consistent regardless of whether operations are client-side or server-side.

Why use the Ext JS Grid instead of a plain JavaScript table?

Plain JavaScript tables work for displaying small amounts of static data, but they fall short when applications need sorting, filtering, grouping, virtualization for large datasets, editing capabilities, accessibility features, and real-time updates. Building these features from scratch consumes significant development time and produces ongoing maintenance burden as requirements evolve.

The Ext JS Grid provides these capabilities natively including data binding through the store architecture, virtual scrolling that handles large datasets without performance degradation, filters and grouping with both declarative and programmatic interfaces, summaries for aggregated data, real-time updates when underlying data changes, and built-in accessibility for WCAG 2.2 compliance. For enterprise-scale applications where data interaction is the application’s core value, these capabilities reduce assembly work significantly compared to approaches that build grids from primitives.

How does the Ext JS Grid handle very large datasets?

The Ext JS Grid handles large datasets through native virtualization built into the framework. Only the cells visible in the viewport plus a small buffer are rendered at any time, which prevents the grid from creating DOM elements for thousands or millions of records that are not currently visible. Horizontal buffering extends the same technique to wide grids, rendering only visible columns plus a buffer.

For datasets too large to load entirely, the store supports server-side pagination combined with remote sort and filter operations. The client only loads the current page, and operations push to the server rather than running client-side. This combination lets the grid display effectively unlimited datasets with consistent performance, which is essential for enterprise applications operating on production data volumes that often exceed what client-side processing can handle.

Can I customize the appearance of grid rows and cells?

Yes. The Ext JS Grid supports extensive customization through column configuration, cell templates, and the framework’s theming system. Column cell templates accept HTML or template strings that control how each cell renders, including conditional formatting based on the record’s values. Cell renderers provide programmatic control for cases where templates are not flexible enough.

The framework’s theming system lets applications apply consistent styling across all components including grids. Themer is the visual theming tool from Sencha that lets developers customize themes without deep CSS expertise. The framework includes Material, Triton, Graphite, and Neptune themes plus the capability to build custom themes that match corporate branding. This combination produces visually polished grids that integrate naturally with the rest of the application’s design system.

What plugins are available for the Ext JS Grid?

The Ext JS Grid plugin architecture includes several plugins commonly used in enterprise applications. The Row Operations plugin enables bulk operations on selected rows. The Row Drag and Drop plugin enables row reordering and transfer between grids. The Grid Filters plugin provides user-facing filter UI integrated with column headers. The Row Edit and Cell Edit plugins enable inline editing.

Additional plugins include the Grid Summary Row plugin for per-group and overall aggregates, the Grid Export plugin for exporting to Excel, CSV, and PDF formats, and the Selection plugin for advanced selection patterns. The plugin architecture means applications can enable only the capabilities they actually need rather than carrying overhead for features the application does not use. For the complete plugin catalog and configuration details, the Sencha documentation provides API references and working examples.