title: add icons in actions columns and in each row
body: <p><a href="https://i.stack.imgur.com/4EH91.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4EH91.png" alt="enter image description here" /></a>
  This is a vue.js project and this project is for a car sales company.
  I have a table and this table contains information about each car as in the picture.
  And as we note that for the table there is a header and there are lines under the head and are the Items which are the information of each car for each column.
  And there is a column called Action, and within this column I want to put two icons, the first is delete and the second is edit.
  Note that the data for the car information comes from the backend, which is node.js.
  The problem is that I did not explore adding the delete and edit buttons on every line in the action column.
  The question is, how can I add the Delete and Modify icons within the action column and on each line
  How can I do this?</p>
  <p>ViewAllCars.vue:</p>
  <pre><code>&lt;template&gt;
    &lt;v-app class=&quot;bg&quot;&gt;
      &lt;v-container&gt;
        &lt;v-card
          class=&quot;mx-auto mt-5 pa-3&quot;
          max-width=&quot;100%&quot;
          id=&quot;limited-products&quot;
          :style=&quot;'border: 0px solid #D50000;'&quot;
        &gt;          
          &lt;v-data-table
            :headers=&quot;tableHeaders&quot;
            :items=&quot;loadedCarsGetter&quot;
            :page.sync=&quot;page&quot;
            :items-per-page=&quot;itemsPerPage&quot;
            hide-default-footer
            class=&quot;elevation-1&quot;
            @page-count=&quot;pageCount = $event&quot;
          &gt;
          &lt;/v-data-table&gt;
         
  
          &lt;!-- pagination --&gt;
          &lt;div class=&quot;text-center pt-2&quot;&gt;
            &lt;v-pagination v-model=&quot;page&quot; :length=&quot;pageCount&quot;&gt;&lt;/v-pagination&gt;
            &lt;v-text-field
              :value=&quot;itemsPerPage&quot;
              label=&quot;Items per page&quot;
              type=&quot;number&quot;
              min=&quot;-1&quot;
              max=&quot;15&quot;
              @input=&quot;itemsPerPage = parseInt($event, 10)&quot;
              class=&quot;pl-7 pr-7&quot;
            &gt;&lt;/v-text-field&gt;
          &lt;/div&gt;
        &lt;/v-card&gt;
      &lt;/v-container&gt;
    &lt;/v-app&gt;
  &lt;/template&gt;    
  &lt;script&gt;
  import { mapGetters } from &quot;vuex&quot;;
  import GettersTypes from &quot;../../store/types/getters-types&quot;;    
  export default {
    data() {
      return {
        page: 1,
        pageCount: 0,
        itemsPerPage: 10          
       };
    },
    created() {},
    computed: {
      ...mapGetters({
        loadedCarsGetter: GettersTypes.GET_CAR_FORM_GETTER,
        tableHeaders: GettersTypes.GET_HEADERS_TABLE_GETTER
      }),
    }
  };
  &lt;/script&gt;
  </code></pre>
  <p>Within the state there is the header in the table, and these values ​​were used in Getter
  state.js:</p>
  <pre><code>const state = {
    loadedCar: [],
    reports: [],
    headers: [
      {
        text: &quot;Car name&quot;,
        align: &quot;start&quot;,
        sortable: false,
        value: &quot;name&quot;,
        class: &quot;red accent-4 white--text&quot;,
      },
      { text: &quot;Price&quot;, value: &quot;price&quot;, class: &quot;red accent-4 white--text&quot; },
      {
        text: &quot;Number of Seats&quot;,
        value: &quot;numberofseats&quot;,
        class: &quot;red accent-4 white--text&quot;,
      },
      { text: &quot;Date&quot;, value: &quot;date&quot;, class: &quot;red accent-4 white--text&quot; },
      {
        text: &quot;selling price&quot;,
        value: &quot;sellingprice&quot;,
        class: &quot;red accent-4 white--text&quot;,
      },
      {
        text: &quot;The buyer name&quot;,
        value: &quot;Thebuyername&quot;,
        class: &quot;red accent-4 white--text&quot;,
      },
      {
        text: &quot;Actions&quot;,
        value: &quot;&quot;,
        class: &quot;red accent-4 white--text&quot;,
      },
    ],
  };
  export default state;
  </code></pre>
  <p>Within Getter, the state was called that contains the header and other information coming from the backend.
  getters.js:</p>
  <pre><code>import GettersTypes from '../types/getters-types'
  const getters = {
      [GettersTypes.GET_CAR_FORM_GETTER](state) {
          return state.loadedCar;
      } ,
      [GettersTypes.GET_HEADERS_TABLE_GETTER](state){
          return state.headers;
      }
  }
  export default getters;
  </code></pre>