# react-table-drag-select

**Repository Path**: mirrors_euvl/react-table-drag-select

## Basic Information

- **Project Name**: react-table-drag-select
- **Description**: React component for drag selecting table cells
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-09-24
- **Last Updated**: 2026-05-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react-table-drag-select

![Animation of the component](img/demo.gif)

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

## Installation

```sh
npm install -S react-table-drag-select
```

## Basic example

This code was used to make the gif you see above.
[See the demo for advanced usage.](https://mcjohnalds.github.io/react-table-drag-select) 

```jsx
import React from "react";
import TableDragSelect from "react-table-drag-select";
import "react-table-drag-select/style.css";

class App extends React.Component {
  state = {
    cells: [
      [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]
    ]
  };

  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>;
}
```