Headers in React Treegrid component

16 Sep 20238 minutes to read

Header text

By default, column header title is displayed from column field value. To override the default header title, you have to define the headerTextvalue.

import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='315'>
        <ColumnsDirective>
          <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
          <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
          <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date'/>
          <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
        </ColumnsDirective>
    </TreeGridComponent>;
}
;
export default App;
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';

function App() {
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
        height='315'>
        <ColumnsDirective>
          <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
          <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
          <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
          <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
        </ColumnsDirective>
    </TreeGridComponent>
};
export default App;

  • If both the field and headerText are not defined in the column, the column renders with “empty” header text.

Header template

You can customize the header element by using the headerTemplateproperty.

import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
    const taskName = () => {
        return (<div><img src="taskname.png" width="20" height="20" className="e-image"/>
        <b>Task Name</b></div>);
    };
    const startDate = () => {
        return (<div><img src="startdate.png" width="20" height="20" className="e-image"/>
        <b>Start Date</b></div>);
    };
    const duration = () => {
        return (<div><img src="duration.png" width="20" height="20" className="e-image"/>
        <b>Duration</b></div>);
    };
    const progress = () => {
        return (<div><img src="progress.png" width="20" height="20" className="e-image"/>
        <b>Progress</b></div>);
    };
    return <TreeGridComponent dataSource={sampleData} childMapping='subtasks' height='315'>
        <ColumnsDirective>
            <ColumnDirective field='taskName' width='220' headerTemplate={taskName}/>
            <ColumnDirective field='startDate' headerText='Start Date' format='yMd' type='date' textAlign='Right' headerTemplate={startDate}/>
            <ColumnDirective field='duration' textAlign='Right' headerTemplate={duration}/>
            <ColumnDirective field='progress' headerText='progress' textAlign='Right' headerTemplate={progress}/>
        </ColumnsDirective>
    </TreeGridComponent>;
}
;
export default App;
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';

function App() {
    const taskName = () => {
        return (<div><img src="taskname.png" width="20" height="20" className="e-image" />
        <b>Task Name</b></div>);
    }
    const startDate = () => {
        return (<div><img src="startdate.png" width="20" height="20" className="e-image" />
        <b>Start Date</b></div>);
    }
    const duration = () => {
        return (<div><img src="duration.png" width="20" height="20" className="e-image" />
        <b>Duration</b></div>);
    }
    const progress = () => {
        return (<div><img src="progress.png" width="20" height="20" className="e-image" />
        <b>Progress</b></div>);
    }
    return <TreeGridComponent dataSource={sampleData} childMapping='subtasks' height='315'>
        <ColumnsDirective>
            <ColumnDirective field='taskName' width='220' headerTemplate={taskName}/>
            <ColumnDirective field='startDate' headerText='Start Date' format='yMd' type='date' textAlign='Right' headerTemplate={startDate}/>
            <ColumnDirective field='duration' textAlign='Right' headerTemplate={duration}/>
            <ColumnDirective field='progress' headerText='progress' textAlign='Right' headerTemplate={progress}/>
        </ColumnsDirective>
    </TreeGridComponent>
};
export default App;