React-calendar-timeline: Feature Request: Allow any type of object to be rendered as and Item and Group Title

[aaronschwartz]

It would be nice to be able to render React Components as the Items and Group Titles.

At the very least it would be helpful to be able to render HTML so that the items can have line breaks in them.

Here is a nice project that uses cell renderers to render any type of content in a table cell: https://github.com/tannerlinsley/react-table

[dmr]

I think this not easy to do because the items are scaled depending on the width. But I agree it would be a cool feature. Maybe a customizable "tooltip" as a first step

[gyarasu]

Is it easy to put a link(<a>) to group cell?

For example, Adding 'href' property to object in groups array.

const groups = [
      {id: 1, title: 'group 1', href: 'http://example.com'}, // this group will be rendered as a link
      {id: 2, title: 'group 2'}
    ];

[signalwerk]

I think it would be good if we could do something like:

// Custom component for the Item rendered
class Item extends React.Component {
  render(){
    return <div styles="width: {this.props.width}">{this.props.item.title}</div>;
  }
};

// Timeline using a custom Item-Renderer
class Root extends React.Component {
  render(){
    return (
      <Timeline groups={groups}
                items={items}
                itemRenderer={<Item/>}
                />
    );
  }
}

That would help to make the Items as flexible as possible. @gyarasu and @TacticalCoding could solve their problem with it. right?

[dmr]

That would be great!

[gyarasu]

@signalwerk
Thank you very much for your response!

Unfortunately, it doesn't work.
'Item' component has never been rendered, as long as I try.

I want to know more about 'itemRenderer' property.
However, I can't find the information about that property(itemRenderer).
How do you know about 'itemRenderer'?

[signalwerk]

I'm sorry @gyarasu if I puzzled you. @dmr and me were suggesting how to handle that case. But it's not implemented yet. Sorry for any inconvenience.

[gyarasu]

@signalwerk
I see.
Sorry for my misunderstanding.
I'm looking forward to implementing this solution!

[mariusandra]

Hey, we already have itemRenderer since v0.13.0 and it is possible to give any React prop as the title of the group, as shown in the treeGroups demo (source).

So I'm closing this thread! 🎉

[dmr]

Very cool, thank you!