Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • Aug 12 14:29
    votdev commented #899
  • Aug 12 14:19
    votdev commented #899
  • Aug 12 10:15
    ashishtilara opened #1919
  • Aug 12 08:45
    anthonydagondon commented #1700
  • Aug 12 08:45
    anthonydagondon commented #1700
  • Aug 11 07:32
    codingnut commented #1266
  • Aug 11 07:27
    codingnut commented #1266
  • Aug 11 07:27
    codingnut commented #1266
  • Aug 11 07:26
    codingnut commented #923
  • Aug 11 07:17
    codingnut commented #1266
  • Aug 10 11:43
    hypery2k commented #1903
  • Aug 10 10:36
    hypery2k commented #1918
  • Aug 10 10:36
    hypery2k opened #1918
  • Aug 07 18:43
    dkreider commented #1913
  • Aug 07 18:39
    dkreider commented #1913
  • Aug 07 07:20
    idzeravianka commented #969
  • Aug 07 07:19
    idzeravianka commented #847
  • Aug 06 10:31
    Tuarisa commented #1917
  • Aug 06 10:30
    realdanmeng commented #1917
  • Aug 06 10:30
    realdanmeng commented #1917
Hi all. Does anyone have any workaround for selectAll action selecting rows even with disabled checkBoxes? It seems to be an existing bug that's even on the examples. Example: When we select all, the first row is also selected.
Syed Rasheed
hi all, NVDA Screen reader is not detecting ngx-datatable when i press shortcut "T" key and also when focus goes to table its not reading rows count and columns count, any suggestions to fix this?
Hello guys!
How are you doing?
Im trying to make the boostrap theme work in angular. Im being uncapable to do it
angular json styles : "node_modules/@swimlane/ngx-datatable/themes/bootstrap.scss"
app.component.scss : @import "../../node_modules/@swimlane/ngx-datatable/themes/bootstrap.scss";
Any ideas what it might be?
can we use multiple columns in groupRowsBy property like [groupRowsBy]="['col1', 'col2']" ??
Hi all! Anyone know this error ?
ERROR in node_modules/@swimlane/ngx-datatable/lib/components/body/body-cell.component.d.ts:8:9
error TS1086: An accessor cannot be declared in an ambient context.
set group(group: any);
get group(): any;
set rowHeight(val: number);
get rowHeight(): number;
Rohan Paul
Hi all, I am using ngx-datatable for the first time and for disabling hover on any specific row I am using css class as below
  .datatable-body-row:hover {
  border: 0px;

  .datatable-body-cell .table-checkbox {
    display: block;

  .datatable-body-cell {
    display: inline-block;

  .datatable-body-cell .row-icon {
    display: none;
just want to ask if there's a direct way from its api, to disable hover on row ?
Stefano E. Campanini

Hi I have a problem with the horizontal scrollbar. It disappears using a mobile device and the user cannot see other columns. Here some of my code:

        style="min-height: 30em; max-height: 30em;"
        [sorts]="[{ prop: 'totalEmail.tot', dir: 'desc' }]"
        <ngx-datatable-column name="Nome" prop="name" width="150" [frozenLeft]="true" [summaryFunc]="summName"></ngx-datatable-column>

here a part of the scss I'm using

$ngx-datatableHeight: 30em; 

:host ::ng-deep .datatable-body-cell {
    padding-top: 1px !important;
    border-bottom: 1px solid #cce5ff;

:host ::ng-deep .datatable-header .datatable-header-cell {
    padding-top: 2px !important;

:host ::ng-deep .ngx-datatable.material {
    height: $ngx-datatableHeight;

Any suggestions ? thx in advance.

Hi. anybody here to helpme out
santosh shresatha
I would like to know if anyone has customized tooltips.
ngx datatables not detected on NVDA on pressing 'T' key
how to solve this ? since these tables doesn't have table scematic elements
Mustapha Afkir
Hi guys, i have question. I have a table which i want to add an empty row on top of the data rows. This empty row is going to be column input fields where the user can fill in a search term that is used to get items based on this search term. Can someone point me to the right direction. Thanks
Allaa Khayat
Hey, is anyone getting the error 'An accessor cannot be declared in an ambient context.'
Hi all, I modified the style for the datatable-body-cell-label, which applies to the element holding the text inside a cell, to allow wrapping in print mode. As an unintended consequence, the cell with the wrapped text gets cut off when the page breaks. Please see for details -- any help would be immensely appreciated!
Hey Guys…Need some help… I’m looking to choose this library for my project needs… Most of the features in-house, seem to be matching what we need.. Can someone help me knowing, if this also supports server side row grouping… The target application expects none of search sort pagination and grouping(row) to be performed on the front end… What would you guys recommend?
Hi, I'm looking for some help with validation of inline editable ngx-datatable. Preferably with reactive forms. I have a complex component structure going something like this: page-component -> table-component -> editable-field-component. For the most part it seems to be working but it's failing with error: "this.form._updateTreeValidity is not a function". Which doesn't make too much sense to me. I was looking all around for some examples/demos for validation but couldn't find anything
@marjan-georgiev is anyone from swimlane monitoring this gitter at all? it doesn't seem that anyone is getting any help from you
Michael Sacco
Hi guys... I've seen a lot of mentions of having a sticky header when scrollbarV is false, but I haven't
yet been able to find a solution... does anyone have a fix for this? I'd really like to use the built in pagination but this is a major stopper for me, as I need to have both the header and footer sticky
Are you planning to fix issues of IE 11?
I'm trying to have a customer's first and last name in one column (Customer). Here's the object:
Screen Shot 2020-07-04 at 5.36.23 PM.png
    this.rows = [...this.customersAndWork]; // Refresh the data
                    console.log(`@MD: ReportsPage -> ngOnInit -> this.rows `, this.rows );
                    this.columns = [{prop: 'first_name', name: 'first_name'}, { prop: 'date' }, { name: 'Staff' },  { name: 'Price' }];
I know my first column is wrong. I can get date, staff, and price to show in the table
Got it :
<ngx-datatable [rows]="rows"> 

          <ngx-datatable-column prop="date" name="Date">
            <ng-template let-row="row" ngx-datatable-cell-template>

          <ngx-datatable-column prop="customerInfo.last_name" name="Customer">
              <ng-template let-row="row.customerInfo" ngx-datatable-cell-template>
                  {{row.first_name}}  {{row.last_name}}

          <ngx-datatable-column prop="staff" name="Artist">
            <ng-template let-row="row" ngx-datatable-cell-template>

          <ngx-datatable-column prop="price" name="Price">
            <ng-template let-row="row" ngx-datatable-cell-template>

And no need for columns in the ts code
Each column is sortable
Hi team, i want to to show an SVG icon instead of "No data to display" message if the rows is an empty array. How can i do that?
Jacob Maughan
Hello. Is there an easy way to hide all rows containing a specific string in one column?
santosh shresatha
@Ashike12 any update on DragDrop?
Mike Mahon
kinda new to this component - is there a property to make individual cells editable? if so, can anyone help me find a good example ?
here let me google that for me... <--- sorry rtfm
Sergei Volkov
hello , does this package support inline editing with server side processing mode ?
M. Tariq Sheikh
i am working on ngx datatable, i need functionality, checbox, drop down, switch, i am able do using ang/mat but it only on ui not working on conditon like to do.
if i use inline editing each time it edit it go to server to update the column

Vertical and Horizontal scroll bar is not displaying in ionic app.

<ngx-datatable #table class="material" [rows]="(items!=null)?items: emptyArray" [columnMode]="'force'"
        [virtualization]='true' [columns]="options?.columns"
        [style.height]="options?.tableHeight ?options?.tableHeight :'100%'"
        [rowHeight]="options?.rowHeight?options?.rowHeight:50" [reorderable]="reorderable" [scrollbarV]="'true'"
        [scrollbarH]="'true'" [treeFromRelation]="options?.treeFromRelation" [treeToRelation]="options?.treeToRelation"
        (activate)="onActivate($event)" (treeAction)="onTreeAction($event)" [sorts]="options.sorts">

here is the following overrided global css
global.scss file:

//CSS Swimline ngx-datatable
$ngx-datatable-row-odd-background: #D9D9D9 !important;

.ngx-datatable .datatable-header {
  background: var(--table-header-bg-color);
  opacity: .9;
  background-color: var(--table-header-bg-color);
    .datatable-header-cell {
    background-color: var(--table-header-bg-color) !important;
    color: white !important;
    text-align: left !important;
    background-color: #2f2f2f !important;
.ngx-datatable.material .datatable-header .datatable-header-cell{
  padding: 1.2vw 0px 1.2vw 2.6vw;
  font-weight: 400;
  font-size: 2.8vw;
  border-right: 1px solid #d9d9d9;
.ngx-datatable.material .empty-row {
  color: var(--font-color);
.ngx-datatable.material .datatable-body .datatable-body-row .datatable-body-cell {
  color: var(--font-color);
  padding: 1.2vw 2vw;
  font-size: 2.5vw;
  border-right: 1px solid #d9d9d9;
.ngx-datatable.material .datatable-filter .datatable-filter-cell{
  padding-top:0.9em !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;

.ngx-datatable .datatable-filter .datatable-filter-inner{
  padding-left: 0.7em;
.ngx-datatable, .info{
  font-size: 2vw !important;

.datatable-body-cell {
  // text-align: center !important
.datatable-row-even {
  background-color: var(--table-row-even-color);
  .datatable-row-left {
      background-color: var(--table-row-even-color) !important;

.datatable-row-odd {
  background-color: var(--table-row-odd-color);
  .datatable-row-left {
    background-color: var(--table-row-odd-color) !important;
 // width: 100% ;
.datatable-body.datatable-body {
  background: var(--table-row-even-color);

please,any help ?