Skip to main content

editor

Description​

Fires when changing a value in the table via the inline editing

Usage​

"editor": ({
    value: any
}) => boolean|void;

Parameters​

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

  • value - (required) a new value

Returning false from the event handler will prevent changing a value via the inline editor.

Example​

const { data } = getData();

const columns = [
    { id: "id", width: 50 },
    { id: "city", header: "City", editor: "text", width: 160 },
    {
        id: "email",
        header: "Email",
        editor: "text",
        width: 250,
        css: "center",
    },
];

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

    useEffect(() => {
        if (api.current) {
            api.current.on("editor", (ev) => {
                console.log("A new value:", ev.value);
            });
        }
    }, [api]);

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

Related articles: