Getting started
This page explains how to get started with the SVAR React DataGrid component by adding a basic table to your React application.
Step 1. Install the package
npm install wx-react-grid
Step 2. Create and initialize the Grid
Import the Grid component to your project with a css file:
import { Grid } from "wx-react-grid";
import "wx-react-grid/dist/grid.css";
export default function App() {
return (
// JSX code goes here
);
}
Initialize the Grid properties.
The example below shows how to create a simple table with six 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,
city: "Amieshire",
email: "Leora13@yahoo.com",
firstName: "Ernest",
lastName: "Schuppe",
companyName: "Lebsack - Nicolas",
},
{
id: 2,
city: "Gust",
email: "Mose_Gerhold51@yahoo.com",
firstName: "Janis",
lastName: "Vandervort",
companyName: "Glover - Hermiston",
},
];
const columns = [
{ id: "id", width: 50 },
{
id: "city",
width: 100,
header: "City",
footer: "City",
},
{
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",
},
{
id: "companyName",
header: "Company",
footer: "Company",
},
];
export default function App() {
return <Grid data={data} columns={columns} />;
}
More instructions about loading data you can see here Loading data.
Step 3. Apply a theme
To add look and feel to the application and make all elements display correctly:
-
Import one of the predefined themes:
- Willow
- WillowDark
-
Add the
div
element with the theme class name:
import { getData } from "./common/data";
import { Grid } from "wx-react-grid";
import { Willow } from "wx-react-grid";
const data = getData();
const columns = [/* Define or import your columns here */];
function App() {
return (
<div class="wx-willow-theme">
<Grid data={data} columns={columns} />
</div>
);
}
export default App;
What's next
Now you can dive deeper into the Grid API and get down to configuring it to your needs:
- Guides pages provide instructions about installation, loading data, styling, and other helpful tips to go smoothly with the DataGrid configuration
- DataGrid API reference gives description of the DataGrid functionality
- Helpers pages describe how to use RestDataProvider that will make the process of working with backend easy and enjoyable