[data grid][docs] Fix datagrid inline props where it causes logic bugs

[mkuenemann]

The problem in depth 🔍

We have a problem with data-grid pro version for grouped rows. I have reported it on Zendesk too (https://mui.zendesk.com/agent/tickets/9025)

https://codesandbox.io/s/data-grid-community-forked-vv5xk9?file=/src/ListTest.tsx

Observed behavior:

When I expand a collapsed row and select on of the group rows then onRowSelectionModelChange fires and changes the state of the selectionModel, which will lead to a rerender which will result in the collapsing of all groups, what is not expected. This behavior changed from version 5 to 6. If I would change the onRowSelectionModelChange- handler to just console.log then the group will still be expanded.

Do you have any idea what may be wrong?

Kind regards,

Max

Your environment 🌎

Info

react: 18.2.0,
@mui/material: 5.13.4
@mui/lab: 5.0.0-alpha.133
@mui/material: 5.13.4
@mui/styles: 5.13.2
@mui/system: 5.13.2
@mui/x-data-grid-pro: 6.7.0
@mui/x-date-pickers: 6.7.0

System:
OS: Linux 5.19 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
Memory: 21.24 GB / 31.05 GB
Container: Yes
Shell: 5.1.16 - /bin/bash
Binaries:
Node: 14.17.1 - ~/.nvm/versions/node/v14.17.1/bin/node
npm: 6.14.13 - ~/.nvm/versions/node/v14.17.1/bin/npm
Managers:
Apt: 2.4.9 - /usr/bin/apt
pip3: 22.2.2 - ~/anaconda3/bin/pip3
Utilities:
Make: 4.3 - /usr/bin/make
GCC: 11.3.0 - /usr/bin/gcc
Git: 2.34.1 - /usr/bin/git
IDEs:
Nano: 6.2 - /usr/bin/nano
Languages:
Bash: 5.1.16 - /usr/bin/bash
Java: 18.0.2-ea - /usr/bin/javac
Perl: 5.34.0 - /usr/bin/perl
Python: 3.9.13 - /home/max/anaconda3/bin/python
Python3: 3.9.13 - /home/max/anaconda3/bin/python3
Databases:
MySQL: 10.6.12 (MariaDB) - /usr/bin/mysql
SQLite: 3.39.3 - /home/max/anaconda3/bin/sqlite3
Browsers:
Chrome: 114.0.5735.106

Order ID or Support key 💳 (optional)

68359

[m4theushw]

I can't reproduce the issue. Do you have a CodeSandbox with a minimal reproduction? You can use this template as a starting point.

[mkuenemann]

create react app

App

import ListTest from "./ListTest";
const data = require('./data.json');
function App() {

  return (
    <div>
      <ListTest data={data} />
    </div>
  );
}

export default App;

ListTest.js

import React, {useCallback, useMemo, useState} from 'react';
import {DataGridPro, deDE, enUS} from "@mui/x-data-grid-pro";
import {Box} from "@mui/material";

const dataGridTranslationMap = {
    de: deDE,
    en: enUS
}
const visibilityModel = {ReportDefID: false}

const TYPE_TO_TRANSLATION_KEY = {
    kunde: 'LIST.LIST_TYP_KUNDE',
    dblexclusions: 'LIST.LIST_TYP_DBLEXCLUSION',
    termin: 'LIST.LIST_TYP_TERMIN',
    projekt: 'LIST.LIST_TYP_PROJEKT',
    jobs: 'LIST.LIST_TYP_JOBS',
    checkout: 'LIST.LIST_TYP_CHECKOUT',
    vouchers: 'LIST.LIST_TYP_VOUCHERS',
    vouchin: 'LIST.LIST_TYP_VOUCHIN',
    einnahmen: 'LIST.LIST_TYP_EINNAHMEN',
    doubletten: 'LIST.LIST_TYP_DOUBLETTEN',
    nachrichten: 'LIST.LIST_TYP_NACHRICHTEN'
}
export const translateListTyp = (value, t) => t(TYPE_TO_TRANSLATION_KEY[value])
const getListColumnDefinitions = () => [
    {field: 'Category', headerName: 'Category', minWidth: 150},
    {
        field: 'Typ',
        headerName: 'Typ',
        minWidth: 150
    },
    {field: 'isAdmin', type: 'boolean', headerName: 'Admin', minWidth: 150},
    {field: 'Bezeichnung', headerName: 'Bezeichnung', flex: 1},
    {
        field: '_createdID',
        headerName: 'Erzeugt von',
    },
    {
        field: '_createdTS',
        type: 'dateTime',
        headerName: "Erzeugt am",
        valueGetter: ({value}) => value && new Date(value),
        minWidth: 150
    }
]

const TREE_LIST_HIDE_COLUMNS = ['Category', 'Bezeichnung']
const GROUPING_ROW_COLDEF = {headerName: 'Kategorie / Report', flex: 1, valueGetter: ({row}) => row.Bezeichnung}

const getTreeColumnDefinitions = (t, artistMap) => getListColumnDefinitions(t, artistMap).filter(l => !TREE_LIST_HIDE_COLUMNS.includes(l.field))

const ListTest = ({data, locale = 'de'}) => {
    const [selectionModel, setSelectionModel] = useState([])
    const [popoverData, setPopoverData] = useState(null)
    const dataGridTranslation = dataGridTranslationMap[locale].components.MuiDataGrid.defaultProps.localeText
    const [defaultExpansionLevel, setDefaultExpansionLevel] = useState(0)

    const handlePopoverChange = useCallback((event) => {
        if (event?.currentTarget?.dataset) {
            const rowId = Number(event.currentTarget.dataset.id)
            const row = data.find((el) => el.ReportDefID === rowId)
            if (row?.Bemerkung) {
                setPopoverData({anchorEl: event.currentTarget, bemerkung: row.Bemerkung})
            }
        } else {
            setPopoverData(null)
        }
    }, [data])
    const columnList = useMemo(() => getTreeColumnDefinitions(), [])
    const reportData = useMemo(() => {
        const categoryMap = data.reduce((catMap, item) => {
            if (!catMap[item.Category]) {
                catMap[item.Category] = {Category: item.Category, ReportDefID: -item.ReportDefID}
            }
            return catMap
        }, {})
        return data.concat(Object.values(categoryMap))
            .map(l => ({...l, path: l.Bezeichnung ? [l.Category, l.ReportDefID + '#' + l.Bezeichnung] : [l.Category]}))
            .sort((d1, d2) => (d1.Category + (d1.Bezeichnung || '')).toUpperCase() > (d2.Category + (d2.Bezeichnung || '')).toUpperCase() ? 1 : -1)
    }, [data])

    const handleEnterRow = useCallback((e) => handlePopoverChange(e), [handlePopoverChange])
    const handleExitRow = useCallback(() => handlePopoverChange(null), [handlePopoverChange])
    const handleRowDoubleClick = useCallback((data) => {
        if (data.id > 0) {
            console.log(data)
        }
    }, [])


    return (
        <Box display="flex" flex="1" flexDirection="column" minHeight="0" padding="10px 0 20px 0">
            <DataGridPro treeData
                         // slotProps={{row: {onMouseEnter: handleEnterRow, onMouseLeave: handleExitRow}}}
                         localeText={dataGridTranslation}
                         getRowId={row => row?.ReportDefID}
                         getTreeDataPath={(row) => row.path}
                         onRowSelectionModelChange={(newSelection) => {
                             setSelectionModel(newSelection);
                         }}
                         // defaultGroupingExpansionDepth={defaultExpansionLevel}
                         onRowDoubleClick={handleRowDoubleClick}
                         disableMultipleRowSelection
                         columnVisibilityModel={visibilityModel}
                         rows={reportData}
                         columns={columnList}
                         groupingColDef={GROUPING_ROW_COLDEF}
                         sx={{
                             '& .MuiDataGrid-columnHeaderTitle': {
                                 textOverflow: "clip",
                                 whiteSpace: "break-spaces",
                                 lineHeight: 1
                             }
                         }}/>
        </Box>
    );
};

export default ListTest;

data.json

[
  {
    "ReportDefID": 42,
    "Typ": "vouchers",
    "FetchFilter": "{\"datVon\":\"ACT_DATE-MINUS-28-DAY\"}",
    "Bemerkung": "## Info\nIn dieser Liste könnt ihr eure Studio-Gutscheine einsehen, verwalten, neue ausgeben und Einlösungen verbuchen (Doppelklick auf den Gutschein).",
    "Category": "00 Gutscheine",
    "Bezeichnung": "01 Gutscheinliste",
    "Definition": "{\"visibility\":{\"VouchOutID\":false,\"_createdTS\":false,\"_createdID\":false,\"Stichtagssaldo\":false},\"sort\":[{\"field\":\"VouchNo\",\"sort\":\"desc\"}]}",
    "_createdTS": "2022-11-13T09:03:46.000Z",
    "_createdID": 17,
    "isAdmin": null
  },
  {
    "ReportDefID": 43,
    "Typ": "doubletten",
    "FetchFilter": null,
    "Bemerkung": "## Info\nKundendubletten stellen ein Risiko in eurem Geschäft dar: Zum einen können darüber wichtige Gesundheitsinformationen übersehen werden (Allergien, Medikamente etc.), zum anderen verwendet ihr ggf. alte Kontaktdaten und könnt eure Kunden nicht erreichen. Über diese Liste könnt ihr mögliche Dubletten erkennen und mit wenigen Klicks bereinigen.\n### Spalten Filter\nÜber die Spalten Namensgleich, Email gleich und Handy gleich könnt ihr nach den verschiedenen Dubletten-Kriterien filtern.",
    "Category": "10 Datenpflege",
    "Bezeichnung": "01 Kundendoubletten",
    "Definition": "{\"sort\":[{\"field\":\"Nachname\",\"sort\":\"asc\"},{\"field\":\"Vorname\",\"sort\":\"asc\"}],\"visibility\":{\"kundIdFrom\":false,\"kundIdTo\":false,\"id\":false}}",
    "_createdTS": "2022-11-13T09:03:46.000Z",
    "_createdID": 17,
    "isAdmin": 1
  },
  {
    "ReportDefID": 44,
    "Typ": "kunde",
    "FetchFilter": "{\"letzterTermin\":\"ACT_DATE-MINUS-7-DAY\"}",
    "Bemerkung": "## Info\nÜber die Online-Buchung kommt es immer wieder vor, dass Kunden bei ihren Gesundheitsdaten Dinge eingeben wie \"nichts\", \"nein\", \"alles OK\". Diese Kunden werden dann mit einem Verbandskasten im Kalender angezeigt, obwohl nichts relevantes vorliegt. Über diese Liste werden solche Falscheingaben erkannt und können bereinigt werden.\n### Filter\nÜber den Filter \"letzter Termin ab\" lässt sich die Liste auf die Kunden eingrenzen, die in der nächsten Zeit Termine haben.",
    "Category": "10 Datenpflege",
    "Bezeichnung": "02 Krankheiten bereinigen",
    "Definition": "{\"filter\":{\"items\":[{\"columnField\":\"Deseases\",\"operatorValue\":\"contains\",\"id\":37749,\"value\":\"nein\"},{\"columnField\":\"Deseases\",\"operatorValue\":\"contains\",\"id\":78166,\"value\":\"kein\"},{\"columnField\":\"Deseases\",\"operatorValue\":\"contains\",\"id\":99989,\"value\":\"nicht\"},{\"columnField\":\"Deseases\",\"operatorValue\":\"contains\",\"id\":73081,\"value\":\"nix\"},{\"columnField\":\"Deseases\",\"operatorValue\":\"contains\",\"id\":15933,\"value\":\"alles\"}],\"linkOperator\":\"or\",\"quickFilterValues\":[],\"quickFilterLogicOperator\":\"and\"},\"visibility\":{\"KundID\":false,\"Geschlecht\":false,\"Birthday\":false,\"NearestBirthday\":false,\"Telefon\":false,\"Mobil\":false,\"Email\":false,\"MsgPref\":false,\"hasKontaktErr\":false,\"KannKuFri\":false,\"Strasse\":false,\"Plz\":false,\"Ort\":false,\"Land\":false,\"Beruf\":false,\"ArtistID\":false,\"Kuerzel\":false,\"AnzahlTermine_Tattoo\":false,\"AnzahlTermine_Piercing\":false}}",
    "_createdTS": "2022-11-13T09:03:46.000Z",
    "_createdID": 17,
    "isAdmin": 1
  },
  {
    "ReportDefID": 45,
    "Typ": "kunde",
    "FetchFilter": "{\"letzterTermin\":\"ACT_DATE-PLUS-0-DAY\"}",
    "Bemerkung": "## Info\nWenn kisscal beim Versand von SMS feststellt, dass eine Handynummer nicht erreicht werden kann, könnt ihr diese Kunden hier heraussuchen, die bevorzugte Kontaktart ggf. auf Email ändern und die Kunden anschreiben, um nach der aktuellen Handynr. zu fragen.\n### Filter\nAuch hier macht es Sinn, nur die Kunden zu prüfen, die in der nächsten Zeit Termine haben (letzter Termin ab: Heute).",
    "Category": "10 Datenpflege",
    "Bezeichnung": "03 Kontaktprobleme",
    "Definition": "{\"filter\":{\"items\":[{\"columnField\":\"hasKontaktErr\",\"operatorValue\":\"is\",\"id\":34269,\"value\":\"true\"}],\"linkOperator\":\"and\",\"quickFilterValues\":[],\"quickFilterLogicOperator\":\"and\"},\"visibility\":{\"KundID\":false,\"Geschlecht\":false,\"Birthday\":false,\"NearestBirthday\":false,\"KannKuFri\":false,\"Strasse\":false,\"Plz\":false,\"Ort\":false,\"Land\":false,\"Beruf\":false,\"Deseases\":false,\"ArtistID\":false,\"Kuerzel\":false,\"AnzahlTermine_Tattoo\":false,\"AnzahlTermine_Piercing\":false}}",
    "_createdTS": "2022-11-13T09:03:46.000Z",
    "_createdID": 17,
    "isAdmin": 1
  },
  {
    "ReportDefID": 46,
    "Typ": "kunde",
    "FetchFilter": "{\"letzterTermin\":\"ACT_DATE-PLUS-0-DAY\"}",
    "Bemerkung": "## Info\nDas Geburtsdatum ist für die eindeutige Identifizierung der Kunden sowie der Alterskontrolle erforderlich. Die Einverständniserklärungen sind daher nur dann wirklich vollständig, wenn auch das Geburtsdatum enthalten ist. Fehlende Geburtsdaten sollten daher ggf. vor einem Termin nochmals angefragt werden.\n### Filter\nLetzter Termin ab: heute",
    "Category": "10 Datenpflege",
    "Bezeichnung": "04 fehlende Geburtstage",
    "Definition": "{\"filter\":{\"items\":[{\"columnField\":\"Birthday\",\"operatorValue\":\"isEmpty\",\"id\":81506}],\"linkOperator\":\"and\",\"quickFilterValues\":[],\"quickFilterLogicOperator\":\"and\"},\"visibility\":{\"KundID\":false,\"Geschlecht\":false,\"NearestBirthday\":false,\"Telefon\":false,\"Mobil\":false,\"Email\":false,\"MsgPref\":false,\"hasKontaktErr\":false,\"KannKuFri\":false,\"Strasse\":false,\"Plz\":false,\"Ort\":false,\"Land\":false,\"Beruf\":false,\"Deseases\":false,\"ArtistID\":false,\"Kuerzel\":false,\"AnzahlTermine_Tattoo\":false,\"AnzahlTermine_Piercing\":false}}",
    "_createdTS": "2022-11-13T09:03:46.000Z",
    "_createdID": 17,
    "isAdmin": 1
  }
]

[DanailH]

Hi @mkuenemann Can you please make a codesandbox with the provided code so we are sure we are looking at the same working example as you are

[oliviertassinari]

A reproduction: https://codesandbox.io/s/data-grid-community-forked-vv5xk9?file=/src/ListTest.tsx using #9295 (comment).

[oliviertassinari]

@m4theushw Off-topic to this GitHub issue. I think that it would be great to update your "incomplete issue" saved reply. I see two things that can be improved in #9295 (comment).

1. The reproduction template https://codesandbox.io/s/datagrid-v5-quick-start-54iz1 has a built-in warning:

2. It links directly to the codesandbox, so when developers land on an old issue, and try to create a reproduction from it, they would land on an older version or a non-working link (I do this all the time to create issues on React's repo). Instead, I think it's better to use https://mui.com/r/x-issue-template, configured in:

mui-x/docs/public/_redirects

Line 17 in 0d4390e

/r/x-issue-template https://codesandbox.io/s/mui-x-issue-template-qtf00h 302

All in all, I have documented this in: https://www.notion.so/mui-org/Technical-support-80c9c7e0af614af68c1abb7120f634c8?pvs=4#15b0c1cdb89146f7861571281f2429d3

[oliviertassinari]

I could narrow down the bug to the getTreeDataPath prop, here is a workaround:

      <DataGridPro
        treeData
        getRowId={(row) => row?.ReportDefID}
-       getTreeDataPath={(row) => row.path}
+       getTreeDataPath={getTreeDataPath}

This is maybe a regression:

OK: v5.17.26: https://codesandbox.io/s/data-grid-community-forked-vv5xk9?file=/src/ListTest.tsx
KO: v6.8.0: https://codesandbox.io/s/data-grid-community-forked-qmzgr3?file=/src/ListTest.tsx

If it's expected, I think that we should clearly mention this in the docs: https://mui.com/x/react-data-grid/tree-data/. I would start by splitting the introduction code sample in two (there are two different demos, the scrollbar is very annoying), then add a component function in these examples to show how the getTreeDataPath is defined out of it, add a section to talk about this getTreeDataPath requirement, and maybe lastly, add a h2 to the first demo to illustrate how it's something else.