web-dev-qa-db-fra.com

comment définir l'ajustement automatique des colonnes du tableau de données primeng?

J'ai voulu faire en sorte que les colonnes de la table de données ng soient ajustées automatiquement et qu'elles soient redimensionnables. J'ai donc résolu ce problème modifié dans deux classes css .ui-datatable table et .ui-datatable-tablewrapper.

htmlcssangularprimeng-datatable
5
Nitin Wahale

J'ai utilisé le code suivant. Modifié dans SCSS set table-layout: auto! Important; .html

<p-dataTable [value]="Dataset"  [style]="{'width':'100%','overflow':'auto!important'}" 
      [responsive]="true"  [rows]="20" 
       [resizableColumns]="true" 
       columnResizeMode="expand" 
       [immutable]=false
       [paginator]="true" [rowsPerPageOptions]="[10,15,20,25]"
      appendTo="body" #dt>
      <p-column  styleClass="checkbox ui-resizable-column" [style]="{'width': 'auto'}" selectionMode="multiple">
      </p-column>  
      <p-column *ngFor="let col of cols;let j=index;" [style]="{'width':'auto','display':col.display} " [field]="col.field" [header]="col.header"
        [sortable]="true" [filter]="true" filterPlaceholder="Search" (mouseleave)="hoveredIndex=null" filterPlaceholder="Search"
        appendTo="body">
        <ng-template let-row="rowData" let-i="rowIndex" pTemplate="body">
          <div [pTooltip]="row[col.field]" [id]="col.field"></div>
             <!-- set String  -->
            <span (click)="test(dt)"  style="text-align:left;" *ngIf="col.datatype!='int' && col.datatype!='float'">
              {{row[col.field]}}
            </span>
             <!-- set int  -->
            <span  (click)="test(dt)"  style="text-align:top;float: top;padding-top: 4px !important;" *ngIf="col.datatype=='int' || col.datatype=='float' ">
              {{row[col.field]}}
            </span>
        </ng-template>
      </p-column>
    </p-dataTable>

.scss

@import "src/app/Themes/colorVariables";  //datatable ui
    //Updated row
    ::ng-deep .ui-datatable tbody > tr.ng-star-inserted.ui-widget-updated-row{
        background-color:$updated-row-color;
    } 
    ::ng-deep .ui-datatable tbody > tr>td.ui-widget-deleted-row-checkbox  .ui-chkbox{
        display: none;
        }
    //Deleted row
    ::ng-deep .ui-datatable tbody > tr.ng-star-inserted.ui-widget-deleted-row{
        background-color:$deleted-row-color;
    } 

    ::ng-deep  .ui-datatable table
    {
        table-layout:auto !important;
        overflow-y: scroll !important; 
    }
    ::ng-deep .ui-datatable-tablewrapper {
        overflow-y: scroll !important; 
        width: auto !important;
    }
    ::ng-deep .ui-datatable-resizable {
        padding-bottom: 1px;
        /* overflow: auto; */
        width: auto !important;
    }

    ::ng-deep .ui-datatable-scrollable-view .ui-datatable-scrollable-body {
       // min-height: 300px;
        border: 1px solid #D5D5D5;
    }

    ::ng-deep .ui-datatable tbody > tr.ui-widget-content.ui-state-highlight{
        background-color: darkkhaki !important; 
    }
    ::ng-deep a.ui-state-highlight , .ui-state-highlight{
        background-color: rgb(64, 153, 83);
        color: black;
    }
    .hoverAction:hover{
        background-color: seagreen;
        color: black;
    }
    ::ng-deep .ui-confirmdialog-message {
        white-space: pre-line;
    }
    ::ng-deep  .ui-datatable tr.ui-datatable-even:hover
    {  background: #78BCFF;
    }
    ::ng-deep .ui-datatable tbody > tr.ui-widget-content.ui-datatable-odd:hover {
        background: #78BCFF;
    }

    .ui-datatable .ui-datatable-thead>tr>th, .ui-datatable .ui-datatable-tfoot>tr>td, .ui-datatable .ui-datatable-data>tr>td {
        border-color: inherit;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: .25em .5em;
        border-width: 1px;
        flex: 2;
        //width:auto !important;
        min-height: 8px;
        min-width: auto !important;
        max-width: 300px !important;
        font-size: 12px;
        padding: 0px !important;
        padding-left: 4px !important;
        color: black;
        text-transform: capitalize;
        white-space: nowrap;
        overflow: hidden;
         display: table-cell;
        text-overflow: Ellipsis !important;
        Word-wrap: break-Word !important;
        /* font-size: 11px; */
        font-family: $default-font-family;
        border-width: 1px;
        border-style: solid;
    }
2
Nitin Wahale

Vous devez utiliser 2 propriétés [resizableColumns] = "true" [autoLayout] = "true" comme défini ci-dessous dans le <p-table> tag

<p-table [resizableColumns]="true" [autoLayout]="true">

Pourquoi cela se produit-il? Si vous l'inspectez, primeng ajouterait par défaut le code suivant du fichier primeng.min.css

.ui-table table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}

Vous devez modifier la propriété de mise en page du tableau, pour cela, vous devez utiliser [autoLayout] = "true". Il existe également une autre manière de remplacer cela en utilisant: Host mais je ne le recommanderais pas car la mise en page automatique est déjà disponible.

Pour redimensionnement, vous devez utiliser [resizableColumns] = "true" dans la balise

Pour défilement, vous devez utiliser [scrollable] = "true" scrollHeight = "300px" dans la balise

0
PulkitRajput