Datagrid Examples With Card
You can made available "card layout" with wrapping the elements with e-datagrid-layout-card.
We support most of the datagrid components in "card layout"
e-datagrid-layout-card
<e-datagrid layout='card' data="[{"name":"John","surname":"Lennon","role":"singer","thumbnail":"<img src='https://place-hold.it/600x400/7a81be/ffffff&text=600x400&fontsize=23'>","editDisabled":false,"deleteDisabled":true,"editDisabledTooltip":"Lennon cannot be edited","editUrl":"http://example.com/edit?name=Lennon","followers":123456,"income":56789.123,"practice":0.0913,"birthday":"1940-10-09T07:30","editVisibility":false,"duration":3,"priority":2},{"name":"Ringo","surname":"Starr","role":"drums","thumbnail":"<img src='https://place-hold.it/600x400/7a81be/ffffff&text=600x400&fontsize=23'>","editDisabled":true,"deleteDisabled":false,"editDisabledTooltip":"Starr cannot be edited","editUrl":"http://example.com/edit?name=Starr","followers":2345,"income":56435.1,"practice":0.111,"birthday":"1940-07-07T18:00","editVisibility":true,"duration":80,"priority":1},{"name":"George","surname":"Harrison","role":"guitar","thumbnail":"<img src='https://place-hold.it/600x400/7a81be/ffffff&text=600x400&fontsize=23'>","editDisabled":true,"deleteDisabled":false,"editDisabledTooltip":"Harrison cannot be edited","editUrl":"http://example.com/edit?name=Harrison","followers":3456,"income":51234,"practice":0.1228,"birthday":"1943-02-25T05:39","editVisibility":false,"duration":1600,"priority":3},{"name":"Paul","surname":"McCartney","role":"bass","thumbnail":"<img src='https://place-hold.it/600x400/7a81be/ffffff&text=600x400&fontsize=23'>","editDisabled":false,"deleteDisabled":true,"editDisabledTooltip":"McCartney cannot be edited","editUrl":"http://example.com/edit?name=McCartney","followers":4567,"income":52347,"practice":0.084,"birthday":"1942-06-18T11:00","editVisibility":false,"duration":3601,"priority":4}]">
<e-datagrid-layout-table>
<e-datagrid-column head="Name" content-key="name"></e-datagrid-column>
<e-datagrid-column head="Surname" content-key="surname"></e-datagrid-column>
<e-datagrid-column head="Role" content-key="role"></e-datagrid-column>
</e-datagrid-layout-table>
<e-datagrid-layout-card>
<e-datagrid-column-thumbnail head="Thumbnail" content-key="thumbnail" source-width="600"></e-datagrid-column-thumbnail>
<e-datagrid-column head="Name" content-key="name"></e-datagrid-column>
<e-datagrid-column head="Surname" content-key="surname"></e-datagrid-column>
<e-datagrid-filter-select label="Name" content-key="name"></e-datagrid-filter-select>
<e-datagrid-filter-select label="Surname" content-key="surname" advanced></e-datagrid-filter-select>
</e-datagrid-layout-card>
</e-datagrid>e-datagrid-bulk-action
<e-datagrid layout='card' data="[{"name":"John","surname":"Lennon","role":"singer","thumbnail":"<img src='https://place-hold.it/600x400/7a81be/ffffff&text=600x400&fontsize=23'>","editDisabled":false,"deleteDisabled":true,"editDisabledTooltip":"Lennon cannot be edited","editUrl":"http://example.com/edit?name=Lennon","followers":123456,"income":56789.123,"practice":0.0913,"birthday":"1940-10-09T07:30","editVisibility":false,"duration":3,"priority":2},{"name":"Ringo","surname":"Starr","role":"drums","thumbnail":"<img src='https://place-hold.it/600x400/7a81be/ffffff&text=600x400&fontsize=23'>","editDisabled":true,"deleteDisabled":false,"editDisabledTooltip":"Starr cannot be edited","editUrl":"http://example.com/edit?name=Starr","followers":2345,"income":56435.1,"practice":0.111,"birthday":"1940-07-07T18:00","editVisibility":true,"duration":80,"priority":1},{"name":"George","surname":"Harrison","role":"guitar","thumbnail":"<img src='https://place-hold.it/600x400/7a81be/ffffff&text=600x400&fontsize=23'>","editDisabled":true,"deleteDisabled":false,"editDisabledTooltip":"Harrison cannot be edited","editUrl":"http://example.com/edit?name=Harrison","followers":3456,"income":51234,"practice":0.1228,"birthday":"1943-02-25T05:39","editVisibility":false,"duration":1600,"priority":3},{"name":"Paul","surname":"McCartney","role":"bass","thumbnail":"<img src='https://place-hold.it/600x400/7a81be/ffffff&text=600x400&fontsize=23'>","editDisabled":false,"deleteDisabled":true,"editDisabledTooltip":"McCartney cannot be edited","editUrl":"http://example.com/edit?name=McCartney","followers":4567,"income":52347,"practice":0.084,"birthday":"1942-06-18T11:00","editVisibility":false,"duration":3601,"priority":4}]">
<e-datagrid-layout-table>
<e-datagrid-bulk-action label="Download Selected" icon="download"></e-datagrid-bulk-action>
<e-datagrid-bulk-group label="Export Selected" tooltip="Download in a different format" icon="e-refresh">
<e-datagrid-bulk-action label="Export as BMP" icon="e-file-bmp"></e-datagrid-bulk-action>
<e-datagrid-bulk-action label="Export as JPG" icon="e-file-jpg"></e-datagrid-bulk-action>
</e-datgarid-bulk-group>
<e-datagrid-bulk-group type="button-group">
<e-datagrid-bulk-action label="Edit Selected" icon="pencil"></e-datagrid-bulk-action>
<e-datagrid-bulk-action label="Delete Selected" icon="trash-o"></e-datagrid-bulk-action>
</e-datgarid-bulk-group>
<e-datagrid-column head="Name" content-key="name"></e-datagrid-column>
<e-datagrid-column head="Surname" content-key="surname"></e-datagrid-column>
<e-datagrid-column head="Role" content-key="role"></e-datagrid-column>
<e-datagrid-item-action icon="pencil" tooltip="Edit"></e-datagrid-item-action>
</e-datagrid-layout-table>
<e-datagrid-layout-card>
<e-datagrid-action label="Create Campaign"></e-datagrid-action>
<e-datagrid-bulk-action label="Download Selected" icon="download"></e-datagrid-bulk-action>
<e-datagrid-bulk-group label="Export Selected" tooltip="Download in a different format" icon="e-refresh">
<e-datagrid-bulk-action label="Export as BMP" icon="e-file-bmp"></e-datagrid-bulk-action>
<e-datagrid-bulk-action label="Export as JPG" icon="e-file-jpg"></e-datagrid-bulk-action>
</e-datgarid-bulk-group>
<e-datagrid-bulk-group type="button-group">
<e-datagrid-bulk-action label="Edit Selected" icon="pencil"></e-datagrid-bulk-action>
<e-datagrid-bulk-action label="Delete Selected" icon="trash-o"></e-datagrid-bulk-action>
</e-datgarid-bulk-group>
<e-datagrid-column-thumbnail head="Thumbnail" content-key="thumbnail" source-width="600"></e-datagrid-column-thumbnail>
<e-datagrid-column head="Name" content-key="name"></e-datagrid-column>
<e-datagrid-column head="Surname" content-key="surname"></e-datagrid-column>
<e-datagrid-item-action icon="pencil" tooltip="Edit"></e-datagrid-item-action>
</e-datagrid-layout-card>
</e-datagrid>e-datagrid-layout-card layout='card'
<e-datagrid layout='card' data="[{"name":"John","surname":"Lennon","role":"singer","thumbnail":"<img src='https://place-hold.it/600x400/7a81be/ffffff&text=600x400&fontsize=23'>","editDisabled":false,"deleteDisabled":true,"editDisabledTooltip":"Lennon cannot be edited","editUrl":"http://example.com/edit?name=Lennon","followers":123456,"income":56789.123,"practice":0.0913,"birthday":"1940-10-09T07:30","editVisibility":false,"duration":3,"priority":2},{"name":"Ringo","surname":"Starr","role":"drums","thumbnail":"<img src='https://place-hold.it/600x400/7a81be/ffffff&text=600x400&fontsize=23'>","editDisabled":true,"deleteDisabled":false,"editDisabledTooltip":"Starr cannot be edited","editUrl":"http://example.com/edit?name=Starr","followers":2345,"income":56435.1,"practice":0.111,"birthday":"1940-07-07T18:00","editVisibility":true,"duration":80,"priority":1},{"name":"George","surname":"Harrison","role":"guitar","thumbnail":"<img src='https://place-hold.it/600x400/7a81be/ffffff&text=600x400&fontsize=23'>","editDisabled":true,"deleteDisabled":false,"editDisabledTooltip":"Harrison cannot be edited","editUrl":"http://example.com/edit?name=Harrison","followers":3456,"income":51234,"practice":0.1228,"birthday":"1943-02-25T05:39","editVisibility":false,"duration":1600,"priority":3},{"name":"Paul","surname":"McCartney","role":"bass","thumbnail":"<img src='https://place-hold.it/600x400/7a81be/ffffff&text=600x400&fontsize=23'>","editDisabled":false,"deleteDisabled":true,"editDisabledTooltip":"McCartney cannot be edited","editUrl":"http://example.com/edit?name=McCartney","followers":4567,"income":52347,"practice":0.084,"birthday":"1942-06-18T11:00","editVisibility":false,"duration":3601,"priority":4}]">
<e-datagrid-layout-card>
<e-datagrid-column-thumbnail head="Thumbnail" content-key="thumbnail" source-width="600"></e-datagrid-column-thumbnail>
<e-datagrid-column head="Name" content-key="name"></e-datagrid-column>
<e-datagrid-column head="Surname" content-key="surname"></e-datagrid-column>
<e-datagrid-item-action icon="pencil" tooltip="Edit"></e-datagrid-item-action>
</e-datagrid-layout-card>
</e-datagrid><e-datagrid layout="card" id-key="id">
<e-datagrid-layout-card>
<e-datagrid-column-thumbnail head="Thumbnail" content-key="thumbnail"></e-datagrid-column-thumbnail>
<e-datagrid-column head="Name" content-key="name"></e-datagrid-column>
</e-datagrid-layout-card>
</e-datagrid>
<script>
const data = [
{ id: 0, name: 'John' },
{ id: 1, name: 'Doe' },
{ id: 2, name: 'Pogacar' },
{ id: 3, name: 'Fortunato' },
{ id: 4, name: 'Carapaz' },
{ id: 5, name: 'Pedersen' },
{ id: 6, name: 'Roglic' },
{ id: 7, name: 'Del Toro' },
{ id: 8, name: 'Yates' },
{ id: 9, name: 'Pelizzari' }
];
const datagrid = document.querySelector('e-datagrid');
datagrid.data = data;
// To make this callback work, you must define the id-key attribute on the datagrid
const intersectCallback = async ({ id }) => {
// Simulate fetch delay
await new Promise(resolve => setTimeout(resolve, 1000));
if (id === 2) {
// Throw an error if somthing was wrong
throw new Error('Fetch error');
} else {
// Content is mandatory, sourceWidth is optional
return {
content: `<div>Hello ${id}</div>`,
sourceWidth: '100px'
};
}
};
const thumbnailColumn = document.querySelector('e-datagrid-column-thumbnail');
thumbnailColumn.intersectCallback = intersectCallback;
</script>