{"id":18817688,"url":"https://github.com/archfz/vh-sticky-table-header","last_synced_at":"2025-04-30T12:35:19.858Z","repository":{"id":57392010,"uuid":"455847759","full_name":"archfz/vh-sticky-table-header","owner":"archfz","description":"Vertical and horizontal sticky table header. Framework agnostic.","archived":false,"fork":false,"pushed_at":"2024-10-07T21:03:50.000Z","size":100,"stargazers_count":20,"open_issues_count":2,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-16T23:03:23.380Z","etag":null,"topics":["header","horizontal","react","scroll","sticky","sticky-header","table","vertical"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/archfz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-05T11:12:30.000Z","updated_at":"2024-12-18T01:28:53.000Z","dependencies_parsed_at":"2024-10-27T11:46:42.881Z","dependency_job_id":"ccb38672-3f82-490f-80ab-7d56975d310a","html_url":"https://github.com/archfz/vh-sticky-table-header","commit_stats":{"total_commits":16,"total_committers":1,"mean_commits":16.0,"dds":0.0,"last_synced_commit":"554d735cfe98871ef911861c6d5f8470870e713b"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/archfz%2Fvh-sticky-table-header","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/archfz%2Fvh-sticky-table-header/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/archfz%2Fvh-sticky-table-header/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/archfz%2Fvh-sticky-table-header/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/archfz","download_url":"https://codeload.github.com/archfz/vh-sticky-table-header/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234892715,"owners_count":18902907,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["header","horizontal","react","scroll","sticky","sticky-header","table","vertical"],"created_at":"2024-11-08T00:12:41.710Z","updated_at":"2025-01-24T11:09:18.828Z","avatar_url":"https://github.com/archfz.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vh-sticky-table-header [![Downloads](https://badgen.net/npm/dw/vh-sticky-table-header)](https://www.npmjs.com/package/vh-sticky-table-header) [![Version](https://badgen.net/npm/v/vh-sticky-table-header)](https://www.npmjs.com/package/vh-sticky-table-header)\n\nJS and CSS driven sticky table header. Good alternative to `position: sticky` when \nhorizontal scroll and stickiness is needed as well.\n\n[CODESANDBOX DEMO](https://codesandbox.io/s/vh-sticky-table-header-demo-euykw?file=/src/App.tsx\u0026resolutionWidth=630\u0026resolutionHeight=675)\n\n## Features\n\n- Support vertical and horizontal scroll stickiness at the same time.\n- Support for multiple nested scrollable containers.\n- Support for actions inside the header.\n- [Support different top displacement per viewport width](#top).\n- No flickering. Element coordinates are not updated on scroll events.\n- [Smaller than 4kb compressed](https://bundlephobia.com/package/vh-sticky-table-header).\n- No dependencies. Can be used in any framework.\n\n## Installation and usage\n    \n```bash\nnpm i --save vh-sticky-table-header\n```\n\nExample usage with React:\n\n```typescript jsx\nimport { StickyTableHeader } from 'vh-sticky-table-header';\nimport React, { FC, useLayoutEffect, useRef } from 'react';\n\nconst TableWithStickyHeader: FC = ({ children }) =\u003e {\n  const tableRef = useRef\u003cHTMLTableElement\u003e(null);\n  const tableCloneRef = useRef\u003cHTMLTableElement\u003e(null);\n\n  useLayoutEffect(() =\u003e {\n    if (tableRef.current \u0026\u0026 tableCloneRef.current) {\n      // Initialize the sticky header.\n      const sticky = new StickyTableHeader(\n        tableRef.current,\n        tableCloneRef.current,\n        { max: 60 }\n      );\n      // Make sure to destory the sticky header once the main table is unmounted.\n      return () =\u003e sticky.destroy();\n    }\n  }, []);\n\n  return (\n    \u003c\u003e\n      \u003cdiv className=\"table_container\"\u003e\n        \u003ctable ref={tableRef}\u003e{children}\u003c/table\u003e\n      \u003c/div\u003e\n      \u003cdiv className=\"table_container\"\u003e\n        \u003ctable ref={tableCloneRef} /\u003e\n      \u003c/div\u003e\n    \u003c/\u003e\n  );\n};\n```\n\nExample usage with Vue 3:\n\n```html\n\u003cscript setup\u003e\nimport { StickyTableHeader } from 'vh-sticky-table-header';\nimport { onMounted, ref, watchEffect } from 'vue';\n\nconst tableRef = ref(null);\nconst tableCloneRef = ref(null);\n\nonMounted(() =\u003e {\n    watchEffect((onCleanup) =\u003e {\n        if (!tableRef.value \u0026\u0026 !tableCloneRef.value) return;\n\n        const stickyTable = new StickyTableHeader(\n            tableRef.value,\n            tableCloneRef.value,\n            { max: 0 },\n        );\n\n        onCleanup(() =\u003e stickyTable.destroy();\n    });\n});\n\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv class=\"grid w-full overflow-x-auto overflow-y-hidden md:rounded-lg\"\u003e\n    \u003ctable ref=\"tableRef\"\u003e\n      \u003cslot /\u003e\n    \u003c/table\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"grid w-full overflow-x-auto overflow-y-hidden shadow-md md:rounded-lg\"\u003e\n    \u003ctable ref=\"tableCloneRef\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n```\n\n\nRequirements (these can be seen in the demo as well):\n\n1. The table container `div` elements should have the following css for vertical scrolling to work:\n    ```css\n    .table_container {\n        width: 100%;\n        overflow-x: auto;\n        overflow-y: hidden;\n    }\n    ```\n2. The JS logic to determine when to show the sticky header uses `window.document`. The body needs to \n   at be at y = 0 position when the scroll is at y = 0. Make sure that the body is not displaced using \n   child elements with `margin` (ex: in case of sticky site header). Use `padding` instead.\n\n## Options\n\nOptions are provided to the constructor of the sticky table header instance.\n\n```typescript\nexport default class StickyTableHeader {\n  constructor(tableContainer: HTMLDivElement, cloneContainer: HTMLTableElement, top: {\n    max: number | string;\n    [key: number]: number | string;\n  });\n}\n```\n\n#### `tableContainer`\n\nReference to the main table dom element where content is rendered. Must be a table with a table header.\n\n#### `cloneContainer`\n\nReference to an empty table dom element. This is where a replica of the table header will be rendered.\n\n#### `top`\n\nObject describing the displacement from top of the viewport for the vertical scrolling.\n`max` is the default number of pixels or `rem` from top.\nAny other key, defined in number, will represent a different number of pixels or `rem` from top to which to stick,\nwhen the viewport width is less than the key.\n\n## Release notes\n\n#### 1.8.2\n\n- 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)\n\n#### 1.8.1\n\n- Reduce package size.\n\n#### 1.8.0\n\n- Support header click replication method when table in multiple scroll containers. [issue](https://github.com/archfz/vh-sticky-table-header/issues/10)\n\n#### 1.7.0\n\n- Reworked header click replication method. Now when clicking table is not scrolled up. [issue](https://github.com/archfz/vh-sticky-table-header/issues/6)\n\n#### 1.6.0\n\n- 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)\n\n#### 1.5.0\n\n- Added support for [multiple scrollable containers](./test/test_multiple_scroll.html). [issue](https://github.com/archfz/vh-sticky-table-header/issues/7)\n- Small performance improvements.\n\n#### 1.4.2\n\n- Fix table header sticking at the bottom of last row of an inner table.\n\n#### 1.4.1\n\n- Fix issue with click mirroring not working due to incorrect coordinates.\n- Click mirroring now scrolls higher up (+60px) then only the original table header.\n\n#### 1.4.0\n\n- Improve docking when scrolling past container. Now `offsetTop` is added to the absolute position\n  of the clone table container.\n- Fix issue where horizontal scrolling would not update on the clone containers horizontal scroll\n  when the scrolling was done in docking state. [issue](https://github.com/archfz/vh-sticky-table-header/issues/3)\n\n#### 1.3.1\n\n- Remove leftover `console.log`.\n\n#### 1.3.0\n\n- Hide the clone container (display:none) when not sticky. [issue](https://github.com/archfz/vh-sticky-table-header/issues/1)\n\n#### 1.2.1\n\n- Fix issue where quick render and destroy would render the sticky header twice.\n\n#### 1.2.0\n\n- Prevent sticky header overflowing table vertically when scrolling past table.\n\n#### 1.1.2\n\n- Fix ESM module, for webpack compatibility.\n\n#### 1.1.1\n\n- Typing fix.\n\n#### 1.1.0\n\n- Add support for `rem` displacement.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farchfz%2Fvh-sticky-table-header","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farchfz%2Fvh-sticky-table-header","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farchfz%2Fvh-sticky-table-header/lists"}