{group.tip}
-Second filter
} -``` - -And add `rightTitle` prop to the groups objects: - -```js -{ - id: 1, - title: 'group 1', - rightTitle: 'additional info about group 1' -} -``` - -## The timeline header doesn't fix to the top of the container when I scroll down. - -There are two causes of this: - -* you are passing `stickyHeader={false}` to the timeline component. The header by default has sticky behavior unless you tell it not to using this prop. -* the browser you are viewing the timeline in doesn't support `position: sticky`. In this scenario, you will need to polyfill this behavior using the `headerRef`. - -In this example, we use [stickyfill](https://github.com/wilddeer/stickyfill) as our sticky polyfill - -```jsx -// add a handler in your parent component that accepts a DOM element -// with this element, pass the element into a polyfill library - -handleHeaderRef = (el) => { - // polyfill dom element with stickyfill - Stickyfill.addOne(el) -} - -// in render, pass this handler to the `headerRef` prop: - -render() { -{group.tip}
+{item.itemProps['data-tip']}
- //{item.itemProps['data-tip']}
+ //| Name | Metadata |
{item.itemProps['data-tip']}
- //| {group.title} | -Another Cell | -
| Name | Metadata |
{item.itemProps['data-tip']}
+ //| {group.title} | +Another Cell | +
-
- stickyOffset set
- to 100, meaning that the header will stick 100px from the
- top. This is useful for example if you already have a sticky navbar.
-