Using the data grid component
Overview
The data grid component makes it easy to render tables with data. It also supports hiding columns or scrolling horizontally when many columns are present. This guide shows you how to use it.
Prerequisites
All you need for this guide is a running Shopware 6 instance and full access to both the files, as well as the command line and preferably registered module. Of course you'll have to understand JavaScript, but that's a prerequisite for Shopware as a whole and will not be taught as part of this documentation.
Creating a template for the data grid component
Let's create the simplest template we need in order to use the sw-data-grid.
// <plugin-root>/src/Resources/app/administration/app/src/component/swag-example/swag-example.html.twig
<div>
<sw-data-grid :data-source="dataSource" :columns="columns">
</sw-data-grid>
</div>This template will be used in a new component. Learn how to override existing components here .
Declaring the data
Since this is a very basic example the following code will just statically assign data to the dataSource and columns data attribute. If you want to load data and render that instead, please consult the guide How to use the data handling
// <plugin-root>/src/Resources/app/administration/app/src/component/swag-example/index.js
import template from 'swag-example.html.twig';
Shopware.Component.register('swag-basic-example', {
template,
data: function () {
return {
dataSource: [
{ id: 'uuid1', company: 'Wordify', name: 'Portia Jobson' },
{ id: 'uuid2', company: 'Twitternation', name: 'Baxy Eardley' },
{ id: 'uuid3', company: 'Skidoo', name: 'Arturo Staker' },
{ id: 'uuid4', company: 'Meetz', name: 'Dalston Top' },
{ id: 'uuid5', company: 'Photojam', name: 'Neddy Jensen' }
],
columns: [
{ property: 'name', label: 'Name' },
{ property: 'company', label: 'Company' }
],
};
}
});