e8-grid
Updated on Sep 18, 2025 9 minutes to readA powerful and flexible grid component for displaying, editing, and interacting with tabular data.
Supports filtering, sorting, pagination, selection, user settings, and responsive layout.
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.
🔽 Show more
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| addition-disabled | Disables the ability to add new rows. | boolean | false |
| 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 | 'full' |
| 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-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 |
|---|---|
| on-add-row | Triggered when a new row is added. |
| on-change-rows | Triggered when any row is changed. |
| on-delete-rows | Triggered when rows are deleted. |
| on-disable-selection | Triggered when selection is disabled. |
| on-deselect-row | Triggered when a row is deselected. |
| on-enable-selection | Triggered when selection is enabled. |
| on-get-data | Triggered when table data is requested. |
| on-select-row | Triggered when a row is selected. |
| on-toggle-rows | Triggered when row selection is toggled. |