Nowadays, a large amount of data keep generating in businesses, and sometimes they need to display that information on websites for the consumers. The common way of displaying data on a website is using an HTML table. However, showing a large amount of data in an HTML table is cumbersome, especially if it slows down the entire page load. Therefore, if you want to show a large amount of data in a table on your web page, using a grid is the best way to do that. 

A grid is similar to a table in HTML elements, but it allows you to easily fetch, scroll, sort, group, and filter a large number of data rows. When loading and processing large data sets, the performance is important because it should not hinder the user experience. 

A high-performing js grid has a good initial page load time which is the amount of time the grid takes to load the initial data set. It is also efficient in dynamic filtering or the time it takes to filter one column. In addition, when considering a large amount of data in a grid, users often need to scroll through various sections of the grid to see the rest of the data. This scrolling speed is a good indicator of grid performance, and high-performing grids have a good scrolling speed that amounts to seconds. 

Ext JS data grid is a high-performing grid that allows loading and manipulating a massive data set within milliseconds. In most benchmarking experiments, almost all the JS grid types from different vendors have shown good initial page load time and dynamic filtering speed. However, all those grids have shown a greater variation in scrolling speed, except when viewing the first few records of the grid. the Ext JS data grid has an outstanding scrolling speed which is 300x faster than other leading data grids, which can fetch and display massive sets of data in less than one second

Ext JS grid consists of two parts which are Ext. data.Store and Ext.grid.The panel. The datastore represents the data and the set of columns in the grid to render.  The data stores give Ext Js grids the capability to load data inline and load them dynamically on-demand. It also allows loading nested data, sorting, and filtering. The following example shows a simple data store specified in JSON data structure which will be loaded to Ext Js Grid.

Ext.create('Ext.data.Store', {
    storeId: "myProductStore",

    fields: ['productid', 'title'],
    data: [{
        'productid': '1',
        "title": "LindtChocalate"
    }, {
        'productid': '2',
        "title": "Milk"
    },]
});

Ext.grid.The panel is the key component that allows displaying a massive amount of tabular data on the client side. For example, the below code generates a simple grid with two columns. The grid will load the data we specified in the above-specified data store. The grid generated will consist of the columns specified below and the header title ‘Products .’ Under the title will show the data directly below the header title. 

var columns = [{
    text: 'productid',
    dataIndex: 'productid',
    flex: 1
}, {
    text: 'title',
    dataIndex: 'title',
    flex: 1
}];

var grid = Ext.create('Ext.grid.Grid', {
    title: 'Products',
    store: "myProductStore",
    columns: columns,
    layout: 'fit',
    renderTo: document.body,
    width: '100%',
    height: 300
});

Raw and Column operations, rendering, and scrolling

Ext JS grid consists of a rich set of features that enables not only usual functionalities such as sorting, grouping, drag-and-drop, Copy-Paste, Expand but also advanced functionalities such as live data rendering, infinite scrolling, and paging. 

External Plugins

Also, several plugins provide extra functionality to your applications. For example, if you want to add paging to the grid, you can put an external toolbar to the grid sing Ext. toolbar.Paging to the Ext.grid.Panel components you specify, or else you can specify anywhere in your code. If you want to display summary data at the bottom of your table, you can use the Ext.grid.feature.Summary plugin. The Ext.grid.feature.Grouping allows you to group rows with the same value for a particular column. Likewise, there are many plugins available for you to customize the behavior of your grid.

Buffered Store

Sometimes, your data set can be too large, and you will not be able to store data on Ext. data.Store. For such scenarios, the grid lets you do ‘buffered rendering,’ which can render a large data set on-screen at once. It means buffered rendering does not lead the entire data set at once to the client. This feature allows users to scroll grids with thousands of records without creating performance bottlenecks. You can use Ext.data.BufferedStore for buffered rendering specifying the pageSize. When you enable this feature, it will render the raws in the visible area, and it will keep rendering the data as and when you scroll the grid removing the rendering on the invisible side. 

Remote data binding

Inline data rendering is useful when the data is static, or a small amount of data is displayed. Real-world applications need dynamic data binding to fetch data from a backend database server. ExtJs also supports remote data Binding by catering to the data requests from local or remote data sources with Ajax, JSON, RESTful methods.

Sencha Ext Js data grid is a powerful way to display any data on the client-side in tabular format. The experiments have found a faster scrolling performance, outperforming many other JS grid vendors. This tutorial introduced Sencha Ext Js Grid and its performance and explained how to use its main components. Then we discussed its and main features and customization options such as buffered store and remote data binding. Ext JS allows developers to build tables with great scrolling performance, initial page load, and dynamic filtering.

Head over and find how to build high-performing web apps with Ext JS Grid!