Vue 3 Data GridUsing the HotColumn
component in Vue 3
Configure the Vue 3 data grid's columns, using the props of the HotColumn
component. Define a custom cell editor or a custom cell renderer.
On this page
Find out which Vue 3 versions are supported
Declare column settings
To declare column-specific settings, pass the settings as hot-column
properties, either separately or wrapped as a settings
property, exactly as you would for hot-table
.
First column header | Second column header |
---|---|
A1 | B1 |
A2 | B2 |
A3 | B3 |
A4 | B4 |
A5 | B5 |
A6 | B6 |
A7 | B7 |
A8 | B8 |
A9 | B9 |
A10 | B10 |
First column header | Second column header |
---|
Array of objects
To work with an array of objects for the hot-column
component, you need to provide precise information about the data structure for the columns. To do this, refer to the data for a column in properties as data
.
ID | Second column header | Price | Currency |
---|---|---|---|
1 | Table tennis racket | 13 | PLN |
2 | Outdoor game ball | 14 | USD |
3 | Mountain bike | 300 | USD |
ID | Second column header | Price | Currency |
---|
There is a newer version of Handsontable available. Switch to the latest version ⟶