• Ivy Seo

ngx-datatable style / css class

To style ngx-datatable,

you want to edit in 'datatable.component.scss' file, instead of 'yourfile.component.css'


I've been struggling to apply striped style (highlight every other row) to ngx-datatable like this:



'nth-child(even)' did not work.

The simple solution was using 'datatable-row-even' keyword:

 .datatable-row-even{background-color: #bb965d !important; color: black;} 

CSS Classes in ngx-datatable:

  • ngx-datatable: Master Table class

  • fixed-header: The header is fixed on the table

  • datatable-header: Header row class

  • datatable-header-cell: Header cell class

  • resizeable: Cell resizeable class

  • sortable: Cell drag/drop sortable class

  • longpress: Cell long-press activated

  • dragging: Cell dragging activated

  • sort-active: Sort active on column

  • sort-asc: Sort active on column with ascending applied

  • sort-desc: Sort active on column with descending applied

  • datatable-header-cell-label: Header cell text label

  • draggable: Header cell draggable class

  • datatable-body-row: Body row class

  • datatable-row-even: Odd row class

  • datatable-row-odd: Even row class

  • datatable-body-cell: Body cell class

  • sort-active: Sort active on column

  • sort-asc: Sort active on column with ascending applied

  • sort-desc: Sort active on column with descending applied