Modernize Your JavaScript Grids With Sorting, Grouping, And Filtering

When it comes to displaying information there are few JavaScript components as important, or as useful as the Grid. It is one of the primary tools developers use to display, and, more importantly, allow users to view, sort, and interact with large data sets.

As a tool, JavaScript Grids allow developers to modernize and accelerate business processes by simplifying the way their users work with data. Grids allow us to render large sets of information without lagging or freezing. They also help considerably reduce the amount of time we spend managing our data.

In this article, we will show you how to improve your JavaScript Grid with sorting, grouping, and filtering using Sencha Ext JS. Now, let’s dive in.

What is Sencha Ext JS?

Sencha Ext JS is a powerful framework for developing cross-platform web and mobile applications. It supports over 150 UI elements, including grids, pivot grids, and D3 adapters. It helps you to develop data-intensive apps quickly and conveniently.

How can I Turbocharge my JavaScript Grids with Sorting?

One of the reasons the grids are so necessary is that they allow us to determine exactly how data is viewed. With Ext JS Grids, your options are almost unlimited — you can sort your data either by configuration or under program control. You also can perform both single-column and multi-column sorting.

Here is an example of single-column sorting:

To create the sorting shown above, you have to follow these steps:

1. First, you have to specify the view of the app. Then extend Grid, and specify title and items.

Ext.define('MyApp.view.Main', {

extend: 'Ext.grid.Grid',

title: 'Reykjavik Flight Departures',

items: [{

    docked: 'top',

    xtype: 'toolbar',

    items: [{

        text: 'Sort on destination',

        handler: function(button){

            // Sort under program control

            button.up('grid').getStore().sort('to');

        }

    }]

}],

2. Next, you have to sort the data via configuration.

store: {

    // Sort via store configuration

    sorters: [{

        property: 'airline'

    }],

    type: 'store',

    autoLoad: true,

    fields: [{name: 'date',type: 'date',dateFormat: 'j. M'}],

    proxy: {type: 'ajax',url: 'departures.json',reader: {rootProperty: 'results'}}

},

3. Then you have to define the columns. For more information on how to do this check the source code.

4. Finally, add this code:

Ext.application({

name: 'MyApp',

mainView: 'MyApp.view.Main'

});

Source Code:

You can play with the code on Fiddle.

Next, let’s look at multiple-column sorting. All you have to do to achieve this is add multiple sorters via configuration. Here is an example:

Source Code:

You can find the source code right here.

How can I Turbocharge my JavaScript Grids with Grouping?

Grids have a grouped config that allows you to conveniently group columns. Here is an example of how to make it happen:

To create the grouping shown above, simply follow these steps:

1. Specify the view of the app and title. Also, extend the Grid.

Ext.define('MyApp.view.Main', {

    extend: 'Ext.grid.Grid',

    title: 'Reykjavik Flight Departures',

2. Set grouped to true.

grouped: true,

3. Now, you have to specify the columns. You can find everything on the source code.

4. Next, you have to define the store.

store: {

        type: 'store',

        autoLoad: true,

        fields: [{name: 'date',type: 'date',dateFormat: 'j. M'}],

        proxy: {type: 'ajax',url: 'departures.json',reader: {rootProperty: 'results'}}

    }

    });

5. Then add this code:

    Ext.application({

    name: 'MyApp',

    mainView: 'MyApp.view.Main'

    });

Source Code:

You can find the source code at Fiddle.

How can I Turbocharge my JavaScript Grids with Filtering?

With the grid filters plugin, you can filter data based on a given input. Here is an example:

To create the filtering functionality shown above, you have to follow these steps:

1. First, specify the view of the app and title. Also, extend Grid.

2. Set gridfilters to true.

plugins: {

    gridfilters: true

},

3. Create a function for clearing the filters.

onClearFilters: function(){

    this.getStore().clearFilter();

},

4. Next, you have to add columns. You can find all the details in the source code.

5. Define store. Set autoLoad to true.

store: {

    type: 'store',

    autoLoad: true,

    fields: [{name: 'date',type: 'date',dateFormat: 'j. M'}],

    proxy: {type: 'ajax',url: 'departures.json',reader: {rootProperty: 'results'}}

}

});

6. Finally, add this code:

Ext.application({

name: 'MyApp',

mainView: 'MyApp.view.Main'

});

Source Code:

You can play with the code right here.

Are you ready to get started modernizing your grids?

That’s how you modernize your JavaScript grids with Sorting, Grouping, and Filtering. We will cover more ways of turbocharging grids in the upcoming posts. So, do not forget to check our website regularly.

Sencha Ext JS is a feature-rich JavaScript library for building data-intensive web applications for all modern devices, including PCs, smartphones, and tablets. Try it now for free.