Skip to main content

api.getState()

Description​

Gets the state object that stores current state of most Grid properties

Usage​

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
   selectedRows: array, // an array with the ids of the selected rows
   sizes: object, // an object with the table sizes configuration
   sort: object,  // an array with the sorting configuration
   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 hierarchy
  • parent - an Id of the parent item
  • count - 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 sorting
  • key - the name of the field
  • order - the sorting direction "asc"|"desc"

Example​

The example below shows how to output the selected rows' Ids by obtaining an array 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;
    const updateSelected = () => {
      console.log(api.getState().selectedRows));
    };
</script>

<div style="height: 415px; ">
<Grid {data} {columns} bind:this={api}
    onselectrow={updateSelected} />
</div>

Related articles: