Vue Data GridCalculated Columns - API, Events & State

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  CalculatedColumnChangedEvent,
  CalculatedColumnsGridOption,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ColumnApiModule,
  DataTypeDefinitions,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberFilterModule,
  ValueFormatterLiteParams,
  enableDevValidations,
} from "ag-grid-community";
import { CalculatedColumnsModule } from "ag-grid-enterprise";
import "./styles.css";
import { SalesRow } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  CalculatedColumnsModule,
  ColumnApiModule,
  NumberFilterModule,
]);

const currencyFormatter = (
  params: ValueFormatterLiteParams<SalesRow, number>,
) => (params.value == null ? "" : `$${params.value.toLocaleString()}`);

const percentFormatter = (
  params: ValueFormatterLiteParams<SalesRow, number>,
) => (params.value == null ? "" : `${(params.value * 100).toFixed(1)}%`);

const marginColumn: ColDef<SalesRow> = {
  colId: "profitMargin",
  headerName: "Profit Margin",
  calculatedExpression: "([revenue] - [cost]) / [revenue]",
  cellDataType: "percentage",
};

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="example-wrapper">
      <div style="margin-bottom: 1rem">
        <button v-on:click="addMarginColumn()">Add Profit Margin</button>
        <button v-on:click="editMarginExpression()">Edit Profit Margin</button>
        <button v-on:click="removeMarginColumn()">Remove Profit Margin</button>
        <button v-on:click="logCalculatedColumns()">Log Calculated Columns</button>
      </div>
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :rowData="rowData"
        :dataTypeDefinitions="dataTypeDefinitions"
        :calculatedColumns="true"
        :defaultColDef="defaultColDef"
        @calculated-column-changed="onCalculatedColumnChanged"></ag-grid-vue>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<SalesRow> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "product", flex: 1 },
      { field: "revenue", cellDataType: "currency" },
      { field: "cost", cellDataType: "currency" },
      {
        colId: "profit",
        headerName: "Profit",
        calculatedExpression: "[revenue] - [cost]",
        cellDataType: "currency",
      },
    ]);
    const rowData = ref<SalesRow[] | null>([
      { product: "Solar panel kit", revenue: 142000, cost: 96000 },
      { product: "Smart thermostat", revenue: 78000, cost: 52000 },
      { product: "Battery pack", revenue: 126000, cost: 101000 },
      { product: "EV charger", revenue: 92000, cost: 61000 },
      { product: "Heat pump", revenue: 168000, cost: 119000 },
      { product: "Inverter unit", revenue: 88000, cost: 57000 },
      { product: "Wind turbine kit", revenue: 232000, cost: 171000 },
      { product: "Solar tile roof", revenue: 198000, cost: 144000 },
      { product: "Power optimiser", revenue: 64000, cost: 41000 },
      { product: "Charge controller", revenue: 53000, cost: 33000 },
      { product: "Energy monitor", revenue: 47000, cost: 29000 },
      { product: "Storage cabinet", revenue: 71000, cost: 52000 },
      { product: "Microinverter", revenue: 59000, cost: 37000 },
      { product: "Heat recovery unit", revenue: 124000, cost: 88000 },
      { product: "Hybrid boiler", revenue: 156000, cost: 117000 },
      { product: "Smart meter", revenue: 39000, cost: 24000 },
      { product: "Insulation pack", revenue: 44000, cost: 27000 },
      { product: "EV cable set", revenue: 31000, cost: 18000 },
      { product: "Solar pump", revenue: 67000, cost: 45000 },
      { product: "Backup generator", revenue: 173000, cost: 131000 },
    ]);
    const dataTypeDefinitions = ref<DataTypeDefinitions>({
      currency: {
        baseDataType: "number",
        extendsDataType: "number",
        valueFormatter: currencyFormatter,
      },
      percentage: {
        baseDataType: "number",
        extendsDataType: "number",
        valueFormatter: percentFormatter,
      },
    });
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 130,
    });

    function onCalculatedColumnChanged(
      event: CalculatedColumnChangedEvent<SalesRow>,
    ) {
      console.log(
        "Calculated column changed:",
        event.column.getColId(),
        event.changes,
      );
    }
    // Get: read the calculated columns currently in the grid.
    function logCalculatedColumns() {
      const calculatedColumns = (gridApi.value.getColumns() ?? []).filter(
        (column) => column.getColDef().calculatedExpression !== undefined,
      );
      console.log(
        "### Calculated columns ###",
        calculatedColumns.map((column) => column.getColId()),
      );
    }
    // Set: add a calculated column by updating the columnDefs grid option.
    function addMarginColumn() {
      const colDefs = gridApi.value.getColumnDefs() ?? [];
      if (
        colDefs.some(
          (colDef) => "colId" in colDef && colDef.colId === "profitMargin",
        )
      ) {
        return;
      }
      gridApi.value.setGridOption("columnDefs", [...colDefs, marginColumn]);
    }
    // Edit: change an existing calculated column's expression.
    function editMarginExpression() {
      const colDefs = gridApi.value.getColumnDefs() ?? [];
      gridApi.value.setGridOption(
        "columnDefs",
        colDefs.map((colDef) =>
          "colId" in colDef && colDef.colId === "profitMargin"
            ? {
                ...colDef,
                calculatedExpression: "([revenue] - [cost]) / [cost]",
              }
            : colDef,
        ),
      );
    }
    // Remove: drop a calculated column from the columnDefs grid option.
    function removeMarginColumn() {
      const colDefs = gridApi.value.getColumnDefs() ?? [];
      gridApi.value.setGridOption(
        "columnDefs",
        colDefs.filter(
          (colDef) => !("colId" in colDef && colDef.colId === "profitMargin"),
        ),
      );
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

    return {
      gridApi,
      columnDefs,
      rowData,
      dataTypeDefinitions,
      defaultColDef,
      onGridReady,
      onCalculatedColumnChanged,
      logCalculatedColumns,
      addMarginColumn,
      editMarginExpression,
      removeMarginColumn,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");