V7 column resize bugs

[igoriok1994]

Hi,

In V7 canary 16 now supported column width in percents. That's nice.

After some testing I found bug.

Steps:

1. Dynamically set column width from props

<DataGrid
    columns={...}
>

2. Do manual resize (adjust column width with mouse)
3. Update grid columns prop (like in Step 1.). Now columns will not react on width property...

Here is the video report:

https://youtu.be/gGtp1-TsTx8

Here is the code:

require('!style!css!sass!./Temp_i_3.scss');

import React, { PureComponent } from 'react';
import _ from 'lodash';
import 'rdg.v7/dist/react-data-grid.css';
import DataGrid from 'rdg.v7';
import { AutoSizer } from 'react-virtualized';
import { Button } from '@c/button';

class Temp_i_3 extends PureComponent {
	constructor() {
		super();

		this.state = {
			cols: [
				{
					key: 'c1',
					name: 'c1',
					resizable: true,
					width: '15%'
				},
				{
					key: 'c2',
					name: 'c2',
					resizable: true
				},
				{
					key: 'c3',
					name: 'c3',
					resizable: true
				}
			]
		};
	}

	componentWillUnmount() {
		this._mounted = false;
	}

	componentDidMount() {
		this._mounted = true;
	}

	setRand1 = () => {
		let v = Math.floor(Math.random() * 400) + 50;

		let cols = _.cloneDeep(this.state.cols);
		cols[0].width = v;

		console.log("new width: ", v);

		this.setState({ cols });
	}

	setRand2 = () => {
		let v = Math.floor(Math.random() * 50) + 10;

		let cols = _.cloneDeep(this.state.cols);
		cols[0].width = `${v}%`;

		console.log("new width: ", `${v}%`);

		this.setState({ cols });
	}

	render() {
		return (
			<div className='ST_H100 ST_W100'>
				<AutoSizer>
					{({ height, width }) => (
						<React.Fragment>
							<DataGrid
								width={width}
								height={height - 35}
								columns={this.state.cols}
								rows={_.map(new Array(200), (v,i) => {
									return {
										c1: i,
										c2: i,
										c3: i
									};
								})}
							/>
							<div className='ST_ROW ST_MG-T' style={{width}}>
								<Button onClick={this.setRand1}>
									set random px width
								</Button>
								<Button onClick={this.setRand2}>
									set random % width
								</Button>
							</div>
						</React.Fragment>
					)}
				</AutoSizer>
			</div>
		);
	}
}

export default Temp_i_3;

[igoriok1994]

Up

[igoriok1994]

Any news? :)

@amanmahajan7

[amanmahajan7]

This needs further investigation for a possible solution.

[igoriok1994]

Also, (V7 canary 16):

onColumnResize callback is called, when actual column size is lower than min column size

[djung31]

Any update on that PR?

[chriswalz-bg]

I'm on version ^7.0.0-canary.41 and onColumnResize is called many times while changing the width rather than once when you let go of the mouse button. What I believe is the correct behavior is shown in this coder pad CoderPad (version 5)

[drunkenplatypus]

@amanmahajan7 Why did the PR end up being closed? Is there an alternative solution in the pipeline? Cheers

[highwaycoder]

any update on this issue, can we do something to help?

[faithod]

any updates on this issue?

[amanmahajan7]

We haven't found a good solution to this problem yet. We are open to suggestions. In the meantime you can add a key and reset the key when width is changed