opentable-react

Best Data Grid for React with Spreadsheet Look and Feel.

Usage no npm install needed!

<script type="module">
  import opentableReact from 'https://cdn.skypack.dev/opentable-react';
</script>

README

This is the official wrapper of Opentable data grid for React.
It provides data binding, data validation, filtering, sorting and more.

npm npm



About

This is a fork of @handsontable/react to and is designed to work with Opentable, a fork of the last MIT release of Handsontable

This fork was created to address the lack of security updates to version 6.2.2 of Handsontable, no new features are planned here, just dependency updates and some performance improvements.

Installation

Use npm to install this wrapper together with Handsontable.

npm install opentable opentable-react

Usage

Use this data grid as you would any other component in your application. Options can be set as HotTable props.

Styles

@import '~opentable/dist/handsontable.full.css';

React Component

import React from 'react';
import ReactDOM from 'react-dom';
import { HotTable } from 'opentable-react';

class HotApp extends React.Component {
  constructor(props) {
    super(props);
    this.data = [
      ['', 'Tesla', 'Mercedes', 'Toyota', 'Volvo'],
      ['2019', 10, 11, 12, 13],
      ['2020', 20, 11, 14, 13],
      ['2021', 30, 15, 12, 13]
    ];
  }

  render() {
    return (<HotTable data={this.data} colHeaders={true} rowHeaders={true} width="600" height="300" />);
  }
}

Features

A list of some of the most popular features:

  • Multiple column sorting
  • Non-contiguous selection
  • Filtering data
  • Export to file
  • Validating data
  • Conditional formatting
  • Merging cells
  • Custom cell types
  • Freezing rows/columns
  • Moving rows/columns
  • Resizing rows/columns
  • Hiding rows/columns
  • Context menu
  • Comments
  • Auto-fill option

Documentation

Support and contribution

We provide support for all users through GitHub issues. If you have a commercial license then you can add a new ticket through the contact form.

If you would like to contribute to this project, make sure you first read the guide for contributors.

Browser compatibility

Opentable is compatible with modern browsers such as Chrome, Firefox, Safari, Opera, and Edge. It also supports Internet Explorer 11 but with limited performance.

IE11 Support

Note: IE 11 will not be supported past June 15th, 2022 as per Microsoft

License

This wrapper is released under the MIT license but under the hood it uses Handsontable, which is also MIT licensed.

Created by Handsoncode with ❤ and ☕ in Tricity. Updated and maintained by Sam Svindland