Multi-Column Headers

The KendoReact Data Grid supports multi-column headers.

To implement multi-column headers, either:

  • Nest columns in the columns definition, or
  • Define an array of column props as children of the particular column.
import React from 'react';
import ReactDOM from 'react-dom';

import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';

import products from './products.json';

class App extends React.PureComponent {
    state = {};

    render() {
        return (
            <Grid
                style={{ height: '420px' }}
                resizable={true}
                reorderable={true}
                data={products.slice(0, 10)}
            >
                <Column field="ProductID" title="ID" width={40} resizable={false} />
                <Column title="Product Informaiton" >
                    <Column field="ProductName" title="Name" />
                    <Column title="Unit" >
                        <Column field="UnitPrice" title="Price" />
                        <Column field="UnitsInStock" title="In Stock" />
                    </Column>
                </Column>
                <Column
                    title="Category"
                    children={[
                        { field: 'Category.CategoryName', title: 'Name' },
                        <Column field="Category.Description" title="Description" />
                    ]}
                />
            </Grid>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
In this article
 /