Link copied!

Datagrid API

e-datagrid

HTML Attributes API

Name Description Type Required Default value
id Page size selector is saved to localStorage if id is specified. string
data Defines datagrid data. If no data is given, empty state is displayed. array []
layout Default layout to the card layout you need to define the card view with e-datagrid-layout-card card|table table
bordered Adds border to the datagrid component boolean false
loading If true, shows the loading state. It will disappear when server side data has been loaded or when the attribute/property removed manually boolean false
auto-focus If true, focus the search input when datagrid is loaded. boolean false
action-type Defines the button type string "primary"
sorting-key Defines the field on the data that will be used for sorting. string
sorting-order If sorting-key is set this attribute defines the sorting order "asc" | "desc" "asc"
search-keys Deprecated Please use `search-includes` and `search-exclude` attributes insetead of this. Defines which fields will be used for searching. If not set, all rendered columns are used. array []
search-includes Defines which fields extends the rendered columns in searching. array []
search-tooltip Overrides default tooltip on search field. string
search-keyword Defines default search keyword string
search-hidden If true, removes search input from header. boolean false
pagination-hidden If true, removes pagination and shows all data in one page boolean false
page-size Sets the number of displayed rows shown on one page. string
page-size-hidden If true, remove page size selector boolean false
server Defines the url where data comes from. If server responds with error, empty state is displayed. string
server-error-state If true, shows the server error state. It will disappear when data has been set or when the attribute/property removed manually boolean false
server-select-all-visible If true, there will be "Select all" and "Clear selection" options on the bulk selection toolbar even if the datagrid uses server side pagination. In this case after a "Select all" the isSelectionInverted property will be true on the trigger event of the bulk action and the data will contain the unselected items. The id-key attibute also has to be set in order to work. boolean false
id-key Defines which property on the rows can serve as an identifier for matching rows in selection with the data from server. If it is not set, selection will be cleared when the content changes. string
customServer A function that acts like the server. A promise or object must be returned in the same format you would answer for the server one. See the example below (example) function
horizontal-scroll-disabled If true, disable horizontal scrolling and the content must use the space available. boolean false
highlighted-key Defines which property on the rows can serve as an identifier for highlighting. string

JavaScript API

Name Type Description Arguments
selectedItems Gets or sets the list of items that are selected by bulk actions array (example)
fetchData() Gets new data from server if datagrid uses the server or the customServer options

*: An array of entire objects for items in the data of the datagrid, with all their fields, or if there is an id (unique) field that can be passed too on its own as seen in the example below: 

[
  { id: 'my-id-value-1' },
  { id: 'my-id-value-4' }
]

Events

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

e-datagrid-layout-card e-datagrid-layout-table

For separate to card and table layout you need to define available features/display data under the proper component

<e-datagrid>
  <e-datagrid-layout-table>
    ...
  </e-datagrid-layout-table>
  <e-datagrid-layout-card>
    ...
  </e-datagrid-layout-card>
</e-datagrid>

e-datagrid-action

Defines the table action(s). If you insert multiple instances of the component, the first will the the primary, additional actions will be available in the dropdown. If you add 2 actions, the first action will be the primary button, the second action will be a regular button.

Properties

Name Description Type Required Default value
label Defines the label of the action. string true
tooltip Defines tooltip for actions. string
disabled Disables action. boolean false
disabled-tooltip Defines tooltip for disabled actions. string
disabled-type If you want to show permission information in tooltip, use this attribute - | "permission"
url Defines the url of the link string
dialog Defines the query selector of dialog which can be opened on action click string -
target Defines the target context of the linked URL string

Events

Event Description Returns
trigger Fires on the component when the action is clicked. 
{}

e-datagrid-column

Properties

Name Description Type Required Default value
head Defines column header. string true
content-key Defines relation between data and column. string true
width Defines the width of the column, it can be any unit (% is preferred) string
no-wrap Disables column wrapping boolean false
render-html Enables HTML parsing for rendering HTML content in the column.
The value passed is sanitized automatically against XSS attacks
 boolean false
sortable Enables column sortable. boolean true
tooltip Renders helper tooltip next to column header string
order Changes the order of the column number 0
default-width Defines the default value of the width setting of the column "narrow" | "wide"
search-exclude Column will be not searchable if it is true. boolean false
hidden Hides the column from the datagrid. boolean false
head-hidden Hides the header of the column. boolean false

e-datagrid-column-numeric

Properties

Name Description Type Required Default value
type Defines type of column. It affects format, alignment and behaviour (e.g. search). "number" | "percent" | "currency" | "currency-code" "digital" | "digital-binary" (divided by 1024) number
precision Defines the fix precision. number 0
currency Defines the currency if type is currency or currency-code. string "EUR"
humanize Formats a number to a more human-readable string. ['auto'|k'|'m'|'b'|'t']

e-datagrid-column-priority

Properties

Name Description Type Required Default value
disabled-tooltip Defines tooltip for disabled rows. string
disabled-key Defines disabled state based on the specified key for rows. string

Events

Event Description Returns
trigger Fires when the priority of a row is modified. 
{
    detail: {
        data: [whole data of the datagrid with the actual priority]
        targetRow: [the currently selected row with the actual priority]
    }
}
finish Fires when exit priority action is clicked. 
{
    detail: {
        data: [whole data of the datagrid with the actual priority]
    }
}

e-datagrid-column-time

Properties

Name Description Type Required Default value
type Defines type of column. It affects format, alignment and behaviour (e.g. search). Content should be ISO Date when type is time, it should be integer (seconds) when type is duration. "time" | "duration" "time"
format If type is time, it defines which part of the time will be displayed (the actual format depends on the config) "date" | "datetime" | "ymd" | "ymdhis" | "ymdhi" "datetime"

e-datagrid-column-switch

Properties

Name Description Type Required Default value
active-label Label of active switch string "Active"
inactive-label Label of inactive switch string "Inactive"
deactivate-tooltip Tooltip of active switch string "Deactivate"
activate-tooltip Tooltip of inactive switch string "Activate"
deactivating-label Label is shown when deactivating is in progress string "Deactivating"
activating-label Label is shown when activating is in progress string "Activating"
disabled Disables action. boolean false
disabled-tooltip Defines tooltip for disabled actions. It shows tooltip attribute if not specified. string
disabled-tooltip-key Defines tooltip text for disabled actions based on the specified key. string
disabled-key Defines disabled state based on the specified key. string
disabled-type If you want to show permission information in tooltip, use this attribute - | "permission"

Events

Event Description Returns
trigger Fires when the user uses the switch. Resolve should be called after handling the event (possibly with a request) or reject if there was an error. 
{
    detail: {
        data: [data row],
        resolve(newRowData),
        reject()
    }
}

e-datagrid-item-action

Properties

Name Description Type Required Default value
icon Defines the icon. string true
tooltip Defines the tooltip. string true
disabled Disables action. boolean false
disabled-tooltip Defines tooltip for disabled actions. It shows tooltip attribute if not specified. string
disabled-tooltip-key Defines tooltip for disabled actions based on the specified key. string
disabled-key Defines disabled state based on the specified key. string
disabled-type If you want to show permission information in tooltip, use this attribute - | "permission"
visible-key Defines visibility state based on the specified key. Action show only where the value is true. string
url-key Defines url of link based on the specified key. string
order Changes the order of the item actions number 0
target Defines the target context of the linked URL string
loading-key Defines loading state based on the specified key. string

Events

Event Description Returns
trigger Fires on action click in rows. 
{
    detail: {
        data: [data row]
    }
}

e-datagrid-bulk-action

Properties

Name Description Type Required Default value
icon Defines the icon. string
label Defines the label of the action. string true
disabled Disables the action. boolean false
disabled-tooltip Defines the tooltip around the action when disabled. string

Events

Event Description Returns
trigger Fires on action click. The isSelectionInverted will be true only if the datagrid uses server side pagination and the user used "Select all" and there was no "Clear selection" after that. 
{
    detail: {
        data: [selected or deselected rows]
    },
    isSelectionInverted: boolean
}

e-datagrid-bulk-group

Properties

Name Description Type Required Default value
type Defines the visual representation of the group. "dropdown" | "button-group" "dropdown"
icon Defines the icon of the handler if the type is dropdown. string
label Defines the label of the handler if the type is dropdown. string
tooltip Defines the tooltip around the handler if the type is dropdown. string
disabled Disables the handler if type is dropdown. boolean false
disabled-tooltip Defines the tooltip around the handler when disabled. string

e-datagrid-bulk-toggle

Properties

Name Description Type Required Default value
icon Defines the icon of the bulk toggle button. string
label Defines the label of the bulk toggle button. string

e-datagrid-filter-select

Properties

Name Description Type Required Default value
label Defines filter label. string
content-key Defines relation between filter and column. string true
advanced Shows the filter under the advanced section. boolean false
options Defines a custom list of options. array or [{ label: ' ', value: ' ' }]
selected-option Sets the filter to this value by default. string
disabled Set disabled state on select boolean false
readonly Set readonly state on select boolean false

Events

Event Description Returns
trigger Fires on filter state change. 
{
    detail: {
        value: [filter state]
    }
}

e-datagrid-filter-multiselect

Properties

Name Description Type Required Default value
label Defines filter label. string
content-key Defines relation between filter and column. string true
advanced Shows the filter under the advanced section. boolean false
options Defines a custom list of options. array or [{ label: '', value: '' }]
selected-options Sets the filter to this value by default. array
placeholder Defines multiselect placeholder. string
content-format Defines how to handle the assigned data. array false
empty-label Defines the label of the option for items where no value presented. This is working only if the content-format is array string Blank
label-merge-limit Display multiple selected options as a single label. integer Infinity
has-operator Adds an "Any"/"All" option to the multiselect filter. boolean false
selected-operator Sets the default selected option for the "Any"/"All" option of the multiselect filter. "or" or "and" false
disabled Set disabled state on multiselect boolean false
readonly Set readonly state on multiselect boolean false

Events

Event Description Returns
trigger Fires on filter state change. 
{
    detail: {
        value: [filter state]
    }
}

e-datagrid-filter-daterange

Properties

Name Description Type Required Default value
label Defines filter label. string
content-key Defines relation between filter and column. string true
advanced Shows the filter under the advanced section. boolean false
start The start of the initially selected date range string
end The end of the initially selected date range string
disabled Set disabled state on datrange boolean false

Events

Event Description Returns
trigger Fires on filter state change. 
{
    detail: {
        value: {
            start: {
                date: [date as string],
                dateObj: [date as JavaScript date]
            },
            end: {
                date: [date as string],
                dateObj: [date as JavaScript date]
            }
        }
    }
}

e-datagrid-filter-checkbox

Properties

Name Description Type Required Default value
label Defines filter label. string
content-key Defines relation between filter and column. string true
advanced Shows the filter under the advanced section. boolean false
default-checked Turns on the filter by default boolean false
checked Sets the current state of the filter. boolean
tooltip Adds a helper tooltip with the given string to the label string
disabled Set disabled state on checkbox boolean false

Events

Event Description Returns
trigger Fires on filter state change. 
{
    detail: {
        value: [filter state]
    }
}

e-datagrid-column-thumbnail

Properties

Name Description Type Required Default value
content-key Defines relation between data and thumbnail. We display the source as a iframe srcdoc. Value should be valid HTML.
The value passed is sanitized automatically against XSS attacks
 string true
source-width Original size of the content and we will scale to fit automatically string
head We will display in view settings string

e-datagrid-groups

Properties

Name Description Type Required Default value
content-key Defines relation between data and groups. We use the data for create group and the label, order will be alphabetical. string true
groups You can define groups manually, order will be the same as in your data string
default-label You can set custom label to uncatogarised items group. This will be used only if you define groups manually and some of the data not matching of any groups. string Ungrouped Items

Server API

Sample request sent by e-datagrid

Datagrid will send a JSON object like this one to the url you gave in the server parameter on initialization, filtering, and pagination:

{
  requestCount: 1,
  pageSize: 10,
  offset: 0,
  sortingKey: null,
  sortingOrder: 'asc',
  filterValues: {
    testKey: {
      value: true,
      partialMatch: false,
      contentFormat: false,
      type: 'checkbox',
      custom: false,
      default: true
    }
  },
  filterMetadata: {
    timeZone: 'Europe/Budapest'
  },
  search: '',
  groupContentKey: '',
  predefinedGroups: [];
}
Property Type Description
requestCount number This is used by datagrid to ensure that the Ajax returns from server-side processing requests are drawn in sequence.
pageSize number Number of records that the table can display in the current draw. It is expected that the number of records returned will be equal to this number.
offset number Pagination's first record indicator. This is the starting point in the current data set indexed from 0.
sortingKey string Column to which ordering should be applied.
sortingOrder string Ordering direction for this column. It will be asc or desc to indicate ascending ordering or descending ordering, respectively.
filterValues string Filter value to apply to specific column. For name column i.e. { name: "option-Lorem" }
filterMetadata object Filter related data: { timeZone: string }
search string Global search value. To be applied to all columns.
groupContentKey string Datafield what is base of the grouping
groupContentKey Array of string List of grouping value what is predefined on the datagrid.

Sample response to e-datagrid from the server

Datagrid will wait for a JSON object like this one as a response:

{
  requestCount: 1
  content: [...],
  itemCount: 82,
  filteredItemCount: 42
}
Property Type Description
requestCount number This should be the same value that came with the request that you answering.
content array The same object what you would pass to the datagrid with its data property.
itemCount number The total number of rows without filtering applied.
filteredItemCount number The number of rows with filtering applied.

Custom Server Example

Instead of the server property, you can use a customServer function, so you have absolute control over what should happen when something changes in the datagrid.

<e-datagrid>
...
</e-datagrid>
document.querySelector('e-datagrid').customServer = async (state) => {
  const response = await fetch('<your-endpoint>', {
    body: { ...state },
    headers: {
      'Content-Type': 'application/json',
      ...
    }
  });

  return await response.json();
};