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
<plugin-root>/src/Resources/app/administration/app/src/component/swag-example/swag-example.html.twig
1
<div>
2
<sw-data-grid :dataSource="dataSource" :columns="columns">
3
</sw-data-grid>
4
</div>
Copied!
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
1
import template from 'swag-example.html.twig';
2
​
3
Shopware.Component.register('swag-basic-example', {
4
template,
5
​
6
data: function () {
7
return {
8
dataSource: [
9
{ id: 'uuid1', company: 'Wordify', name: 'Portia Jobson' },
10
{ id: 'uuid2', company: 'Twitternation', name: 'Baxy Eardley' },
11
{ id: 'uuid3', company: 'Skidoo', name: 'Arturo Staker' },
12
{ id: 'uuid4', company: 'Meetz', name: 'Dalston Top' },
13
{ id: 'uuid5', company: 'Photojam', name: 'Neddy Jensen' }
14
],
15
columns: [
16
{ property: 'name', label: 'Name' },
17
{ property: 'company', label: 'Company' }
18
],
19
};
20
}
21
});
Copied!
More interesting topics
Last modified 18d ago
Copy link
Edit on GitHub