Skip to main content

getEditorConfig

Description​

A function that takes columns array as input and returns items for Editor

The function helps integrate an external Editor into Grid, it generates the editor configuration for each column based on the column settings specified in the columns array of Grid.

Parameters​

The function takes the columns array as input and returns items for Editor.

Example​

The example below shows how to define editor fields and initialize Editor:

<script>
import { Grid, getEditorConfig } from "wx-svelte-grid"; // import the helper
import { getData } from "../data";
const { data } = getData();

const columns = [
  { id: "id", width: 50 },
  {
    id: "firstName",
    header: "Name",
    editor: "text", //Editor control that will be used for this field
    width: 160,
  },
  {
    id: "country",
    header: "Country",
    editor: "textarea",  //Editor control that will be used for this field
    options: countries,
    width: 160,
  },

];

const items = getEditorConfig(columns);
let dataToEdit = $state(null);

</script>

<Grid {data} {columns} />
{#if dataToEdit}
    <Editor values={dataToEdit} {items} />
{/if}

Related articles: