What is the best way to combine cells within a single column?

Question

What is the best way to combine cells within a single column?

Exploring the code snippet utilizing ag-grid with Vue 3.

<script setup lang="ts">
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-alpine.css";
import { AgGridVue } from "ag-grid-vue3";
import { ref } from "vue";

const columnDefs = ref([
    {
        field: "person",
    },
    {
        field: "car",
    },
]);
    
const rowData = ref([
    {
        person: "person-1",
        car: "car-1",
    },
    {
        person: "person-1",
        car: "car-2",
    },
    {
        person: "person-1",
        car: "car-3",
    },
    {
        person: "person-2",
        car: "car-4",
    },
    {
        person: "person-3",
        car: "car-5",
    },
    {
        person: "person-3",
        car: "car-6",
    },
]);
</script>

<template>
    <ag-grid-vue
        style="width: 500px; height: 500px"
        class="ag-theme-alpine"
        :columnDefs="columnDefs"
        :rowData="rowData"
    >
    </ag-grid-vue>
</template>

The above configuration will yield the desired output.

https://i.stack.imgur.com/ioUdd.png

In the presented table, it is possible to group based on the person, but a query arises regarding merging cells in a single column.

https://i.stack.imgur.com/meNOK.png

It appears that implementing row-spanning solely for a single column definition poses challenges as instructing ag-grid to combine multiple cells of a single column within the rowSpan function seems unfeasible. Any suggestions or approaches?

javascript vue.js ag-grid ag-grid-vue

Answer 1

Answer №1

After dedicating several hours to this task, I was able to devise a solution.

Below are the steps I took :

In order to implement the functionality of rowSpan, it was necessary to modify the rowData array so that each person's name appears only once. This prevents the rowSpan from considering multiple occurrences of the same person when calculating the row span. Here is how I adjusted the rowData array :

    const uniq = {};
    const rowData = [{
      person: "person-1",
      car: "car-1",
    }, {
      person: "person-1",
      car: "car-2",
    }, {
      person: "person-1",
      car: "car-3",
    }, {
      person: "person-2",
      car: "car-4",
    }, {
      person: "person-3",
      car: "car-5",
    }, {
      person: "person-3",
      car: "car-6",
}];

rowData.forEach(obj => {
    !uniq[obj.person] ? uniq[obj.person] = true : delete obj.person;
});

console.log(rowData);

Next, I created a function called rowSpan which calculates the number of occurrences of a specific person in the data set.

function rowSpan(params) {
  const person = params.data.person;
  const gridData = getData(); // The getData() function retrieves the original rowData array.
  return gridData.filter((e) => e.person === person).length;
}

Finally, for styling the columns affected by rowSpan, I applied the following CSS styles (sourced from here)

.show-cell {
  background: white;
  border-left: 1px solid lightgrey !important;
  border-right: 1px solid lightgrey !important;
  border-bottom: 1px solid lightgrey !important;
}

This is how the columnDefs for the person object are configured :

{
  field: "person",
  rowSpan: rowSpan,
  cellClassRules: { 'show-cell': 'value !== undefined' }
}

View the Live Demo : Row Spanning Demo

Answer 2

After dedicating several hours to this task, I was able to devise a solution.

Below are the steps I took :

In order to implement the functionality of rowSpan, it was necessary to modify the rowData array so that each person's name appears only once. This prevents the rowSpan from considering multiple occurrences of the same person when calculating the row span. Here is how I adjusted the rowData array :

    const uniq = {};
    const rowData = [{
      person: "person-1",
      car: "car-1",
    }, {
      person: "person-1",
      car: "car-2",
    }, {
      person: "person-1",
      car: "car-3",
    }, {
      person: "person-2",
      car: "car-4",
    }, {
      person: "person-3",
      car: "car-5",
    }, {
      person: "person-3",
      car: "car-6",
}];

rowData.forEach(obj => {
    !uniq[obj.person] ? uniq[obj.person] = true : delete obj.person;
});

console.log(rowData);

Next, I created a function called rowSpan which calculates the number of occurrences of a specific person in the data set.

function rowSpan(params) {
  const person = params.data.person;
  const gridData = getData(); // The getData() function retrieves the original rowData array.
  return gridData.filter((e) => e.person === person).length;
}

Finally, for styling the columns affected by rowSpan, I applied the following CSS styles (sourced from here)

.show-cell {
  background: white;
  border-left: 1px solid lightgrey !important;
  border-right: 1px solid lightgrey !important;
  border-bottom: 1px solid lightgrey !important;
}

This is how the columnDefs for the person object are configured :

{
  field: "person",
  rowSpan: rowSpan,
  cellClassRules: { 'show-cell': 'value !== undefined' }
}

View the Live Demo : Row Spanning Demo

Answer 3

Answer №2

Have you considered if row-spanning could be a viable solution here? Maybe it's worth giving it a shot!

function calculateRowSpan(params) {
  const person = params.data.person;
  return rowData.value.filter((e) => e.person === person).length;
}

const gridColumns = ref([
  {
    field: "person",
    rowSpan: calculateRowSpan,
  },
  {
    field: "car",
  },
]);

Answer 4

Have you considered if row-spanning could be a viable solution here? Maybe it's worth giving it a shot!

function calculateRowSpan(params) {
  const person = params.data.person;
  return rowData.value.filter((e) => e.person === person).length;
}

const gridColumns = ref([
  {
    field: "person",
    rowSpan: calculateRowSpan,
  },
  {
    field: "car",
  },
]);

What is the best way to combine cells within a single column?

Answer №1

Answer №2

Similar questions

Preserve jQuery-enhanced webpage changes permanently

An issue occurred while attempting to execute a function in AngularJS

Retrieving data from Firebase query and displaying as an array of results

Saving numerous files with Promises

Turning a JSON formatted string into parameters for a function

Save all dynamically received data from a form in PHP as an array

What is the best method for transmitting all parameters via a URL?

The console is being flooded with API logging messages multiple times

Please ensure to refresh the page after confirming the alert box by clicking OK

Arrange pictures into an array and showcase them

Is using the new Date function as a key prop in React a good

Substituting text in a document by utilizing two separate arrays: one holding the original text to be found and another storing the corresponding text for

Issues persist with the Angular UI Tree Module: the removed callback is not functioning as

Pseudo-element fails to display in React when applied to a paragraph tag, even with display block property set

How can one retrieve information from within a vue.js function?

All fields in the form are showing the same error message during validation

Tips for initializing a jstree with no content?

When using Vue, it is important to ensure that dynamic slot names error templates are solely utilized for accurately mapping the state to

What could be causing the format to be incorrect?

Utilizing $templateCache with ui-router and minifying in AngularJS 1.x