Link copied!

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' data="[{&quot;name&quot;:&quot;John&quot;,&quot;surname&quot;:&quot;Lennon&quot;,&quot;role&quot;:&quot;singer&quot;,&quot;thumbnail&quot;:&quot;<img src='https://place-hold.it/600x400/7a81be/ffffff&text=600x400&fontsize=23'>&quot;,&quot;editDisabled&quot;:false,&quot;deleteDisabled&quot;:true,&quot;editDisabledTooltip&quot;:&quot;Lennon cannot be edited&quot;,&quot;editUrl&quot;:&quot;http://example.com/edit?name=Lennon&quot;,&quot;followers&quot;:123456,&quot;income&quot;:56789.123,&quot;practice&quot;:0.0913,&quot;birthday&quot;:&quot;1940-10-09T07:30&quot;,&quot;editVisibility&quot;:false,&quot;duration&quot;:3,&quot;priority&quot;:2},{&quot;name&quot;:&quot;Ringo&quot;,&quot;surname&quot;:&quot;Starr&quot;,&quot;role&quot;:&quot;drums&quot;,&quot;thumbnail&quot;:&quot;<img src='https://place-hold.it/600x400/7a81be/ffffff&text=600x400&fontsize=23'>&quot;,&quot;editDisabled&quot;:true,&quot;deleteDisabled&quot;:false,&quot;editDisabledTooltip&quot;:&quot;Starr cannot be edited&quot;,&quot;editUrl&quot;:&quot;http://example.com/edit?name=Starr&quot;,&quot;followers&quot;:2345,&quot;income&quot;:56435.1,&quot;practice&quot;:0.111,&quot;birthday&quot;:&quot;1940-07-07T18:00&quot;,&quot;editVisibility&quot;:true,&quot;duration&quot;:80,&quot;priority&quot;:1},{&quot;name&quot;:&quot;George&quot;,&quot;surname&quot;:&quot;Harrison&quot;,&quot;role&quot;:&quot;guitar&quot;,&quot;thumbnail&quot;:&quot;<img src='https://place-hold.it/600x400/7a81be/ffffff&text=600x400&fontsize=23'>&quot;,&quot;editDisabled&quot;:true,&quot;deleteDisabled&quot;:false,&quot;editDisabledTooltip&quot;:&quot;Harrison cannot be edited&quot;,&quot;editUrl&quot;:&quot;http://example.com/edit?name=Harrison&quot;,&quot;followers&quot;:3456,&quot;income&quot;:51234,&quot;practice&quot;:0.1228,&quot;birthday&quot;:&quot;1943-02-25T05:39&quot;,&quot;editVisibility&quot;:false,&quot;duration&quot;:1600,&quot;priority&quot;:3},{&quot;name&quot;:&quot;Paul&quot;,&quot;surname&quot;:&quot;McCartney&quot;,&quot;role&quot;:&quot;bass&quot;,&quot;thumbnail&quot;:&quot;<img src='https://place-hold.it/600x400/7a81be/ffffff&text=600x400&fontsize=23'>&quot;,&quot;editDisabled&quot;:false,&quot;deleteDisabled&quot;:true,&quot;editDisabledTooltip&quot;:&quot;McCartney cannot be edited&quot;,&quot;editUrl&quot;:&quot;http://example.com/edit?name=McCartney&quot;,&quot;followers&quot;:4567,&quot;income&quot;:52347,&quot;practice&quot;:0.084,&quot;birthday&quot;:&quot;1942-06-18T11:00&quot;,&quot;editVisibility&quot;:false,&quot;duration&quot;:3601,&quot;priority&quot;: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-layout-card>
</e-datagrid>
<e-datagrid layout='card' data="[{&quot;name&quot;:&quot;John&quot;,&quot;surname&quot;:&quot;Lennon&quot;,&quot;role&quot;:&quot;singer&quot;,&quot;thumbnail&quot;:&quot;<img src='https://place-hold.it/600x400/7a81be/ffffff&text=600x400&fontsize=23'>&quot;,&quot;editDisabled&quot;:false,&quot;deleteDisabled&quot;:true,&quot;editDisabledTooltip&quot;:&quot;Lennon cannot be edited&quot;,&quot;editUrl&quot;:&quot;http://example.com/edit?name=Lennon&quot;,&quot;followers&quot;:123456,&quot;income&quot;:56789.123,&quot;practice&quot;:0.0913,&quot;birthday&quot;:&quot;1940-10-09T07:30&quot;,&quot;editVisibility&quot;:false,&quot;duration&quot;:3,&quot;priority&quot;:2},{&quot;name&quot;:&quot;Ringo&quot;,&quot;surname&quot;:&quot;Starr&quot;,&quot;role&quot;:&quot;drums&quot;,&quot;thumbnail&quot;:&quot;<img src='https://place-hold.it/600x400/7a81be/ffffff&text=600x400&fontsize=23'>&quot;,&quot;editDisabled&quot;:true,&quot;deleteDisabled&quot;:false,&quot;editDisabledTooltip&quot;:&quot;Starr cannot be edited&quot;,&quot;editUrl&quot;:&quot;http://example.com/edit?name=Starr&quot;,&quot;followers&quot;:2345,&quot;income&quot;:56435.1,&quot;practice&quot;:0.111,&quot;birthday&quot;:&quot;1940-07-07T18:00&quot;,&quot;editVisibility&quot;:true,&quot;duration&quot;:80,&quot;priority&quot;:1},{&quot;name&quot;:&quot;George&quot;,&quot;surname&quot;:&quot;Harrison&quot;,&quot;role&quot;:&quot;guitar&quot;,&quot;thumbnail&quot;:&quot;<img src='https://place-hold.it/600x400/7a81be/ffffff&text=600x400&fontsize=23'>&quot;,&quot;editDisabled&quot;:true,&quot;deleteDisabled&quot;:false,&quot;editDisabledTooltip&quot;:&quot;Harrison cannot be edited&quot;,&quot;editUrl&quot;:&quot;http://example.com/edit?name=Harrison&quot;,&quot;followers&quot;:3456,&quot;income&quot;:51234,&quot;practice&quot;:0.1228,&quot;birthday&quot;:&quot;1943-02-25T05:39&quot;,&quot;editVisibility&quot;:false,&quot;duration&quot;:1600,&quot;priority&quot;:3},{&quot;name&quot;:&quot;Paul&quot;,&quot;surname&quot;:&quot;McCartney&quot;,&quot;role&quot;:&quot;bass&quot;,&quot;thumbnail&quot;:&quot;<img src='https://place-hold.it/600x400/7a81be/ffffff&text=600x400&fontsize=23'>&quot;,&quot;editDisabled&quot;:false,&quot;deleteDisabled&quot;:true,&quot;editDisabledTooltip&quot;:&quot;McCartney cannot be edited&quot;,&quot;editUrl&quot;:&quot;http://example.com/edit?name=McCartney&quot;,&quot;followers&quot;:4567,&quot;income&quot;:52347,&quot;practice&quot;:0.084,&quot;birthday&quot;:&quot;1942-06-18T11:00&quot;,&quot;editVisibility&quot;:false,&quot;duration&quot;:3601,&quot;priority&quot;: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' data="[{&quot;name&quot;:&quot;John&quot;,&quot;surname&quot;:&quot;Lennon&quot;,&quot;role&quot;:&quot;singer&quot;,&quot;thumbnail&quot;:&quot;<img src='https://place-hold.it/600x400/7a81be/ffffff&text=600x400&fontsize=23'>&quot;,&quot;editDisabled&quot;:false,&quot;deleteDisabled&quot;:true,&quot;editDisabledTooltip&quot;:&quot;Lennon cannot be edited&quot;,&quot;editUrl&quot;:&quot;http://example.com/edit?name=Lennon&quot;,&quot;followers&quot;:123456,&quot;income&quot;:56789.123,&quot;practice&quot;:0.0913,&quot;birthday&quot;:&quot;1940-10-09T07:30&quot;,&quot;editVisibility&quot;:false,&quot;duration&quot;:3,&quot;priority&quot;:2},{&quot;name&quot;:&quot;Ringo&quot;,&quot;surname&quot;:&quot;Starr&quot;,&quot;role&quot;:&quot;drums&quot;,&quot;thumbnail&quot;:&quot;<img src='https://place-hold.it/600x400/7a81be/ffffff&text=600x400&fontsize=23'>&quot;,&quot;editDisabled&quot;:true,&quot;deleteDisabled&quot;:false,&quot;editDisabledTooltip&quot;:&quot;Starr cannot be edited&quot;,&quot;editUrl&quot;:&quot;http://example.com/edit?name=Starr&quot;,&quot;followers&quot;:2345,&quot;income&quot;:56435.1,&quot;practice&quot;:0.111,&quot;birthday&quot;:&quot;1940-07-07T18:00&quot;,&quot;editVisibility&quot;:true,&quot;duration&quot;:80,&quot;priority&quot;:1},{&quot;name&quot;:&quot;George&quot;,&quot;surname&quot;:&quot;Harrison&quot;,&quot;role&quot;:&quot;guitar&quot;,&quot;thumbnail&quot;:&quot;<img src='https://place-hold.it/600x400/7a81be/ffffff&text=600x400&fontsize=23'>&quot;,&quot;editDisabled&quot;:true,&quot;deleteDisabled&quot;:false,&quot;editDisabledTooltip&quot;:&quot;Harrison cannot be edited&quot;,&quot;editUrl&quot;:&quot;http://example.com/edit?name=Harrison&quot;,&quot;followers&quot;:3456,&quot;income&quot;:51234,&quot;practice&quot;:0.1228,&quot;birthday&quot;:&quot;1943-02-25T05:39&quot;,&quot;editVisibility&quot;:false,&quot;duration&quot;:1600,&quot;priority&quot;:3},{&quot;name&quot;:&quot;Paul&quot;,&quot;surname&quot;:&quot;McCartney&quot;,&quot;role&quot;:&quot;bass&quot;,&quot;thumbnail&quot;:&quot;<img src='https://place-hold.it/600x400/7a81be/ffffff&text=600x400&fontsize=23'>&quot;,&quot;editDisabled&quot;:false,&quot;deleteDisabled&quot;:true,&quot;editDisabledTooltip&quot;:&quot;McCartney cannot be edited&quot;,&quot;editUrl&quot;:&quot;http://example.com/edit?name=McCartney&quot;,&quot;followers&quot;:4567,&quot;income&quot;:52347,&quot;practice&quot;:0.084,&quot;birthday&quot;:&quot;1942-06-18T11:00&quot;,&quot;editVisibility&quot;:false,&quot;duration&quot;:3601,&quot;priority&quot;: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>