Skip to main content

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 JS 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 JS 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 the above-mentioned data and columns when rendering the component:

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

const data = [ /* ... */ ];
const columns = [ /* ... */ ];

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​

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

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

const { data, columns } = getData();

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

Loading data from the server​

To load data from the server, fetch the data (for example in a useEffect) and pass the resulting data to the Grid component:

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

export default function App() {
  const [data, setData] = useState([]);
  const [columns, setColumns] = useState([]);

  useEffect(() => {
    // If you also have initial columns, set them here or load separately
    // setColumns(initialColumns);

    fetch("https://some-backend-url/data")
      .then(res => res.json())
      .then(d => {
        setData(d);
      });
  }, []);

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

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 triggers an event while scrolling; in React this is exposed as the onRequestData event. Add an 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";

export default function App() {
  const { allData, columns } = getData();

  const [rowCount] = 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}
    />
  );
}

Related samples: