score:4

Accepted answer

you need to provider the container to the sortable component to which it must restrict the sortableelement when using 3rd party libraries for rendering using the getcontainer prop.

as per the react-sortable-hoc documentation:

getcontainer is an optional function to return the scrollable container element. this property defaults to the sortablecontainer element itself or (if usewindowasscrollcontainer is true) the window. use this function to specify a custom container object (eg this is useful for integrating with certain 3rd party components such as flextable). this function is passed a single parameter (the wrappedinstance react element) and it is expected to return a dom element.

now since you cannot pass a direct ref to the child, you can write a small wrapper over the table component before passing it to the hoc

const mytable = ({ tableref, ...rest }) => {
    return <table ref={this.props.tableref} {...rest} />;
}
const sortabletable = sortablecontainer(mytable);
const sortabletablerowrenderer = sortableelement(defaulttablerowrenderer);

/**
 * define the table schema
 */
const schema = [
  { datakey: "col1", label: "column 1" },
  { datakey: "col2", label: "column 2" }
];

/**
 * generate row data according to the schema above
 * @param {*} rowcount
 */
function generaterows(rowcount) {
  const rows = [];
  for (let i = 0; i < rowcount; i++) {
    rows.push({ col1: i, col2: i * i });
  }
  return rows;
}

class mysortabletable extends component {
  state = {
    schema,
    rows: generaterows(200)
  };

  onsortend = ({ oldindex, newindex }) => {
    this.setstate(({ rows }) => ({
      rows: arraymove(rows, oldindex, newindex)
    }));
  };

  rowrenderer = props => {
    return <sortabletablerowrenderer {...props} />;
  };

  getrow = ({ index }) => {
    const { rows } = this.state;
    return rows[index];
  };

  render() {
    const { rows, schema } = this.state;

    return (
      <sortabletable
        width={500}
        height={500}
        headerheight={32}
        rowheight={32}
        tableref={ref => (this.tableref = ref)}
        getcontainer={() => reactdom.finddomnode(this.tableref.grid)}
        rowcount={rows.length}
        rowgetter={this.getrow}
        onsortend={this.onsortend}
        rowrenderer={this.rowrenderer}
      >
        {schema.map(col => (
          <column {...col} key={col.datakey} width={100} />
        ))}
      </sortabletable>
    );
  }
}

working demo


Related Query

More Query from same tag