swimlane / ngx-datatable

✨ A feature-rich yet lightweight data-table crafted for Angular
http://swimlane.github.io/ngx-datatable/
MIT License
4.63k stars 1.68k forks source link

Optionally show Summary Row even if no rows present in table. #1550

Open CaffGeek opened 6 years ago

CaffGeek commented 6 years ago
[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior Summary row only displays if rows exist in table.

Expected behavior Summary row can be optionally shown whether there are rows in the table or not

Reproduction of the problem On a table with a summary row, set the rows collection to empty [] and the summary row disappears.

What is the motivation / use case for changing the behavior? I still want the row showing, as we use it to display information, even if the visible rows collection is empty (for example when it's filtered)

Please tell us about your environment:

CaffGeek commented 6 years ago

I'll even modify the code and send a PR if I could find where it chooses to show/hide that...

NLye commented 5 years ago

@CaffGeek did you find a workaround for this? Because I need the same logic, for a custom filter-row which shouldn't hide when no data is present.

The row which causes this is this I guess: https://github.com/swimlane/ngx-datatable/blob/3f5a5a243d0bc545271c96ead2b8f5077c07f30d/src/components/body/body.component.ts#L27

but I have no clue how to modify this for a generic solution...

carter-dewey commented 5 years ago

I tried removing the line "*ngIf="rows?.length" from the compiled javascript in my node_modules but it didn't seem to have any effect.

carter-dewey commented 5 years ago

I found a work around (really a hack) for this by taking advantage of the weird change detection system. So after retrieving a list of row objects I run the following code.

       if(this.rows == null || this.rows.length == 0){
          this.rows = [{
            id : 1,
            name : "My Fake Row",
          }];
          setTimeout(() =>{ this.rows.splice(0,1); }, 1);
        }

Basically if there are no rows I create a fake row and then immediately remove it. This will leave the summary row at the top. A few notes, you must use the set timeout function, and yes it works when the time out is only 1 ms. You must also use the array splice method. Setting the rows array to an empty array will hide the summary row (I.E dont do this.rows = []).