@sencha/sencha-grid

Sencha Data Grid Component

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

React 18: Download the latest GRUI version starting from 2.x.x

React 16/17: Download the GRUI Version 1.x.x

1. Create React App

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

2. Add GRUI

• Run npm add @sencha/sencha-grid

3. Build your Component

import React from "react";
import { SenchaGrid, Column } from "@sencha/sencha-grid";
import "@sencha/sencha-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 (
      <SenchaGrid 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" />
      </SenchaGrid>
    );
  }
}

4. Run App

• Run npm start

5. Procure and Set the License key

• To procure the license, kindly visit GRUI
• Add SenchaGrid.setLicense("<Your_procured_license_key>")

Documentation

• The complete documentation of GRUI with live examples and configurations can be checked here: Documentation