web-dev-qa-db-fra.com

dimensionnement automatique de la colonne turbotable avec défilement

J'utilise turbo table et je souhaite ce qui suit:

  • Toutes les colonnes sont automatiquement dimensionnées en fonction du contenu.
  • Demandez à la table elle-même de remplir l'écran horizontalement, par exemple, ne spécifiez pas manuellement la largeur
  • Faites défiler le tableau horizontalement lorsque les colonnes de taille automatique nécessitent plus d'espace que la largeur de table ne peut en fournir, sans avoir à spécifier manuellement la largeur des colonnes et lors de l'ajout de nouvelles colonnes avec basculement de colonnes.

de l'exemple turbotable que j'ai eu:

<p-table [columns]="cols" [value]="cars" [scrollable]="true" scrollHeight="200px" 
[style]="{'width':'100%'}">
    <ng-template pTemplate="colgroup" let-columns>
        <colgroup>
            <col *ngFor="let col of columns" style="width:250px">
        </colgroup>
    </ng-template>
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let col of columns">
                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

mais je ne veux pas utiliser le 

<col *ngFor="let col of columns" style="width:250px">

voici un plnkr

angularprimengprimeng-turbotable
3
Noa

Utilisez ce code dans votre fichier .html

<p-table [style]="{'overflow':'auto!important'}"
[columns]="cols"  [value]="Dataset"
[resizableColumns]="true" columnResizeMode="expand" 
[responsive]="true"  [rows]="20"
   [immutable]=false
   [paginator]="true" [rowsPerPageOptions]="[10,15,20,25]">
   <ng-template pTemplate="header" let-columns>
    <tr>
        <th *ngFor="let col of columns" [pSortableColumn]="col.field" pResizableColumn >
            {{col.header}}
            <p-sortIcon [field]="col.field"></p-sortIcon>
        </th>
    </tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr>
        <td *ngFor="let col of columns" class="ui-resizable-column">
            {{rowData[col.field]}}
        </td>
    </tr>
</ng-template>
</p-table>

et ajouter ce code css bor auto fit et revendeur les colonnes.

//table ui
::ng-deep  .ui-table table, .ui-table table
{  table-layout:auto !important;
}
::ng-deep .ui-table-tablewrapper {
    width: auto!important;
}

::ng-deep .ui-table-resizable {
    padding-bottom: 1px;
    /* overflow: auto; */
    width: auto !important;
}
.ui-table .ui-table-tbody > tr, .ui-table .ui-table-thead > tr > th, .ui-table .ui-table-tfoot > tr > td{
    max-width: 300px !important;
    font-size: 12px;
    padding: 0px !important;
    padding-left: 4px !important;
    color: black;
    text-transform: capitalize;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: Ellipsis !important;
    border-width: 1px;
}
4
Nitin Wahale

Pour des raisons de performances, la disposition par défaut des tableaux est fixe, ce qui signifie que la largeur des cellules ne dépend pas de leur contenu. Si vous souhaitez que les cellules évoluent en fonction de leur contenu, définissez la propriété autoLayout sur true.

<p-table [columns]="cols" [value]="cars" [scrollable]="true" 
       scrollHeight="200px" [autoLayout]="true">
 </p-table>
2
Abhijit Muke

PrimeNG p-table ne prend pas en charge l’ajustement automatique avec le défilement (voir ici )

J'ai réussi à faire en sorte que le défilement, la réorganisation des colonnes, le redimensionnement des colonnes ET l'ajustement automatique fonctionnent ensemble en se branchant à la fonction d'état de la table p.

<p-table
    *ngIf="!loading"
    [columns]="selectedColumns"
    [value]="listRows"
    [(selection)]="selectedRows"
    [rows]="pageSize"
    [totalRecords]="rowCount"
    (sortFunction)="sort($event)"
    [customSort]="true"
    [responsive]="true"
    [scrollable]="true"
    scrollHeight="550px"
    [columnResizeMode]="'expand'"
    [reorderableColumns]="true"
    [resizableColumns]="true"
    stateStorage="local"
    [stateKey]="tableStateKey"
>

Ensuite, avant que ma table ne soit initialisée pour la première fois, je vérifie si l’état existe ou non. S'il n'existe pas, je calcule la plus grande largeur de texte pour toutes mes colonnes et toutes mes lignes et l'enregistre dans le magasin d'état de la table à l'aide de cette fonction.

@ViewChild("myCanvas") myCanvas: ElementRef;
.
.
.
getTextLength(text: string) {
const ctx = this.myCanvas.nativeElement.getContext("2d");
ctx.font =
'14px "Univers Next W01 Light", Helvetica, Arial, sans-serif';
return Math.round(ctx.measureText(text).width);
}

Voici la fonction qui itère sur toutes les données

setInitialColumnWidths(columns: any[], rows: any[]) {
    // Attempt to guess initial column width if we don't have any stored yet
    let tableState = JSON.parse(localStorage.getItem(this.tableStateKey));
    if (!tableState) {
        tableState = {};
        // Add some width for the selection checkbox column
        const colWidths = [47];
        const colOrder = [];
        this.cols.forEach(col => {
            let maxStringLength = this.getTextLength(col.header);
            maxStringLength = maxStringLength < 100 ? 100 : maxStringLength;
            rows.forEach(row => {
                if (
                    col.field &&
                    row[col.field] &&
                    this.getTextLength(row[col.field]) > maxStringLength
                ) {
                    maxStringLength = this.getTextLength(row[col.field]);
                }
            });
            // Add some extra pixels for padding etc.
            colWidths.Push(maxStringLength + 50);
            colOrder.Push(col.field);
        });
        // The PrimeNG table component state requires the column order to be specified as well
        tableState["columnOrder"] = colOrder;
        tableState["columnWidths"] = colWidths.join(",");
        localStorage.setItem(
            this.tableStateKey,
            JSON.stringify(tableState)
        );
    }
}

Cela fonctionne mieux que ce que je pensais. Évidemment, il ne prend pas en charge les chaînes plus longues dans le reste des données des autres pages, mais il définit au moins un minimum de 100 px et une fois que l'utilisateur ajuste la largeur d'une colonne, les nouvelles largeurs sont stockées dans un stockage local.

0
Dan Payne