Applying inline editors

The Grid widget provides a predefined number of inline editors that can be applied to a column cell: combo, multicombo, text, textarea, datepicker, switch, checkbox, richselect.

To apply the inline editor to column cells, set the editor parameter of the columns property to the required value.

Example:

import { Grid } from "wx-react-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,
    },
];

export default function App() {
    const api = useRef(null);

    return <Grid data={data} columns={columns} api={api} />;
}