p-splitter & p-table with horizontal scroll

Question

I need split page vertically (e.g. 60%:40%) to the two areas and splitter must be draggable. So I chose PrimeNG p-splitter. Right area contains p-table with horizontal scrollbar (based on doc: https://www.primefaces.org/primeng/showcase/#/table/scroll part: "Horizontal and Vertical"):

<p-splitter [panelSizes]="[60,40]" [style]="{'height': '400px'}">
  <ng-template pTemplate>

    <p-table [value]="cars" [scrollable]="true" [style]="{width:'600px'}" scrollHeight="200px">
    ...
    </p-table>

  </ng-template>
  <ng-template pTemplate>
    Panel 2
  </ng-template>
</p-splitter>

Problem is that table width is bound to 600px and:

it is not possible to drag splitter to the right (table does not allow it)
when splitter is dragged to the left, table width stays 600px (so there is useless blank space between table and splitter).

Project on StackBlitz

https://stackblitz.com/edit/primeng-splitter-and-datatable

Complete code

<p-splitter [panelSizes]="[60,40]" [style]="{'height': '400px'}">
  <ng-template pTemplate>

    <p-table [value]="cars" [scrollable]="true" [style]="{width:'600px'}" scrollHeight="200px">

      <ng-template pTemplate="colgroup" let-columns>
        <colgroup>
          <col style="width:250px">
          <col style="width:250px">
          <col style="width:250px">
          <col style="width:250px">
        </colgroup>
      </ng-template>

      <ng-template pTemplate="header">
        <tr>
          <th>Vin</th>
          <th>Year</th>
          <th>Brand</th>
          <th>Color</th>
        </tr>
      </ng-template>

      <ng-template pTemplate="body" let-car>
        <tr>
          <td>{{car.vin}}</td>
          <td>{{car.year}}</td>
          <td>{{car.brand}}</td>
          <td>{{car.color}}</td>
        </tr>
      </ng-template>
    </p-table>

  </ng-template>
  <ng-template pTemplate>
    Panel 2
  </ng-template>
</p-splitter>

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  cars: any[] = [];

  ngOnInit(): void {
    this.cars = [
      {
        vin: 1001,
        year: '2021',
        brand: 'VW',
        color: 'red',
        country: 'Algeria'
      },
      {
        vin: 1002,
        year: '2021',
        brand: 'VW',
        color: 'red',
        country: 'Algeria'
      },
      {
        vin: 1003,
        year: '2021',
        brand: 'VW',
        color: 'red',
        country: 'Algeria'
      },
      {
        vin: 1004,
        year: '2021',
        brand: 'VW',
        color: 'red',
        country: 'Algeria'
      },
      {
        vin: 1005,
        year: '2021',
        brand: 'VW',
        color: 'red',
        country: 'Algeria'
      }
    ];
  }
}

If you recreate the problem in StackBlitz and add the link it's more likely someone will have a go at solving it — Drenai, Apr 10 '21 at 08:05
@Drenai Thank you for point. I've tried but got error "ngcc failed to run on primeng@11.3.2". Now I forked some other PrimeNG project there and updated original question within link to StackBlitz. — sasynkamil, Apr 10 '21 at 11:34
I had a look, but I don't really understand the question - what do you mean by `not able to fix both points` — Drenai, Apr 10 '21 at 23:14
@Drenai I added picture, and removed this unclear sentence you mentioned. Hopefully it is now more clear. Thx — sasynkamil, Apr 11 '21 at 10:29
@sasynkamil did you find a solution? I have the same problem.. — Gykonik, May 13 '21 at 20:52
For now (due to lack of time) I'm using AngularSplitModule https://angular-split.github.io/ which behaves as I need. Later on I again will check primeng splitter. — sasynkamil, May 15 '21 at 19:12

Singo548 · Answer 1 · 2021-05-28T10:49:43.037

I had the same problem and was able to find a workaround. It's not perfect, but works ok-ish for me for now.

You can give the table a max-width attribute and recalculate it when the Splitter Module emits the onResizeEnd Event. For me it looks something like this:

import { Component, ViewChild } from '@angular/core';
import { PrimeNGConfig } from 'primeng/api';
import { Splitter } from 'primeng/splitter';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  cars: any[] = [];

  @ViewChild('pSplitter') pSplitter: Splitter;
  public widthHelper = '300px';

  ngOnInit(): void {
    this.cars = [
      {
        vin: 1001,
        year: '2021',
        brand: 'VW',
        color: 'red',
        country: 'Algeria'
      },
      {
        vin: 1002,
        year: '2021',
        brand: 'VW',
        color: 'red',
        country: 'Algeria'
      },
      {
        vin: 1003,
        year: '2021',
        brand: 'VW',
        color: 'red',
        country: 'Algeria'
      },
      {
        vin: 1004,
        year: '2021',
        brand: 'VW',
        color: 'red',
        country: 'Algeria'
      },
      {
        vin: 1005,
        year: '2021',
        brand: 'VW',
        color: 'red',
        country: 'Algeria'
      }
    ];
  }

  public recalculateSlider(event) {
    this.widthHelper =  0.01 * this.pSplitter._panelSizes[0] /*percent of the panel width*/ * 600 * /*width of the panel component*/ - 4 /*width of the splitter*/+ 'px';
  }
}

<p-splitter #pSplitter [style]="{'height': '400px', 'width': '600px'}" [panelSizes]="[50,50]"
  (onResizeEnd)="recalculateSlider($event)">

  <ng-template pTemplate>
    <p-table [value]="cars" [scrollable]="true" [ngStyle]="{'max-width': widthHelper}" scrollHeight="400px">

      <ng-template pTemplate="colgroup" let-columns>
        <colgroup>
          <col style="width:250px">
          <col style="width:250px">
          <col style="width:250px">
          <col style="width:250px">
        </colgroup>
      </ng-template>

      <ng-template pTemplate="header">
        <tr>
          <th>Vin</th>
          <th>Year</th>
          <th>Brand</th>
          <th>Color</th>
        </tr>
      </ng-template>

      <ng-template pTemplate="body" let-car>
        <tr>
          <td>{{car.vin}}</td>
          <td>{{car.year}}</td>
          <td>{{car.brand}}</td>
          <td>{{car.color}}</td>
        </tr>
      </ng-template>
    </p-table>

  </ng-template>
  <ng-template pTemplate>
    Panel 2
  </ng-template>
</p-splitter>

The width of the table is only updated when you let go of the Splitter, but at least the functionality is there.

Here is a link to the project on StackBlitz https://stackblitz.com/edit/primeng-splitter-and-datatable-hq9qeo

p-splitter & p-table with horizontal scroll

1 Answers1