ScrollableTurboTable container problem

[ericpap]

Hi. I'm new at PrimeNG for Angular. I'm trying to use turbotable in scrollable mode with dinamy columns.
The problem is that if I set Scollable to true, and create the grid inside a div ui-g, the grid excede the card's DIV boundaries, wich looks horrible.
If i like in my example code create a div container with Overflow:auto, te grid respects the card limits, but i have to scroll all the way down to see and interact with the horizontabl scroolbar, wich is also annoying.
So the question is wich is the correct container for a scrollable TurboTable to scroll only the grid itself?

This is my HTML code:

Code: Select all

<div class="ui-fluid">
  <div class="card no-margin">
    <!-- Fila dos (grilla) -->
    <div class="ui-g">
      <div style="overflow:auto">
        <p-table [columns]="cols" [loading]="loading" [scrollable]="true" scrollHeight="auto" [value]="articulos" [(selection)]="selectedArts" dataKey="ID_Articulo">
          <ng-template pTemplate="colgroup" let-columns>
            <colgroup>
                <!-- <col *ngFor="let col of columns" [ngStyle]="{'width' : col.width, 'text-align' : col.align}"> -->
                <col Style="width:45px">
                <col *ngFor="let col of columns" [ngStyle]="{'width' : col.width, 'text-align' : col.align}">
                <!-- <col *ngFor="let col of columns" ng-Style="{'width' : col.width}"> -->
                <!-- <col *ngFor="let col of columns" [style.width]="width:300px">                -->
            </colgroup>
          </ng-template>
          <ng-template pTemplate="header" let-columns>
            <tr>
              <th>
                 <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
             </th>
              <th *ngFor="let col of columns">
                  {{col.header}}
              </th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-rowData let-columns="columns">
              <tr [pSelectableRow]="rowData">
                  <td>
                    <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
                  </td>
                  <td *ngFor="let col of columns">
                    <div [ngStyle]="{'text-align' : col.align}">
                      {{rowData[col.field]}}
                    </div>
                  </td>
              </tr>
          </ng-template>
        </p-table>
      </div>
    </div>
  </div>
</div>

And this is my Angular Code

Code: Select all

import { Component, OnInit } from '@angular/core';
import {SelectItem, MenuItem } from 'primeng/primeng';
import { ApiService } from '../../services/api.service'

@Component({
  selector: 'app-articulos',
  templateUrl: './articulos.component.html'
})
export class ArticulosComponent implements OnInit {

  selectedArts: any[];
  articulos: any[];

  cols: any[];

  constructor(private apiService: ApiService) { }

  ngOnInit() {    
    this.articulos = this.apiService.getArticulos();
    
    this.cols = [
        { field: 'ID_Articulo', header: 'ID', width:'100px', align:'center' },
        { field: 'Codigo', header: 'Código', width:'300px', align:'left' },
        { field: 'Descripcion', header: 'Descripción', width:'500px', align:'left' },
        { field: 'Grupo', header: 'Grupo (nivel 1)', width:'300px', align:'left' },
        { field: 'SubGrupo', header: 'Grupo (nivel 2)', width:'300px', align:'left' },
        { field: 'Venta', header: 'P. Venta', width:'200px', align:'left' },
        { field: 'PesoKG', header: 'Peso (Kg)', width:'200px', align:'left' },
        { field: 'StockActual', header: 'Stock', width:'200px', align:'left' },
        { field: 'Ubicacion', header: 'Ubicación', width:'300px', align:'left' }
    ];
  }
}

Thanks!