I would like to remake the below grid, with ag-grid in react:

I already have the normal rows set up, but I wonder how I can make the rows where the total amounts are listed (circled in red)? I have these values already in variables, but I don’t know how to make custom rows like this.

What I currently have:

The code:

import formatValuta from '@/utils/formatValuta';
import { AgGridReact } from 'ag-grid-react';
import React, { useMemo } from 'react';

function OrderLineGrid() {
  const rowData = useMemo(
    () => [
      {
        description: 'Cookies',
        quantity: 10,
        unitPriceExcl: 1500,
        vatPercentage: 21,
        totalIncl: 1815,
      },
      { description: 'Milk', quantity: 1, unitPriceExcl: 200, vatPercentage: 21, totalIncl: 242 },
      { description: 'Bread', quantity: 2, unitPriceExcl: 300, vatPercentage: 21, totalIncl: 363 },
    ],
    []
  );

  const colDefs = useMemo(
    () => [
      { headerName: 'Description', field: 'description', flex: 1 },
      { headerName: 'Quantity', field: 'quantity' },
      {
        headerName: 'Unit Price Excl.',
        field: 'unitPriceExcl',
        valueFormatter: (params) => formatValuta(params.value, 0),
      },
      { headerName: 'VAT', field: 'vatPercentage', valueFormatter: (params) => `${params.value}%` },
      {
        headerName: 'Total Incl.',
        field: 'totalIncl',
        valueFormatter: (params) => formatValuta(params.value, 0),
      },
    ],
    []
  );

  return (
    <div className="ag-theme-quartz" style={{ width: '100%' }}>
      <AgGridReact rowData={rowData} columnDefs={colDefs} domLayout="autoHeight" />
    </div>
  );
}

export default OrderLineGrid;