add-row
Description
Fires when adding a rowUsage
"add-row": ({
id?: string | number,
before?: string | number,
after?: string | number,
row: {}
}) => boolean|void;
Parameters
The callback of the action takes an object with the following parameters:
id
- (optional) the ID of a new rowbefore
- (optional) the ID of a row before which a new row is addedafter
- (optional) the ID of a row after which a new row is addedrow
- (required) an object with the row data, i.e., column IDs and values
Returning false from the event handler will block adding rows.
Example
The example below shows how to add a new row with data (on a button click) by triggering the add-row
action via the api.exec()
method:
import { useRef } from "react";
import { getData } from "./common/data";
import { Grid } from "wx-react-grid";
const { data, columns } = getData();
export default function App() {
const api = useRef(null);
const addRow = () => {
api.current.exec("add-row", {
row: { id: 21, city: "New City", firstName: "New name", lastName: "new name" },
after: 20,
});
};
return (
<>
<button onClick={addRow} >Add Row</button>
<Grid data={data} columns={columns} api={api} />
</>
);
}
Related articles: