Linking an entry to another page

[chasen-bettinger]

Thanks for your superb work on this data table library.

I would like to link each row to its own page. I didn't see this function in the documentation so I thought I would ask. I assume if I want that feature I would need to fork and add it?

[imballinst]

Hello @chasen-bettinger, thanks for using my mini-library! :D

Each of the table column can contain any string, number, or a React Node. In this case, I think you want to "wrap" the column value with some kind of anchor tag? If yes, there are two options to achieve it. Let's say we have a table with these headers: username, realname, location, date, and score. We want to add an anchor tag to the username column.

1. Modify the cell property of the table header

// row, the parameter of the "cell" function property contains the columns of a table row
// this means we can also access row.realname, row.location, row.date, and row.score in this function
const header = [
  { title: 'Username', prop: 'username', cell: row => (<a href={`http://example.com/${row.username}`}>{row.username}</a>) },
  { title: 'Name', prop: 'realname' },
  { title: 'Location', prop: 'location' },
  { title: 'Test Date', prop: 'date' },
  { title: 'Score', prop: 'score'  }
];

body.push(
  {
    // because of the "cell" property function, the output will be <a href="http://example.com/john.cool">john.cool</a>
    username: 'john.cool',
    realname: 'John',
    location: 'Mars',
    date: 'June 5, 2018',
    score: 100
  }
);

2. Insert React Node as props to the table body (just like this example: https://imballinst.github.io/react-bs-datatable/)

// Note that the header doesn't have the "cell" property
const header = [
  { title: 'Username', prop: 'username' },
  { title: 'Name', prop: 'realname' },
  { title: 'Location', prop: 'location' },
  { title: 'Test Date', prop: 'date' },
  { title: 'Score', prop: 'score'  }
];

body.push(
  {
    username: (<a href="http://example.com/john.cool">john.cool</a>),
    realname: 'John',
    location: 'Mars',
    date: (<span><b>June 5, 2018</b></span>),
    score: 100
  }
);

I will try to make the docs and demo page better as well when I have time. If you have any more questions, feel free to ask :)

[chasen-bettinger]

@Imballinst

Hmm.. I don't really want to link the cell, I want to link the row.

For example in lines 25-27 in BodyRow.js, I want to wrap that in a link.

Current

 <tr className="tbody-tr-default">
      {row}
</tr>

Desired

<Link to={data.link}>
   <tr className="tbody-tr-default">
      {row}
   </tr>
</Link>

[imballinst]

aaah, I see, my bad. yeah, currently there's no functionality for it (row linking) yet.

I think you can use the same style like the cell property and replace line 24-28 of BodyRow.js with this:

const rowWrapper = tableHeader[i].row;
const baseRow = (
  <tr className="tbody-tr-default">
    {row}
  </tr>
);

if (rowWrapper === undefined) {
  return baseRow;
} else {
  return rowWrapper(baseRow);
}

That way, it will be more flexible to wrap it with anything, not only just <Link> tags, IMO. I'm not sure whether to wrap the <tr> or wrap its children, though. What do you think?

[chasen-bettinger]

@Imballinst I could try it out and make a pull request. Does that sound like a good plan of action?

[imballinst]

I think it's good, thanks!

[imballinst]

Fixed in https://github.com/Imballinst/react-bs-datatable/pull/53.