Column Template in Pivot Table.

[Francelink]

Good afternoon,

I'm creating a pivot table in a Vue 3 component.
I was wondering if it's possible to achieve something similar to the column template functionality available in DataGrid, but specifically for a Pivot Table?
I'd like to add an extra column to my pivot table to insert action buttons (such as an "Edit" button).

Here's my code sample:

<template>

  <div>

    <ejs-pivotview id="pivot-cave" class="tableau-syncfusion-itl" :dataSourceSettings="dataSourceSettings"

      :gridSettings="gridSettings" :cellTemplate="onCellTemplate"

      >

    </ejs-pivotview>

  </div>

</template>

<script setup lang="ts">

import { useDeclarationProductionStore } from '@/stores/DeclarationProductionStore';

import { PivotViewComponent as EjsPivotview } from "@syncfusion/ej2-vue-pivotview";

import { computed } from 'vue';

const storeDp = useDeclarationProductionStore();

const dataSourceSettings = computed(() => {

  return {

    dataSource: storeDp.dp.listLigneDeclarationProductionCavePivot,

    expandAll: false,

    showGrandTotals: true,

    showSubTotals: true,

    showRowGrandTotals: true,

    showRowSubTotals: true,

    showColumnGrandTotals: false,

    showAggregationOnValueField: false,

    rows: [{ name: 'nomApporteur' }, { name: 'nomProduit' }],

    values: [

      { name: 'volumeApportRaisin', caption: 'Apport Raisin', type: 'Sum' },

      { name: 'volumeIssuRaisin', caption: 'Issu Raisin', type: 'Sum'},

      { name: 'volumeApportMout', caption: 'Apport Mout', type: 'Sum' },

      { name: 'volumeIssuMout', caption: 'Issu Mout', type: 'Sum' },

      // Adding an extra columns here named "Actions" where I can put html button

    ],

    formatSettings: [

      {

        name: 'volumeApportRaisin',

        format: 'N4'

      },

      {

        name: 'volumeIssuRaisin',

        format: 'N4'

      },

      {

        name: 'volumeApportMout',

        format: 'N4'

      },

      {

        name: 'volumeIssuMout',

        format: 'N4'

      },

    ],

  }

});

const gridSettings = {

  columnWidth: 120,

  allowTextWrap: true,

  ShowAggregationOnValueField: false,

};

// Fonction de template cellule

function onCellTemplate(cellData: any) {

  // cellData est un objet qui contient des infos sur la cellule

  // Par ex. cellData.cellInfo.fieldName => "volumeApportRaisin" / "dummyActionField"

  const fieldName = cellData?.cellInfo?.actualText    // ou .fieldName

  const axis = cellData?.cellInfo?.axis              // "value", "row", "column", ...

  // On ne veut injecter le bouton QUE pour le champ dummyActionField

  if (axis === 'value' && fieldName === 'dummyActionField') {

    // Insérer un bouton. On peut injecter une string HTML

    // ou renvoyer un VNode si on utilise la syntaxe TSX / h() + Vue 3

    return `

      <button type="button" class="btn btn-sm btn-primary" onclick="editRowAction('${cellData.cellInfo}')">

        Éditer

      </button>

    `

  }

  // Sinon, on affiche la valeur formatée par défaut

  return cellData.formattedText ?? ''

}

</script>

Thank you for your help.

Antoine

[Sridhar Karunakaran]

Hi Antoine,

Thank you for sharing the code example. We understand that you need to add a new column to a pivot table and include a button within the value cells of this column using the cellTemplate option. If this is the case, add a calculated field with a dummy formula to add a new column and then add a buttons to that value cells of this calculated field column. And ensure that the cellTemplate option is bound using the Vue <template> tag with a v-slot directive. Within the template tag, include a button and bind the click event to carry out further actions based on the clicked cell. Please see the code example below.

Code example:

<template>

<div>

  <div class="control-section">

    <div class="content-wrapper">

      <ejs-pivotview

        id="pivotview"

        :dataSourceSettings="dataSourceSettings"

        :gridSettings="gridSettings"

        :width="width"

        :height="height"

        :cellTemplate="'myTemplate'"

      >

      <template v-slot:myTemplate="{ data }">

      <span class="template-wrap">

        <button 

          v-if="isTotalColumn(data)" 

          class="btn btn-primary" 

          @click="handleButtonClick(data.cellInfo)"

        >

          Click Me

        </button>

      </span>

    </template>

      </ejs-pivotview>

    </div>

  </div>

</div>

</template>

<script lang="ts">

export default {

methods: {

  isTotalColumn(args) {

    if (args.cellInfo.axis === "value" && args.cellInfo.actualText === "Total") {

      // Remove the existing text

      if (args.targetCell) {

        args.targetCell.querySelector('.e-cellvalue').innerText = '';

      }

      return true;

    }

    return false;

  },

  handleButtonClick(cellInfo) {

    console.log('Button clicked with cell info:', cellInfo);

  },

}

};

</script>

Output screenshot:

Meanwhile, we have prepared a sample for your reference, which is available at the following link:

Sample: https://stackblitz.com/edit/p3nbuvqz-qwrgsy7e?file=src%2FApp.vue

Please let us know if you have any concerns.

Regards,

Sridhar Karunakaran