api.setNext()
Description
Allows adding some action into the Event Bus orderUsage
api.setNext(next: any): void;
Parameters
next
- (required) the action to be included into the Event Bus order
Example
In the example below we include the RestDataProvider service into the Event Bus order to perform operations with data (adding, deleting, and etc.) and send the corresponding requests to the server.
import { RestDataProvider } from "wx-table-data-provider";
import { Grid } from "wx-react-grid";
import { useRef, useEffect, useState } from 'react';
const columns = [
{
id: "name",
header: "Title",
flexgrow: 1,
sort: true,
editor: "text",
},
{
id: "year",
header: "Year",
width: 100,
sort: true,
editor: "text",
},
{
id: "votes",
header: "Votes",
width: 100,
sort: true,
editor: "text",
},
];
let data = [];
const provider = new RestDataProvider("https://some-backend-url", (obj) => {
obj.year = obj.year * 1;
obj.votes = obj.votes * 1;
});
provider.getData().then((v) => data = v);
export default function App() {
const api = useRef(null);
const addRow = () => {
api.current.exec("add-row", {
row: { name: "New Film", year: 2022, votes: 1 },
});
};
const init = () => {
api.current.setNext(provider);
};
return (
<div>
<button onClick={addRow} className="primary">Add Row</button>
<Grid
data={data}
columns={columns}
api={api}
init={init}
/>
</div>
);
}
button.primary {
// Example styles
}
Related articles: How to access Grid API