React-sortable-hoc: Location of "Sortable Table Rows Code with react-virtualized" example

[NickEmpetvee]

Hi there. I'm looking for the source for this example. Can anyone advise where I might find it? See image...

Also, is there a function for dynamically changing the data of a dragged element based on its order in the list?

[MetalWeirdo]

I believe that example is here

[Sionicmon]

Its not the example code from react-sortable-hoc but i did it on my own. Maybe it will help you ;)

import React from "react"
import PropTypes from "prop-types"
import {SortableContainer, SortableElement, SortableHandle, arrayMove} from 'react-sortable-hoc';
import {Table, Column, defaultTableRowRenderer, AutoSizer} from 'react-virtualized';

const ROW_HEIGHT = 30;

const SortableTable = SortableContainer(Table)
const SortableTableRowRenderer = SortableElement(defaultTableRowRenderer)


class RouteEdit extends React.Component {
  state = {
    cols: [
      {dataKey: 'col1', label: 'Column1'},
      {dataKey: 'col2', label: 'Column2'},
      {dataKey: 'col3', label: 'Column13},
    ],
    rows: [
      {col1: 'row1 col1', col2: 'row1 col2', col3: 'row1 col3'},
      {col1: 'row2 col1', col2: 'row2 col2', col3: 'row2 col3'},
      {col1: 'row3 col1', col2: 'row3 col2', col3: 'row3 col3'},
    ],
  };

onSortEnd = ({oldIndex, newIndex}) => {
    this.setState(state => ({
      rows: arrayMove(state.rows, oldIndex, newIndex),
    }));

  };
  render() {
    const {rows, cols} = this.state;
    return (
      <div style={{height:"300px"}}>
      <AutoSizer>
        {({width, height}) => (
          <SortableTable
            lockAxis="y"
            onSortEnd={this.onSortEnd}
            width={width}
            height={height}
            headerHeight={ROW_HEIGHT}
            rowHeight={ROW_HEIGHT}
            rowCount={rows.length}
            rowGetter={({index}) => rows[index]}
            rowRenderer={params => (<SortableTableRowRenderer {...params} />)}
          >
            {cols.map(col => (
              <Column
                {...col}
                key={col.dataKey}
                width={width/cols.length}
              />
            ))}
          </SortableTable>
        )}
      </AutoSizer>
      </div>
    );
  }
}

export default RouteEdit

[theEmilyRSmith]

this worked great for anyone having trouble with the autosizer

[NickEmpetvee]

Thanks guys!

[gabrielwr]

~If anyone lands here, the example for this component is located here 😃~
EDIT: This seems to have moved again.

[NickEmpetvee]

@gabrielwr thank you.