ngx-datatable - how to define 'cell class' for columns at runtime

shan picture shan · Jun 26, 2017 · Viewed 13.8k times · Source
<ngx-datatable
    id="ngxdatatable"
    class='material striped'
    [rows]="rows"
    [columns] ="columns"
>
</ngx-datatable>

I tried to bind columns, which columns are getting at run time using columns properties from class object. I want to style a specific column using cell class using css. How this can be achieved. Please help

Answer

dylan.droll picture dylan.droll · Jun 26, 2017

I would recommend looking at some of the source code for styling header and column cells as well as how to create column templates, such as:

https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/css.component.ts and https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/row-detail.component.ts

You can style the column headers by adding the [headerClass]="insertYourCssClassName" inside the column template tag like this:

<ngx-datatable-column
    name="ID"
    prop="id"
    [headerClass]="insertYourCssClassNameHere"
>

Same thing goes for styling the body cells, only with [cellClass] instead of [headerClass].