dfws-react-table-drag-select

Fork

https://github.com/mcjohnalds/react-table-drag-select

• Ultra fast
• Good for user inputted timetables
• Less than 4kB when gzipped
• Functionally and stylistically flexible

Installation

npm install -S dfws-react-table-drag-select

Basic example

This code was used to make the gif you see above. See the demo for advanced usage.

import React from 'react'
import TableDragSelect from 'dfws-react-table-drag-select'
import 'dfws-react-table-drag-select/style.css'

class App extends React.Component {
  state = {
    cells: [
      [{value: false}, {value: false}, {value: false}, {value: false}, {value: false}, {value: false}],
      [{value: false}, {value: false}, {value: false}, {value: false}, {value: false}, {value: false}],
      [{value: false}, {value: false}, {value: false}, {value: false}, {value: false}, {value: false}],
      [{value: false}, {value: false}, {value: false}, {value: false}, {value: false}, {value: false}],
      [{value: false}, {value: false}, {value: false}, {value: false}, {value: false}, {value: false}],
      [{value: false}, {value: false}, {value: false}, {value: false}, {value: false}, {value: false}],
      [{value: false}, {value: false}, {value: false}, {value: false}, {value: false}, {value: false}]
    ]
  }

  render = () => (
    <TableDragSelect
      value={this.state.cells}
      onChange={cells => this.setState({ cells })}
    >
      <tr>
        <td />
        <td />
        <td />
        <td />
        <td />
        <td />
      </tr>
      <tr>
        <td />
        <td />
        <td />
        <td />
        <td />
        <td />
      </tr>
      <tr>
        <td />
        <td />
        <td />
        <td />
        <td />
        <td />
      </tr>
      <tr>
        <td />
        <td />
        <td />
        <td />
        <td />
        <td />
      </tr>
      <tr>
        <td />
        <td />
        <td />
        <td />
        <td />
        <td />
      </tr>
      <tr>
        <td />
        <td />
        <td />
        <td />
        <td />
        <td />
      </tr>
      <tr>
        <td />
        <td />
        <td />
        <td />
        <td />
        <td />
      </tr>
    </TableDragSelect>
  )
}