How to Override Data Table in Shopware 6

Introduction

In this blog, we are going to discuss how to override the data table in Shopware 6 at the admin end. The main aim of this blog is that we have faced a problem overriding the data tables in Shopware 6.

So I thought we should share some tricky points of the data table in this blog for saving time. I hope it will help you. Now without wasting time let’s start.

Override Listing Twig File

Here we override the actions of the table and insert a new action on the table. So let’s start with entity listing. Entity listing components have many attributes of a table. Here we are listing some useful attributes for this blog.

• :showSelection : This is used for display selection checkbox of table row, it takes boolean value.
• @select-item : this is event used for select single item.
• @select-all-items : this event used for select multiple items.
• @inline-edit-save : this event used for inline edit save.
• @inline-edit-cancel: this event used for inline edit cancel .

<sw-entity-listing
     v-if="total"
      :isLoading="sellerListLoader"
       :items="marketplaceSellerCollection"
       :repository="sellerRepository"
       :showSelection="true"
        :columns="columns"
        @select-item="onSelectionChanged"
        @select-all-items="onSelectionChanged"
        @column-sort="onSortColumn"
        @inline-edit-save="onInlineEditSave"
        @inline-edit-cancel="onInlineEditCancel">

Now we perform custom actions for a bulk and single row as like delete action. for this purpose, we override the bulk slot template component and under this, we can create multiple actions. we can remove the default action delete.

<template slot="bulk">
    {% block sw_data_grid_bulk_selected_actions_content %}
        <span class="sw-data-grid__bulk-selected bulk-link">
         <a class="link link-default" @click="approveSeller">
            {{ $tc('mp-product.list.approveText') }}
          </a></span>
          <span class="sw-data-grid__bulk-selected bulk-link">
          <a class="link link-default" @click="disapproveSeller">
                {{ $tc('mp-product.list.approveText') }}
           </a></span>
    {% endblock %}
 </template>

Perform action in index.js file

In listing js file we perform a method action for approve and disapprove bulk request. First, we are getting all the selected entity data of a table so in onSelectionChanged method we pass the selection attribute and store in define selecteditems object . This selection attribute contains all the entity data of the selected row not only id. Like as below code..

 onSelectionChanged(selection) {
    this.selectedItems = selection;
  },

Now we perform our actions for selected data. As like we can perform an action for inline edit save and inline edit cancel.

That is all for the doc data table Shopware 6. I hope it will help you. Happy Coding 🙂

Thanks.