Data Table sticky header

  • Have been playing around with this framework for a week now and love it! :)

    In the docs (0.13 and 0.14) for Data Tables there is mention of sticky headers, but cannot find any docs on how to use it! Anyone managed to get it working?


  • You have to give the body a fixed height, then the header will become sticky and the body will scroll.

    From the docs in the config object section:

      // (optional)
      // Styling the body of the data table;
      // "minHeight", "maxHeight" or "height" are important
      bodyStyle: {
        maxHeight: '500px'

  • @a47ae
    Working perfectly, thanks!

  • Hi, it seems this option does not work with version 0.15? Is there another option of make the data-table header stay fixed when scrolling. Same question for the footer.
    I would like to have the table expand to the full height of the parent element.

  • Good question. There is no description in 0.15 docs how to make header fixed.

Log in to reply

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.