You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Your contributions to this project are very welcome. If you want to fix a bug or propose a new feature, you can open a new Pull Request but first make sure it follows these general rules:
4
+
5
+
1. Sign this [Contributor License Agreement](https://goo.gl/forms/yuutGuN0RjsikVpM2) to allow us to publish your changes to the code.
6
+
2. Make your changes on a separate branch. This will speed up the merging process.
7
+
3. Always make the target of your pull request the `develop` branch, not `master`.
8
+
4. Please review our [coding style](https://github.com/airbnb/javascript) for instructions on how to properly style the code.
A React wrapper for the the [Handsontable](https://github.com/handsontable/handsontable) spreadsheet component.
1
+
<imgsrc="https://raw.githubusercontent.com/handsontable/static-files/master/Images/Logo/Handsontable/handsontable-react.png"alt="Handsontable for React" />
2
+
3
+
<br/>
4
+
5
+
**Handsontable for React** is the official wrapper for [**Handsontable**](//github.com/handsontable/handsontable), a JavaScript data grid component with a spreadsheet look & feel. It easily integrates with any data source and comes with lots of useful features like data binding, validation, sorting or powerful context menu.
For detailed installation instructions, please take a look at our wiki under ["Installation guide"](https://github.com/handsontable/react-handsontable/wiki/Installation-guide).
14
+
1.[Installation](#installation)
15
+
2.[Getting Started](#getting-started)
16
+
3.[Documentation](#documentation)
17
+
4.[What to use it for?](#what-to-use-it-for)
18
+
5.[Features](#features)
19
+
6.[Screenshot](#screenshot)
20
+
7.[Resources](#resources)
21
+
8.[Support](#support)
22
+
9.[Contributing](#contributing)
23
+
10.[Licensing](#licensing)
16
24
17
-
## Building
18
-
If you used npm to download the library, you should be good to go, but if you want to make a build yourself, go to the directory where `react-handsontable` source is located and run:
This will create a `/dist/` directory with `react-handsontable.js` and `react-handsontable.min.js` for you to use.
37
+
<br/>
25
38
26
-
## Basic usage
27
-
`react-handsontable` creates a `<HotTable>` component. You can use it just like any other React component. For example:
39
+
## Getting Started
40
+
Assuming that you have installed the wrapper with npm, now you just need to include Handsontable styles into your build system and use `<HotTable>` just like any other React component.
28
41
29
-
```jsx
30
-
// import React...
42
+
### Handsontable Community Edition:
43
+
44
+
**Styles**
45
+
```css
46
+
@import'handsontable/dist/handsontable.full.css';
47
+
```
48
+
49
+
**React Component**
50
+
```js
31
51
importReactfrom'react';
32
52
importReactDOMfrom'react-dom';
53
+
import {HotTable} from'@handsontable/react';
33
54
34
-
// ... and HotTable
35
-
importHotTablefrom'react-handsontable';
36
-
37
-
classExampleComponentextendsReact.Component {
55
+
classHotAppextendsReact.Component {
38
56
constructor(props) {
39
57
super(props);
40
-
this.handsontableData= [
58
+
this.data= [
41
59
["", "Ford", "Volvo", "Toyota", "Honda"],
42
60
["2016", 10, 11, 12, 13],
43
61
["2017", 20, 11, 14, 13],
@@ -47,49 +65,118 @@ class ExampleComponent extends React.Component {
The `root` property declares the `id` of the root element for the table. It is optional - if it isn't provided, the table will get a random generated `id`.
Visit [docs.handsontable.com](https://docs.handsontable.com/react) to get more Handsontable for React examples and guides.
82
112
83
-
## License
84
-
`react-handsontable` is released under the [MIT license](https://github.com/handsontable/react-handsontable/blob/master/LICENSE).
85
-
Copyrights belong to Handsoncode sp. z o.o.
113
+
<br/>
114
+
115
+
## What to use it for?
116
+
The list below gives a rough idea on what you can do with Handsontable, but it shouldn't limit you in any way:
117
+
118
+
- Database editing
119
+
- Configuration controlling
120
+
- Data merging
121
+
- Team scheduling
122
+
- Sales reporting
123
+
- Financial analysis
124
+
125
+
<br/>
126
+
127
+
## Features
128
+
129
+
Some of the most popular features include:
86
130
87
-
## Contact
88
-
Feel free to give us feedback on this wrapper using this [contact form](https://handsontable.com/contact.html) or write directly at hello@handsontable.com.
131
+
- Sorting data
132
+
- Data validation
133
+
- Conditional formatting
134
+
- Freezing rows/columns
135
+
- Merging cells
136
+
- Defining custom cell types
137
+
- Moving rows/columns
138
+
- Resizing rows/columns
139
+
- Context menu
140
+
- Adding comments to cells
141
+
- Dragging fill handle to populate data
142
+
- Internationalization
143
+
- Non-contiguous selection
89
144
90
-
## Other Wrappers
91
-
Handsontable comes with more wrappers and directives for popular frameworks:
<imgsrc="https://raw.githubusercontent.com/handsontable/static-files/master/Images/Screenshots/handsontable-ce-showcase.png"align="center"alt="Handsontable for React" />
You can report your issues here on [GitHub](//github.com/handsontable/react-handsontable/issues).
167
+
168
+
An open source version of Handsontable doesn't include technical support. You need to purchase the [Handsontable Pro](//handsontable.com/pricing) license or [contact us](//handsontable.com/contact) directly in order to obtain a technical support from the Handsontable team.
169
+
170
+
<br/>
171
+
172
+
## Contributing
173
+
If you would like to help us to develop this wrapper for React, please first read the [guide for contributors](//github.com/handsontable/react-handsontable/blob/master/CONTRIBUTING.md).
174
+
175
+
<br/>
176
+
177
+
## Licensing
178
+
This wrapper is released under [the MIT license](//github.com/handsontable/react-handsontable/blob/master/LICENSE).
0 commit comments