Cell in React Treegrid component

27 Jan 202312 minutes to read

Customize cell styles

The appearance of cells can be customized by using the queryCellInfo event. The queryCellInfo event triggers for every cell. In that event handler, you can get QueryCellInfoEventArgs that contains the 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

You can customize the treegrid cells by adding a CSS class to 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 below example, we have customized the cells of TaskID and StartDate columns.

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 './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;

TreeGrid lines

The gridLines have option to display cell border and it can be defined by the gridLines property.

The available modes of grid lines are:

Modes	Actions
Both	Displays both the horizontal and vertical grid lines.
None	No grid lines are displayed.
Horizontal	Displays the horizontal grid lines only.
Vertical	Displays the 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 with Default mode.
You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations. You can also explore our React Tree Grid example to knows how to present and manipulate data.