React-sortable-tree: Add title attribute to title

Created on 14 Jul 2017  路  2Comments  路  Source: frontend-collective/react-sortable-tree

Because of the nature of things this could be used for, some of the titles could get long. What I'd like to do is to add ellipsis to the node title, which I can do with css easily, but, how can I also add the node title, to the title attribute for the title element e.g.

<span class="rst__rowTitle" title="My Title">My Title</span>

Is this possible?

question

Most helpful comment

For simplicity's sake, I would recommend avoiding the customNodeRenderer if you can help it.
In your nodes, I would recommend setting title to an element with the properties you describe, and the raw text as a different property in the node.
For example:

{
  title: (
    <div
      style={{
        width: 200,
        overflow: 'hidden',
        textOverflow: 'ellipsis',
      }}
      title="My Title"
    >
      My Title
    </div>
  ),
  rawTitle: 'My Title',
}

All 2 comments

For simplicity's sake, I would recommend avoiding the customNodeRenderer if you can help it.
In your nodes, I would recommend setting title to an element with the properties you describe, and the raw text as a different property in the node.
For example:

{
  title: (
    <div
      style={{
        width: 200,
        overflow: 'hidden',
        textOverflow: 'ellipsis',
      }}
      title="My Title"
    >
      My Title
    </div>
  ),
  rawTitle: 'My Title',
}

In v1.1.0 I added props to the defaultNodeRenderer that would allow you to override the title part of the node without having to put react elements into your js objects.
Take a look at the "Modify Nodes" example and its source to get an idea of how to use it:
https://fritz-c.github.io/react-sortable-tree/storybook/?selectedKind=Basics&selectedStory=Modify%20nodes&full=0&down=1&left=1&panelRight=0&downPanel=storybook%2Fnotes%2Fpanel

Was this page helpful?
0 / 5 - 0 ratings

Related issues

oarashi picture oarashi  路  5Comments

anushkadoyan picture anushkadoyan  路  4Comments

vladimirsvsv77 picture vladimirsvsv77  路  5Comments

Suremotoo picture Suremotoo  路  4Comments

bigjujube picture bigjujube  路  4Comments