Installation and initialization

This DataGrid widget is designed to be incorporated into your React application.

Installing DataGrid

To install the widget run the following command:

//npm
npm install wx-react-grid

//yarn
yarn add wx-react-grid

Initializing

Import the Grid component and initialize the Grid properties.

The example below shows how to create a simple table with four columns and two rows.

The data array holds data to be displayed in the table and the columns array includes the table columns. It's necessary to define the components inside the Grid tag.

import { Grid } from "wx-react-grid";

const data = [
    {
        id: 1,
        email: "Leora13@yahoo.com",
        firstName: "Ernest",
        lastName: "Schuppe",
    },
    {
        id: 2,
        email: "Mose_Gerhold51@yahoo.com",
        firstName: "Janis",
        lastName: "Vandervort",
    },
];

const columns = [
    {
        id: "id",
        width: 50,
    },
    {
        id: "firstName",
        header: "First Name",
        footer: "First Name",
        width: 150,
    },
    {
        id: "lastName",
        header: "Last Name",
        footer: "Last Name",
        width: 150,
    },
    {
        id: "email",
        header: "Email",
        footer: "Email",
    },
];

export default function App() {
    return <Grid data={data} columns={columns} />;
}

Now you can move forward and load data. See Loading data.