GridJS Filters
The GridJS component supports powerful filtering capabilities to help users narrow down data. This section explains how to implement and use filters in your grids.GridJS Filter Examples
Here are examples of different ways to use filters with the GridJS component.Radio Button Filter
Use Filter::radio() to add a radio button group filter.
Checkbox Filter
Use Filter::checkbox() to allow multiple selections.
Switch Filter
Use Filter::switch() for boolean-style filtering.
Date Filter
Use Filter::date() to add a date filter.
API for Filters
API documentation for GridJS filtering functionality.Common alternative names: Data Filtering, Grid Search, Table Filtering
Types: Text Input Filters, Select Dropdown Filters, Multi-filters
Principles
Efficient Data Reduction
Filters allow users to quickly reduce large datasets to a more manageable and relevant subset, improving usability and task efficiency.
User Empowerment
By providing intuitive filtering tools, GridJS empowers users to explore data on their own terms, leading to better insights and decision-making.
Context Preservation
Filters should always provide clear feedback on the current filtering criteria, ensuring users understand the context of the displayed data.
Anatomy
- Filter Bar
- Filter Controls
A dedicated area, usually above the grid, that contains all filter controls.
UI elements like text inputs or select dropdowns that users interact with to define filter criteria.
Usage
Use GridJS filters whenever you are displaying a dataset that can be logically segmented or searched. This is especially useful for large tables where manually finding information would be tedious. Implement filters to allow users to find specific records, compare subsets of data, or isolate information based on categories or keywords.