update-cell
Description
Fires when updating a cellUsage
"update-cell": ({
id: string | number,
column: string | number,
value: string | number | Date,
eventSource?: string,
}) => 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 updatedcolumn
- (required) the ID of a column that is updatedvalue
- (required) a new value of a celleventSource
- (optional) the name of the Grid action that triggeredupdate-cell
Returning false from the event handler will prevent updating data in a cell.
Example
<script>
import { Grid } from "@svar-ui/svelte-grid";
import { getData } from "./common/data";
const { data, countries } = 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: "date",
header: "Date",
width: 100,
editor: "datepicker",
},
{
id: "companyName",
header: "Comments",
editor: "text",
flexgrow: 1,
},
];
function init(api){
api.on("update-cell", (ev) => {
console.log("The cell is updated in the row:", ev.id);
});
}
</script>
<Grid {data} {columns} {init} />
Related articles: