Row template in Vue Grid component

16 Mar 202310 minutes to read

The rowTemplate has options to display custom <tr> element.

The rowTemplate property should be a function which returns an object. The object should contain a Vue component which should be assigned to the template property. The grid will look for the template property and render it as new Vue instance.

In rowTemplate, the Vue component template should be a <tr> element.

app.vue

<template>
    <div id="app">
      <ejs-grid :dataSource="data" height=310 width='auto' :rowTemplate='rowTemplate' >
        <e-columns>
            <e-column field='Employee Image' headerText='Employee Image' width='150' textAlign='Center'></e-column>
            <e-column field='Employee Details' headerText='Employee Details' width='300' textAlign='Left'></e-column>
        </e-columns>
      </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin } from "@syncfusion/ej2-vue-grids";
import { employeeData } from "./datasource.js";
import { Internationalization } from '@syncfusion/ej2-base';

let instance = new Internationalization();

Vue.use(GridPlugin);

export default {
  data: () => {
    return {
      data: employeeData,
      rowTemplate: function () {
        return { template : Vue.component('rowTemplate',{
        template: `<tr>
        <td class="rowphoto">
            <img :src="image" :alt="altImage" />
        </td>
        <td class="details">
            <table class="CardTable" cellpadding="3" cellspacing="2">
                <colgroup>
                    <col width="50%">
                    <col width="50%">
                </colgroup>
                <tbody>
                    <tr>
                        <td class="CardHeader">First Name </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td class="CardHeader">Last Name</td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td class="CardHeader">Title</td>

                        <td> </td>
                    </tr>
                    <tr>
                        <td class="CardHeader">Birth Date</td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td class="CardHeader">Hire Date</td>
                        <td> </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>`,
          data: function() {
            return {
              data: {}
            }
          },
          methods: {
            format: function(value) {
                return instance.formatDate(value, { skeleton: 'yMd', type: 'date' });
            }
          },
          computed: {
            image: function() {
              return './images/' + this.data.EmployeeID + '.png';
            },
            altImage: function() {
              return this.data.EmployeeID;
            }
          }
        })}
      }
    };
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";

  .rowphoto img {
        width: 100px;
        height: 100px;
        border-radius: 50px;
        box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0,0,0,0.2);
    }

    @media screen and (max-width: 600px) and (min-width: 320px) {
        .rowphoto img {
            width: 50px;
            height: 50px;
        }
    }

    @media screen and (max-width: 800px) and (min-width: 600px) {
        .rowphoto img {
            width: 70px;
            height: 70px;
        }
    }

    .rowphoto,
    .details {
        border-color: #e0e0e0;
        border-style: solid;
    }

    .rowphoto {
        border-width: 1px 0px 0px 0px;
        text-align: center;
    }

    .details {
        border-width: 1px 0px 0px 0px;
        padding-left: 18px;
    }

    .e-bigger .details {
        padding-left: 25px;
    }

    .e-device .details {
        padding-left: 8px;
    }

    .details > table {
        width: 100%;
    }

    .CardHeader {
        font-weight: bolder;
    }

    td {
        padding: 2px 2px 3px 4px;
    }
</style>