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

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.

score 2 · Answer 1 · answered Aug 10 '19 at 13:05

2

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.

answered Aug 10 '19 at 13:05

Jean Flower

71
5

score 1 · Answer 2 · answered Jul 25 '20 at 15:29

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;
  }
}

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

2 Answers2