React Datagrid API exec add-row 'before' and 'after' reversed?

GaryBarnes

I am adding a row to a react datagrid using the following which works perfectly to find the id of the first row and insert. The problem is that the 'after' acts like 'before' and vice-versa, i.e. 'after' places the new row above the first row and 'before' places it after. Am I misunderstanding something or is this a bug?

` const addClickHandler = () => {
console.log("Add Clicked: " + id);
// get first row id
const store = apiRef.current.getState();

    // Access the first record from the current active view store
    const firstRow = store.data?.[0];

    console.log(JSON.stringify(firstRow))

    apiRef.current.exec("add-row", {
        row: {
            id: null,
            epic: "EPIC",
            name: "New Entry",
            type: 1,
            matures: new Date(),
            coupon: "0.00",
            shares: 0,
            price: "0.00",
            value: "0.00",
            cost: "0.00",
            gain: "0.00",
            gain_pc: "0.00",
            scraper: 1
        },
        after: firstRow
    })
}`

tasha

Hello

The reason afterand beforeappear reversed is that the add-row action expects a row ID as the value, not the row object itself.
In your code you’re passing firstRow as the whole object from store.data[0]. The grid can’t identify the position correctly with a full object.

Please check the example: https://snippet.svar.dev/react/1EC2WenpW