Panel Tree

Demo

loading

Key Points

Disable Selection for Expandable Rows

Configure the disabled function in row-active to disable selection when a row has children.

Remove Hover Style for Expandable Rows

1. Configure row-class-name to add the panel-header-row class name when a row has children.
2. Configure panel-header-row -> --tr-hover-bgc: var(--th-bgc); to maintain consistency with the header background color.

Remove '--' for Expandable Rows

Configure empty-cell-text to return an empty string when a row has children.

Text Overflow for Expandable Rows

Add white-space: nowrap to the cells of expandable rows to prevent text wrapping.

:deep(.panel-title > div) {
    white-space: nowrap;
    overflow: initial;
}