Why aren't these react-data-grid columns resizable? - react-data-grid

Question

I'd like to have a react-data-grid with editable data and resizable columns. Only the last column of my example can be resized.
I have combined 'Basic Editing' and 'Column Resizing' from https://adazzle.github.io/react-data-grid/docs/examples/column-resizing.
import React from 'react';
import ReactDataGrid from 'react-data-grid';
const defaultColumnProperties = {
editable: true,
resizable: true,
width: 120,
};
const columns = [
{ key: 'id', name: 'ID' },
{ key: 'title', name: 'Title' },
{ key: 'complete', name: 'Complete' },
].map(c => ({ ...c, ...defaultColumnProperties }));;
const rows = [
{ id: 0, title: 'Task 1', complete: 20 },
{ id: 1, title: 'Task 2', complete: 40 },
];
class Example extends React.Component {
state = { rows };
onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
this.setState(state => {
const rows = state.rows.slice();
for (let i = fromRow; i <= toRow; i++) {
rows[i] = { ...rows[i], ...updated };
}
return { rows };
});
};
render() {
return (
<ReactDataGrid
columns={columns}
rowGetter={i => this.state.rows[i]}
rowsCount={this.state.rows.length}
minHeight={500}
onColumnResize={(idx, width) =>
console.log(`Column ${idx} has been resized to ${width}`)
}
onGridRowsUpdated={this.onGridRowsUpdated}
enableCellSelect
/>
);
}
}
I expect to be able to grab the vertical separator between column 1 and 2, and drag to widen column 1, but the only grabbable column separator is after the last column, and so the only column I can resize is the last column.

Answer 1

Add this line to index.html
<link rel="stylesheet" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
Discovered by diffing another project with working column resizing and this problem project.

Answer 2

While adding Bootstrap CSS does resolve the issue, the simpler solution is to just add the piece of the BS CSS that is needed to regain the box borders:
styles.css
* {
box-sizing: border-box;
}
I just scoped it to the component that is using react-data-grid like so:
styles.scss
#myComponent {
* {
box-sizing: border-box;
}
}