Ngx-datatable: how can I fix the headers?

[xhe]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[x ] support request => Please do not submit support request here

Current behavior

May I ask which attribute I can use to fix the table header? I checked the demo code as well as the documentation, and I can not find out any configuration that can make the table header fixed. Now, when I scroll vertically, the whole table scroll up.
Thanks
Expected behavior

Reproduction of the problem

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Table version: 0.7.x
  

• Angular version: 2.0.x
  

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[tmburnell]

are you scrolling the page or the grid?
If you look at the 10k example:

• if you scroll the grid the header stays at the top
• if you scroll the page the whole grid scrolls as you say.

So you might make sure you are using vertical scroll [true].

[tmburnell]

the first thing that comes to my mind is did you give the grid a height?
I personally used flex layouts to make it fit my area, but my guess is without a given height it just overflows which causes the screen to scroll.

[xhe]

it is not the height of the grid, if I gives it the height, the table
become shorter, but not scrollable.
There may be some tricks to make the header fixed here, but where

require('@swimlane/ngx-datatable/release/index.css');

require('@swimlane/ngx-datatable/release/themes/material.css');

require('@swimlane/ngx-datatable/release/assets/icons.css');

@Component( {

selector: "jnpr-x-datatable",

template: `

    <div>

      <ngx-datatable

          class="material"

          [rows]="tableRows"

          [columns]="tableColumns"

          [columnMode]="'force'"

          [headerHeight]="50"

          [footerHeight]="0"

          [rowHeight]="50"

          [scrollbarV]="true"

          [scrollbarH]="true"

          [limit]=10

            >





      </ngx-datatable>

    </div>

  `

})

On Thu, Mar 23, 2017 at 4:37 PM, Tim Burnell [e-mail]
wrote:

the first thing that comes to my mind is did you give the grid a height?
I personally used flex layouts to make it fit my area, but my guess is
without a given height it just overflows which causes the screen to scroll.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/swimlane/ngx-datatable/issues/624#issuecomment-288892444,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAN4c4QGp3RxpHHnhWYWykH7Lj9d8Qxdks5rowIsgaJpZM4MmUK8
.

[tmburnell]

I did have to upgrade my CLI to the latest to do the imports ... other than that i dont know.

[amcdnl]

See this demo: https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/fullscreen.ts

when vertical scrolling is turned on, the heads will stick. If you want your table to make heads always top, you need to position your table like i did there.

[rodrigoEclipsa]

I need to set the headers but without activating the virtual scroll, since I'm implementing a drag and drop, is this possible?

[swidom-exparency]

Just as an FYI, I had the same need for having a fixed header without the virtual paging, but still using server side pagination. I modified the code for the component to make this work by implementing two new component attributes: [fixedHeader]="true" (defaults to false) and [fixedHeaderBodyHeight]="enter your numerical value here" which fixes the height of the body container for the rows. It works very nicely. I am ready to donate back the code changes, but am not certain what the procedure is for doing that. Meanwhile, if you want the code changes, please reach out to me and let me know.

[RafaelTCostella]

Hey @swidom-exparency, I would like to know how you implemented it! Can you share your code?

[swidom-exparency]

Hi Rafael,
Sure.  Attached is the entire code base with my changes.  I apologize - it's been so long since I wrote those code changes and I didn't take any notes about what I did.  I do remember that the code changes were quite minimal once you figure out where they need to be placed.  Attached is a zip file, and I guess you can do a diff to figure out what changes I made.
Here is an example of how I am using it...
You can see that I have added to new @Input members: fixedHeader and fixedHeaderBodyHeight.  The latter attribute determines the height of the grid you want to use, and you will see that the header will remain fixed above that grid, which is what we wanted in the first place.
Good luck!  Please let me know if this helps you.  My preference would be for swimlane to roll these changes into their baseline so that it will keep up with their new versions.  Maybe, with enough folks asking for it, they will comply.
-Regards, Steve

  From: Rafael Trostli Costella <[email protected]>

To: swimlane/ngx-datatable [e-mail]
Cc: Steve Widom [e-mail]; Mention [e-mail]
Sent: Saturday, April 28, 2018 10:11 AM
Subject: Re: [swimlane/ngx-datatable] how can I fix the headers? (#624)

Hey @swidom-exparency, I would like to know how did you implemented it! Can you share your code?—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[swidom-exparency]

Hi Rafael,
I should add that I have the following in my app.module.ts:
import {NgxDatatableModule} from './ngx-datatable/datatable.module';  (change this if you put the code in a different folder)
with NgxDatatableModule in my imports section of that file.  Also, naturally I am no longer declaring ngx-datatable as a dependency in my package.json file.  Again, I hope this helps.
-Steve

  From: Rafael Trostli Costella <[email protected]>

To: swimlane/ngx-datatable [e-mail]
Cc: Steve Widom [e-mail]; Mention [e-mail]
Sent: Saturday, April 28, 2018 10:11 AM
Subject: Re: [swimlane/ngx-datatable] how can I fix the headers? (#624)

Hey @swidom-exparency, I would like to know how did you implemented it! Can you share your code?—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[RafaelTCostella]

Helps a lot!

Thanks mate!

Cheers

On 28 Apr 2018, at 14:15, Steve Widom [e-mail] wrote:

Hi Rafael,
I should add that I have the following in my app.module.ts:
import {NgxDatatableModule} from './ngx-datatable/datatable.module'; (change this if you put the code in a different folder)
with NgxDatatableModule in my imports section of that file. Also, naturally I am no longer declaring ngx-datatable as a dependency in my package.json file. Again, I hope this helps.
-Steve

From: Rafael Trostli Costella [e-mail]
To: swimlane/ngx-datatable [e-mail]
Cc: Steve Widom [e-mail]; Mention [e-mail]
Sent: Saturday, April 28, 2018 10:11 AM
Subject: Re: [swimlane/ngx-datatable] how can I fix the headers? (#624)

Hey @swidom-exparency, I would like to know how did you implemented it! Can you share your code?—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub https://github.com/swimlane/ngx-datatable/issues/624#issuecomment-385191673, or mute the thread https://github.com/notifications/unsubscribe-auth/AGqzY4N5mhNXD_hiGbynRuXnqoRKFSc_ks5ttKPDgaJpZM4MmUK8.

[RafaelTCostella]

Hello again!

My current config is:

<ngx-datatable class="material" 
          [loadingIndicator]="isLoading" 
          [headerHeight]="50" 
          [footerHeight]="50"
          [rowHeight]="50" 
          [columnMode]="'force'" 

          [scrollbarH]="true" 
          [scrollbarV]="true" 
          [rows]="rows"
          [columns]="filteredColumns" 

          [externalSorting]="true" 
          (sort)="onSort($event)" 

          [selected]="selected" 
          [selectionType]="'multi'" 
          (select)="onSelect($event)" 
          (activate)="onActivate($event)" 

          (reorder)='saveOrder($event)'

          [externalPaging]="true" 
          [count]="page.totalElements" 
          [offset]="page.pageNumber" 
          [limit]="page.size" 
          (page)='setPage($event)'>

These are the pagination params:

page.totalElements ==> 6517
page.pageNumber ==> 0
page.size ==> 10

Now my wrapper ngx-datatable have a height that is 6517 * 50, apart from the fact that ScrollbarV is set to true. What is hapening?

[marvasten]

Hi @swidom-exparency, I would like to know how did you implemented the fix header functionality. Could you please share your code? Thanks

Just as an FYI, I had the same need for having a fixed header without the virtual paging, but still using server side pagination. I modified the code for the component to make this work by implementing two new component attributes: [fixedHeader]="true" (defaults to false) and [fixedHeaderBodyHeight]="enter your numerical value here" which fixes the height of the body container for the rows. It works very nicely. I am ready to donate back the code changes, but am not certain what the procedure is for doing that. Meanwhile, if you want the code changes, please reach out to me and let me know.

[swidom-exparency]

Hello marvasten,

I apologize - I am just seeing this now. I don't know why I never got an email letting me know about your inquiry. If you still want the code, please let me know. I literally just sent a zip file to another person asking for the same. You can email me at steve.[email protected]

-Regards,
Steve

[tannenbaums]

Hi Steve,

It's two years and a couple of releases later and this is still an issue. I too have a situation were I cannot turn scrollbarV on, but still want my headers to be fixed. Would you be able to put your fix in the latest version and post a link to it so that everyone can benefit from it? Seems like a bunch of ppl out there are looking for this. Not sure why it wasn't yet baked into the code base.

Thanks so much,
Shmuel Tannenbaum

[swidom-exparency]

To Anyone Interested,

I have rolled my original changes that date back to Angular 2 into (what appears to be) the latest release of Swimlane's ngx-datatable module, which at the time of writing this is 16.0.2. My changes are actually quite limited (three files only, with only a few lines per file. Again, if you are interested I will send you a zip file (7z) with the entire code base.

You will need to remove your dependency from the Swimlane component in your package.json, and copy the code base into your src/app Angular project, and add the import into your app.module.ts.

Please note a couple of things. The first is that I have done very minimal testing on this - call it a smoke test and no more. Secondly, I would really appreciate it if someone, somehow, would get Swimlane to roll these changes into their baseline and/or provide an alternative that meets our needs. I am still in the process of putting together my own website which is why I cannot post a link to the zip file.

-Steve

[swidom-exparency]

Per my post above, I keep forgetting to give out my email address. It is steve.[email protected]

-Steve

[tannenbaums]

That's awesome Steve, thank you so much for that!!!
I would like to make it into an NPM package, but at the moment i'm under pressure to meet a deadline. I'll touch base when that clears up, god willing...