1

I am trying to implement fixed columns in my react-data-grid. I follow the example by adding locked: true but it doesn't work, so I also try to use a custom row rendered, like the other example.

I get _this.refs[i].setScrollLeft is not a function error. Trying the hacky comment on this same question also doesn't work for me (sorry not enought rep to comment!).

I also tried to create a custom cell render class, but still no luck. I also try to use refs the callback way instead:

class CellRenderer extends React.Component {    
  render() {
    return <ReactDataGrid.Cell {...this.props}/>
  }
};

class RowRenderer extends React.Component {
  static propTypes = {
    idx: React.PropTypes.string.isRequired
  };

  setScrollLeft = (scrollBy) => {
    // if you want freeze columns to work, you need to make sure you implement this as apass through
    this.row.setScrollLeft(scrollBy);
  };

  getRowStyle = () => {
    return {
      color: this.getRowBackground()
    };
  };

  getRowBackground = () => {
    return this.props.idx % 2 ?  'green' : 'blue';
  };

  render() {return (<div style={this.getRowStyle()}>
      <ReactDataGrid.Row 
        {...this.props}
        ref={r => { this.row = r; }}
        cellRenderer={CellRenderer}
      />
    </div>);
  }
};

Any help is much appreciated!

EDIT: Trying many things, still no luck, but I've figured out that the setScrollLeft method is never passed down to the Row component, so maybe it is indeed a problem with refs and/or props passed.

Community
  • 1
  • 1
gkri
  • 1,627
  • 3
  • 18
  • 27
  • what name did you gave to your ref before setting it to be a callback? – Diogo Cunha Jan 30 '17 at 17:52
  • Sorry, I don't understand the question. `RowRenderer` is a stateful compnent so I thought using `ref={r => { this.row = r; }}` is enough so I can call `this.row.setScrollLeft(scrollBy);`, isn't that right? – gkri Jan 31 '17 at 09:01

1 Answers1

0

I am not 100% sure what you meant by "fixed" columns, but if you want the size of the columns to be set by the software and not changed by the user, you can simply set resizable = false. Setting locked = true on the columns has the effect of "freezing" the column so that when you scroll, that particular columns stays there, which is probably not what you want.

hack_on
  • 2,532
  • 4
  • 26
  • 30
  • 1
    By fixed columns I mean that a few columns are fixed on the left side of the table when you scroll to the right. That's why I added the link to the repo, you can check the [example](http://adazzle.github.io/react-data-grid/examples.html#/fixed-cols). – gkri Mar 08 '17 at 14:39
  • @gkri I added this feature (locked=true) to a react app yesterday and it worked fine. We are using react 15.4.2, react-data-grid 2.0.16 and Chrome browser. – hack_on Mar 08 '17 at 22:00
  • thanks for your feedback! shorty after i posted my question i switched to another grid. When i find some time to test this one again i'll update my question :) – gkri Mar 10 '17 at 14:51