Data Grid Sorting

Sorting allows you to sort the data of a specific column. It is possible to apply multiple sorters at once by using multi sort feature.

Basic example

Add sort: true to column options to enable sorting for a given column.

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: 'Sportage', year: '14/09/2006', 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/05/2013', price: 24000 },
                ];

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

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

Multi sort

It is possible to sort data by multiple columns. To activate multi sort hold the Shift key while clicking the column header. You can change the default multi sort key to Ctrl by using the following option: multiSortKey: 'ctrl'

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: 'Sportage', year: '14/09/2006', 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/05/2013', price: 24000 },
              ];

              const options = {
                columns: [
                  {
                    field: 'car',
                    headerName: 'Car',
                    sort: true
                  },
                  {
                    field: 'model',
                    headerName: 'Model',
                    sort: true
                  },
                  {
                    field: 'year',
                    headerName: 'Year',
                    sort: true
                  },
                  {
                    field: 'price',
                    headerName: 'Price',
                    sort: true
                  },
                ],
                rows: rows,
                rowHeight: 32,
              };

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

Custom sorting logic

It is possible to define custom sort comparator for a column by setting a new comparator function in the sortOptions.

In the following example we use custom dateComparator for Year column to transform dates from strings to JavaScript Date Objects before sorting.

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: 'Sportage', year: '14/09/2006', 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/05/2013', price: 24000 },
              ];

              function dateComparator(fieldA, fieldB) {
                const dateA = new Date(fieldA.split('/').reverse().join('-'));
                const dateB = new Date(fieldB.split('/').reverse().join('-'));

                if (dateA < dateB) {
                  return -1;
                } else if (dateA > dateB) {
                  return 1;
                } else {
                  return 0;
                }
              }

              const options = {
                columns: [
                  {
                    field: 'car',
                    headerName: 'Car',
                    sort: true
                  },
                  {
                    field: 'model',
                    headerName: 'Model',
                    sort: true
                  },
                  {
                    field: 'year',
                    headerName: 'Year',
                    sort: true,
                    sortOptions: {
                        comparator: dateComparator
                    }
                  },
                  {
                    field: 'price',
                    headerName: 'Price',
                    sort: true
                  },
                ],
                rows: rows,
              };

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

Sorting order

The default sorting order is:

ascending -> descending -> none (['asc', 'desc', null])

That means when you first time use sorting on a column that is not sorted, it will sort ascending (asc). The next click will make it sort descending (desc) and another click will remove the sort (null), reverting to the original data order.

Use sortOrder option to modify the default sorting order. In the following example we use different, custom order for each column:

Column car: descending -> ascending -> none
Column model: ascending -> descending
Column car: descending -> ascending
Column car: ascending -> none

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: 'Sportage', year: '14/09/2006', 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/05/2013', price: 24000 },
              ];

              const options = {
                columns: [
                  {
                    field: 'car',
                    headerName: 'Car',
                    sort: true,
                    sortOrder: ['desc', 'asc', null]
                  },
                  {
                    field: 'model',
                    headerName: 'Model',
                    sort: true,
                    sortOrder: ['asc', 'desc']
                  },
                  {
                    field: 'year',
                    headerName: 'Year',
                    sort: true,
                    sortOrder: ['desc', 'asc']
                  },
                  {
                    field: 'price',
                    headerName: 'Price',
                    sort: true,
                    sortOrder: ['asc', null]
                  },
                ],
                rows: rows,
              };

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

Sorting order

Use defaultSort option to specify the default sorting state for a column. By default this option is set to null.

In the following example we apply default descending sort to the Car column.

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: 'Sportage', year: '14/09/2006', 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/05/2013', price: 24000 },
              ];

              const options = {
                columns: [
                  {
                    field: 'car',
                    headerName: 'Car',
                    sort: true,
                    defaultSort: 'desc'
                  },
                  {
                    field: 'model',
                    headerName: 'Model',
                    sort: true
                  },
                  {
                    field: 'year',
                    headerName: 'Year',
                    sort: true
                  },
                  {
                    field: 'price',
                    headerName: 'Price',
                    sort: true
                  },
                ],
                rows: rows,
              };

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

Sorting

Data Grid Sorting

Basic example

Multi sort

Custom sorting logic

Sorting order

Sorting order

Access restricted

To view this section you must have an active PRO account