Applying editors to Grid cells
The Grid widget provides a predefined number of inline editors that can be applied to a column cell: text, combo, richselect, datepicker. Moreover, you can apply custom editors to column cells.
Applying in-built inline editors
To apply the inline editor to column cells, set the editor parameter of the columns property to the required value.
Example:
<script>
import { Grid } from "wx-svelte-grid";
import { getData } from "./common/data";
const { allData: data, countries, users } = getData();
const columns = [
{ id: "id", width: 50 },
{
id: "firstName",
header: 'Name - "text"',
editor: "text",
width: 180,
},
{
id: "country",
header: 'Country - "combo"',
editor: {
type: "combo",
config: { template: (option) => `${option.id}. ${option.name}` },
},
options: countries,
width: 180,
},
{
id: "date",
header: 'Date - "datepicker"',
width: 180,
editor: "datepicker",
template: (v) => (v ? v.toLocaleDateString() : ""),
},
{
id: "assigned",
header: 'Users - "richselect"',
width: 180,
editor: "richselect",
options: users,
},
];
</script>
<Grid {data} {columns} />
Customizing built-in editors
The Grid API allows applying a template and custom Svelte component to the cell editor (except the "text" type editor) via the config object of the editor parameter in the columns property.
Please note that for the "combo" editor the cell component will be applied to dropdown options only while for 'datepicker" to the input field.
The example below shows how to apply a template to the "combo" editor in the Country column and the StatusStub component to the "richselect" editor in the Status column.
A template should be a function that takes an option and returns a string to be displayed (template?:(obj) => string). In our example each option should be of the format id.label (e.g., 1.USA). The cell property in the config object takes the custom component name that should be applied to the editor. In our case, it's the StatusStub component.
<script>
import { Grid } from "wx-svelte-grid";
import { getData } from "../data";
import StatusStub from "../custom/StatusStub.svelte";// import the component
const { allData: data, countries, users } = getData();
const statuses = [
{
id: 1,
label: "In progress",
type: "primary",
},
{
id: 2,
label: "Done",
type: "success",
},
{
id: 3,
label: "Not started",
type: "disabled",
},
];
const columns = [
{ id: "id", width: 50 },
{
id: "firstName",
header: 'Name - "text"',
editor: "text",
width: 180,
},
{
id: "country",
header: 'Country - "combo"',
editor: {
type: "combo",
config: { template: option => `${option.id}. ${option.label}` },
},
options: countries,
width: 180,
},
{
id: "date",
header: 'Date - "datepicker"',
width: 180,
editor: "datepicker",
template: v => (v ? v.toLocaleDateString() : ""),
},
{
id: "user",
header: 'User - "richselect"',
width: 180,
editor: "richselect",
options: users,
},
{
id: "status",
resize: true,
header: "Status",
width: 133,
editor: {
type: "richselect",
config: { cell: StatusStub },
},
options: statuses,
},
];
</script>
<Grid {data} {columns} />
<script>
let { data } = $props();
</script>
<div class="status {data.type}">
<div class="status-wrapper">
<div class="dot"></div>
<span class="name">{data.label}</span>
</div>
</div>
<style>
.status {
height: 100%;
width: 100%;
display: flex;
align-items: center;
}
.status .status-wrapper {
border-radius: 18px;
padding: 2px 8px;
display: flex;
gap: 4px;
align-items: center;
justify-content: center;
position: relative;
}
.status .status-wrapper::before {
position: absolute;
height: 100%;
width: 100%;
content: "";
border-radius: 18px;
opacity: 0.15;
}
.status .dot {
height: 6px;
width: 6px;
border-radius: 50%;
}
.status.success .status-wrapper::before,
.status.success .dot {
background: var(--wx-color-success);
}
.status.primary .status-wrapper::before,
.status.primary .dot {
background: var(--wx-color-primary);
}
.status.disabled .status-wrapper::before,
.status.disabled .dot {
background: var(--wx-color-font-alt);
}
.status.success .name {
color: var(--wx-color-success);
}
.status.primary .name {
color: var(--wx-color-primary);
}
.status.disabled .name {
color: var(--wx-color-font-alt);
}
</style>
Applying custom editors
Grid allows adding custom components to column cells. The rules of embedding custom components are described here: Adding custom content to cells
The example below shows how to customize the Checkbox component and call the update-cell action via the api.exec() method so that the cell is updated directly in Grid.
<script>
import { Checkbox } from "wx-svelte-core";// import the Checkbox component
let { row, column, api } = $props();// get access to Grid api via `$props`
function onChange(ev) {
const { value } = ev;
api.exec("update-cell", { //call the action
id: row.id,
column:column.id,
value
});
}
</script>
<Checkbox value={row[col.id]} onchange={onChange} />
In the next example we import the component and apply it to the Grid cell:
<script>
import CheckboxCell from "../custom/CheckboxCell.svelte";
import { Grid } from "wx-svelte-grid";
import { getData } from "./common/data";
const { data } = getData();
let cell;
const columns = [
{ id: "id", width: 50 },
{ id: "checked", cell: CheckboxCell, width: 36 },
];
</script>
<Grid {data} {columns} />
Related articles: