Search code examples
angularngx-datatable

addign additional columns in ngx-datatables

I'm using Angular 6 and using ngx-datatable to add datatable in my application.

In the template file, I am using following code to display datatable

<ngx-datatable
  [columns]="columns"
  [columnMode]="'force'"
  [headerHeight]="40"
  [footerHeight]="50"
  [rowHeight]="'auto'"
  [limit]="10"
  [rows]='rows'>

  <ngx-datatable-column name="Actions" prop="action">
    <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row">
      <button type="button" class="btn btn-outline-success">Success</button>
    </ng-template>
  </ngx-datatable-column>

</ngx-datatable>

and the columns array is like

columns = [
{
  prop: 'subsidiary.title',
  name: 'Subsidiary',
  sortable: true
},
{
  prop: 'app_name',
  name: 'App Name',
  sortable: true
},
{
  prop: 'app_url',
  name: 'App Url',
  sortable: true
},
{
  prop: 'db_host',
  name: 'Host',
  sortable: true
},
{
  prop: 'created',
  name: 'Created',
  sortable: true
},
{
  prop: 'action',
  name: 'Actions',
  sortable: false
}
];

But this is showing only one column

enter image description here

Removing <ngx-datatable-column> is working fine but there is no Action column.

enter image description here

How can I add Action column or additional columns in the datatable?

Solution

  • If you specify one ngx-datatable-column, you will have to specify them all. That is why everything works fine in case of no explicit column.

    It should work fine if you add the other columns explicitly - no need to add the template:

    <ngx-datatable-column name="Property 2" prop="prop2"></ngx-datatable-column>

    ... etc.