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

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

Basic example

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

1import React from 'react'
2import TableDragSelect from 'dfws-react-table-drag-select'
3import 'dfws-react-table-drag-select/style.css'
4
5class App extends React.Component {
6  state = {
7    cells: [
8      [{value: false}, {value: false}, {value: false}, {value: false}, {value: false}, {value: false}],
9      [{value: false}, {value: false}, {value: false}, {value: false}, {value: false}, {value: false}],
10      [{value: false}, {value: false}, {value: false}, {value: false}, {value: false}, {value: false}],
11      [{value: false}, {value: false}, {value: false}, {value: false}, {value: false}, {value: false}],
12      [{value: false}, {value: false}, {value: false}, {value: false}, {value: false}, {value: false}],
13      [{value: false}, {value: false}, {value: false}, {value: false}, {value: false}, {value: false}],
14      [{value: false}, {value: false}, {value: false}, {value: false}, {value: false}, {value: false}]
15    ]
16  }
17
18  render = () => (
19    <TableDragSelect
20      value={this.state.cells}
21      onChange={cells => this.setState({ cells })}
22    >
23      <tr>
24        <td />
25        <td />
26        <td />
27        <td />
28        <td />
29        <td />
30      </tr>
31      <tr>
32        <td />
33        <td />
34        <td />
35        <td />
36        <td />
37        <td />
38      </tr>
39      <tr>
40        <td />
41        <td />
42        <td />
43        <td />
44        <td />
45        <td />
46      </tr>
47      <tr>
48        <td />
49        <td />
50        <td />
51        <td />
52        <td />
53        <td />
54      </tr>
55      <tr>
56        <td />
57        <td />
58        <td />
59        <td />
60        <td />
61        <td />
62      </tr>
63      <tr>
64        <td />
65        <td />
66        <td />
67        <td />
68        <td />
69        <td />
70      </tr>
71      <tr>
72        <td />
73        <td />
74        <td />
75        <td />
76        <td />
77        <td />
78      </tr>
79    </TableDragSelect>
80  )
81}