e8-form-table
Updated on Sep 18, 2025 11 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 |
| modify-data | Determines whether changes to this field mark the object as modified and require saving. | 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 | — |
| 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 | Arguments (in order) |
|---|---|---|
| on-change | Called after a row is added, deleted, edited, or reordered. No arguments are passed. | — |
| on-row-add | Called after a row is added. Receives the new row and its zero-based index. | row: object, index: number |
| on-row-change | Called after a cell value is applied. Receives the updated row, its zero-based index, the field alias, and the new cell value. | row: object, index: number, scriptAlias: E8ScriptAlias, value: any |
| on-row-delete | Called after a row is removed. Receives the removed row and its former zero-based index. | row: object, index: number |