Skip to main content

api.getState()

Description​

Gets the state object that stores current state of most DataGrid 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
   scroll: object, // an object with the scroll configuration
   scrollTop: number, // current vertical scroll position in pixels
   scrollLeft: number, // current horizontal scroll position in pixels
   search: object, // an object with the current search configuration
   selectedRows: array, // an array with the ids of the selected rows
   sizes: object, // an object with the table sizes configuration
   sortMarks: object, // an object with the sorting configuration
   split: object, // an object with the number of frozen columns (left/right)
   tree: boolean, // tree structure state
   history: object, // shows the number of operations for each undo/redo action
   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 
   filterValues: object;
}

The Grid properties detailed description you can find here: Grid properties overview.

State-only properties​

flatData, history, scrollTop, and scrollLeft are the state-only properties, which means that they cannot be provided with widget properties.

scrollTop​

scrollTop is the current vertical scroll position in pixels. Its initial value is 0. It is updated as the user scrolls the grid and can be set programmatically via the scroll-to action.

scrollLeft​

scrollLeft is the current horizontal scroll position in pixels. Its initial value is 0. It is updated as the user scrolls the grid and can be set programmatically via the scroll-to action.

flatData​

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)

history​

history is an object with the number of operations for each undo/redo action:

history: {
  undo: number,
  redo: number,
};

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 "@svar-ui/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 = $state();
    const updateSelected = () => {
      console.log(api.getState().selectedRows);
    };
</script>

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

Related articles: