Я пытаюсь создать древовидную таблицу, используя плагин реагирования 'cp-Reaction-tree-table'.Я был в состоянии сделать таблицу отлично.Но плагин не предоставляет возможность показывать индикативные стрелки (элемент развернут / свернут)
Вот пример исходного плагина: https://jsfiddle.net/constantin_p/wzjgspe9/
renderIndexColumn = (data, metadata, toggleChildren) => {
return (
<div style={{ paddingLeft: (metadata.depth * 25) + 'px'}} className="cell-wrapper">
<span className="toggle-button-wrapper" style={{ width: '80px'}}>
{(metadata.hasChildren)
? (
<span onClick={toggleChildren}>[toggle]</span>
)
: ''
}
</span>
<span>{data.name}</span>
</div>
);
}
Я изменил его, чтобы показать индикативныйстрелы.
Но теперь возникают проблемы с переключением стрелок на основе узла, развернутого или свернутого.
Вот модифицированный код: https://jsfiddle.net/5yvgbrtk/
renderIndexColumn = (data, metadata, toggleChildren) => {
return (
<div style={{ paddingLeft: (metadata.depth * 25) + 'px'}} className="cell-wrapper">
<span className="toggle-button-wrapper" style={{ width: '80px'}}>
{(metadata.hasChildren)
? (
<span onClick={(event) => {toggleChildren(); this.arrowChange(event)}}>
<i className="material-icons">arrow_right</i>
</span>
)
: ''
}
</span>
<span>{data.name}</span>
</div>
);
}
arrowChange = (event) => {
event.target.classList.toggle('expanded')
};
ТекущийРешение работает только тогда, когда каждый открытый узел закрыт (значки переключаются при нажатии).Это создает проблему, когда внешний узел закрывается без закрытия внутренних узлов.
Есть ли способ, которым мы могли бы определить, будут ли отображаться / скрываться дочерние узлы, основываясь на том, что я могу изменить значки стрелок.
Я знаю, что вопрос очень специфичен для плагина и не очень общий.Но любая помощь будет высоко ценится.Спасибо