use-table-drag-select

React hook to select table by drag

• Super simple
• useful in implementing a timetable

Installation

npm i use-table-drag-select

yarn add use-table-drag-select

Usage

All you have to do is add a ref

1. With initial table values

1export function Table() {
2  const [ref, value] = useTableDragSelect([
3    [false, false, false, false, false, false, false],
4    [false, false, false, false, false, false, false],
5    [false, false, false, false, false, false, false],
6    [false, false, false, false, false, false, false],
7    [false, false, false, false, false, false, false],
8    [false, false, false, false, false, false, false],
9  ]);
10
11  return (
12    <table ref={ref} className="timetable">
13      <thead>
14        <tr>
15          <th></th>
16          <th>Mon</th>
17          <th>Tue</th>
18          <th>Wed</th>
19          <th>Thu</th>
20          <th>Fri</th>
21          <th>Sat</th>
22          <th>Sun</th>
23        </tr>
24      </thead>
25      <tbody>
26        {value.map((row, rowIndex) => (
27          <tr key={rowIndex}>
28            <th>{rowIndex + 1}</th>
29            {row.map((_, columnIndex) => (
30              <td key={columnIndex} />
31            ))}
32          </tr>
33        ))}
34      </tbody>
35    </table>
36  );
37});

You can use a iterable value on render()

2. With complete table DOM

1export function Table() {
2  const [ref, value] = useTableDragSelect();
3
4  return (
5    <table ref={ref} className="timetable">
6      <thead>
7        <tr>
8          <th></th>
9          <th>Mon</th>
10          <th>Tue</th>
11          <th>Wed</th>
12          <th>Thu</th>
13          <th>Fri</th>
14          <th>Sat</th>
15          <th>Sun</th>
16        </tr>
17      </thead>
18      <tbody>
19        <tr>
20          <th>1</th>
21          <td />
22          <td />
23          <td />
24          <td />
25          <td />
26          <td />
27          <td />
28        </tr>
29        <tr>
30          <th>2</th>
31          <td />
32          <td />
33          <td />
34          <td />
35          <td />
36          <td />
37          <td />
38        </tr>
39        ...
40      </tbody>
41    </table>
42  );
43});

You should not put anything in useTableDragSelect

Demo

A minimal demo page can be found in demo directory.

Online demo is also available.