{"id":15715837,"url":"https://github.com/marchaos/react-virtualized-sticky-tree","last_synced_at":"2025-04-05T15:10:07.751Z","repository":{"id":39633094,"uuid":"95920075","full_name":"marchaos/react-virtualized-sticky-tree","owner":"marchaos","description":"A React component for efficiently rendering tree like structures with support for position: sticky","archived":false,"fork":false,"pushed_at":"2024-03-12T11:20:44.000Z","size":1490,"stargazers_count":153,"open_issues_count":16,"forks_count":12,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-12-06T20:10:55.960Z","etag":null,"topics":["position","react","sticky","sticky-headers","stickyheader","tree","virtual","virtualized","virtualizedlist"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/marchaos.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2017-06-30T20:03:20.000Z","updated_at":"2024-11-08T18:00:42.000Z","dependencies_parsed_at":"2024-06-19T20:03:35.829Z","dependency_job_id":"397c2784-bcc4-4ac2-b277-396b92643841","html_url":"https://github.com/marchaos/react-virtualized-sticky-tree","commit_stats":{"total_commits":116,"total_committers":9,"mean_commits":12.88888888888889,"dds":"0.15517241379310343","last_synced_commit":"32be921c98fa7acfeced5ed606e70b44bfedc619"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marchaos%2Freact-virtualized-sticky-tree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marchaos%2Freact-virtualized-sticky-tree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marchaos%2Freact-virtualized-sticky-tree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marchaos%2Freact-virtualized-sticky-tree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marchaos","download_url":"https://codeload.github.com/marchaos/react-virtualized-sticky-tree/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247353749,"owners_count":20925329,"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":["position","react","sticky","sticky-headers","stickyheader","tree","virtual","virtualized","virtualizedlist"],"created_at":"2024-10-03T21:43:11.955Z","updated_at":"2025-04-05T15:10:07.730Z","avatar_url":"https://github.com/marchaos.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-virtualized-sticky-tree\nA React component for efficiently rendering tree like structures with support for position: sticky. `react-virtualized-sticky-tree` uses a similar API to [react-virtualized](https://github.com/bvaughn/react-virtualized).\n\n## Demo\n\nhttps://marchaos.github.io/react-virtualized-sticky-tree/\n\n## Getting Started\n\n`npm install react-virtualized-sticky-tree --save`\n\n## Usage\n\n## Basic Example\n\n```js\nimport { StickyTree } from 'react-virtualized-sticky-tree';\n\nconst tree = {\n  root: { name: 'Root', children: ['child1', 'child2', 'child3'], depth: 0 },\n  child1: { name: 'Child 1', children: ['child4'], depth: 1 },\n  child2: { name: 'Child 2', depth: 2 },\n  child3: { name: 'Child 3', depth: 2 },\n  child4: { name: 'Child 4', depth: 3 },\n};\n\nconst getChildren = (id) =\u003e {\n  if (tree[id].children) {\n    return tree[id].children.map(id =\u003e ({ id, height: 30, isSticky: true }));\n  }\n};\n\nconst rowRenderer = ({ id, style }) =\u003e {\n  const node = tree[id];\n  return \u003cdiv style={style}\u003e{node.name}\u003c/div\u003e\n};\n\nrender() {\n  return (\n      \u003cStickyTree\n        root={{ id: 'root', height: 30 }}\n        width={width}\n        height={height}\n        getChildren={getChildren}\n        rowRenderer={rowRenderer}\n        renderRoot={true}\n        overscanRowCount={20}\n      /\u003e\n  );\n)\n```\n\n## Nested Sticky Header Styles\n\nStickyTree renders the component within a nested structure so that the header's position may be 'stuck' at different levels (see [demo](https://marchaos.github.io/react-virtualized-sticky-tree/)). When passing the root node or items in the children array, specifying isSticky: true will make the item sticky.\n\nEvery nested sticky level should have a top which is at the bottom of the sticky level above it. For example. If your root node is 30px high and has a top of 0, the next sticky node should have a top of 30px. The z-index of the node should also be lower than the nodes above it (so that it is scrolled out of view underneath its parent node). If your root node is z-index 4, then the node below could be 3, below that 2 and so on.\n\nAn implementation of this would look like:\n\n```js\nconst getChildren = (id) =\u003e {\n    if (shouldBeSticky(id)) {\n      return tree[id].children.map(childId =\u003e ({\n         id: childId, \n         isSticky: true,\n         stickyTop: tree[childId].depth * 10,\n         zIndex: 30 - tree[childId].depth, \n         height: 10\n      }))\n    }\n    return tree[id].children.map(childId =\u003e ({ id: childId, isSticky: false, height: 10 }))\n};\n\n/**\n * Here, style will include the styles to make the node sticky in the right position. \n */\nconst rowRenderer = ({ id, style }) =\u003e {\n  return \u003cdiv className=\"row\" style={style}\u003e{mytree[id].name}\u003c/div\u003e;\n};\n```\n\nBe sure to pass a sticky root node to StickyTree if it should be sticky\n\n```js\n\u003cStickyTree\n    className=\"treee\"\n    root={{ id: 'root', isSticky: true, stickyTop: 0, zIndex: 3, height: 10 }}\n    rowRenderer={rowRenderer}\n    getChildren={getChildren}\n/\u003e\n```\n\n## Dynamic Height Container\n\nIf the containing element of your tree has a dynamic height, you can use [react-measure](https://github.com/souporserious/react-measure) to provide the width and height to sticky-tree so that it can resize to the available width.\n\nFor Simplicity, `react-virtualized-sticky-tree` includes a component which uses react-measure to achieve this:\n\n```js\nimport { AutoSizedStickyTree } from 'react-virtualized-sticky-tree';\n\n\u003cAutoSizedStickyTree\n    className=\"tree\"\n    root={{ id: 'root', isSticky: true, stickyTop: 0, zIndex: 3, height: 30 }}\n    rowRenderer={rowRenderer}\n    getChildren={getChildren}\n    ...\n/\u003e\n```\n\nIf you want to do this yourself, you can install react-measure:\n\n`npm install react-measure --save`\n\nas a HOC:\n```js\nconst MeasuredTree = withContentRect('bounds')(({ measureRef, measure, contentRect }) =\u003e (\n  \u003cdiv ref={measureRef} className=\"sticky-wrapper\"\u003e\n    \u003cStickyTree\n      root={{id: 0}}\n      getChildren={getChildren}\n      rowRenderer={rowRenderer}\n      renderRoot={true}\n      width={contentRect.bounds.width}\n      height={contentRect.bounds.height}\n      overscanRowCount={20}\n    /\u003e\n  \u003c/div\u003e\n));\n```\nor within render()\n\n```js\n\u003cMeasure\n    bounds={true}\n    onResize={(contentRect) =\u003e {this.setState({ dimensions: contentRect.bounds });}}\n\u003e\n    {({ measureRef }) =\u003e \n          \u003cdiv ref={measureRef} className=\"sticky-tree-wrapper\"\u003e\n              \u003cStickyTree\n                  width={this.state.dimensions.width}\n                  height={this.state.dimensions.height}\n                  root={{id: 0 }}\n                  renderRoot={true}\n                  rowRenderer={this.rowRenderer}\n                  getChildren={this.getChildren}\n                  overscanRowCount={20}\n              /\u003e\n          \u003c/div\u003e\n    }\n\u003c/Measure\u003e\n```\n\n## Supported Browsers\n\n* Tested with Chrome 59+\n* Tested with Safari 11+\n* Tested with Firefox 54+\n\nRendering tree structures is supported in all modern browsers. For position: sticky, See http://caniuse.com/#search=position%3Asticky\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarchaos%2Freact-virtualized-sticky-tree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarchaos%2Freact-virtualized-sticky-tree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarchaos%2Freact-virtualized-sticky-tree/lists"}