api.getState()
Description
Gets the state object that stores current state of most Grid propertiesUsage
api.getState(): object;
Returns
The method returns an object with the following parameters:
{
columns: array, // an array with columns data
data: array, // an array with data for the table
dynamic: object, // an object with the number of rows in a dynamic dataset
editor: object,// an object with data for the open editor
filter: (obj: any) => boolean, // the filtering function; the filter-rows action handler
scroll: object, // on object with the scroll configuration
selected: string | number, // the id of the selected row
selectedRows: array, // an object with the ids of the selected rows
sizes: object, // an object with the table sizes configuration
sort: object, // an array with the sorting configuration parameters
split: number, // the number of frozen columns
tree: boolean, // tree structure state
flatData: array // actual data;in case of the tree structure,it's a plain dataset with the "level" marker to specify each item's level in hierarchy
}
The Grid properties detailed description you can find here: Grid properties overview.
flatData
and sort
are the state properties.
The flatData
parameters are the same as data
but in case of the tree structure it becomes a plain dataset with the next parameters to specify each item's level in hierarchy:
level
- an item's level in hierarchyparent
- an Id of the parent itemcount
- the number of child items inside the parent item (set to 0 in case of none)
sort
is an array generated by the sort-rows
event with the next parameters for each object in the array:
index
- the ordinal number when clicking cells starting from 1; defines the order of fields while sortingkey
- the name of the fieldorder
- the sorting direction "asc"|"desc"
Example
The example below shows how to output the selected row ID by obtaining it via the api.getState()
method:
<script>
import { Grid } from "wx-svelte-grid";
import { getData } from "./common/data";
const { data } = getData();
const columns = [
{ id: "id", width: 50 },
{ id: "city", header: "City", width: 160 },
{ id: "firstName", header: "First Name" },
{ id: "lastName", header: "Last Name" },
{ id: "companyName", header: "Company" },
];
let api;
s = 0;
const updateSelected = () => (s = api.getState().selected);
</script>
<p>Click a cell to select a row. The selected row: {s || 'none'}</p>
<div style="height: 415px; ">
<Grid {data} {columns}
bind:api
on:select-row={updateSelected} />
</div>
Related articles: