Selectable rows

[Vaevictus]

Hi there,

Is there any plan to implement a selectable row option natively into the reacttable component, or is this something I should be expected to implement myself with an additional column?

Cheers

[tannerlinsley]

Yes. But, whether we do it internally or as a plugin, I'm not sure.

What it really is under the hood is a custom cell and header that provide a
check box that are bound to an internal or external model, either with on
click callbacks or an on change callback. Its always a question of whether
the table should handle the state of those boxes or if the user should.

I believe it's both but in still architecting how that will work. Do you
have any preferences on how it could be implemented?
On Tue, Nov 1, 2016 at 4:05 AM CW notifications@github.com wrote:

Hi there,

Is there any plan to implement a selectable row option natively into the
reacttable component, or is this something I should be expected to
implement myself with an additional column?

Cheers

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#10, or mute the
thread
https://github.com/notifications/unsubscribe-auth/AFUmCUKLqKf-u-qH9bp8zeIAlmnnsfapks5q5w7LgaJpZM4Kl8DE
.

[Vaevictus]

I've just implemented it myself by adding a column with a custom render function that adds the checkbox, works ok.
Your component is nice and flexible, I like it. I think it needs more configurable props on the column though. I think render should be replaced with cellRender, and an additional prop for headerRender to allow custom rendering of the header (for example a select all checkbox). I would also like to see column prop for onClick and onHover callbacks, and being able to specify width and maxWidth as props. Apart from those "issues" I was able to swap out my material-ui table for your react-table fairly easily and I am a lot happier with how it works. Working with your table felt a lot like working with the ExtJs grid; awesome.

[tannerlinsley]

Good news! You can already do custom headers:

columns = [{
  header: (props) => <span>My Custom Header!</span>
}]

As for other props and hook points, I'd love to discuss how we can execute on that.