We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
A simple example:
- 2 sets of data, with a button to switch between them
- one cell rendered using a react component that just bolds the text
import {
ColumnDirective,
ColumnsDirective,
TreeGridComponent,
} from '@syncfusion/ej2-react-treegrid'
import React from 'react'
import * as ReactDOM from 'react-dom'
const datasets = [
[{ id: 'Norway' }, { id: 'Sweden' }],
[{ id: 'France' }, { id: 'Spain' }],
]
interface BoldProps {
id: string
}
const Bold = ({ id }: BoldProps): JSX.Element => {
return <b>{id}</b>
}
export const Test = (): JSX.Element => {
const [dataset, setDataset] = React.useState(0)
const data = datasets[dataset]
const updateData = (): void => {
setDataset((dataset + 1) % datasets.length)
}
const queryCellInfo = (args: any): void => {
if (args.column.field === 'component') {
ReactDOM.render(<Bold id={args.data.id} />, args.cell)
}
}
return (
<>
<button onClick={updateData}>Update Data</button>
<TreeGridComponent dataSource={data} queryCellInfo={queryCellInfo}>
<ColumnsDirective>
<ColumnDirective key={0} field={'id'} headerText={'Name'} />
<ColumnDirective
key={0}
field={'component'}
headerText={'Component'}
/>
</ColumnsDirective>
</TreeGridComponent>
</>
)
}
After initial render:
You can see that there are already 4 Bold components.
After clicking on Update Data to change the data:
The original 4 Bold componets are there, along with 2 new components (for France and Spain).
Clicking on Update Data again to switch back to the original data:
As you can see, for every render of cells in the component column, a new react component is added and never goes away! We have tables with hundreds of rows and multiple rendered cells, so this is a real problem.
