I'm relatively new to javascript and pletely new to react.js. I have been assigned a task to create resizable table columns in react.js. I have found column-resizer which can achieve that task but I"m unable to make it work. I'm unable to extract the DOM element using ref in react because of which resizing is not working. Could someone please help me out with this and let me know what I'm doing wrong. Below is the code that I'm using.

import ColumnResizer from 'column-resizer';
import React, { Component } from 'react';

class SomeComponent extends Component {

constructor(props) {
    super(props)

    this.table = React.createRef()

    thisponentDidMount = thisponentDidMount.bind(this)
    thisponentWillMount = thisponentWillMount.bind(this)
    thisponentDidUpdate = thisponentDidUpdate.bind(this)
    thisponentWillUpdate = thisponentWillUpdate.bind(this)
    this.enableResize = this.enableResize.bind(this);
    this.disableResize = this.disableResize.bind(this);
}

ponentDidMount() {
    if (this.props.resizable) {
        this.enableResize();
    }
}

ponentWillUnmount() {
    if (this.props.resizable) {
        this.disableResize();
    }
}

ponentDidUpdate() {
    if (this.props.resizable) {
        this.enableResize();
    }
}

ponentWillUpdate() {
    if (this.props.resizable) {
        this.disableResize();
    }
}

enableResize() {
    const normalRemote = this.table.current;  // normalTable is always null, because this.table is null too.
    const options = this.props.resizerOptions;
    options.remoteTable = normalRemote;
    if (!this.resizer) {
        this.resizer = new ColumnResizer(
            ReactDOM.findDOMNode(this)
                .querySelector(`#${this.headerId}`), options);
    } else {
        this.resizer.reset(options);
    }
}

disableResize() {
    if (this.resizer) {

        this.resizer.reset({ disable: true });
    }
}

render{
    return (
        <Table ref={this.table} >
        </Table>
    );
}
}

I'm relatively new to javascript and pletely new to react.js. I have been assigned a task to create resizable table columns in react.js. I have found column-resizer which can achieve that task but I"m unable to make it work. I'm unable to extract the DOM element using ref in react because of which resizing is not working. Could someone please help me out with this and let me know what I'm doing wrong. Below is the code that I'm using.

import ColumnResizer from 'column-resizer';
import React, { Component } from 'react';

class SomeComponent extends Component {

constructor(props) {
    super(props)

    this.table = React.createRef()

    this.ponentDidMount = this.ponentDidMount.bind(this)
    this.ponentWillMount = this.ponentWillMount.bind(this)
    this.ponentDidUpdate = this.ponentDidUpdate.bind(this)
    this.ponentWillUpdate = this.ponentWillUpdate.bind(this)
    this.enableResize = this.enableResize.bind(this);
    this.disableResize = this.disableResize.bind(this);
}

ponentDidMount() {
    if (this.props.resizable) {
        this.enableResize();
    }
}

ponentWillUnmount() {
    if (this.props.resizable) {
        this.disableResize();
    }
}

ponentDidUpdate() {
    if (this.props.resizable) {
        this.enableResize();
    }
}

ponentWillUpdate() {
    if (this.props.resizable) {
        this.disableResize();
    }
}

enableResize() {
    const normalRemote = this.table.current;  // normalTable is always null, because this.table is null too.
    const options = this.props.resizerOptions;
    options.remoteTable = normalRemote;
    if (!this.resizer) {
        this.resizer = new ColumnResizer(
            ReactDOM.findDOMNode(this)
                .querySelector(`#${this.headerId}`), options);
    } else {
        this.resizer.reset(options);
    }
}

disableResize() {
    if (this.resizer) {

        this.resizer.reset({ disable: true });
    }
}

render{
    return (
        <Table ref={this.table} >
        </Table>
    );
}
}

• javascript
• reactjs

2 Answers 2

There isn't a need to create a ref and use it for the table as far as I know. To make column-resizer work the main point to get right is to make sure you provide the library the correct ID or class so it knows which table to act upon.

I've managed to create a working example using the following two ponents. The first one to render the app.

import React from "react";
import ReactDOM from "react-dom";
import ReactTable from "./ReactTable";
import "./styles.css";

const App = () => (
  <div className="App">
    <ReactTable resizable={true} resizerOptions={{}} />
  </div>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

The second one which is responsible for rendering the table and it's resizing functionality.

import React, { Component } from "react";
import ReactDOM from "react-dom";
import ColumnResizer from "column-resizer";

class ReactTable extends Component {
  constructor(props) {
    super(props);
    this.tableSelector = "#somethingUnique";
  }

  ponentDidMount() {
    if (this.props.resizable) {
      this.enableResize();
    }
  }

  ponentWillUnmount() {
    if (this.props.resizable) {
      this.disableResize();
    }
  }

  ponentDidUpdate() {
    if (this.props.resizable) {
      this.enableResize();
    }
  }

  ponentWillUpdate() {
    if (this.props.resizable) {
      this.disableResize();
    }
  }

  enableResize() {
    const options = this.props.resizerOptions;
    if (!this.resizer) {
      this.resizer = new ColumnResizer(
        ReactDOM.findDOMNode(this).querySelector(`${this.tableSelector}`),
        options
      );
    } else {
      this.resizer.reset(options);
    }
  }

  disableResize() {
    if (this.resizer) {
      this.resizer.reset({ disable: true });
    }
  }

  render() {
    return (
      <div>
        <table id="somethingUnique" cellSpacing="0">
          <tr>
            <th>Name</th>
            <th>Age</th>
          </tr>
          <tr>
            <td>Roy</td>
            <td>32</td>
          </tr>
          <tr>
            <td>Erik</td>
            <td>47</td>
          </tr>
          <tr>
            <td>John</td>
            <td>21</td>
          </tr>
          <tr>
            <td>Sally</td>
            <td>28</td>
          </tr>
        </table>
      </div>
    );
  }
}

export default ReactTable;

Key is the following line that specifies the table to act upon this.tableSelector = "#somethingUnique"; and that it corresponds with the id or class of the table in your render function.

You can see it in action in this CodeSandbox.

So ref is a function that passes the element so it might look like this

<Table ref={table => this.table = table} />

Also, as a side note, react automatically binds this in lifecycle methods like ponentDidMount.