dfws-react-table-drag-select

React component for drag selecting table cells

Usage no npm install needed!

<script type="module">
  import dfwsReactTableDragSelect from 'https://cdn.skypack.dev/dfws-react-table-drag-select';
</script>

README

dfws-react-table-drag-select

Fork

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

Animation of the component

  • 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>
  )
}