Skip to main content

update-cell

Description​

Fires when updating a cell

Usage​

"update-cell": ({
    id: string | number,
    column: string | number,
    value: string | number | Date
}) => boolean|void;

Parameters​

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

  • id - (required) the ID of a row where a cell is updated
  • column - (required) the ID of a column that is updated
  • value - (required) a new value of a cell

Returning false from the event handler will prevent updating data in a cell.

Example​

const { data, countries, users } = getData();

const columns = [
    { id: "id", width: 50 },
    { id: "firstName", header: "Name", editor: "text", width: 160 },
    {
        id: "country",
        header: "Country",
        editor: "combo",
        options: countries,
        width: 160,
    },
    {
        id: "checked",
        hidden: true,
        header: "Active",
        editor: "switch",
        width: 160,
    },
    {
        id: "newsletter",
        header: "Newsletter",
        editor: "checkbox",
        width: 100,
    },
    {
        id: "date",
        header: "Date",
        width: 100,
        editor: "datepicker",
    },
    {
        id: "assigned",
        header: "Users",
        width: 100,
        editor: "multicombo",
        options: users,
    },
    {
        id: "companyName",
        header: "Comments",
        editor: "textarea",
        flexgrow: 1,
    },
];

export default function App() {
    const api = useRef(null);

    if (api.current) {
        api.current.on("update-cell", (ev) => {
            console.log("The cell is updated in the row:", ev.id);
        });
    }

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

Related articles: