Loading data

Preparing data

The following types of information can be loaded into the Grid:

• data - data displayed in the table; it's an array of JSON objects where all properties are arbitrary. The id property is also arbitrary but it should be unique if used.

Example:

const data = [{
        id: 1,
        city: "Amieshire",
        country: 6,
        email: "Leora13@yahoo.com",
        firstName: "Ernest",
        lastName: "Schuppe",
        street: "Ratke Port",
        zipCode: "17026-3154",
        date: new Date("2016-09-23T07:57:40.195Z"),
        companyName: "Lebsack - Nicolas",
        stars: 820,
        followers: 70,
        newsletter: true,
        checked: 1,
    },
    {
        id: 2,
        city: "Gust",
        country: 4,
        email: "Mose_Gerhold51@yahoo.com",
        firstName: "Janis",
        lastName: "Vandervort",
        street: "Dickinson Keys",
        zipCode: "43767",
        date: new Date("2017-03-06T09:59:12.551Z"),
        companyName: "Glover - Hermiston",
        stars: 1200,
        followers: 170,
        checked: 1,
    },
];

• columns - the columns of the table; it's an array of JSON objects with a set of parameters for each object described here: columns parameters

Example:

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

To pass data and columns to the table, import data and columns and define components during initialization:

const { data, columns } = getData();

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

info

It's also possible to create a table structure automatically with default or basic columns settings using the autoConfig property.

Loading data from a local source

You can load predefined data from a separate file at the initialization stage.

First, include the data file to the application page and import the Grid component:

<script>
  import { getData } from "./common/data";
  import { Grid } from "wx-react-grid";
</script>

Second, define components during Grid initialization:

<script>
  import { getData } from "./common/data";
  import { Grid } from "wx-react-grid";
  
  const { data, columns } = getData();

</script>

<Grid {data} {columns} />

Loading data from the server

To load data from the server, first, you need to import the RestDataProvider service and connect it to the backend. Second, apply the getData method. All detailed instructions you can find here: Working with server.

Example:

import { useRef } from 'react';
import { RestDataProvider } from "wx-grid-data-provider";
import { Grid } from "wx-react-grid";

const columns = [ {}, {}, ]; // an array of columns

let data = [];

const provider = new RestDataProvider(
    "https://some-backend-url", // pass the server url to RestDataProvider
);

provider.getData().then(v => (data = v)); // load data

export default function App() {
    const init = api => {
        api.setNext(provider); // include RestDataProvider into the Event Bus order to perform operations with data
    };

    return (
        <Grid data={data} columns={columns} init={init} />
    );
}