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:
<script>
import { getData } from "./common/data";
import { Grid } from "@wx/svelte-grid";
const { data, columns } = getData();
</script>
<Grid {data} {columns} />
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/svelte-grid";
</script>
Second, define components during Grid initialization:
<script>
import { getData } from "./common/data";
import { Grid } from "@wx/svelte-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:
<script>
import { RestDataProvider } from "@wx/grid-data-provider"; // import RestDataProvider
import { Grid } from "@wx/svelte-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
const init = api => {
api.setNext(provider);// include RestDataProvider into the Event Bus order to perform operations with data
};
</script>
<Grid {data} {columns} {init} />