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]
        }
    },
    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