Understanding Highcharts Grid

Highcharts Grid displays structured data in columns and rows, using a standard HTML table as its foundation. Most Grid setups start with a data source, then define how columns and cells should look and behave, and finally add features such as pagination, editing, accessibility, and exporting.

table

Overall structure

Most Grid setups combine a few core options:

Grid.grid('container', {
    data: {
        columns: {
            product: ['Apple', 'Pear', 'Orange'],
            price: [3.5, 2.5, 3]
        }
    }
}

The data object defines how Grid receives, prepares, and updates data. For column data, use data.columns (an object where each key is a column ID and each value is an array of cell values). Alternatively, pass an existing DataTable instance via data.dataTable. The DataTable class stores key-value pairs: each key becomes a header label, and each value is an array with the corresponding column values. When users edit cells (for example via edit mode), Grid writes changes back through the configured data provider. Read more about data handling and the DataTable class.

Use data.autogenerateColumns to control how provider columns are rendered:

  • true (default): provider columns are rendered automatically, and custom columns from columns[] that are missing in provider data are appended.
  • false: Grid renders only columns explicitly configured in columns[] (or referenced in header[]).

For detailed behavior and examples, see the Columns article.

Instead of data.columns or data.dataTable, you can also use data connectors for loading data.

{
    data: {
        connector: {
            type: JSON,
            data: [
                ['colA', 'colB'],
                [1, 2],
                [3, 4]
            ]
        }
    }
}

Data providers

Grid reads and writes data through a data provider. The default LocalDataProvider works with an in-memory DataTable, but you can register a custom provider for other data sources. In Grid Pro, the RemoteDataProvider is available for server-backed data and on-demand paging. For details and configuration examples, see the Data handling article.

Data modifiers

When you have an existing DataTable instance (for example, one created with a Math Modifier from Highcharts Dashboards library to add computed columns), pass it via data.dataTable.

You can read more about Data Modifiers here.

columnDefaults and columns[]

{
    columnDefaults: {
        cells: {
            editMode: {
                enabled: true
            }
        }
    },
    columns: [{
        id: 'price',
        cells: {
            format: '${value}'
        }
    }],
    pagination: {
        enabled: true
    }
});

In practice, you will usually work with a few main topics: how data is loaded, how columns are defined, how rows are rendered, and how cell content is formatted or edited.

Start here

If you are new to Grid, begin with:

Then continue with the topic area that matches the part of Grid you are working on.

Core topics

Data handling

Data handling covers how Grid receives data, how it stores it internally, and whether sorting, filtering, and pagination happen in the browser or on the server.

Start with:

Columns

Columns define the structure of the Grid. This includes header labels, grouped headers, column sizing, sorting, filtering, and column-level styling.

Start with:

Rows

Rows focus on the rendered dataset: row access, pagination, virtualization, and performance when displaying large amounts of data.

Start with:

Cells

Cells control how individual values are presented, styled, and formatted inside the Grid.

Start with:

Editing Pro

Editing covers end-user value editing, built-in renderers, validation rules, and custom editing behavior.

Start with:

Theming

Theming covers CSS variables, theme customization, conditional styling, and custom icons.

Start with:

Frameworks

Framework articles show how to use Grid with supported frameworks.

Start with:

Additional topics

Use this page as an overview of the main Grid concepts. Once you know which part of the Grid you are working on, the linked topic article should be the next step.

Edit this page