tleunen / react-mdl

React Components for Material Design Lite
https://tleunen.github.io/react-mdl/
MIT License
1.76k stars 255 forks source link

[DataTable] Fixed header with scrollable content #440

Open koutsenko opened 7 years ago

koutsenko commented 7 years ago

Is there any way to implement this? Something like a "scrollable" and "fixedHeader" properties. Thanks.

koutsenko commented 7 years ago

I tried to do something like that - wrap DataTable to div with className 'scrollabletable'. It works but is very dirty solution, it assumes that table header is 5em height and so on...

.scrollabletable {
  overflow-y: scroll;
  height: 100%;
  margin-top: 5em;
}

.scrollabletable > table {
  top: -5em;
}

.scrollabletable > table > thead {
  position: fixed;
  z-index: 50000;
  background: white;
  outline: 1px solid white;
}

.scrollabletable > table > tbody {
  position: absolute;
  margin-top: 5em;
}

Maybe somebody can test and improve this solution.