To add a context menu with an "Add" item and sub-options like "Add before this row" and "Add after this row" in SVAR Svelte DataGrid, you can create a custom menu using the ContextMenu component from wx-svelte-menu. Here’s how to set it up:
Import necessary components: Import ContextMenu and the Grid component.
Define the menu with options: In the options array, add the main "Add" item with the required sub-options.
Handle menu clicks: Set up a handleClicks function to determine the action for each menu item.
Pass the API and display the menu: Attach the API to the ContextMenu and set it to display the custom menu for each row.
Here’s an example:
<script>
import { getData } from "./common/data";
import { Grid } from "wx-svelte-grid";
import { ContextMenu } from "wx-svelte-menu";
const { data, columns } = getData();
let table;
function init(api) {
table = api;
}
const options = [
{
id: "add",
text: "Add",
icon: "wxi-table-row-plus",
data: [
{ id: "add-before:child", icon: "wxi-table-row-plus-before", text: "Add before this row" },
{ id: "add-after:child", icon: "wxi-table-row-plus-after", text: "Add after this row" },
],
},
{ type: "separator" },
{ id: "delete", text: "Delete", icon: "wxi-delete-outline" },
];
const handleClicks = ev => {
const option = ev.detail.action;
if (option) {
const id = table.getState().selected;
switch (option.id) {
case "add-before:child":
table.exec("add-row", { row: {}, before: id });
break;
case "add-after:child":
table.exec("add-row", { row: {}, after: id });
break;
case "delete":
table.exec("delete-row", { id });
break;
default:
helpers.showNotice({ text: `You clicked ${option.text}` });
}
}
};
function getItem(id) {
if (id) table.exec("select-row", { id });
return id;
}
</script>
<ContextMenu
{options}
on:click={handleClicks}
at="point"
resolver={getItem}>
<Grid {data} {columns} {init} />
</ContextMenu>
This setup will show an "Add" option with sub-options "Add before this row" and "Add after this row" in the context menu for each row in the DataGrid.
