Cell in React TreeGrid

8 Oct 202522 minutes to read

In the Syncfusion React TreeGrid, a cell represents the intersection of a row and column, displaying specific data values. Each cell can contain text, numbers, HTML content, or custom templates. The TreeGrid provides comprehensive options to customize cell appearance, behavior, and content rendering to create interactive and visually clear data presentations.

Displaying the HTML content

Displaying HTML content is useful for formatted values such as images, links, or tables. HTML tags can be rendered in both headers and content. By default, HTML is encoded to prevent security risks.To render raw HTML tags without encoding, set the disableHtmlEncode property to false.

The following example demonstrates rendering HTML content in headers and cells by configuring the disableHtmlEncode property:

app.jsx
app.tsx
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { htmlData } from './datasource';
function App() {
    return <TreeGridComponent dataSource={htmlData} treeColumnIndex={1} childMapping='subtasks' height='300'>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='<span> Task ID </span>' width='160' textAlign='Right' disableHtmlEncode={true}/>
            <ColumnDirective field='taskName' headerText='<span> Task Name </span>' width='180' disableHtmlEncode={false}/>
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
            <ColumnDirective field='progress' headerText='Progress' width='80' textAlign='Right'/>
        </ColumnsDirective>
    </TreeGridComponent>;
}
;
export default App;
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { htmlData } from './datasource';

function App() {
    return <TreeGridComponent dataSource={htmlData} treeColumnIndex={1} childMapping='subtasks' height='300'>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='<span> Task ID </span>' width='160' textAlign='Right' disableHtmlEncode={true}/>
            <ColumnDirective field='taskName' headerText='<span> Task Name </span>' width='180' disableHtmlEncode={false}/>
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
            <ColumnDirective field='progress' headerText='Progress' width='80' textAlign='Right' />
        </ColumnsDirective>
    </TreeGridComponent>
};
export default App;

Autowrap the TreeGrid content

Auto wrap allows cell content to flow to the next line when it exceeds the column width. Wrapping occurs at whitespace boundaries. Enable auto wrap by setting allowTextWrap to true, and configure behavior using textWrapSettings.wrapMode.

There are three types of wrapMode:

Both: Default. Wraps both content and header.
Header: Wraps header only.
Content: Wraps content only.

When a column width is not specified, auto wrap adjusts based on the TreeGrid width.

The following example sets allowTextWrap to true and textWrapSettings.wrapMode to Content:

app.jsx
app.tsx
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
    const settings = { wrapMode: 'Content' };
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='300' allowTextWrap={true} textWrapSettings={settings}>
        <ColumnsDirective>
          <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
          <ColumnDirective field='taskName' headerText='Task Name' width='90'/>
          <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 { TextWrapSettingsModel  } from '@syncfusion/ej2-grids';
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';

function App() {
    const settings: TextWrapSettingsModel = { wrapMode: 'Content' };

    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='300' allowTextWrap={true} textWrapSettings={settings}>
        <ColumnsDirective>
          <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
          <ColumnDirective field='taskName' headerText='Task Name' width='90'/>
          <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;

Customize cell styles

Cell appearance can be customized using the queryCellInfo event, which triggers for every cell. The event provides QueryCellInfoEventArgs with details of the cell.

app.jsx
app.tsx
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
    const customizeCell = (args) => {
        const cell = args.cell;
        if (args.column.field === 'progress' && +cell.innerHTML > 90 &&
            +cell.innerHTML <= 100) {
            cell.setAttribute('style', 'background-color:#336c12;color:white;');
        }
        else if (+cell.innerHTML > 20 && args.column.field === 'progress') {
            cell.setAttribute('style', 'background-color:#7b2b1d;color:white;');
        }
    };
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='300' queryCellInfo={customizeCell}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
            <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
            <ColumnDirective field='progress' headerText='Progress' width='80' textAlign='Right'/>
        </ColumnsDirective>
    </TreeGridComponent>;
}
;
export default App;
import { QueryCellInfoEventArgs } from '@syncfusion/ej2-grids';
import { Column, ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';

function App() {
    const customizeCell = (args: QueryCellInfoEventArgs) => {
        const cell : HTMLTableCellElement = args.cell as HTMLTableCellElement;
        if ((args.column as Column).field === 'progress' && +cell.innerHTML > 90 &&
             +cell.innerHTML <= 100) {
                cell.setAttribute('style', 'background-color:#336c12;color:white;');
        } else if (+cell.innerHTML > 20 && (args.column as Column).field === 'progress') {
            cell.setAttribute('style', 'background-color:#7b2b1d;color:white;');
        }  
    }

    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='300'
        queryCellInfo={customizeCell}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
            <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
            <ColumnDirective field='progress' headerText='Progress' width='80' textAlign='Right' />
        </ColumnsDirective>
    </TreeGridComponent>
};
export default App;

Custom attributes

Cells can be customized by adding a CSS class through the customAttribute property of the column.

.e-attr {
    background: #d7f0f4;
}

    const customAttr = {class: 'e-attr'};

    <ColumnDirective
        field="taskID" headerText="Task ID" customAttributes={customAttr} width="90" textAlign='Right'/>

In the following example, cells in the TaskID and StartDate columns are customized.

app.jsx
app.tsx
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './custom.css';
import { sampleData } from './datasource';
function App() {
    const customAttr = { class: 'e-attr' };
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='300'>
            <ColumnsDirective>
              <ColumnDirective field='taskID' headerText='Task ID' customAttributes={customAttr} width='90' textAlign='Right'/>
              <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
              <ColumnDirective field='startDate' headerText='Start Date' customAttributes={customAttr} 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() {
    const customAttr = {class: 'e-attr'};
        return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='300'>
            <ColumnsDirective>
              <ColumnDirective field='taskID' headerText='Task ID' customAttributes={customAttr} width='90' textAlign='Right'/>
              <ColumnDirective field='taskName' headerText='Task Name' width='180' />
              <ColumnDirective field='startDate' headerText='Start Date' customAttributes={customAttr} width='90' format='yMd' textAlign='Right' type='date' />
              <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
            </ColumnsDirective>
        </TreeGridComponent>
};
export default App;

Clip mode

Clip mode manages long text that overflows cell boundaries. It supports truncation, ellipsis, and ellipsis with tooltip. Configure the behavior using the clipMode property.

There are three types of clipMode:

Clip: Truncates overflow content.
Ellipsis: Displays an ellipsis for overflow content.
EllipsisWithTooltip: Displays an ellipsis and shows a tooltip on hover.

The following example demonstrates how to set the clipMode property:

app.jsx
app.tsx
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { complexData } from './datasource';
function App() {
    return <TreeGridComponent dataSource={complexData} treeColumnIndex={1} childMapping='subtasks' height='300' gridLines='Both'>
        <ColumnsDirective>
          <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
          <ColumnDirective field='taskName' headerText='Task Name' width='70' clipMode='Clip'/>
          <ColumnDirective field='assignee.firstName' headerText='Assignee' width='30' textAlign='Right' clipMode='Ellipsis'/>
          <ColumnDirective field='priority' headerText='Priority' width='30' textAlign='Right' clipMode='EllipsisWithTooltip'/>
          <ColumnDirective field='duration' headerText='Duration' width='30' textAlign='Right'/>
        </ColumnsDirective>
    </TreeGridComponent>;
}
;
export default App;
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { complexData } from './datasource';
function App() {
    return <TreeGridComponent dataSource={complexData} treeColumnIndex={1} childMapping='subtasks' height='300' gridLines='Both'>
        <ColumnsDirective>
          <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
          <ColumnDirective field='taskName' headerText='Task Name' width='70' clipMode='Clip'/>
          <ColumnDirective field='assignee.firstName' headerText='Assignee' width='30' textAlign='Right' clipMode='Ellipsis' />
          <ColumnDirective field='priority' headerText='Priority' width='30' textAlign='Right' clipMode='EllipsisWithTooltip' />
          <ColumnDirective field='duration' headerText='Duration' width='30' textAlign='Right' />
        </ColumnsDirective>
    </TreeGridComponent>
};
export default App;

By default, columns.clipMode is Ellipsis.

TreeGrid lines

The gridLines property controls cell borders.

The available modes are:

Modes	Actions
Both	Displays both horizontal and vertical grid lines.
None	Displays no grid lines.
Horizontal	Displays horizontal grid lines only.
Vertical	Displays vertical grid lines only.
Default	Displays grid lines based on the theme.

app.jsx
app.tsx
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='300' gridLines='Both'>
        <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='300' gridLines='Both'>
        <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;

By default, the TreeGrid renders in Default mode.
Refer to the React Tree Grid feature tour for key capabilities. Explore the React Tree Grid example to learn how to present and manipulate data.

Search docs

Ask HelpBot