T
TanStack•3y ago
genetic-orange

Adding a checkbox on each row

I am new to using this TanStack table. I want to add a checkbox to the beginning of each of my table rows. So I figured out how to display the checkbox in the first column like this: 
columnHelper.display({
        id: 'actions',
        header: 'Select',
        cell: (props) => (
            <input type="checkbox" className={'form-check-input'} />
        )
    }),
columnHelper.display({
        id: 'actions',
        header: 'Select',
        cell: (props) => (
            <input type="checkbox" className={'form-check-input'} />
        )
    }),
Now I need to figure out how to get a unique name and ID added to the checkbox input on each row. I couldn't find an example of that in the documentation.
1 Reply
genetic-orange
genetic-orangeOP•3y ago
I was able to figure this out by consoling out the props object from cell. Here is what I did: 
columnHelper.display({
        id: 'actions',
        header: 'Select',
        cell: (props) => {
            const id = props.row.id;
            return (
                <input
                    type="checkbox"
                    id={`selectCustomer-${id}`}
                    name={`selectCustomer-${id}`}
                    className={'form-check-input'}
                />
            );
        }
    }),
columnHelper.display({
        id: 'actions',
        header: 'Select',
        cell: (props) => {
            const id = props.row.id;
            return (
                <input
                    type="checkbox"
                    id={`selectCustomer-${id}`}
                    name={`selectCustomer-${id}`}
                    className={'form-check-input'}
                />
            );
        }
    }),

Did you find this page helpful?