Our blazing fast Grid component built with pure JavaScript


Post by branden »

Hey guys,

I'm having an odd issue where date columns incorrectly parse ISO 8601 strings, as well as do not filter correctly. Setting a custom format, such as 'YYYY-MM-DD' parses the date correctly, and sorting works as expected. However, filtering remains broken. Can anyone point me to what I may be doing wrong here?

Dataset:

[
  {
    qty: 0,
    reqDate: '2022-01-19T03:00:00.000Z',
    promiseDate: '2022-01-19T03:00:00.000Z',
    backlog: 32
  },
  {
    qty: 0,
    reqDate: '2022-04-08T03:00:00.000Z',
    promiseDate: '2022-04-08T03:00:00.000Z',
    backlog: 32
  }
]

Output:

Screenshot from 2021-08-30 16-12-13.png
Screenshot from 2021-08-30 16-12-13.png (13.35 KiB) Viewed 563 times

Source:

const grid = new Grid({
    columns: [
        { text: 'Shipped', field: 'qty', flex: 1},
        { text: 'Backlog', field: 'backlog', flex: 1},
        { type: 'date', text: 'Req. Date', field: 'reqDate', flex: 1},
        { type: 'date', text: 'Promise Date', field: 'promiseDate', flex: 1},
    ],
    features: {
        cellEdit: false,
        filter: true,
    },
    height: 400,
    data: [] // set asyncronously via fetch
});

Post by mats »

You should define model fields defining your fields, especially important are your date fields. Recommended reading to get started with Grid would be the data Store & Model classes:

https://bryntum.com/docs/grid/#Core/data/Store
https://bryntum.com/docs/grid/#Core/data/Model
https://bryntum.com/docs/grid/#Core/data/field/DateDataField

This works well:

import Model from '../../lib/Core/data/Model.js';
import '../../lib/Grid/column/DateColumn.js';

class MyModel extends Model {
    static get fields() {
        return [
            'qty',
            'backlog',
            { name : 'reqDate', type : 'date' },
            { name : 'promiseDate', type : 'date' }
        ];
    }
}

new Grid({

appendTo : 'container',

features : {
    group : false
},

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

columns : [
    { text : 'Shipped', field : 'qty', flex : 1 },
    { text : 'Backlog', field : 'backlog', flex : 1 },
    { type : 'date', text : 'Req. Date', field : 'reqDate', flex : 1 },
    { type : 'date', text : 'Promise Date', field : 'promiseDate', flex : 1 }
],

store : {
    modelClass : MyModel
},

data : [
    {
        qty         : 0,
        reqDate     : '2022-01-19T03:00:00.000Z',
        promiseDate : '2022-01-19T03:00:00.000Z',
        backlog     : 32
    },
    {
        qty         : 0,
        reqDate     : '2022-04-08T03:00:00.000Z',
        promiseDate : '2022-04-08T03:00:00.000Z',
        backlog     : 32
    }
]
});

Post by branden »

Excellent, thank you for the quick reply, mats. I must remember to be explicit about my Models in the future. It's working as intended now!


Post Reply