Ngx-datatabel responsive row details with flex mode

Question

I have a problem with my ngx datatable row details. Everything seems to work fine and all columns and rows are very responsive. When I open the row details, they show up fine. However if I change the width of my browers, the details wont scale with the rows and columns. It has an initial fixed width, based on the first time the page is loaded. I can't seem to change it. Any suggestions?

 <ngx-datatable
    #myTable
    class="material"
    [columnMode]="'flex'"
    [headerHeight]="50"
    [footerHeight]="50"
    [rowHeight]="'auto'"
    [rows]="details">
    <ngx-datatable-row-detail [rowHeight]="100" #myDetailRow (toggle)="onDetailToggle($event)" flex>
      <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template >
        <div style="padding-left:35px;">
          <div><strong>Address Address Address Address Address AddressAddressAddress Address Address Address Address Address</strong></div>
        </div>
      </ng-template>
    </ngx-datatable-row-detail>
    <ngx-datatable-column name="Name" [flexGrow]="1">
      <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
          <a
          [class.datatable-icon-right]="!expanded"
          [class.datatable-icon-down]="expanded"
          title="Expand/Collapse Row"
          (click)="toggleExpandRow(row)">aaa
        </a>
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="Name" [flexGrow]="1">
      <ng-template let-row="row" ngx-datatable-cell-template>
        testing 3
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="Gender" [flexGrow]="5">
      <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
        testing
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="Age" [flexGrow]="5">
      <ng-template let-row="row" ngx-datatable-cell-template>
        testingsecond
      </ng-template>
    </ngx-datatable-column>
  </ngx-datatable>

score 4 · Accepted Answer · answered Jul 17 '18 at 11:57

4

:host ::ng-deep .ngx-datatable .datatable-body .datatable-scroll {
  display: inherit;
}

works in this case

answered Jul 17 '18 at 11:57

Dev Db

740
4
10
30

Works in my case too. Thanks @Dev Db – Leandro Hernández Mira Sep 25 '19 at 01:55

score 0 · Answer 2 · answered Aug 24 '22 at 05:49

in .ts file

import { ColumnMode } from '@swimlane/ngx-datatable';
ColumnMode = ColumnMode; (property)

in .html file

<ngx-datatable [rows]="(courses$ | async).items" [count]="(courses$ | async).totalCount"
    [loadingIndicator]="loading" [list]="list" [sorts]="[{ prop: 'creationTime', dir: 'desc' }]"
    [columnMode]="ColumnMode.flex"
    [messages]="{emptyMessage: '::DisplayName:NoDataAvailable' | abpLocalization, totalMessage: '::DisplayName:Total' | abpLocalization}"
    default>
    <ngx-datatable-column [flexGrow]="3" [name]="'::DisplayName:Name' | abpLocalization" prop="name">
    </ngx-datatable-column>
    <ngx-datatable-column [flexGrow]="1" [name]="'::Courses:Type' | abpLocalization" prop="type">
        <ng-template let-data="row" ngx-datatable-cell-template>
            {{'::DisplayName:' + courseType[data.type] | abpLocalization}}
        </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column [flexGrow]="1" [name]="'::DisplayName:Status' | abpLocalization" prop="status">
        <ng-template let-data="row" ngx-datatable-cell-template>
            {{'::DisplayName:' + coursePublishStatus[data.status] | abpLocalization}}
        </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column [flexGrow]="1" [name]="'::DisplayName:CreatedOn' | abpLocalization" prop="creationTime">
        <ng-template let-data="row" ngx-datatable-cell-template>
            <div [ngbTooltip]="data.creationTime | date: 'medium'" placement="top-start" container="body">
                {{data.creationTime | amTimeAgo }}</div>
        </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column [flexGrow]="1" [sortable]="false" [name]="'::DisplayName:Actions' | abpLocalization">
        <ng-template let-column="column" ngx-datatable-header-template>
            {{column.name}}
        </ngx-datatable-column>
    </ngx-datatable>

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Aug 28 '22 at 05:08

Ngx-datatabel responsive row details with flex mode

2 Answers2