React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Headers in React TreeGrid component

01 Feb 2023 / 2 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.

Source
Preview
App.jsx
App.tsx
Copied to clipboard
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
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;
Copied to clipboard
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
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.

Source
Preview
App.jsx
App.tsx
Copied to clipboard
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
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;
Copied to clipboard
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
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;
Previous
Next