Dynamic Columns Generation

Updated on Sep 9, 2026

The Kendo UI for Vue Grid allows the user to dynamically update the columns inside the component. You can dynamically change the number of the Grid columns using a computed property that returns the new columns' definition:

jsx

columns() {
    const columns = [
    {
        field: "id",
        width: "150px",
    },
    ];
    for (let c = 1; c < this.numberOfColumns; c++) {
    columns.push({
        field: "Field-" + c.toString(),
        width: "150px",
    });
    }
    return columns;
}

Example

View Source

Loading ...

Suggested Links

• API Reference of the Grid
• API Index of the Grid