By applying this plugin to the table, the column headers will stick to the top of the viewport as you scroll down.

npm i @orthodoxauto/sticky-header

Using the plugin is pretty straightforward:

import { createStickyHeader } from '@orthodoxauto/sticky-header'

createStickyHeader(table, opts)

const instance = createStickyHeader(table, opts)
instance.dispose()

const instance = createStickyHeader(table, opts)
instance.update()

You can initialize the plugin with an options map to tweak the behavior. The following options are supported:

CSS selector for table's header. Defaults to thead.

createStickyHeader(table, {
    header: 'thead'
})

CSS selector for table's header cell. Defaults to th.

createStickyHeader(table, {
    headerCell: 'th'
})

Specifies how much the sticky header should be offset from the top of the page.

createStickyHeader(table, {
    fixedOffset: ['#nav']
})

Allows you to overwrite which surrounding element is scrolling. Defaults to window.

createStickyHeader(table, {
    scrollableArea: '#scrollable'
})

Z-index for table's header. Defaults to 10.

createStickyHeader(table, {
    zIndex: 12
})