rtd

react-table-drag-select

React component for drag selecting table cells

Showing:

Popularity

Downloads/wk

1K

GitHub Stars

76

Maintenance

Last Commit

3yrs ago

Contributors

4

Package

Dependencies

3

Size (min+gzip)

11.1KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Reviews

Top Feedback

1Poor Documentation

Readme

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation1
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
Jordi Hernández1 Rating0 Reviews
6 months ago
Poor Documentation