@wszymanski-test/react
v12.4.1
Published
Best Data Grid for React with Spreadsheet Look and Feel.
Downloads
4
Maintainers
Readme
React Data Grid
Handsontable's wrapper for React combines data grid features with spreadsheet-like UX. It provides data binding, data validation, filtering, sorting, and CRUD operations.
Features
The most popular features of Handsontable for React:
✓ Multiple column sorting ✓ Non-contiguous selection ✓ Filtering data ✓ Export to file ✓ Validating data ✓ Conditional formatting ✓ Merging cells ✓ Freezing rows/columns ✓ Moving rows/columns ✓ Resizing rows/columns ✓ Hiding rows/columns ✓ Context menu ✓ Comments
Documentation
Get started
1. Install Handsontable
Get Handsontable from npm or Yarn.
npm install handsontable @handsontable/react
Import Handsontable's CSS:
import 'handsontable/dist/handsontable.full.min.css';
2. Register Handsontable's modules
import { registerAllModules } from 'handsontable/registry';
registerAllModules();
3. Use the HotTable
component
The main Handsontable component is called HotTable
.
import { HotTable } from '@handsontable/react';
To set Handsontable's configuration options, use HotTable
's props. For example:
import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';
registerAllModules();
export const ExampleComponent = () => {
return (
<HotTable
// set `HotTable`'s props here
data={[
['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
['2019', 10, 11, 12, 13],
['2020', 20, 11, 14, 13],
['2021', 30, 15, 12, 13]
]}
rowHeaders={true}
colHeaders={true}
height="auto"
licenseKey="non-commercial-and-evaluation" // for non-commercial use only
/>
);
};
View live demo
Support
We provide support for developers working with commercial version via contact form or at [email protected].
If you use a non-commercial version then please ask your tagged question on StackOverflow.
License
Handsontable is a commercial software with two licenses available:
- Free for non-commercial purposes such as teaching, academic research, and evaluation. Read it here.
- Commercial license with support and maintenance included. See pricing plans.
License key
If you use Handsontable for React in a project that supports your commercial activity, then you must purchase the license key at handsontable.com.
If you use the free for non-commercial license of Handsontable, then pass the phrase 'non-commercial-and-evaluation'
, as described in this documentation.
Proudly created and maintained by the Handsontable Team.