e8-form-table
Updated on Sep 18, 2025 4 minutes to readA flexible and feature-rich table component designed for editing tabular data within a form.
Supports adding, deleting, reordering, filtering, and responsive card rendering on mobile devices.
Overview
e8-form-table displays and manages structured tabular data.
It supports dynamic row management, lazy rendering, inline filtering, and responsive layouts.
The component also provides hooks for custom event handling when rows are added, deleted, or changed.
<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 |
|---|---|---|---|
| addition-disabled | Disables the ability to add new rows. | boolean | false |
| deletion-confirmation | Shows a confirmation dialog before deleting a row. | boolean | false |
| deletion-disabled | Disables row deletion. | boolean | false |
| disable-parent-scroll | Prevents scroll propagation to parent elements when the table is scrolled. | boolean | false |
| filter-match-type | Defines the matching rule for filters. | 'all' | 'any' | any |
| filters | Set of filters applied to the table data. | Record<string, any> | — |
| internal-id | Script alias for the tabular input of a metadata list, accessible via object and usable only within its own metadata forms. | E8ScriptAlias | — |
| height | Sets fixed CSS height for the table container. | string | — |
| hide-header | Hides the table header. | boolean | false |
| label | Field label text; set to false to hide label. | string | boolean | — |
| lazy-rendering | Enables lazy rendering for performance optimization. | boolean | true |
| readonly | Makes the table non-editable. | boolean | false |
| rows-draggable | Enables drag-and-drop reordering of rows. | boolean | true |
| show-search | Displays a search field above the table. | boolean | false |
| size | Size of the control. | E8ElementSizes | — |
| tooltip | Tooltip text displayed under the label. | string | — |
| v-model | Two-way bound value representing the tabular input of a list. | AppTabularInput | — |
| visible | Controls component visibility. | boolean | true |
Slots
| Slot | Description |
|---|---|
| default | Used to define table columns. Must contain only <e8-form-table-column> components. |
Events
| Event | Description |
|---|---|
| on-change | Emitted whenever table data changes. |
| on-row-add | Emitted when a new row is added. |
| on-row-change | Emitted when an existing row is modified. |
| on-row-delete | Emitted when a row is removed. |