Custom cell doesn't render anything?

[cbll]

I've been trying to make a custom cell, as the array which is fed to the Reactable component doesn't quite fit this specific cell(it's nested 2 objects deep, so it's a bit difficult to pull out). I figured I'd make a difference cell, and throw in my own object or data.

But it doesn't seem like any custom rendering of the cells are working?

For example, I just wanted to see if i could change the styling of the cell. But even this doesn't change it:

        const columns = [{
            header: 'Address',
            accessor: 'addr',
        }, {
            header: 'OS',
            accessor: 'osType',
        }, {
            header: 'Software',
            Cell: row => (
                <div
                    style={{
                        width: '100%',
                        height: '100%',
                        backgroundColor: '#912a2b',
                        borderRadius: '2px'
                    }}>

                </div>
            )
        }];

The header is indeed "Software" but nothing is changed in each row; I've tried throwing in a JSX class that returns a div with some content, but to no luck it doesn't return anything. I think I've misunderstood how cells are rendered in a custom fashion? Is it because my data isn't a part of the data that is passed to the table itself, in the return function?

[robcalcroft]

Does the container have an absolute width? Try changing width and height to px or em values to test this.

[cbll]

@robcalcroft seems as if I didn't quite get the purpose of the row, and that the data was passed to row.row.accessor - I got it working after passing data from row :) Thanks