Docs Version 1

Filtering Summary

ZingGrid's built-in filter summary chart provides a visual way to explore and filter data using an interactive summary chart.

First, enable filter summaries by setting the filter attribute to "summary" on your <zing-grid> element. This adds a filter toggle button to the upper-left corner of the grid, allowing users to show or hide the filter summary row. The filter summary row contains interactive summary charts that provide a visual overview of the data and can be used to filter records directly.

Chart types

There are two types of filter summary charts: distributive and categorical.

Distributive charts are used by default for numeric and date-based columns. Currently, the only supported distributive chart type is a histogram. Each histogram node (bin) represents a range of values. Filtering is performed using a selection range that can be moved or resized to adjust the filter criteria.

Categorical charts are used by default for all other column types. Two chart types are supported:

  • Bar: the default for most categorical columns.
  • Pie: the default for columns with only two possible values, such as boolean, checkbox, and toggle columns.

Filtering is performed by selecting one or more nodes. For bar and pie charts, a filter is applied when a node is clicked. Clicking an active node will remove that filter condition.

To specify the summary chart type, use the [filter-summary-chart] attribute. This can be set at the grid or column level. The chart type options are:

  • bar
  • default
  • histogram
  • pie

Additionally, the following are supported:

  • Long labels are truncated
  • NaN nodes are yellow
  • Boolean false nodes are red
  • Color type nodes fill color are set to the color it represents
  • Clear button appears when filter is active to clear filter results
<zing-grid filter="all" filter-summary-chart="bar">...</zing-grid>
Top

Node Sort Order

The default node ordering depends on the chart type:

  • Bar and Pie: Nodes are sorted by count in descending order.
  • Histogram: Nodes are sorted by value for numeric columns and alphabetically for all other supported column types.

However, node order is configurable through the [filter-summary-node-sort] attribute, which accepts:

  • alphabetical: alphabetically by their label
  • count-asc: count in acending order
  • count-desc: count in descending order
  • default: default based on chart and column type
  • value: node numeric value
  • none: retain original order
Top

Disable multiple node filter

By default, categorical charts allows filtering by multiple nodes.

To disable this feature, set [filter-summary-multi-node] to 'disabled'.

Top

More filter options

Setting filter to summary only enables interactive filter summary charts. The filter attribute can also enable inline or menu. For more information about inline filtering, check out Filtering. For more information about menu filtering, check out Filtering Advanced Docs.

Or enable all filtering options by setting filter to "all".

Top

External Input

You can use an external input and our API method filterSummaryColumn() (see below) to dynamically apply summary filtering to the grid from an external input.

const zgRef = document.querySelector('zing-grid');
zgRef.filterSummaryColumn('columnIndex', ['columnFilterValue(s)']);

To reset filter, use the resetFilter() method. This method could also be applied to a specified column.

const zgRef = document.querySelector('zing-grid');
zgRef.resetFilter('fieldIndex');  // Specify column by field index, or reset all column by leaving blank

The following API methods can dynamically get or set filter on the grid:

  • getFilter()
  • setFilter()
Top

Related Resources

Here are some extra resources related to this feature to help with creating your grid:

[features: filtering summary chart]