p-splitter does not work with p-treeTable

[btiller123]

When I include p-treeTable inside p-splitter I cannot drag my horizontal bar up/down. Without p-treeTable it works fine. This non-draggable issue also occurs when I use ng-tempate with pTemplate="body" inside p-splitter. Please provide an example showing how to make p-splitter work with both. I've provided code snippets below.

<p-splitter
[style]= pSplitterStyle
styleClass="mb-5"
layout="vertical">

<p-treeTable
#treeTable
[value]="filteredNodes"
[columns]="cols"
selectionMode="checkbox"
[(selectionKeys)]="selectedKeys"
dataKey="id"
(sortFunction)="customColumnSort($event)"
[customSort]="true"
[styleClass]= "treeTableStyle"
scrollHeight="300px"
[scrollable]="true"
[tableStyle]="{ 'min-width': '50rem' }" >



<td *ngFor="let col of columns; let i = index; let last = last"
[ngClass]="rowData['isRead'] === true ? 'row-is-read': 'row-is-not-read'"
[style.width]="col.width"
(click)="onSelectRow(rowNode)">
@if(rowData['isArchived'] === false) {
<p-treeTableToggler
[rowNode]="rowNode"
*ngIf="i === 0" />
@if(isActiveCheckboxes) {
<p-treeTableCheckbox
[value]="rowNode"
*ngIf="i === 0"/>

[qwadrox]

@btiller123 Hi. I assumed you were using p-splitter with layout="vertical" because you mentioned the horizontal separator (gutter) was not draggable. From the code snippet you provided, it seems that you're using the templating incorrectly. Both Angular's control flow and PrimeNg's component templating.

The Splitter component requires two pTemplate to work.
I created an example in which the gutter is draggable: https://stackblitz.com/edit/kgff9y?file=src%2Fapp%2Ftree-table-basic-demo.html

https://gyazo.com/71ef402605715418e72b97ddb3b1c39b

I hope I understood you correctly and this helps.