[英]Kendo-react-ui TreeList how to customize cells on the different levels of hierarhy?
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??是否有可能以另一种方式自定义单元格?
There answer that helps me is TreeList prop rowRender .有帮助我的答案是 TreeList 道具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 .
可以使用 React.cloneElement 覆盖当前行并添加一些额外的道具,如style 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.