I'm trying to add a checkbox input to a cell

[hegelstad]

const data = [{
    name: 'Tanner Linsley',
    age: 26,
    friend: {
        name: 'Jason Maurer',
        age: 23
    }
},{
    name: 'Banner Dansley',
    age: 19,
    friend: {
        name: 'Jason Mraz',
        age: 30
    }
}]

const columns = [{
  header: 'Name',
  accessor: 'name' // String-based value accessors !
}, {
  header: 'Age',
  accessor: 'age',
  render: <input type="checkbox" checked="checked"/> // Custom cell components!
}, {
  header: 'Friend Name',
  accessor: 'friend.name' // Custom value accessors!
}, {
  header: 'Friend Age',
  //header: props => <span>Friend Age</span>, // Custom header components!
  accessor: 'friend.age'
}]

<ReactTable
     data={data}
     columns={columns}
     minRows={0}
/>

Result:

<div class="-td-inner">
    <input type="checkbox" value="on">   <----- should be rendered as <input type="checkbox" checked="checked"/>
</div>

[tannerlinsley]

Try checked={true}
On Fri, Nov 4, 2016 at 10:47 AM Nikolai Hegelstad notifications@github.com
wrote:

const data = [{
name: 'Tanner Linsley',
age: 26,
friend: {
name: 'Jason Maurer',
age: 23
}
},{
name: 'Banner Dansley',
age: 19,
friend: {
name: 'Jason Mraz',
age: 30
}
}]

const columns = [{
header: 'Name',
accessor: 'name' // String-based value accessors !
}, {
header: 'Age',
accessor: 'age',
render: // Custom cell components!
}, {
header: 'Friend Name',
accessor: 'friend.name' // Custom value accessors!
}, {
header: 'Friend Age',
//header: props => Friend Age, // Custom header components!
accessor: 'friend.age'
}]

Result:

<----- should be rendered as

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

[tannerlinsley]

Then to respond to changes, use onChange={() => {doSomething()}}
On Fri, Nov 4, 2016 at 11:23 AM Tanner Linsley tannerlinsley@gmail.com
wrote:

Try checked={true}
On Fri, Nov 4, 2016 at 10:47 AM Nikolai Hegelstad <
notifications@github.com> wrote:

const data = [{
name: 'Tanner Linsley',
age: 26,
friend: {
name: 'Jason Maurer',
age: 23
}
},{
name: 'Banner Dansley',
age: 19,
friend: {
name: 'Jason Mraz',
age: 30
}
}]

const columns = [{
header: 'Name',
accessor: 'name' // String-based value accessors !
}, {
header: 'Age',
accessor: 'age',
render: // Custom cell components!
}, {
header: 'Friend Name',
accessor: 'friend.name' // Custom value accessors!
}, {
header: 'Friend Age',
//header: props => Friend Age, // Custom header components!
accessor: 'friend.age'
}]

Result:

<----- should be rendered as

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

[hegelstad]

checked={true} doesn't change anything.

What am I supposed to put within:

onChange={(state, instance) => {

                }}

[tannerlinsley]

That is the callback for when the page and sorting changes. It is an
opportunity for you to fetch server side data. Use it with the 'manual'
prop.
On Sun, Nov 6, 2016 at 9:29 AM Nikolai Hegelstad notifications@github.com
wrote:

checked={true} doesn't change anything.

What am I supposed to put within:

onChange={(state, instance) => {

            }}

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
#13 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFUmCYH8m2RaI3RdhiLhYnm4W4sWvzfJks5q7gCHgaJpZM4KpwTg
.

[hegelstad]

Aha, I don't think i need to fetch server side data. I just want to be able to check checkboxes within the custom cell component, the checking doesn't have to be persisted across page reloads or component lifecycles, but i would like to be able to access them from the application across paging.

Maybe it is wise to save the state of the checkbox within the data object? Do i change the state with onChange? And would you send me in the right direction to extract custom cell value changes?

[tannerlinsley]

Yes. In each row of the data, keep a property to track the check box state.
To track changes to the check box, just use an on change on the check box
and update that row.

React Table doesn't track state for anything except paging and sorting. The
rest is up to you. You can use your own components in the header and render
column properties, so you have full control.
On Sun, Nov 6, 2016 at 9:37 AM Nikolai Hegelstad notifications@github.com
wrote:

Aha, I don't think i need to fetch server side data. I just want to be
able to check checkboxes within the custom cell component, the checking
doesn't have to be persisted across page reloads or component lifecycles,
but i would like to be able to access them from the application across
paging.

Maybe it is wise to save the state of the checkbox within the data object?
Do i change the state with onChange? And would you send me in the right
direction to extract custom cell value changes?

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
#13 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFUmCVGtif42aThEYxq-QcCztRQsU_1tks5q7gI4gaJpZM4KpwTg
.

[hegelstad]

Thanks for taking your time!

[tannerlinsley]

You bet!
On Sun, Nov 6, 2016 at 9:54 AM Nikolai Hegelstad notifications@github.com
wrote:

Thanks for taking your time!

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
#13 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFUmCUTPsCS_6RWD-e8sAYGEOcxWZt9Jks5q7gYtgaJpZM4KpwTg
.