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",
        firstName: "Ernest",
        lastName: "Schuppe",
    },
    {
        id: 2,
        city: "Gust",
        firstName: "Janis",
        lastName: "Vandervort",
    },
];

• 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" },
    { id: "firstName", header: "First Name" },
    { id: "lastName", header: "Last Name" },
];

To pass data and columns to the table, provide above-mentioned data and columns during initialization:

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

function Example() {
  const data = [ /* ... */ ];
  const columns = [ /* ... */ ];

  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

To load the client-side data (e.g., from a separate file), import that file/module in your component and pass its data to the Grid component:

import { getData } from "./common/data";
import { Grid } from "@svar-ui/react-grid";

function Example() {
  const { data, columns } = getData();

  return <Grid data={data} columns={columns} />;
}

Loading data from the server

To load data from the server, use React hooks to fetch the data and set the state, then pass the parsed JSON array to the Grid component:

import { useEffect, useState } from "react";
import { Grid } from "@svar-ui/react-grid";

function Example() {
  const [data, setData] = useState([]);
  const [columns, setColumns] = useState([ /* optionally define columns */ ]);

  useEffect(() => {
    fetch("https://some-backend-url/data")
      .then(res => res.json())
      .then(json => setData(json))
      .catch(err => {
        // handle error
        console.error(err);
      });
  }, []);

  return <Grid data={data} columns={columns} init={/* init if needed */} />;
}

Alternatively, you can use the built-in DataProvider helper that makes it easier to load and save data to the backend. All detailed instructions you can find here: Working with server.

Loading data dynamically

Dynamic data loading allows loading data on request from the database, which improves performance in case of large datasets. Data will be dynamically loaded each time you scroll up and down the table. To enable dynamic data loading, use the dynamic property by specifying the number of all rows in a dataset. If dynamic is applied, the request-data action is triggered while scrolling and you need to add the event handler that receives the row.start and row.end values and loads data.

Example:

import { useState } from "react";
import { Grid } from "@svar-ui/react-grid";
import { getData } from "./common/data";

function Example() {
  const { allData, columns } = getData();

  const [rowCount, setRowCount] = useState(100);
  const [data, setData] = useState([]);

  function dataProvider(ev) {
    const { row } = ev;
    if (row) {
      setData(allData.slice(row.start, row.end));
    }
  }

  return (
    <Grid
      data={data}
      columns={columns}
      dynamic={{ rowCount }}
      onRequestData={dataProvider}
    />
  );
}

Note: the event prop name in React is onRequestData (camelCase) and the handler receives an object with a row property containing start and end.