e8-grid
Updated on Sep 18, 2025 18 minutes to readA powerful and flexible grid component for displaying, editing, and interacting with tabular data.
Supports filtering, sorting, pagination, selection, user settings, responsive layout, automatic data refresh, and automatic compact cards.
Overview
e8-grid is a versatile table component that allows dynamic column management, row selection, filtering, sorting, and inline editing.
It can handle data from multiple sources and provides extensive hooks for custom event handling.
User settings can be saved and restored, and the grid supports responsive layouts with adjustable column widths.
<e8-grid
:key="vars.mode"
source-type="url"
source="/doclarity/examples/e8-grid"
:disable-all-actions="true"
height="300px"
:sortable="false"
:hide-total-row-count="true"
:mode="vars.mode"
>
<template #actions>
<e8-form-radio-group
mode="buttons"
v-model="vars.mode"
:label="false"
:options="[{list: 'List'}, {cards: 'Cards'}]"
size="small"
variant="secondary"
></e8-form-radio-group>
</template>
<template #card="{ row, index }">
<div class="border rounded p-2">
<e8-link
:href="`/documentation/${row.workspace}/${row.permanentLink}`"
target="_blank"
>
{{row.presentation}}
</e8-link>
</div>
</template>
<e8-grid-column data-path="presentation"></e8-grid-column>
<e8-grid-column
data-path="permanentLink"
:data-columns="['workspace']"
:searchable="false"
:sortable="false"
width="10px"
>
<template slot-scope="{ row }">
<e8-link
:href="`/documentation/${row.workspace}/${row.permanentLink}`"
target="_blank"
>
<e8-icon name="link-45deg"></e8-icon>
</e8-link>
</template>
</e8-grid-column>
</e8-grid>
đź”˝ Show more
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| addition-disabled | Disables the ability to add new rows. | boolean | false |
| auto-refresh-interval | Automatically refreshes data after the specified number of seconds. | number | string | 0 |
| column-count | Number of columns to display. | number | 1 |
| column-count-lg | Number of columns for large screens. | number | 1 |
| column-count-md | Number of columns for medium screens. | number | 1 |
| column-count-sm | Number of columns for small screens. | number | 1 |
| column-count-xl | Number of columns for extra large screens. | number | 1 |
| column-width | CSS width for the columns (e.g. 200px). | string | 'auto' |
| column-width-lg | CSS width for the columns for large screens. | string | 'auto' |
| column-width-md | CSS width for the columns for medium screens. | string | 'auto' |
| column-width-sm | CSS width for the columns for small screens. | string | 'auto' |
| column-width-xl | CSS width for the columns for extra large screens. | string | 'auto' |
| copying-disabled | Disables copying of table rows. | boolean | false |
| create-object | Allows creation of new objects from the grid. | boolean | false |
| data-columns | Defines the grid columns. | string[] | — |
| data-path-id | Data path for row identifiers. | string | — |
| data-path-list | Data path for the full dataset. | string | — |
| deletion-disabled | Disables deletion of rows. | boolean | false |
| disable-all-actions | Disables all table actions. | boolean | false |
| disable-parent-scroll | Prevents scroll propagation to parent containers. | boolean | false |
| edit-mode | Sets the size of the edit/create modal form for the metadata list object. | FormSize | — |
| export-disabled | Disables the export functionality. | boolean | false |
| filling-values | Enables automatic pre-filling of attributes for a new object created via create-object. | Record<string, any> | — |
| form | Script alias of the form used for editing or adding a metadata object of type list. | E8ScriptAlias | — |
| filters | Set of filters applied to the table data. | Record<string, any> | async () => Record<string, any> | — |
| group-column | Column used for grouping rows. | string | — |
| group-order | Order of grouped rows. | string | 'asc' |
| height | Fixed height of the table. | string | — |
| hide-spinner | Hides loading spinner. | boolean | false |
| hide-total-row-count | Hides the total row count info. | boolean | false |
| layout | Layout type of the table. | E8GridLayouts | 'table' |
| mode | Rendering mode of the table. | E8GridModes | 'list' |
| page-size | Number of rows per page. | number | 20 |
| page-sizes | Comma-separated list of allowed page sizes. | string | 25, 50, 100, 250 |
| search-data-columns | Columns that participate in search. | string[] | — |
| searchable | Enables search functionality. | boolean | true |
| selection-disabled | Disables row selection. | boolean | false |
| sort | Initial sort definition. | Record<string, 'asc'| 'desc'> | — |
| sortable | Enables sorting. | boolean | true |
| source | Data source for the table. | string | — |
| source-type | Type of the data source. | E8GridSourceTypes | — |
| user-settings-key | Key to store user-specific table settings. | string | — |
| use-compact-mode | Automatically renders visible grid columns as cards on compact screens. | boolean | false |
| use-margin | Adds default margin around the grid. | boolean | false |
| viewing-disabled | Disables row viewing. | boolean | false |
| with-presentations | Enables presentation views. | boolean | false |
Slots
| Slot | Description |
|---|---|
| actions | Custom action buttons rendered for the grid. |
| card | Custom template for card view rendering. |
| default | Used to define columns. Must contain only <e8-grid-column> components. |
| prepend-actions | Buttons or controls rendered before the grid's main actions. |
Events
| Event | Description | Arguments (in order) |
|---|---|---|
| on-add-row | Called after saving a form opened by the grid to create or copy a row. | — |
| on-change-rows | Called after the grid’s create/copy form is saved or rows are successfully deleted. Editing an existing row does not call it. | — |
| on-delete-rows | Called after the grid successfully deletes one or more rows, before refreshing its data. | — |
| on-disable-selection | Called when selection mode is set to disabled. The selected rows are cleared. | — |
| on-deselect-row | Called after a row is removed from the selection. Receives that row. | row: object |
| on-enable-selection | Called when selection mode is set to enabled. The selected rows are cleared. | — |
| on-get-data | Called after data and groups are assigned to the grid. Receives the current page rows and the total matching row count. | data: object[], totalCount: number |
| on-select-row | Called after a row is added to the selection. Receives that row. | row: object |
| on-toggle-rows | Called after each actual row selection or deselection, following on-select-row or on-deselect-row. | — |
Methods
| Method | Description | Type |
|---|---|---|
| copyRow | Creates a copy of the specified row. | (row: Object) => void |
| deleteRow | Deletes a single row. | (row: Object) => void |
| deleteRows | Deletes multiple rows. | (rows: Object[]) => void |
| deleteSelectedRows | Deletes all currently selected rows. | () => void |
| disableSelection | Disables row selection mode. | () => void |
| enableSelection | Enables row selection mode. | () => void |
| getSelectedRows | Returns the list of selected rows. | () => Object[] |
| isSelectionEnabled | Checks whether selection mode is enabled. | () => boolean |
| openRow | Opens the specified row for viewing or editing. | (row: Object) => void |
| refresh | Reloads grid data. | () => void |
| toggleAllRows | Toggles selection state for all rows. | (state?: boolean) => void |
| toggleRow | Toggles selection state for a single row. | (row: Object, state?: boolean) => void |
| toggleSelection | Toggles row selection mode. | (state?: boolean) => void |