Understanding the Store

The primary data container in Bryntum is the Store. Stores hold the data that powers all Bryntum widgets. Items within stores are often called records. A record is an instance of the Model or one of the Model subclasses.

The following code provides a basic example of a Store:

new Grid({
  store : {
    data: [
      { id : 1, name : "ABBA", country : "Sweden" },
      { id : 2, name : "Beatles", country : "UK" }
    ]
  }
});

You can also use stores to load remote data with autoLoad and readUrl:

// Remote data
const store = new AjaxStore({
  autoLoad: true, // auto loads the data when store is initiated
  readUrl: "data.json",
});

new Grid({
  store: store,
});

Data formats

Stores can accept arrays of JavaScript or JSON data in either of the following structures:

• Flat data
• Tree data

Flat data

You can use non-hierarchical flat data in a Store, such as the following JavaScript array:

[
  { id : 1, name : 'Dan Stevenson', city : 'Los Angeles', age : 24 },
  { id : 2, name : 'Talisha Babin', city : 'Paris', age : 27 },
  { id : 3, name : 'Maxim Gagarin', city : 'Moscow', age : 34 },
  { id : 4, name : 'Linda Johansson', city : 'Stockholm', age : 29 }
];

Tree data

You can also put hierarchical tree data in a Store by using the children property to create nested relationships between data objects. The following JavaScript object is an example of tree data:

[
    {
        id       : 1,
        name     : "ABBA",
        country  : "Sweden",
        children : [
            { id : 2, name : "Agnetha" },
            { id : 3, name : "Bjorn" },
            { id : 4, name : "Benny" },
            { id : 5, name : "Anni-Frid" }
        ]
    }
]

You don't need to use the children property to load tree data in Bryntum Grid. As long as your Grid has nested data, it can be named anything. For example, in the blog post about creating nested data table, the example uses tree data without the children property.

Interacting with Store data

You can perform multiple actions on the information contained in stores, such as filtering or sorting the data within a Store by one or more of its fields, or finding and retrieving a specific record from within a Store.

For example, you can sort the Store data by one or more fields as follows:

const store = new Store({
  sorters : [
    { field : 'age', ascending : false } // descending
  ]
});

You can also filter the records within a Store as follows:

// filters the record to find the ones that have "powers : 'Martial arts'"
store.filter({ 
    property : 'powers', 
    value    : 'Martial arts'
});

Alternatively, you can turn on the filter feature to let the user apply their own filters on the Grid component.

//<code-header>
fiddle.title = 'Grid filtering';
//</code-header>
targetElement.innerHTML = '<p>Click the filter icon on column headers to apply filters</p>';

const grid = new Grid({
    appendTo : targetElement,

    autoHeight : true,

    features : {
        filter : true
    },

    columns : [
        { field : 'name', text : 'Name', width : 200 },
        { field : 'age', text : 'Age', flex : 1 },
        { field : 'city', text : 'City', flex : 1 }
    ],

    store : {
        sorters : [
            { field : 'age', ascending : false } // descending
        ],
        data : [
            { id : 1, name : 'Spiderman', age : 18, city : 'New York' },
            { id : 2, name : 'Batman', age : 50, city : 'Gotham' },
            { id : 3, name : 'Superman', age : 45, city : 'Metropolis' },
            { id : 4, name : 'Wonder Woman', age : 35, city : 'Themyscira' },
            { id : 5, name : 'Iron Man', age : 36, city : 'Malibu' },
            { id : 6, name : 'Thor', age : 42, city : 'Asgard' },
            { id : 7, name : 'Black Widow', age : 41, city : 'Stalingrad' },
            { id : 8, name : 'The Flash', age : 26, city : 'Central City' },
            { id : 9, name : 'Black Panther', age : 36, city : 'Wakanda' }
        ]
    }
});

You may want to take a look at our filtering demo.

To learn more, visit our guide to using a Store. You can also take a look at our features documentation.

Continue reading: Interacting with the server