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

Angular2: Utilizing filter and search functionalities for an unordered list

Guide to sending a binary body in a POST request using Meteor.js

Encountered an error: Unable to access the 'event' property as it is undefined in Laravel 5.3

Error: The property 'case sensitive routing' cannot be accessed because it is undefined

What are the best practices for dynamically handling variables in JavaScript?

What is the best way to access the data stored within a Promise object in a React application?

Requiring addresses for Google Maps in order to display directions

Shut down the active tab

Whenever I try to utilize the "ng-list" in JavaScript, I encounter issues accessing the variable model

When utilizing AJAX within a for loop, the array position may not return the correct values, even though the closure effectively binds the scope of the current value position

Angular and RxJS work together to repeat actions even when an HTTP request is only partially successful

Error message: "Root resolution error encountered". Need assistance in granting watchman access?

Retrieving a MAC address from a device using a web script or HTTP protocol

achieve precise outcomes using mapping techniques

Identifying when two separate browser windows are both open on the same website

Troubleshooting 404 Error When Using Axios Put Request in Vue.js

Extract the ID from the array, save it, and then delete it from the local storage

Rating of displaying an undefined value (NaN)

Tips for incorporating JavaScript code into back4app.com using Objective-C:1. Start by accessing the

Immediate family members nearby are not an option. We will have to create the form dynamically