Issue with the datatable component #10296

2 Answer(s)

• 

  0

  fahrigedik created 8 months ago

  Support Team Angular Expert

  Hi @MartinD

  Thank you for your feedback regarding row details functionality in data tables.

  Option 1: Using ngx-datatable Directly

  Since ABP uses ngx-datatable under the hood, you can use its row-detail feature directly by replacing <abp-extensible-table> with <ngx-datatable>:

  import { NgxDatatableModule } from '@swimlane/ngx-datatable';
  
  @Component({
    imports: [NgxDatatableModule],
    template: `
      <ngx-datatable #table [rows]="data.items" [count]="data.totalCount" [list]="list">
        <ngx-datatable-row-detail [rowHeight]="'100%'">
          <ng-template let-row="row" ngx-datatable-row-detail-template>
            <div class="p-3">{{ row.name }} - Details here</div>
          </ng-template>
        </ngx-datatable-row-detail>
        
        <!-- Expand/Collapse Column -->
        <ngx-datatable-column [width]="50" [sortable]="false">
          <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
            <a href="javascript:void(0)" (click)="table.rowDetail.toggleExpandRow(row)">
              <i class="fa" [class.fa-chevron-down]="!expanded" [class.fa-chevron-up]="expanded"></i>
            </a>
          </ng-template>
        </ngx-datatable-column>
        
        <!-- Your other columns -->
      </ngx-datatable>
    `
  })
  export class MyComponent { }
  

  📚 ngx-datatable Documentation: https://swimlane.gitbook.io/ngx-datatable/api/row-detail

  Option 2: Using <abp-extensible-table-row-detail> (New Feature)

  We have implemented row-detail support directly in <abp-extensible-table> You can now use the new child component:

  <abp-extensible-table [data]="data.items" [list]="list">
    <abp-extensible-table-row-detail>
      <ng-template let-row="row">
        <div class="p-3">{{ row.name }} - Details here</div>
      </ng-template>
    </abp-extensible-table-row-detail>
  </abp-extensible-table>
  

  This approach preserves ABP's extensibility features (entity props, actions, etc.) while adding row-detail functionality.

  📌 Track this feature: https://github.com/abpframework/abp/issues/24635

  Best regards, ABP Team

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  MartinD created 8 months ago

  Thanks!

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel