Ngx-datatable: Display progress indicator in the header

[dinvlad]

I'm submitting a ...

[ ] 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
Progress indicator (defined by table.loadingIndicator) is displayed at the top of the scrolling area, but not as part of the header. As a result, we only see it on the first "page". If we scroll down, its display is hidden from view.

Expected behavior
Page indicator would be part of the header, making it display independently of the viewport.

Reproduction of the problem
https://plnkr.co/edit/3UVBTiDGZzRcwZ9dsyIg

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

• Table version: 8.0.0

• Angular version:
  https://unpkg.com/@angular

• Browser:
  Chrome OS

• Language:
  Typescript 2.0.7

[jakbutler]

The following SCSS workaround, when used as an override, seems to address this:

.ngx-datatable.material {
  .datatable-body {
    .progress-linear {
      position: fixed !important;
    }
  }
}

[richardtun]

Above css solved the problem with "first page" progress indicator. But in IE browser, that causes another problem: the progress indicator always contains full screen. For example, I have a grid in the left and detail part in the right, the progress indicator is displayed in detail part also when loading. Any idea to solve this problem?

[anthonydagondon]

i've fixed mine with:
.ngx-datatable.material {
.datatable-body {
.progress-linear {
position: absolute !important;
}
}
}

as using "position: fixed !important" puts the loading above the header where in it should've been below the header.
i took this solution from the previous version. https://github.com/swimlane/ngx-datatable/commit/88d243983101f941736e91e14dc525b6844011b2?branch=88d243983101f941736e91e14dc525b6844011b2&diff=split