e8-form-table-column
Updated on Sep 18, 2025 20 minutes to readA table column helper for e8-form-table that defines how a single column is rendered, which input component is used for cells, and how cell values are synchronized with the parent table.
Overview
e8-form-table-column declares one column inside an e8-form-table.
It selects or renders a cell component based on input-type or the attribute type, forwards common props (placeholder, tooltip, readonly, size, etc.) to the rendered cell, and controls column sizing and header presentation.
<e8-form-table
internal-id="tscExampleProducts"
v-model="object.tscExampleProducts"
height="400px"
>
<e8-form-table-column internal-id="name"></e8-form-table-column>
<e8-form-table-column internal-id="price"></e8-form-table-column>
</e8-form-table>
đź”˝ Show more
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| horizontal-alignment | Horizontal alignment for the cell content. | E8TextHorizontalAlignments | — |
| input-type | Explicit component to render inside the cell (e.g. e8-form-input, e8-form-dropdown). | string | — |
| internal-id | Script alias for the tabular input column of a metadata list, usable only within its own metadata forms. | E8ScriptAlias | — |
| label | Header text for the column; set to false to hide label. | string | boolean | — |
| label-horizontal-alignment | Horizontal alignment for the header label. | string | — |
| lazy-sync | Enable lazy synchronization between cell editor and model. | boolean | false |
| max-width | CSS max-width for the column. | string | — |
| min-width | CSS min-width for the column. | string | — |
| placeholder | Placeholder forwarded to cell editors. | string | boolean | — |
| readonly | Make cells in this column read-only. | boolean | false |
| tooltip | Tooltip text for the column header. | string | — |
| v-model | Two-way binding with the parent table’s data for column-specific behavior (the table handles row data). | any | — |
| visible | Toggle column visibility. | boolean | true |
| width | CSS width for the column (e.g. 200px). | string | '200px' |
Slots
| Slot | Description |
|---|---|
| default | Custom renderer for a cell. Receives { row, index } in the scoped slot; if not provided, a suitable form component is rendered automatically. |
Events
| Event | Description | Arguments (in order) |
|---|---|---|
| on-change | Triggered when a cell value changes. Receives the new and previous values from the cell editor; their types depend on the column. | value: any, oldValue: any |
| on-blur | Forwarded when a cell editor that supports focus events loses focus. | — |
| on-focus | Forwarded when a cell editor that supports focus events gains focus. | — |
| on-select | Forwarded when a text or number cell editor selects a suggestion. | value: string | number |
| on-show-popup | Forwarded when a lookup cell prepares the selected option’s details popup. A returned promise is awaited. | option: object |
| on-show-popper | Forwarded when a date cell opens its calendar popup. | — |
| on-hide-popper | Forwarded when a date cell closes its calendar popup. | — |
| on-image-upload | Forwarded by an HTML cell editor for custom image insertion. A multilingual HTML cell uses the fixed method name onImageUpload. | data: { basename: string, base64str: string }, editor: object (editor instance) |
| on-modal-shown | Forwarded when a signature cell finishes opening its drawing modal. | — |
| on-modal-hidden | Forwarded when a signature cell finishes closing its drawing modal. | — |
| on-upload-start | Forwarded when a file or image cell begins preparing an upload. | batch: FileUploadBatch |
| on-upload-complete | Forwarded when a file or image cell finishes processing an upload, including failures. | batch: FileUploadBatch |
| on-upload-error | Forwarded when a file or image cell upload fails, before on-upload-complete. | batch: FileUploadBatch |