Kendo-react-ui TreeList how to customize cells on the different levels of hierarhy?

Question

class TableCell extends React.Component {

  render() {
    const { dataItem, field } = this.props

    const cellData = this.getFieldValue(dataItem, field)

    const { participantType } = dataItem
    let styles = { position: 'relative' }

    switch (participantType) {
      case 'direct':
        styles = {
          fontSize: '14px',
        }
        break
      case 'indirect':
        styles = {
          fontSize: '14px',
          fontStyle: 'italic',
        }
        break
      case 'addressable':
        styles = {
          fontSize: '13px',
          fontStyle: 'italic',
        }
        break
    }

    return (
      <td style={styles}>
        <span>{cellData}</span>
      </td>
    )
  }
}

It's work with columns that didn't expandable. If i use with 'expandable' column it's restyling, but expand/collapse behaviour is overrited and arrow for expanding disappearing.

Is there possibilities to customize cells another way??

Answer 1

There answer that helps me is TreeList prop rowRender.

rowRender? (row: ReactElement<HTMLTableRowElement>, props: TreeListRowProps) => React.ReactNode

It helps me to styling all cells in a row according to data of a row. It's possible to override current row using React.cloneElement and add some additional props like style.

Answer 2

const rowRender = (row, props) => {

const backgroundColor = props.dataItem.type && 'red';

return React.cloneElement(row, {
  style: {
    backgroundColor
  }
});

}

code example for Alexander Malei answer