https://github.com/marchaos/react-virtualized-sticky-tree
A React component for efficiently rendering tree like structures with support for position: sticky
https://github.com/marchaos/react-virtualized-sticky-tree
position react sticky sticky-headers stickyheader tree virtual virtualized virtualizedlist
Last synced: 6 months ago
JSON representation
A React component for efficiently rendering tree like structures with support for position: sticky
- Host: GitHub
- URL: https://github.com/marchaos/react-virtualized-sticky-tree
- Owner: marchaos
- License: mit
- Created: 2017-06-30T20:03:20.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-03-12T11:20:44.000Z (over 1 year ago)
- Last Synced: 2024-12-06T20:10:55.960Z (10 months ago)
- Topics: position, react, sticky, sticky-headers, stickyheader, tree, virtual, virtualized, virtualizedlist
- Language: JavaScript
- Size: 1.42 MB
- Stars: 153
- Watchers: 7
- Forks: 12
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-virtualized-sticky-tree
A 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).
## Demo
https://marchaos.github.io/react-virtualized-sticky-tree/
## Getting Started
`npm install react-virtualized-sticky-tree --save`
## Usage
## Basic Example
```js
import { StickyTree } from 'react-virtualized-sticky-tree';
const tree = {
root: { name: 'Root', children: ['child1', 'child2', 'child3'], depth: 0 },
child1: { name: 'Child 1', children: ['child4'], depth: 1 },
child2: { name: 'Child 2', depth: 2 },
child3: { name: 'Child 3', depth: 2 },
child4: { name: 'Child 4', depth: 3 },
};
const getChildren = (id) => {
if (tree[id].children) {
return tree[id].children.map(id => ({ id, height: 30, isSticky: true }));
}
};
const rowRenderer = ({ id, style }) => {
const node = tree[id];
return
{node.name}
};
render() {
return (
);
)
```
## Nested Sticky Header Styles
StickyTree 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.
Every 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.
An implementation of this would look like:
```js
const getChildren = (id) => {
if (shouldBeSticky(id)) {
return tree[id].children.map(childId => ({
id: childId,
isSticky: true,
stickyTop: tree[childId].depth * 10,
zIndex: 30 - tree[childId].depth,
height: 10
}))
}
return tree[id].children.map(childId => ({ id: childId, isSticky: false, height: 10 }))
};
/**
* Here, style will include the styles to make the node sticky in the right position.
*/
const rowRenderer = ({ id, style }) => {
return
{mytree[id].name};
};
```
Be sure to pass a sticky root node to StickyTree if it should be sticky
```js
```
## Dynamic Height Container
If 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.
For Simplicity, `react-virtualized-sticky-tree` includes a component which uses react-measure to achieve this:
```js
import { AutoSizedStickyTree } from 'react-virtualized-sticky-tree';
```
If you want to do this yourself, you can install react-measure:
`npm install react-measure --save`
as a HOC:
```js
const MeasuredTree = withContentRect('bounds')(({ measureRef, measure, contentRect }) => (
));
```
or within render()
```js
{this.setState({ dimensions: contentRect.bounds });}}
>
{({ measureRef }) =>
}
```
## Supported Browsers
* Tested with Chrome 59+
* Tested with Safari 11+
* Tested with Firefox 54+
Rendering tree structures is supported in all modern browsers. For position: sticky, See http://caniuse.com/#search=position%3Asticky