Out of the box, the data-table is not styled. This gives you maximum flexibility.
There is a separate material theme distributed with data-table. In order to use it, you need to include that in your application themes/material.css
and add the CSS class material
to your data-table.
This is a simple way to apply the style of the demo.
@import '[email protected]/ngx-datatable/index.css';@import '[email protected]/ngx-datatable/themes/material.scss';@import '[email protected]/ngx-datatable/assets/icons.css';
You can just add above to your scss
file and then specify the class of your ngx-datatable to <ngx-datatable class="material">
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