# BestReactGrid Component

This package contains the React Component `<BestReactGrid />` for TypeScript and JavaScript.

## 1. Create React App

- Run `npx create-react-app --template minimal my-app`
- Run `cd my-app`

## 2. Add BestReactGrid

- Run `npm add best-react-grid`

## 3. Build your Component

```jsx
import React from "react";
import { BestReactGrid, Column } from "@sencha/best-react-grid";
import "@sencha/best-react-grid/dist/themes/grui.css";

export default class App extends React.Component {
  render() {
    const data = [
      { col1: "value1", col2: "data1", col3: 1.01 },
      { col1: "value2", col2: "data2", col3: 1.02 },
      { col1: "value3", col2: "data3", col3: 1.03 },
    ];

    return (
      <BestReactGrid data={data} style={{ width: "500px", height: "300px" }}>
        <Column field="col1" text="Column 1" flex="1" />
        <Column field="col2" text="Column 2" />
        <Column field="col3" text="Column 3" align="right" />
      </BestReactGrid>
    );
  }
}
```

## 4. Run App

- Run `npm start`


## 5. Procure and Set the License key

- To procure the license, kindly visit [BestReactGrid](https://www.bestreactgrid.com/contact/)
- Add `BestReactGrid.setLicense("<Your_procured_license_key>")`


# Documentation

- The complete documentation of BestReactGrid with live examples and configurations can be checked here: [Documentation](https://bestreactgrid-storybook-doc.csi-infra.com/?path=/story/docs-introduction--page)