Skip to main content

select-row

Description​

Fires when selecting a row

Usage​

"select-row": ({
    id: string | number,
    toggle?: boolean,
    range?: boolean,
    mode?: boolean,
    show?: boolean,
    column?: string | number
}) => boolean|void;

Parameters​

The callback of the action takes an object with the following parameters:

  • id - (required) the ID of a row that is selected
  • toggle - (optional) if set to true, enables the switching of the row state between selected and unselected. If one row is selected, in GUI holding Ctrl + left click unselects the row. In the multiselect mode, it will add the row to the selected list.
  • range - (optional) if set to true, enables selecting the range of rows starting from the first selected row to the specified row id. In GUI holding Shift + left click will select the range of rows.
  • mode - (optional) Available if toggle is enabled. If mode is set to true, it makes the row selected. If false, the row state is unselected. It's useful when the row state is unknown and you want to make sure the row is selected/unselected.
  • show - (optional) if set to true, the table will be scrolled to the specified row ID
  • column - (optional) the id of a column; if show is set to true, this parameter allows specifying the exact row position to be applied by the scroll bar

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";
import { useEffect, useRef, useState } from "react";

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);
    const [s, setS] = useState(0);

    useEffect(() => {
        if (api.current) {
            const handleSelectRow = (ev) => {
                console.log("Selected row:", ev.id);
            };
            api.current.on("select-row", handleSelectRow);
            return () => {
                api.current.off("select-row", handleSelectRow);
            };
        }
    }, [api.current]);

    const updateSelected = () => {
        if (api.current) {
            setS(api.current.getState().selected);
        }
    };

    return (
        <Grid data={data} columns={columns} api={api} updateSelected={updateSelected} />
    );
}

Related articles: