Combo in grid

Fred

I’m using your datagrid and combo as a cell editor to display a list of countries. How can I add a flag image next to each country in the list?

SVAR_tech

You can create and import a custom Svelte component with the path to flags in it. And add the component name as the value of the cell property for the editor in the columns array. But the editor type should be richselecet

<script>
    import { Grid } from "@wx/svelte-grid";
    import { getData } from "../data";
    import FlagCell from "../custom/FlagCell.svelte";

    const { data, countries } = getData();

    const columns = [

        {
            id: "country",
            header: 'Country',
            editor: {
                type: "richselect",
                config: {cell: FlagCell }, // add the imported component name here
            },
            options: countries,
            width: 200,
        },

    ];
</script>

<Grid {data} {columns} />

An example of the component to be imported:

<script>
    export let data;

</script>

<div><img src='path/to/flag/myflag.png'/>  {data.name} </div>