Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Apr 16 18:12
    EzePerucca commented #431
  • Apr 16 06:42
    nirajt-clairvoyant commented #1062
  • Apr 13 00:47
    elliotwesoff closed #1989
  • Apr 13 00:47
    elliotwesoff commented #1989
  • Apr 12 22:26
    elliotwesoff edited #1989
  • Apr 11 00:05
    github-actions[bot] closed #1970
  • Apr 11 00:05
    github-actions[bot] commented #1970
  • Apr 11 00:05
    github-actions[bot] closed #1971
  • Apr 11 00:05
    github-actions[bot] commented #1971
  • Apr 11 00:05
    github-actions[bot] closed #1972
  • Apr 11 00:05
    github-actions[bot] commented #1972
  • Apr 09 18:57
    elliotwesoff edited #1989
  • Apr 09 18:41
    elliotwesoff edited #1989
  • Apr 09 18:37
    elliotwesoff opened #1989
  • Apr 08 10:08
    julmot commented #1852
  • Apr 07 12:06
    stankovicmilutin commented #1021
  • Apr 06 20:40
    cmckni3 commented #1988
  • Apr 06 15:11
    cmckni3 closed #1988
  • Apr 06 10:59
    yuvgeek commented #1959
  • Apr 05 22:13
    harvanchik commented #1938
Mustapha Afkir
@afkir_mustapha_twitter
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
@svengia25
Hey, is anyone getting the error 'An accessor cannot be declared in an ambient context.'
blayvant
@blayvant
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 https://stackoverflow.com/questions/62181110/wrapped-text-in-ngx-datatable-rows-getting-cut-off-in-print-view for details -- any help would be immensely appreciated!
Siddharth
@siddharth1903
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?
Zentoaku
@zentoaku
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
Zentoaku
@zentoaku
@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
@msacco87_twitter
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
syedahmad9
@syedahmad9
Are you planning to fix issues of IE 11?
Michael
@CodeTropolis
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
Michael
@CodeTropolis
Got it :
<ngx-datatable [rows]="rows"> 

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

          <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}}
              </ng-template>
          </ngx-datatable-column>

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

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

        </ngx-datatable>
And no need for columns in the ts code
Each column is sortable
gsangram17
@gsangram17
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
@Maughan-Jake
Hello. Is there an easy way to hide all rows containing a specific string in one column?
santosh shresatha
@sansantosh_gitlab
@Ashike12 any update on DragDrop?
Mike Mahon
@jetstreamin
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
@Duoru
hello , does this package support inline editing with server side processing mode ?
M. Tariq Sheikh
@tariqsheikh_twitter
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
C.Ram
@CP-Ram

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%'"
        [headerHeight]="options?.headerHeight?options?.headerHeight:50"
        [footerHeight]="options?.footerHeight?options?.footerHeight:0"
        [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;
}
.datatable-header{
  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;
  }
  .datatable-row-left{
    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;
    }
}
.datatable-filter-cell-label{
 // width: 100% ;
}
.datatable-body.datatable-body {
  background: var(--table-row-even-color);
}

please,any help ?

Munarso
@narso2016
how to avoid ngx-datatble showing duplicate records ?
Munarso
@narso2016

'''
this.takeoutService.getData(object).then(data => {
this.loading = false;
if (data.count !== 0) {
this.rows = data.items.data;
this.rows.push(...this.items);
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
@GIT18195644
image.png
image.png
image.png
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!
Kabby
@kabb5
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)
mensBash
@mensBash
image.png
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
Sukhchand
@Sukhchand
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
@spookiecookie
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" >
nisharam
@nisharam
Hi everyone,
Can anyone explain how this {{group.value[0].age}} works in row grouping data?
Maliha Khizer
@malihakhizer
lilalinux
@lilalinux
How can I put a *ngFor and a ngIf at <ngx-datatable-column>?
Kavinda
@Kavinda95
hello there
im tottally new to ngxdatatable
Amy Speed
@amyspeed
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
@abdelrahman-haridy01

Hello,

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

KundanSha
@KundanSha
image.png
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