Columns in React TreeGrid

19 Dec 202524 minutes to read

The column definitions act as the dataSource schema in the TreeGrid. They play a vital role in rendering column values in the desired format. TreeGrid operations such as sorting, filtering, and searching are performed based on the column definitions. The field property of the columns configuration is required to map data source values to TreeGrid columns.

1. If the column field is not present in the data source, the column displays empty values.
2. If the field name contains a dot (.), it is treated as complex binding.

The treeColumnIndex property denotes the column used to expand and collapse child rows.

Format

To format cell values based on culture, use the columns.format property. The TreeGrid uses the Internationalization library to format number and date values.

app.jsx

import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { orderData } from './datasource';
function App() {
    return <TreeGridComponent dataSource={orderData} treeColumnIndex={1} childMapping='subtasks' height='315'>
        <ColumnsDirective>
          <ColumnDirective field='orderID' headerText='Order ID' width='90' textAlign='Right'/>
          <ColumnDirective field='orderName' headerText='Order Name' width='180'/>
          <ColumnDirective field='unitPrice' headerText='Price Per Unit' width='90' format='c2' textAlign='Right' type='number'/>
        </ColumnsDirective>
    </TreeGridComponent>;
}
;
export default App;

app.tsx

import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { orderData } from './datasource';

function App() {
    return <TreeGridComponent dataSource={orderData} treeColumnIndex={1} childMapping='subtasks' height='315'>
        <ColumnsDirective>
          <ColumnDirective field='orderID' headerText='Order ID' width='90' textAlign='Right'/>
          <ColumnDirective field='orderName' headerText='Order Name' width='180'/>
          <ColumnDirective field='unitPrice' headerText='Price Per Unit' width='90' format='c2' textAlign='Right' type='number' />
        </ColumnsDirective>
    </TreeGridComponent>
};
export default App;

By default, number and date values are formatted using the en-US locale.

Number formatting

Use the following format strings for numeric and integer values.

Format	Description	Remarks
N	Numeric format	Append an integer to set precision (for example, N2, N3).
C	Currency format	Append an integer to set precision (for example, C2, C3).
P	Percentage format	Expects input from 0 to 1 (for example, 0.2 is shown as 20%). Append an integer to set precision (for example, P2, P3).

For more information, see Number formatting.

Date formatting

Date values can be formatted using built-in or custom format strings.

For built-in date formats, assign a string to the columns.format property (for example, yMd). For more information, see Date formatting.

Custom format examples:

Format	Formatted value
{ type:’date’, format:’dd/MM/yyyy’ }	04/07/1996
{ type:’date’, format:’dd.MM.yyyy’ }	04.07.1996
{ type:’date’, skeleton:’short’ }	7/4/96
{ type: ‘dateTime’, format: ‘dd/MM/yyyy hh:mm a’ }	04/07/1996 12:00 AM
{ type: ‘dateTime’, format: ‘MM/dd/yyyy hh:mm:ss a’ }	07/04/1996 12:00:00 AM

app.jsx

import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { orderData } from './datasource';
function App() {
    const formatOption = { type: 'date', format: 'dd/MM/yyyy' };
    return <TreeGridComponent dataSource={orderData} treeColumnIndex={1} childMapping='subtasks' height='315'>
        <ColumnsDirective>
          <ColumnDirective field='orderID' headerText='Order ID' width='90' textAlign='Right'/>
          <ColumnDirective field='orderName' headerText='Order Name' width='180'/>
          <ColumnDirective field='orderDate' headerText='Order Date' width='160' textAlign='Right' format={formatOption}/>
          <ColumnDirective field='price' headerText='Price' width='90' format='c2' textAlign='Right' type='number'/>
        </ColumnsDirective>
    </TreeGridComponent>;
}
;
export default App;

app.tsx

import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { orderData } from './datasource';

function App() {
    const formatOption: object = {type:'date', format:'dd/MM/yyyy'};
    return <TreeGridComponent dataSource={orderData} treeColumnIndex={1} childMapping='subtasks' height='315'>
        <ColumnsDirective>
          <ColumnDirective field='orderID' headerText='Order ID' width='90' textAlign='Right'/>
          <ColumnDirective field='orderName' headerText='Order Name' width='180'/>
          <ColumnDirective field='orderDate' headerText='Order Date' width='160' textAlign='Right' format={formatOption}/>
          <ColumnDirective field='price' headerText='Price' width='90' format='c2' textAlign='Right' type='number' />
        </ColumnsDirective>
    </TreeGridComponent>
};
export default App;

Lock Columns

Lock columns using the column.lockColumn property. Locked columns are moved to the first position and cannot be reordered.

In the following example, the Duration column is locked and its reordering is disabled.

app.jsx

import { ColumnDirective, ColumnsDirective, Inject, Reorder, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './custom.css';
import { sampleData } from './datasource';
function App() {
    const customAttributes = { class: 'customcss' };
    return <TreeGridComponent dataSource={sampleData} allowReordering={true} allowSelection={false} treeColumnIndex={1} childMapping='subtasks' height='315'>
    <Inject services={[Reorder]}/>
        <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='110' format='yMd' textAlign='Right' type='date'/>
          <ColumnDirective field='duration' headerText='Duration' width='110' lockColumn={true} textAlign='Right' customAttributes={customAttributes}/>
          <ColumnDirective field='progress' headerText='Progress' width='180'/>
        </ColumnsDirective>
    </TreeGridComponent>;
}
;
export default App;

app.tsx

import { ColumnDirective, ColumnsDirective, Inject, Reorder, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';

function App() {
    const customAttributes: any = {class: 'customcss'};
    return <TreeGridComponent dataSource={sampleData} allowReordering={true} allowSelection={false}
    treeColumnIndex={1} childMapping='subtasks' height='315'>
    <Inject services={[Reorder]}/>
        <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='110' format='yMd' textAlign='Right' type='date' />
          <ColumnDirective field='duration' headerText='Duration' width='110' lockColumn= {true} textAlign='Right' customAttributes={customAttributes} />
          <ColumnDirective field='progress' headerText='Progress' width='180'/>
        </ColumnsDirective>
    </TreeGridComponent>
};
export default App;

Column Type

Specify the column data type using the columns.type property. This ensures appropriate formatting and behavior.

If a format is defined, the type helps select the correct formatting (for example, number or date).

TreeGrid columns support the following types:

• string
• number
• boolean
• date
• datetime

If the type is not set, it is inferred from the first record of the dataSource.

Checkbox Column

To render checkboxes in an existing column, set the columns.showCheckbox property to true.

Rows can be selected hierarchically using checkboxes by enabling the autoCheckHierarchy property. Selecting a parent record checkbox selects its child records.

app.jsx

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' autoCheckHierarchy={true}>
        <ColumnsDirective>
          <ColumnDirective field='taskID' headerText='Task ID' width='120' textAlign='Right'/>
          <ColumnDirective field='taskName' headerText='Task Name' width='180' showCheckbox={true}/>
          <ColumnDirective field='startDate' headerText='Start Date' width='150' format='yMd' textAlign='Right' type='date'/>
          <ColumnDirective field='duration' headerText='Duration' width='130' textAlign='Right'/>
        </ColumnsDirective>
    </TreeGridComponent>;
}
;
export default App;

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='315' autoCheckHierarchy={true}>
        <ColumnsDirective>
          <ColumnDirective field='taskID' headerText='Task ID' width='120' textAlign='Right'/>
          <ColumnDirective field='taskName' headerText='Task Name' width='180' showCheckbox={true}/>
          <ColumnDirective field='startDate' headerText='Start Date' width='150' format='yMd' textAlign='Right' type='date'/>
          <ColumnDirective field='duration' headerText='Duration' width='130' textAlign='Right'/>
        </ColumnsDirective>
    </TreeGridComponent>
};
export default App;

For hierarchical selection between records, enable the autoCheckHierarchy property.

Autofit columns

The autoFitColumns method resizes a column to fit the widest cell content without wrapping. You can autofit a specific column during initial rendering by invoking autoFitColumns method in the dataBound event.

To use autoFitColumns method, inject the Resize module into the TreeGrid.

app.jsx

import { ColumnDirective, ColumnsDirective, Inject, Resize, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
    let treegrid;
    const dataBound = () => {
        if (treegrid) {
            treegrid.autoFitColumns(['taskName']);
        }
    };
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='315' allowResizing={true} dataBound={dataBound} ref={g => treegrid = g}>
            <ColumnsDirective>
              <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
              <ColumnDirective field='taskName' headerText='Task Name' width='60'/>
              <ColumnDirective field='startDate' headerText='Start Date' width='120' format='yMd' textAlign='Right' type='date'/>
              <ColumnDirective field='duration' headerText='Duration' width='120' textAlign='Right'/>
              <ColumnDirective field='progress' headerText='Progress' width='120' textAlign='Right'/>
            </ColumnsDirective>
            <Inject services={[Resize]}/>
        </TreeGridComponent>;
}
;
export default App;

app.tsx

import { ColumnDirective, ColumnsDirective, Inject, Resize, TreeGrid, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';

function App() {

    let treegrid: TreeGridComponent | null;
    const dataBound = () =>{
        if (treegrid) {
            treegrid.autoFitColumns(['taskName']);
        }
    }
        return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
            height='315' allowResizing={true} dataBound= { dataBound }
            ref={g => treegrid = g}>
            <ColumnsDirective>
              <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
              <ColumnDirective field='taskName' headerText='Task Name' width='60'/>
              <ColumnDirective field='startDate' headerText='Start Date' width='120' format='yMd' textAlign='Right' type='date'/>
              <ColumnDirective field='duration' headerText='Duration' width='120' textAlign='Right'/>
              <ColumnDirective field='progress' headerText='Progress' width='120' textAlign='Right'/>
            </ColumnsDirective>
            <Inject services={[Resize]}/>
        </TreeGridComponent>
};
export default App;

To autofit all columns, invoke the autoFitColumns method without specifying a column name.

Controlling TreeGrid actions

Enable or disable TreeGrid actions for a specific column by setting the allowFiltering and allowSorting properties.

app.jsx

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

app.tsx

import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Filter, Inject, Sort } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';

function App() {
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
        allowSorting={true} allowFiltering={true} height='270'>
        <ColumnsDirective>
          <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right' allowSorting={false}/>
          <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
          <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' allowFiltering={false} />
          <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
        </ColumnsDirective>
        <Inject services={[Filter,Sort]}/>
    </TreeGridComponent>
};
export default App;

Show/Hide Columns by External Button

Show or hide TreeGrid columns dynamically using external buttons by invoking the showColumns or hideColumns methods.

app.jsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Inject, Page } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
    let treegrid;
    const show = () => {
        if (treegrid) {
            treegrid.showColumns(['Task ID', 'Duration']); // show by HeaderText
        }
    };
    const hide = () => {
        if (treegrid) {
            treegrid.hideColumns(['Task ID', 'Duration']); // hide by HeaderText
        }
    };
    return (<div>
    <ButtonComponent cssClass='e-flat' onClick={show}>Show</ButtonComponent>
    <ButtonComponent cssClass='e-flat' onClick={hide}>Hide</ButtonComponent><TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='270' ref={g => treegrid = g}>
        <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>
        <Inject services={[Page]}/>
    </TreeGridComponent>
    </div>);
}
;
export default App;

app.tsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ColumnDirective, ColumnsDirective, TreeGridComponent  } from '@syncfusion/ej2-react-treegrid';
import { Inject, Page, TreeGrid } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';

function App() {
    let treegrid: TreeGridComponent | null;
    const show = () => {
        if (treegrid) {
            treegrid.showColumns(['Task ID', 'Duration']); // show by HeaderText
        }
    }

    const hide = () => {
        if (treegrid) {
            treegrid.hideColumns(['Task ID', 'Duration']); // hide by HeaderText
        }
    }

    return (<div>
    <ButtonComponent cssClass= 'e-flat' onClick= { show }>Show</ButtonComponent>
    <ButtonComponent cssClass= 'e-flat' onClick= { hide }>Hide</ButtonComponent><TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='270' ref={g => treegrid = g}>
        <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>
        <Inject services={[Page]}/>
    </TreeGridComponent>
    </div>)
};
export default App;

ValueAccessor

The valueAccessor is used to access or manipulate display values. Use it to implement custom value formatting.

app.jsx

import { getValue } from '@syncfusion/ej2-base';
import { ColumnDirective, ColumnsDirective, Inject, Page, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { orderData } from './datasource';
function App() {
    const currencyFormatter = (field, data, column) => {
        return '€' + getValue('price', data);
    };
    const orderFormatter = (field, data, column) => {
        return data[field] + '-' + getValue('Category', data);
    };
    return <TreeGridComponent dataSource={orderData} treeColumnIndex={1} childMapping='subtasks' height='315'>
        <ColumnsDirective>
            <ColumnDirective field='orderID' headerText='Order ID' width='90' textAlign='Right'/>
            <ColumnDirective field='orderName' headerText='Order Name' width='210' valueAccessor={orderFormatter}/>
            <ColumnDirective field='orderDate' headerText='Order Date' width='110' format='yMd' textAlign='Right' type='date'/>
            <ColumnDirective field='price' headerText='Price' width='80' valueAccessor={currencyFormatter} textAlign='Right' type='number'/>
        </ColumnsDirective>
        <Inject services={[Page]}/>
    </TreeGridComponent>;
}
;
export default App;

app.tsx

import { getValue } from '@syncfusion/ej2-base';
import { ColumnDirective, ColumnsDirective, Inject, Page, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { orderData } from './datasource';

function App() {
    const currencyFormatter = (field: string, data: object, column: object) => {
        return '€' + getValue('price', data);
    }

    const orderFormatter = (field: string, data: object, column: object) => {
        return data[field] + '-' + getValue('Category', data);
    }

    return <TreeGridComponent dataSource={orderData} treeColumnIndex={1} childMapping='subtasks' height='315'>
        <ColumnsDirective>
            <ColumnDirective field='orderID' headerText='Order ID' width='90' textAlign='Right'/>
            <ColumnDirective field='orderName' headerText='Order Name' width='210' valueAccessor={orderFormatter}/>
            <ColumnDirective field='orderDate' headerText='Order Date' width='110' format='yMd' textAlign='Right' type='date' />
            <ColumnDirective field='price' headerText='Price' width='80' valueAccessor={currencyFormatter} textAlign='Right' type='number' />
        </ColumnsDirective>
        <Inject services={[Page]}/>
    </TreeGridComponent>
};
export default App;

Display Array type Columns

Bind an array of objects to a column using the valueAccessor property. In the following example, the name field contains two objects, FirstName and LastName. These values are joined and displayed via valueAccessor.

app.jsx

import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { stringData } from './datasource';
function App() {
    const orderFormatter = (field, data, column) => {
        return data[field].map((s) => {
            return s.lastName || s.firstName;
        }).join(' ');
    };
    return <TreeGridComponent dataSource={stringData} treeColumnIndex={1} childMapping='subtasks' height='315'>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='110' textAlign='Right'/>
            <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
            <ColumnDirective field='name' headerText='Assignee' width='150' textAlign='Left' valueAccessor={orderFormatter}/>
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
        </ColumnsDirective>
    </TreeGridComponent>;
}
;
export default App;

app.tsx

import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { stringData } from './datasource';

function App() {
    const orderFormatter = (field: string, data: object, column: object): string => {
        return data[field].map((s: {lastName: string, firstName: string}): string => {
            return s.lastName || s.firstName }).join(' ');
    }

    return <TreeGridComponent dataSource={stringData} treeColumnIndex={1} childMapping='subtasks' height='315'>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='110' textAlign='Right'/>
            <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
            <ColumnDirective field='name' headerText='Assignee' width='150' textAlign='Left'
            valueAccessor={orderFormatter} />
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
        </ColumnsDirective>
    </TreeGridComponent>
};
export default App;

Expression Column

An expression column can be achieved using the valueAccessor property.

app.jsx

import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { orderData } from './datasource';
function App() {
    const totalPrice = (field, data, column) => {
        return data.units * data.unitPrice;
    };
    return <TreeGridComponent dataSource={orderData} treeColumnIndex={1} childMapping='subtasks' height='315'>
        <ColumnsDirective>
            <ColumnDirective field='orderID' headerText='Order ID' width='110' textAlign='Right'/>
            <ColumnDirective field='orderName' headerText='Order Name' width='210' textAlign='Left'/>
            <ColumnDirective field='units' headerText='Units' width='120' textAlign='Right'/>
            <ColumnDirective field='unitPrice' headerText='Unit Price' width='120' textAlign='Right' format='c2' type='number'/>
            <ColumnDirective field='price' headerText='Total Price' width='120' textAlign='Right' format='c2' type='number' valueAccessor={totalPrice}/>
        </ColumnsDirective>
    </TreeGridComponent>;
}
;
export default App;

app.tsx

import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { orderData } from './datasource';

function App() {
    const totalPrice = (field: string, data: { units: number, unitPrice: number }, column: object): number => {
        return data.units * data.unitPrice;
    };

    return <TreeGridComponent dataSource={orderData} treeColumnIndex={1} childMapping='subtasks' height='315'>
        <ColumnsDirective>
            <ColumnDirective field='orderID' headerText='Order ID' width='110' textAlign='Right'/>
            <ColumnDirective field='orderName' headerText='Order Name' width='210' textAlign='Left'/>
            <ColumnDirective field='units' headerText='Units' width='120' textAlign='Right'/>
            <ColumnDirective field='unitPrice' headerText='Unit Price' width='120' textAlign='Right'
            format='c2' type='number'/>
            <ColumnDirective field='price' headerText='Total Price' width='120' textAlign='Right'
            format='c2' type='number' valueAccessor= {totalPrice}/>
        </ColumnsDirective>
    </TreeGridComponent>
};
export default App;

Render boolean value as checkbox

To render boolean values as checkboxes in columns, set the displayAsCheckBox property to true.

app.jsx

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='approved' headerText='Approved' width='90' format='yMd' textAlign='Right' displayAsCheckBox={true}/>
          <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
        </ColumnsDirective>
    </TreeGridComponent>;
}
;
export default App;

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='315'>
        <ColumnsDirective>
          <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
          <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
          <ColumnDirective field='approved' headerText='Approved' width='90' format='yMd' textAlign='Right' displayAsCheckBox={true} />
          <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
        </ColumnsDirective>
    </TreeGridComponent>
};
export default App;

Responsive columns

The Syncfusion React TreeGrid provides a built-in feature to toggle column visibility based on media queries using the hideAtMedia property of the column object. The hideAtMedia property accepts valid media queries.

app.jsx

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' hideAtMedia='(min-width:700px)'/>  
          // column hides when browser screen width lessthan 700px;
          <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
          <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' hideAtMedia='(max-width:500px)'/>
          // column shows when browser screen width lessthan or equalto 500px;
          <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
        </ColumnsDirective>
    </TreeGridComponent>;
}
;
export default App;

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='315'>
        <ColumnsDirective>
          <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right' hideAtMedia='(min-width:700px)'/>  
          // column hides when browser screen width lessthan 700px;
          <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
          <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd'
            textAlign='Right' type='date' hideAtMedia = '(max-width:500px)'/>
          // column shows when browser screen width lessthan or equalto 500px;
          <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
        </ColumnsDirective>
    </TreeGridComponent>
};
export default App;

Refer to our React TreeGrid feature tour page for its groundbreaking feature representations. Explore our React TreeGrid example to knows how to present and manipulate data.