HotColumn component

HotColumn is a Vue 3 component that lets you define column settings declaratively as child components of HotTable.

[[toc]]

Find out which Vue 3 versions are supported

Declare column settings

To declare column-specific settings, pass the settings as <HotColumn/> properties, either separately or wrapped as a settings property, exactly as you would for <HotTable/>.

::: example #example1 :vue3

@code

:::

Array of objects

To work with an array of objects for the <HotColumn/> 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.

::: example #example2 :vue3

@code

:::

Declare a custom editor as a component

You can declare a custom editor by creating a class that extends TextEditor and passing it to a <HotColumn/> via the editor prop. The editor's input element uses a placeholder attribute to display a hint when the cell value is empty.

::: example #example3 :vue3

@code

:::

Declare a custom renderer

You can declare a custom renderer by creating a function that matches the BaseRenderer signature and passing it to a <HotColumn/> via the renderer prop. The renderer receives the cell's td element and the cell value, and must return the modified td.

::: example #example4 :vue3

@code

:::

Result

Using HotColumn child components, each column reads its settings declaratively from Vue props rather than from a flat columns array, keeping your template in sync with your column configuration.