React TreeList - Customize Column Headers
The TreeList generates column headers based on the names of data fields by default. For example, if a data field is "fullName", the column header text is "Full Name".
Specify the columns.caption property to change the column header text.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import TreeList, {
- Column
- } from 'devextreme-react/tree-list';
- export default function App() {
- return (
- <TreeList ... >
- <Column dataField="CompanyName" caption="Company" />
- </TreeList>
- );
- }
If you need a more specific customization, define a custom template in the columns.headerCellTemplate property. This property accepts a function or template container.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import TreeList, {
- Column
- } from 'devextreme-react/tree-list';
- const renderTitleHeader = (data) => {
- return <p style={{ font-size: '16px' }}>{data.column.caption}</p>;
- }
- const renderAddressHeader = () => {
- return <i style={{ color: 'black' }}>Mailing Address</i>;
- }
- export default function App() {
- return (
- <TreeList ... >
- <Column
- dataField="Title"
- caption="Position"
- headerCellRender={renderTitleHeader}
- />
- <Column
- dataField="Address"
- headerCellRender={renderAddressHeader}
- />
- </TreeList>
- );
- }
To hide column headers, assign false to the showColumnHeaders property.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import TreeList from 'devextreme-react/tree-list';
- export default function App() {
- return (
- <TreeList ...
- showColumnHeaders={false}>
- </TreeList>
- );
- }
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.