v7.3.0

Introduction

Bryntum components are data-driven by design—data is not just an enhancement, it is a core requirement. Whether you're rendering a Scheduler, Gantt chart, or Grid, each component depends on well-structured data to function correctly.

This guide serves as an introduction to Bryntum’s data management concepts, helping you understand the underlying data structures, loading mechanisms, and integration strategies needed to build functional and efficient applications.

Let's start by exploring the two main sources of data:

  • Inline data
  • Remote data

Inline data

The easiest way to feed data into your Bryntum Grid is by using inline data. Just as HTML allows inline CSS, you can include the data directly inside the new Grid({}) instance. Here's how to do it:

const grid = new Grid({
    columns : [/*...*/],
    data : [
        { id : 1, name : 'Batman' },
        { id : 2, name : 'Wolverine' },
        /*...*/
    ] 
});

const App = props => {
    const [data, setData] = useState([
        { id : 1, name : 'Dan Stevenson', city : 'Los Angeles' },
        { id : 2, name : 'Talisha Babin', city : 'Paris' }
        ...
    ]);

    return <BryntumGrid data={data} />
}

<bryntum-grid :data="data" />

export default {
  setup() {
    return {
      data : reactive([
        { id : 1, name : 'Dan Stevenson', city : 'Los Angeles' },
        { id : 2, name : 'Talisha Babin', city : 'Paris' }
        ...
      ])
    };
  }
}

<bryntum-grid [data]="data"></bryntum-grid>

@Component()
export class AppComponent {
    data = [
        { id : 1, name : 'Dan Stevenson', city : 'Los Angeles' },
        { id : 2, name : 'Talisha Babin', city : 'Paris' }
        ...
    ]
}

The above config results in the following Grid:

Remote data

Remote data can come from a static .json file hosted on a web server (e.g., in the /public folder of your project or on a CDN), or it can be retrieved dynamically from a server through an API call (e.g., data.php).

If you have a /data.php endpoint, you can access the data as follows:

new Grid({
    store : {
        autoLoad : true,
        readUrl  : 'data.json' // can be replaced with an API endpoint (e.g. read.php)
    }
})

// GridConfig.tsx
import { BryntumGridProps } from "@bryntum/grid-react";

const gridProps: BryntumGridProps = {
  // other config
  store : {
    autoLoad : true,
    readUrl  : 'data.json' // can be replaced with an API endpoint (e.g. read.php)
  }

};

export { gridProps };

import { gridProps } from "./gridConfig";
// App.tsx
const App = props => {

    return <BryntumGrid {...gridProps} />
}

<script setup lang="ts">
import { BryntumGrid } from '@bryntum/grid-vue-3';
import { gridConfig } from './AppConfig.ts';
</script>

<template>
  <bryntum-grid v-bind="gridConfig" />
</template>

import { DataGenerator } from '@bryntum/grid';
import { type BryntumGridProps } from '@bryntum/grid-vue-3';

export const gridConfig : BryntumGridProps = {
    // other config
    store : {
        autoLoad : true,
        readUrl  : 'data.json' // can be replaced with an API endpoint (e.g. read.php)
    }
};

<bryntum-grid
    #grid
    [store]="gridProps.store!"
></bryntum-grid>

// app.config.ts
import { type BryntumGridProps } from '@bryntum/grid-angular';

export const gridProps: BryntumGridProps = {
    store : {
        readUrl    : 'data.json', // can be replaced with an API endpoint (e.g. read.php)
        autoLoad   : true,
    }
};

// app.component.ts

export class AppComponent implements AfterViewInit {

    // other config
    gridProps = gridProps;
}

The Store helps you manage your remote data. We'll talk more about it in the upcoming topic.

You can also use axios or fetch API:

async function loadData() {
    const response = await fetch('backend/load.php');
    return await response.json();
}

// Extract data from loadData() via `await` or `.then`
// Assuming it has been saved to `data`

const grid = new Grid({
    store : {
        data: data
    }
})

// or

grid.store.data = data;

Working with remote data is more complex as it offers multiple ways of interaction. Let's move on to the next topic to learn more about how stores work.

Continue reading: Understanding the Store

Contents