How to override data table in shopware6

Introduction

In this blog we are discuss about How to override data table in shopware6 at admin end .

Overview

The main motive of this blog is that we have faced problem to override data table in shopware6 . So i thought we should share some tricky point of 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 table and insert a new action on table. So let’s start with entity listing. Entity listing component have many attributes of table . Here we are listing some of 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 action for a bulk and single row as like delete action. for this purpose we override bulk slot template component and under this we can create multiple action. we can remove 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 selection attribute and store in define selecteditems object . This selection attribute contain all the entity data of 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.

I hope it will help you. Happy Coding

Thanks.