Datagrid API

Properties

Name	Type	Default	Description
id	string	—	When set, the page size selector is saved to localStorage (requires Remember Settings).
data	array	[]	Defines the datagrid data. Shows an empty state when not provided.
layout	'table' | 'card'	'table'	Default layout. Use 'card' together with e-datagrid-layout-card.
bordered	boolean	false	Adds a border to the datagrid.
loading	boolean	false	Shows the loading state. Disappears when data is loaded or the attribute is removed.
auto-focus	boolean	false	Focuses the search input when the datagrid is loaded.
action-type	string	'primary'	Defines the button type for actions.
sorting-key	string	—	Data field used for sorting.
sorting-order	'asc' | 'desc'	'asc'	Sort direction when sorting-key is set.
search-keysdeprecated	array	[]	Defines which fields are used for searching. Use search-includes and search-exclude instead.
search-includes	array	[]	Extends the searchable fields beyond the rendered columns.
search-tooltip	string	—	Overrides the default tooltip on the search field.
search-keyword	string	—	Sets a default search keyword.
search-hidden	boolean	false	Removes the search input from the header.
search-remember-excluded	boolean	false	Prevents the search keyword from being saved to storage.
pagination-hidden	boolean	false	Removes pagination and shows all data on one page.
page-size	string	—	Sets the number of rows displayed per page.
page-size-hidden	boolean	false	Removes the page size selector.
server	string	—	URL to fetch data from. Shows an empty state if the server responds with an error.
server-error-state	boolean	false	Shows the server error state. Disappears when data is set or the attribute is removed.
server-select-all-visible	boolean	false	Shows 'Select all' and 'Clear selection' in the bulk toolbar for server-side pagination. Requires id-key.
id-key	string	—	Property used as a unique row identifier for selection matching. If not set, selection clears when content changes.
customServer	function	—	Function alternative to server. Must return a promise or object in the same format as the server response.
horizontal-scroll-disabled	boolean	false	Disables horizontal scrolling; content uses the available space.
highlighted-key	string	—	Row property used as the highlight identifier.
always-show-bulk-action	boolean	false	Keeps the bulk action bar always visible.
filters-visible	boolean	false	Opens the filters panel by default.

JavaScript API

Name	Kind	Description
selectedItems	getter/setter	Gets or sets items selected by bulk actions. Accepts full row objects or objects with just the id field.
toggleFilterPanel()	method	Opens or closes the filter panel based on its current state.
clearAllFilters()	method	Clears all filters except those with clear-hidden, disabled, or readonly set.
fetchData()	method	Fetches new data from the server when using the server or customServer option.

Events

Event	Description		Returns
filter	Fires when any filter (including search) changes.		{ detail: { filterValues, searchKeyword } }
pagesizechange	Fires when the page size is changed via the selector.		{ detail: { value } }
sort	Fires when column sorting changes.		{ detail: { contentKey, order: 'asc' | 'desc' } }
select	Fires when an item is selected in bulk mode.		{ detail: { selectedItems } }