Data Grid Header Filters

Header filters allows you to apply filtering for the data of a specific column. It is possible to apply multiple header filters at once.

Basic example

Use filter: true option to enable header filter in a column. By default all columns will use Text Filter.

HTML
javascript

        
            
            <div id="grid"></div>

        
            
                import { DataDen } from "data-den-core";

                const rows = [
                  { car: 'Honda', model: 'Civic', year: '01/05/2013', price: 28000 },
                  { car: 'Mitsubishi', model: 'Lancer', year: '01/05/2013', price: 56000 },
                  { car: 'Porsche', model: 'Boxster', year: '09/02/2020', price: 31000 },
                  { car: 'Toyota', model: 'Celica', year: '16/12/2010', price: 18000 },
                  { car: 'Kia', model: 'Ceed', year: '14/03/2024', price: 28000 },
                  { car: 'Ford', model: 'Focus', year: '04/07/2014', price: 24000 },
                  { car: 'Ford', model: 'Focus', year: '16/12/2010', price: 24000 },
                  { car: 'Porsche', model: 'Boxster', year: '24/01/2015', price: 31000 },
                  { car: 'Mitsubishi', model: 'Lancer', year: '14/09/2006', price: 18000 },
                  { car: 'Kia', model: 'Sportage', year: '01/03/2024', price: 24000 },
                ];

                const options = {
                  columns: [
                    {
                      field: "car",
                      headerName: "Car",
                      filter: true,
                    },
                    {
                      field: "model",
                      headerName: "Model",
                      filter: true
                    },
                    {
                      field: "year",
                      headerName: "Year",
                      filter: true
                    },
                    {
                      field: "price",
                      headerName: "Price",
                      filter: true
                    },
                  ],
                  rows: rows,
                };

                const gridEl = document.getElementById('grid');
                const dataDen = new DataDen(gridEl, options);

Built-in filters

Data Den comes with multiple built-in filter types:

Text Filter - a filter used to compare strings
Number Filter - a filter used to compare numbers
Date Filter - a filter used to compare JavaScript Date Objects
Select Filter - a filter that allows you to select the searched value from the list

By default all the columns use Text Filter. You can specify which filter should be used for a specific column in the column definition options. It is also possible to create a custom filter by defining a new filter renderer class.

The following example shows how to use built-in filters:

Column Car uses a Text Filter
Column Model uses a Select Filter
Column Year uses a Date Filter
Column Price uses a Number Filter

HTML
javascript

        
            
            <div id="grid"></div>

        
            
              import {
                DataDen,
                DataDenHeaderDateFilterRenderer,
                DataDenHeaderNumberFilterRenderer,
                DataDenHeaderSelectFilterRenderer,
                DataDenHeaderTextFilterRenderer
              } from "data-den-core";

              const rows = [
                { car: 'Honda', model: 'Civic', year: '01/05/2013', price: 28000 },
                { car: 'Mitsubishi', model: 'Lancer', year: '01/05/2013', price: 56000 },
                { car: 'Porsche', model: 'Boxster', year: '09/02/2020', price: 31000 },
                { car: 'Toyota', model: 'Celica', year: '16/12/2010', price: 18000 },
                { car: 'Kia', model: 'Ceed', year: '14/03/2024', price: 28000 },
                { car: 'Ford', model: 'Focus', year: '04/07/2014', price: 24000 },
                { car: 'Ford', model: 'Focus', year: '16/12/2010', price: 24000 },
                { car: 'Porsche', model: 'Boxster', year: '24/01/2015', price: 31000 },
                { car: 'Mitsubishi', model: 'Lancer', year: '14/09/2006', price: 18000 },
                { car: 'Kia', model: 'Sportage', year: '01/03/2024', price: 24000 },
              ];

              const options = {
                columns: [
                  {
                    field: 'car',
                    headerName: 'Car',
                    filter: true,
                    filterRenderer: DataDenHeaderTextFilterRenderer,
                    filterOptions: {
                      method: 'includes',
                      debounceTime: 500,
                      caseSensitive: false,
                    },
                  },
                  {
                    field: 'model',
                    headerName: 'Model',
                    cellRenderer: DataDenDefaultCellRenderer,
                    filter: true,
                    filterRenderer: DataDenHeaderSelectFilterRenderer,
                    filterOptions: {
                      method: 'includes',
                      listOptions: [
                        { label: 'Civic', value: 'civic' },
                        { label: 'Lancer', value: 'lancer' },
                        { label: 'Boxster', value: 'boxster' },
                        { label: 'Celica', value: 'celica' },
                        { label: 'Sportage', value: 'sportage' },
                        { label: 'Focus', value: 'focus' },
                      ],
                    },
                  },
                  {
                    field: 'year',
                    headerName: 'Year',
                    filter: true,
                    filterRenderer: DataDenHeaderDateFilterRenderer,
                    filterOptions: {
                      method: 'equals',
                      debounceTime: 500,
                      dateParserFn: (dateString) => {
                        const dateParts = dateString.split('/').map((part) => Number(part));
                        const [day, month, year] = dateParts;
                        return new Date(year, month - 1, day);
                      },
                    },
                  },
                  {
                    field: 'price',
                    headerName: 'Price',
                    filter: true,
                    filterRenderer: DataDenHeaderNumberFilterRenderer,
                    filterOptions: {
                      method: 'equals',
                    },
                  },
                ],
                rows: rows,
                rowHeight: 32,
              };

              const gridEl = document.getElementById('grid');
              const dataDen = new DataDen(gridEl, options);

Header Filters

Data Grid Header Filters

Basic example

Built-in filters

Access restricted

To view this section you must have an active PRO account