https://github.com/archfz/vh-sticky-table-header
Vertical and horizontal sticky table header. Framework agnostic.
https://github.com/archfz/vh-sticky-table-header
header horizontal react scroll sticky sticky-header table vertical
Last synced: 24 days ago
JSON representation
Vertical and horizontal sticky table header. Framework agnostic.
- Host: GitHub
- URL: https://github.com/archfz/vh-sticky-table-header
- Owner: archfz
- License: mit
- Created: 2022-02-05T11:12:30.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-10-07T21:03:50.000Z (8 months ago)
- Last Synced: 2025-01-16T23:03:23.380Z (4 months ago)
- Topics: header, horizontal, react, scroll, sticky, sticky-header, table, vertical
- Language: HTML
- Homepage:
- Size: 97.7 KB
- Stars: 20
- Watchers: 2
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vh-sticky-table-header [](https://www.npmjs.com/package/vh-sticky-table-header) [](https://www.npmjs.com/package/vh-sticky-table-header)
JS and CSS driven sticky table header. Good alternative to `position: sticky` when
horizontal scroll and stickiness is needed as well.
[CODESANDBOX DEMO](https://codesandbox.io/s/vh-sticky-table-header-demo-euykw?file=/src/App.tsx&resolutionWidth=630&resolutionHeight=675)
## Features
- Support vertical and horizontal scroll stickiness at the same time.
- Support for multiple nested scrollable containers.
- Support for actions inside the header.
- [Support different top displacement per viewport width](#top).
- No flickering. Element coordinates are not updated on scroll events.
- [Smaller than 4kb compressed](https://bundlephobia.com/package/vh-sticky-table-header).
- No dependencies. Can be used in any framework.
## Installation and usage
```bash
npm i --save vh-sticky-table-header
```
Example usage with React:
```typescript jsx
import { StickyTableHeader } from 'vh-sticky-table-header';
import React, { FC, useLayoutEffect, useRef } from 'react';
const TableWithStickyHeader: FC = ({ children }) => {
const tableRef = useRef(null);
const tableCloneRef = useRef(null);
useLayoutEffect(() => {
if (tableRef.current && tableCloneRef.current) {
// Initialize the sticky header.
const sticky = new StickyTableHeader(
tableRef.current,
tableCloneRef.current,
{ max: 60 }
);
// Make sure to destory the sticky header once the main table is unmounted.
return () => sticky.destroy();
}
}, []);
return (
<>
{children}
>
);
};
```
Example usage with Vue 3:
```html
import { StickyTableHeader } from 'vh-sticky-table-header';
import { onMounted, ref, watchEffect } from 'vue';
const tableRef = ref(null);
const tableCloneRef = ref(null);
onMounted(() => {
watchEffect((onCleanup) => {
if (!tableRef.value && !tableCloneRef.value) return;
const stickyTable = new StickyTableHeader(
tableRef.value,
tableCloneRef.value,
{ max: 0 },
);
onCleanup(() => stickyTable.destroy();
});
});
```
Requirements (these can be seen in the demo as well):
1. The table container `div` elements should have the following css for vertical scrolling to work:
```css
.table_container {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
}
```
2. The JS logic to determine when to show the sticky header uses `window.document`. The body needs to
at be at y = 0 position when the scroll is at y = 0. Make sure that the body is not displaced using
child elements with `margin` (ex: in case of sticky site header). Use `padding` instead.
## Options
Options are provided to the constructor of the sticky table header instance.
```typescript
export default class StickyTableHeader {
constructor(tableContainer: HTMLDivElement, cloneContainer: HTMLTableElement, top: {
max: number | string;
[key: number]: number | string;
});
}
```
#### `tableContainer`
Reference to the main table dom element where content is rendered. Must be a table with a table header.
#### `cloneContainer`
Reference to an empty table dom element. This is where a replica of the table header will be rendered.
#### `top`
Object describing the displacement from top of the viewport for the vertical scrolling.
`max` is the default number of pixels or `rem` from top.
Any other key, defined in number, will represent a different number of pixels or `rem` from top to which to stick,
when the viewport width is less than the key.
## Release notes
#### 1.8.2
- Fix header bottom docking in case of multiple `tbody` tags. [merge-request](https://github.com/archfz/vh-sticky-table-header/pull/12) by [geic99](https://github.com/geic99)
#### 1.8.1
- Reduce package size.
#### 1.8.0
- Support header click replication method when table in multiple scroll containers. [issue](https://github.com/archfz/vh-sticky-table-header/issues/10)
#### 1.7.0
- Reworked header click replication method. Now when clicking table is not scrolled up. [issue](https://github.com/archfz/vh-sticky-table-header/issues/6)
#### 1.6.0
- Added support for multiple table header rows. [merge-request](https://github.com/archfz/vh-sticky-table-header/pull/8) by [ZEA-repository](https://github.com/ZEA-repository)
#### 1.5.0
- Added support for [multiple scrollable containers](./test/test_multiple_scroll.html). [issue](https://github.com/archfz/vh-sticky-table-header/issues/7)
- Small performance improvements.
#### 1.4.2
- Fix table header sticking at the bottom of last row of an inner table.
#### 1.4.1
- Fix issue with click mirroring not working due to incorrect coordinates.
- Click mirroring now scrolls higher up (+60px) then only the original table header.
#### 1.4.0
- Improve docking when scrolling past container. Now `offsetTop` is added to the absolute position
of the clone table container.
- Fix issue where horizontal scrolling would not update on the clone containers horizontal scroll
when the scrolling was done in docking state. [issue](https://github.com/archfz/vh-sticky-table-header/issues/3)
#### 1.3.1
- Remove leftover `console.log`.
#### 1.3.0
- Hide the clone container (display:none) when not sticky. [issue](https://github.com/archfz/vh-sticky-table-header/issues/1)
#### 1.2.1
- Fix issue where quick render and destroy would render the sticky header twice.
#### 1.2.0
- Prevent sticky header overflowing table vertically when scrolling past table.
#### 1.1.2
- Fix ESM module, for webpack compatibility.
#### 1.1.1
- Typing fix.
#### 1.1.0
- Add support for `rem` displacement.