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
   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 object with the sorting configuration
   split: number, // the number of frozen columns
   tree: boolean, // tree structure state
   flatData: array // actual data;in case of 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.

Example​

The example below shows how to output the selected row ID by obtaining it via the api.getState() method:

import { Grid } from "wx-react-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" },
];

export default function App() {
    const api = useRef(null);
    let s = 0;
    const updateSelected = () => (s = api.current.getState().selected);

    return (
        <>
            <p>Click a cell to select a row. The selected row: {s || 'none'}</p>
            <div style={{ height: "415px" }}>
                <Grid data={data} columns={columns} api={api} onSelectRow={updateSelected} />
            </div>
        </>
    );
}

Related articles: