Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • Dec 07 09:11
    hamdipro commented #2040
  • Dec 06 17:03
    hamdipro commented #2040
  • Dec 06 14:36
    abarrett-liaisonfs opened #2050
  • Dec 06 14:18
    slavede commented #1906
  • Dec 06 11:50
    mrmijus commented #1045
  • Dec 02 08:18
    EusebiuDev commented #2033
  • Dec 01 09:41
    isjhar commented #1559
  • Nov 30 17:47
    atscott closed #2028
  • Nov 29 07:07
    muuvmuuv opened #2049
  • Nov 24 11:40
    bowler-man commented #1713
  • Nov 24 04:46
    shabbirdhangot opened #2048
  • Nov 23 13:55
    chrisdurning22 commented #1546
  • Nov 23 13:54
    chrisdurning22 commented #1546
  • Nov 23 13:54
    chrisdurning22 commented #1546
  • Nov 23 01:44
    abnerfilipe commented #881
  • Nov 22 17:54
    chrisdurning22 commented #1546
  • Nov 22 17:52
    chrisdurning22 commented #1546
  • Nov 22 17:51
    chrisdurning22 commented #1546
  • Nov 22 17:50
    chrisdurning22 commented #1546
  • Nov 22 17:48
    chrisdurning22 commented #1546
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 ?

how to avoid ngx-datatble showing duplicate records ?

this.takeoutService.getData(object).then(data => {
this.loading = false;
if (data.count !== 0) {
this.rows = data.items.data;
this.rows = [...this.rows];

            setTimeout(() => {
                this.loadingIndicator = false;
            }, 1500);

        } else {
            this.dataKosong = 'Data Not Found!';
            this.rows = [];
            this.itemCount = 0;


<ngx-datatable #myFilterTable style="..." class="bootstrap" [rows]="rows" [columns]="columns" (reload)="reloadItems()" [columnMode]="'force'" [scrollbarH]="true" [headerHeight]="50" [footerHeight]="50" [rowHeight]="'auto'" [loadingIndicator]="loadingIndicator" [limit]="5" [selected]="selected" [selectionType]="SelectionType.checkbox" [selectAllRowsOnPage]="false" [displayCheck]="displayCheck" (keyup)="reloadItems()" [reorderable]="reorderable" [sorts]="false" (activate)="onActivate($event)" (select)='onSelect($event)'>
Dinuka Hettirachchi
I want to display a number of rewards, but my code display rewards object id (figure 2). in figure 3, How I pass that 0 value in my code {{row.rewards}}. Please help me!
if I'm understanding correctly, I think you want that cell to display the result of this.row.rewards.reduce((a, b) => {return a + b.rewards}, 0)
I have some custom header templates and I am trying to make the following: Only drag and drop icon should make the column draggable (not the whole column name text) and the column should be sortable by either clicking on sort icon or by clicking on the column name. Currenlty, it can be sorted only by clicking on the icon, but I would like the whole thing to have the sorting option. I have been trying to do that for almost a day without any success. I hope that someone could help me
i have requirement where only last column should be a custom template with latest of ngx datatable. And all columns are generated dynamically so i am using ngfor to iterate through columns. i am kind of stuck here. If someone have solution, please help me.
Marius Žilėnas
hi guys. I really want to scroll my table to bottom row. How can i do it programatically? My datatable element is @ViewChild(DatatableComponent) table: DatatableComponent;
. And this is datatable <ngx-datatable [rows]="currentPaginatedElements" ngx-datatable class="bootstrap" [rowClass]="getRowClass" [columnMode]="ColumnMode.force" [headerHeight]="50" [externalPaging]="true" [externalSorting]="true" [count]="pagination.totalItems" [offset]="pagination.currentPage" [limit]="pagination.itemsPerPage" (activate)="onActivate($event)" (page)="setPage($event)" (sort)="onSort($event)" [class.datatable-row-even]="false" [class.datatable-row-odd]="false" [footerHeight]="50" rowHeight="auto" [scrollbarV]="true" [virtualization]="false" >
Hi everyone,
Can anyone explain how this {{group.value[0].age}} works in row grouping data?
Maliha Khizer
How can I put a *ngFor and a ngIf at <ngx-datatable-column>?
hello there
im tottally new to ngxdatatable
Amy Speed
It looks like this ngx-datatable is still missing the necessary aria roles to pass accessibility scans. Does anyone have a possible solution for adding them to an application? I can add role="grid" or role="table" to the ngx-datatable element. Is there a way to add roles to the rest of the elements the table?
Abdelrahman Haridy


How can i add toFixed(2) function
in summaryRow results ??

Hi All, I am using ngx-datatable in my Angular project (v11), & the icons are displayed as alphabets , although in official docs, it shows correctly. This is how it looks in my project :
But this is how it should look, as given in official doc : https://swimlane.github.io/ngx-datatable/#responsive
Hi, I've been trying to add the ability where a user can have custom column widths. I have it 95% working. I can set the column widths based off the user's preference but it only sets the header's column width. The body of the table is left with the original column widths. When the user mouses over the table then the body gets in line with the header. Is there a way to manually update the body's column widths? Or is there a way that the body can always be kept in line with the header's column widths?
grid.recalculate() seemed to do the trick.
Sabeer Sulaiman
Hi, can anyone help me understand why pagination is not coming in the data-table. Server side page number is not 0 based, hence the pageNumber - 1. Limit is set to 2 in this case and total is set to 7. One thing I also noted is that the pageSize is coming as 16 in the loadDuePaymentsmethod, no idea why though.
    [offset]="pageNumber - 1"
    style="height: calc(100vh - 100px)"
Tom Cockram

Hey everyone, I am trying to right-align the rows and headers in my table. However, it seems I can only change the background colour.


      class="bootstrap datatable-row-even datatable-row-odd"


rowClass = (row) => {
    return {
      rowClass: true,


.rowClass {
  background-color: orangered !important;
  text-align: right !important;
Raj Pokhrel
Is it possible to fetch live data to the ngx-datatable?
expandAllRows() is making browser unresponsive? I have around 1K rows that needs to get expanded at once. Any suggestions?
Hi people, is it possible to scroll "selected" row to the top?
Hi people,
How do we add tab-index in column headers ?
or provide column based accessibility features (key events for sorting etc)
Do we have any such provision for the same ?
Hello everyone, I had a requirement in my project to sort all the blank columns at the end so I wrote a custom comparator, but now the problem is I have to go to every column on each page and add the comparator to each column. Is there a way to hook up my comparator globally in one place so I don't need to slap the comparator on each column?
Hi Team I need help using ngx-datatable i need to fix it two column first should be checkbox and another column is action column how can i set it
i used already frozenLeft=true so both column checkbox and action column are assigned to left side but ui is distroed
Hi guys, has anyone got ngx-datatable to work with Angular 12
I've tried to use the angular 12 pull request but I just get "Type NgxDatatableModule does not have 'ɵmod' property"
this is driving me crazy and I don't want to downgrade to 11
Michelle Diamond
Hi, can anyone assist. I need to reduce the height of the horizontal scroll bar beneath the tables. Has anyone got a solution?
Jason Spence
Is there a column drag event I can listen to or subscribe to get the new table column order?
Jason Spence
Does anyone know what event emitters are available to listen to?
Jason Spence
After re-ordering columns programmatically, the column sort functionality doesn't work anymore. Has anyone run into this issue before? Any solutions?
Damir Dezeljin

Recently I updated my App that is using swimlane/ngx-datatable to Angular 12. As this was the only library that wasn't working with Angular 12 and my initial tests showed it kind of "being ok", I did a npm install --force swimlane/ngx-datable.

Well, now I bumped in few performance related issues - if there is a lot of data (400+ rows) to display in the datatable, the UI gets super slow. This wasn't the case before.

I saw some commits in the main repo, as well in forks, which apparently is getting the ngx-datable code ready for Angular 12.

May I ask for a hint how to use the latest code instead of last release (19.0.0), which is quite outdated. Or even better, does anyone have a different suggestion how to address the problem I described above?
someone has example of header rowspan and colspan?
Hello, I am trying to get a fixed header on the ngx-datatable. The built in fixed header functionality does not work for my scenario. I used the following css .datatable-header {
overflow: unset !important;
position: sticky;
background: #fff;
top: 0;
z-index: 100;}
2 replies
Hello, I am trying on ngx-datatable, and I want to get the column count in it so that skipped the click event in the last column.