Datagrid

Datagrid displays large sets of structured data in a table with built-in sorting, filtering, pagination, bulk actions, and server-side data support.

Datagrid

e-datagrid

Preview

Config

Bordered

Adds border to the datagrid component.

Loading

If true, shows the loading state.

Search Hidden

If true, removes search input from header.

Pagination Hidden

If true, removes pagination and shows all data in one page.

Page Size Hidden

If true, removes page size selector.

Horizontal Scroll Disabled

If true, disables horizontal scrolling.

Sorting Key

Defines the field on the data that will be used for sorting.

Sorting Order

If sorting-key is set, defines the sorting order.

—ascdesc

Page Size

Sets the number of displayed rows shown on one page.

Open in playground →

Empty State

Preview

Open in playground →

Numeric Columns

e-datagrid-column-numeric

Preview

Open in playground →

Icon Columns

[icon-key], [icon-color-key], [icon-tooltip-key]

Preview

Open in playground →

Actions

e-datagrid-action

Preview

Open in playground →

Bulk Actions

e-datagrid-bulk-action, e-datagrid-bulk-group

Preview

Open in playground →

Filters

e-datagrid-filter-checkbox, e-datagrid-filter-select

Preview

Open in playground →