Our blazing fast Grid component built with pure JavaScript


Post by galcott »

I am trying the Bryntum grid for the first time and the performance in loading a large number of records is terrible. I am loading just 4 columns from a database using PHP. Up to about 9,000 records it loads within a couple of seconds but as the number of records increases beyond that the load time increases dramatically:
12,000 records: 8 seconds
16,000 records: 14 seconds
21,000 records: 35 seconds
28,000 records: 52 seconds

This is completely unacceptable and unlike any other of the many grids I've tested, which all can load even the largest of these data sets within 2 seconds. Is this normal for Bryntum?


Post by Animal »

Configure it with a height, or use your own CSS to,Gove it a height.

Otherwise it cannot do virtual row rendering.


Post by galcott »

I've already done that. Here's my code.

import { Grid, DataGenerator } from '../../build/grid.module.js';
import shared from '../_shared/shared.module.js';

new Grid({

appendTo : 'container',
height: '600px',
maxHeight: '650px',
maxWidth : '650px',

store : {
        // When Grid finds readUrl in the store config it will create an AjaxStore
        readUrl : 'getorders.php',
        // Load upon creation
        autoLoad : true
    },

features : {
    group : false
},

// Headers will ripple on tap in Material theme
ripple : {
    delegate : '.b-grid-header'
},

columns : [
    {
        text   : 'Order #',
        field  : 'ordno',
        width  : 100
    }, {
        text  : 'Order Date',
        field : 'orddate_fmt',
        width : 100,
        type  : 'date'
    }, {
        text  : 'Patient',
        field : 'patient',
        width : 300
    }, {
        text  : 'Amount',
        field : 'amount',
        type : 'number',
        width : 120
    }
]

});

Post by mats »

Sounds like it's your backend taking time? Our Grid handles half a million records easily with 60FPS scrolling, try it out here https://bryntum.com/products/grid/examples/bigdataset/

Do you have your test case accessible somewhere where we can try it out?


Post Reply