# Installation

The Handsontable for WireBootstrap library is located in `wire-handsontable.js`.  This and other other related files can be installed from the NPM package registry at`@wirebootstrap/wire-handsontable`.

```javascript
npm install @wirebootstrap/wire-handsontable
```

{% hint style="info" %}
**Note**: Handsontable for WireBootstrap does not include a license for Handsontable.  A license for Handsontable may need to be purchased separately depending on your usage.  Visit, [Handsontable pricing](https://handsontable.com/pricing) for more details.
{% endhint %}

Handsontable for WireBootstrap will load the Hansontable JavaScript library and style sheet from the following locations if not found on the page.

{% embed url="<https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js>" %}

{% embed url="<https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css>" %}

## Class

Handsontable for WireBootstrap extends the [wire.ui.component](https://docs.wirebootstrap.com/wirebootstrap/reference/wire.ui/wire.ui.component) class.  As such, it inherits all the base functionality of that class.

To create a new instance of the Handsontable for WireBootstrap component, use the `wire.handsontable` class.

```javascript
const table = new wire.handsontable();
```

## Render

Render the component using an HTML `div` element.

{% tabs %}
{% tab title="JavaScript" %}

```html
<div id="table"></div>
```

```javascript
new wire.handsontable().render("#table");
```

{% endtab %}

{% tab title="React" %}

```jsx
<WireComponent component="wire.handsontable">
    <div></div>
</WireComponent>
```

{% endtab %}

{% tab title="Angular" %}

```javascript
<div wire-component="wire.handsontable"></div>
```

{% endtab %}
{% endtabs %}

## Sample Project

The NPM package includes a sample project that demonstrates the features of Handsontable for WireBootstrap.

![Handsontable for WireBootstrap Sample Application](https://1685253962-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2GDN6mFE2Wlj3KLoDjhA%2Fuploads%2FBBoqKklJ2EhzwyNnXXGW%2Fimage.png?alt=media\&token=2f4b4ce3-9c35-47c5-bbe3-6f7822fe2bbf)

After installing, open the project in any web project editor. Next, open a terminal window and run the `npm first` script when running the project for the first time.  This will install the `npm` packages required to run the project and then open the default page in a new browser window.

```
npm run first
```

Use `npm start` to run the project later now that the packages are installed.

```
npm run start
```