jeonbyeongmin / use-table-drag-select

A React hook for selecting table cells by dragging

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

export function Table() {
  const [ref, value] = useTableDragSelect([
    [false, false, false, false, false, false, false],
    [false, false, false, false, false, false, false],
    [false, false, false, false, false, false, false],
    [false, false, false, false, false, false, false],
    [false, false, false, false, false, false, false],
    [false, false, false, false, false, false, false],
  ]);

  return (
    <table ref={ref} className="timetable">
      <thead>
        <tr>
          <th></th>
          <th>Mon</th>
          <th>Tue</th>
          <th>Wed</th>
          <th>Thu</th>
          <th>Fri</th>
          <th>Sat</th>
          <th>Sun</th>
        </tr>
      </thead>
      <tbody>
        {value.map((row, rowIndex) => (
          <tr key={rowIndex}>
            <th>{rowIndex + 1}</th>
            {row.map((_, columnIndex) => (
              <td key={columnIndex} />
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
});

You can use a iterable value on render()

2. With complete table DOM

export function Table() {
  const [ref, value] = useTableDragSelect();

  return (
    <table ref={ref} className="timetable">
      <thead>
        <tr>
          <th></th>
          <th>Mon</th>
          <th>Tue</th>
          <th>Wed</th>
          <th>Thu</th>
          <th>Fri</th>
          <th>Sat</th>
          <th>Sun</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>1</th>
          <td />
          <td />
          <td />
          <td />
          <td />
          <td />
          <td />
        </tr>
        <tr>
          <th>2</th>
          <td />
          <td />
          <td />
          <td />
          <td />
          <td />
          <td />
        </tr>
        ...
      </tbody>
    </table>
  );
});

You should not put anything in useTableDragSelect

Demo

A minimal demo page can be found in demo directory.

Online demo is also available.

use-table-drag-select's Issues

번들링 환경 정리