Components

Pass these components inside Grid. Grid itself is documented on that page. Data and Column have their own articles; ColumnDefaults is on the Column page. The tables below cover the remaining components.

import { Grid, Data, Column, Caption } from '@highcharts/grid-lite-react';
export default function App() {
    return (
        <Grid>
            <Caption>Team directory</Caption>
            <Data
                columns={{
                    name: ['Alice', 'Bob', 'Charlie'],
                    age: [23, 34, 45]
                }}
            />
            <Column id="name" headerFormat="Name" />
            <Column id="age" dataType="number" headerFormat="Age" />
        </Grid>
    );
}

Components take class names. Grid also has theme, including an empty string that turns off the default theme for utility classes such as Tailwind.

See Styling for class-name mapping, themes, and Tailwind.

Every component also accepts an options prop. Use the same JSON as in Core (caption, data, columns[], header, pagination, and so on). Props overwrite options. For Caption and Description, children overwrite options.text.

On Grid, the options prop overwrites children. See Grid.

Data

Data supplies the rows: columns, a DataTable, or a connector. When you change that data in React state, the grid updates.

See Data for the props, updates, autogenerateColumns, and remote data.

Column

<Column> configures one column. ColumnDefaults sets shared options for every column.

See Column for the props, column IDs, and unbound columns.

Header

<Header> maps to header. Use it to set order, hide columns, or group headers. Pass the header tree as options: an array of column IDs or group objects. Use Core columnId inside a group object; use id on <Column>.

import { Grid, Data, Column, Header } from '@highcharts/grid-lite-react';
export default function App() {
    return (
        <Grid>
            <Data
                columns={{
                    name: ['Alice', 'Bob'],
                    age: [23, 34],
                    city: ['New York', 'Oslo']
                }}
            />
            <Header
                options={[
                    'name',
                    {
                        format: 'Details',
                        columns: ['age', 'city']
                    }
                ]}
            />
            <Column id="name" headerFormat="Name" />
            <Column id="age" dataType="number" headerFormat="Age" />
            <Column id="city" headerFormat="City" />
        </Grid>
    );
}

When options is set, list every column you want visible. Columns missing from the tree are excluded. Per-column header text still comes from headerFormat or headerFormatter on Column.

See Column headers and Grouped headers.

Prop	Type	Description
options	Array<string \| object>	Header tree (Core header). A string is a column ID. An object can group or configure a header cell (columnId, format, className, columns, accessibility).

Caption

Table caption. The text inside <Caption> is the caption.

import { Grid, Data, Caption } from '@highcharts/grid-lite-react';
export default function App() {
    return (
        <Grid>
            <Caption htmlTag="h2">Team directory</Caption>
            <Data
                columns={{
                    name: ['Alice', 'Bob'],
                    age: [23, 34]
                }}
            />
        </Grid>
    );
}

Prop	Type	Description
className	string	Class names on the caption.
htmlTag	string	HTML tag for the caption element.
options	object	Core caption JSON. Flattened props and children override this object.

Description

Table description. The text inside <Description> is the description.

import { Grid, Data, Description } from '@highcharts/grid-lite-react';
export default function App() {
    return (
        <Grid>
            <Description>Employees by name and age.</Description>
            <Data
                columns={{
                    name: ['Alice', 'Bob'],
                    age: [23, 34]
                }}
            />
        </Grid>
    );
}

Prop	Type	Description
className	string	Class names on the description.
options	object	Core description JSON. Flattened props and children override this object.

Pagination

Page size and pagination controls. Rendering <Pagination /> sets enabled to true unless you pass false. Place it before the other components to render controls above the table, or after them to render controls below. See Row pagination.

import { Grid, Data, Pagination } from '@highcharts/grid-lite-react';
export default function App() {
    return (
        <Grid>
            <Data
                columns={{
                    name: ['Alice', 'Bob', 'Charlie', 'David'],
                    age: [23, 34, 45, 56]
                }}
            />
            <Pagination pageSize={2} />
        </Grid>
    );
}

Prop	Type	Description
enabled	boolean	Whether pagination is rendered. Defaults to true when the component is used.
page	number	Current page.
pageSize	number	Rows per page.
pageSizeOptions	number[]	Options in the page-size selector.
align	'left' \| 'center' \| 'right' \| 'distributed'	Alignment of pagination elements.
pageInfo	boolean	Show page information text.
pageSizeSelector	boolean	Show the page-size selector.
pageButtons	boolean	Show numbered page buttons.
pageButtonsCount	number	Maximum number of page buttons before ellipsis.
firstLast	boolean	Show first and last buttons.
previousNext	boolean	Show previous and next buttons.
className	string	Class names on .hcg-pagination.
infoClassName	string	Class names on the page info element.
controlsClassName	string	Class names on the controls container.
sizeClassName	string	Class names on the page-size container.
options	object	Core pagination JSON. Flattened props override this object.