Installation and initialization

SVAR DataGrid is an open-source library distributed under the MIT license.

Installing DataGrid

To install the React DataGrid library, run the following command:

# npm
npm install @svar-ui/react-grid

# yarn
yarn add @svar-ui/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 data and columns and pass them as props to the Grid component.

import { Grid } from "@svar-ui/react-grid";
import "@svar-ui/react-grid/all.css";

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,
  },
];

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

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