Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[data grid] getCellValue does not work with nested objects when columns use valueGetter #16120

Open
artzlite opened this issue Jan 10, 2025 · 1 comment
Labels
component: data grid This is the name of the generic UI component, not the React module! customization: logic Logic customizability status: waiting for author Issue with insufficient information support: commercial Support request from paid users support: premium standard Support request from a Premium standard plan user. https://mui.com/legal/technical-support-sla/

Comments

@artzlite
Copy link

artzlite commented Jan 10, 2025

The problem in depth

The provided solution in Issue #13281 suggests using row[field] in the getCellValue function to access values for custom aggregations. However, this approach does not work when columns use a valueGetter and assign values from nested objects.

  1. Nested Objects with valueGetter :
    For example, if a column is defined like this:
{
   field: "value",
   headerName: "Value",
   valueGetter: (_, row) => row.orderDetail?.value,
}

Using row[field] doesn’t retrieve the value.
2. Calculated Fields:
For columns like this:

{
    field: "calculatedValue",
    headerName: "Calculated Value",
    valueGetter: (_, row) => row.value1 + row.value2,
}

To use this in custom aggregation, I have to duplicate the logic (row.value1 + row.value2) in my custom aggregation function. This feels messy and hard to maintain.

I thought of some workarounds, but none are great:

  1. Moving all nested object fields to the root level of the row.
  2. Pre-calculating every field and keeping the results directly in the row object.

The problem is that my row objects are already complex, and doing this would make them even harder to manage. For example, here’s the kind of data structure I’m working with:

[
    {
        "6rFNvcvLrWQLw": "8XwFA",
        "KCyAfh": "xlKOp",
        "PGdgB8bKON41g3Pl3SvCzvAk": {
            "u5BuaDsGo9bjuhVjpB": "91tnV",
            "Z3TaoCQ": "trBKx",
            "ztsKYO": "Gr1NZ",
            "OC8J": "jESNu",
            "6Yham1ydQctXM": 10000,
            "C7PS4MdTG": 200,
            "7mRFIlHAfY": false,
            "IjTAKL4k50V": true,
            "O7WdjAnU": true,
            "vfmRJw6Cz": false,
            "EPDR1ADPs": true,
            "1t7AoqiMXXFsP": 5000,
            "0sadKfrwgY50iB": 0.2,
            "vfYKaO7rlNC9bI8SPYp": 0.8,
            "VPVvP8lCg": 3,
            "C3HLOEeWE4w": 5,
            "RCLw6aQC": 205
        },
        "kJHH7VOVy6P5Obd1h": {
            "IhxpJkbbZ8": "cGnBj",
            "s2kb8Jqm9cYO1": "chWEv",
            "AMmF9WDDx9D2BeUXo": "fGY6A",
            "Evcadu": "Qpapl",
            "CWMJ": "MZy8L",
            "8H8fk2c": "vxWvv",
            "unVq3kCssvE": "hd0v1",
            "BIwtYhni2T7gl": "nQmzq",
            "JXlq4iS1gAP": "KwOnB",
            "Ga8SNMAz5": "KNXOL",
            "xnvzC": 200,
            "lG18OE3hvnIg": 0,
            "o19XYjzmBztH0": 10000,
            "IjzuZaRWo": 0,
            "RPKPC9OtyuM3dlV13O": 2000,
            "WxPjGMbRwVXj": 0,
            "6ajFjK6tSNrMzB": 10000,
            "MTmJ": "lqkvA",
            "VLzd14CofXkXeIF": "4qkqV",
            "bOJvRc7FQH0o55bhK": 12347
        },
        "O9lJph": [
            {
                "XPPqLHKNIifAXqV": "9jxTz",
                "vha4AadnIFl": "70iUi",
                "qQVtEteoHRAj": 0,
                "asmLQpnM7": 0,
                "5ylzD5WXlEyUB": 0,
                "2YLLTZb": 0,
                "qYxQj9QqO": 10000,
                "Cnh8": "CeVow"
            },
            {
                "BWvwAhFYOS0sKP1": "aqylD",
                "3ga91QR7BIt": "ymU0m",
                "r8rH4LQVDAzs": 0,
                "4e0BwknPw": 0,
                "I5JXak68GmN6b": 0,
                "MosKxpt": 0,
                "KePVvz2tH": 10000,
                "lOWG": "fq47A"
            }
        ],
        "ixmr": "ERb5N"
    }
]

Is there a better way to handle this?

Thankyou.

Your environment

`npx @mui/envinfo`
  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Custom aggregation with getCellValue

Order ID: 93539

@artzlite artzlite added status: waiting for maintainer These issues haven't been looked at yet by a maintainer support: commercial Support request from paid users labels Jan 10, 2025
@github-actions github-actions bot added component: data grid This is the name of the generic UI component, not the React module! support: premium standard Support request from a Premium standard plan user. https://mui.com/legal/technical-support-sla/ labels Jan 10, 2025
@michelengelen
Copy link
Member

To help us diagnose the issue efficiently, could you provide a stripped-down reproduction test case using the latest version? A live example would be fantastic! ✨

For your convenience, our documentation offers templates and guides on creating targeted examples: Support - Bug reproduction

Just a friendly reminder: clean, functional code with minimal dependencies is most helpful. Complex code can make it tougher to pinpoint the exact issue. Sometimes, simply going through the process of creating a minimal reproduction can even clarify the problem itself!

Thanks for your understanding! 🙇🏼

@michelengelen michelengelen added status: waiting for author Issue with insufficient information customization: logic Logic customizability and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jan 10, 2025
@michelengelen michelengelen changed the title [question] getCellValue Does Not Work with Nested Objects When Columns Use valueGetter [data grid] getCellValue does not work with nested objects when columns use valueGetter Jan 10, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: data grid This is the name of the generic UI component, not the React module! customization: logic Logic customizability status: waiting for author Issue with insufficient information support: commercial Support request from paid users support: premium standard Support request from a Premium standard plan user. https://mui.com/legal/technical-support-sla/
Projects
None yet
Development

No branches or pull requests

2 participants