gregnb / mui-datatables

Datatables for React using Material-UI
MIT License
2.71k stars 934 forks source link

expandable rows with real API example #1840

Open verbeckii opened 2 years ago

verbeckii commented 2 years ago

I'm trying to create a MUI table where I could show a typical one-to-many relationship using expandable rows for that. I receive data from API with this format - an array of objects for table data and an array of objects for expanded rows

`
[
    {
      "name": "Row 1",
      "status": "status1", 
      "description": "desc1,
      "applicants": [
        {
          "name": "expanded row 1",
          "id": "11091700",
        },
        {
          "name": "expanded row 2",
          "id": "1132323",
        }
      ]
    },
   {
      "name": "Row 2",
      "status": "status2", 
      "description": "desc2,
      "applicants": [
        {
          "name": "expanded row 1",
          "id": "44444",
        },
        {
          "name": "expanded row 2",
          "id": "55555",
        }
      ]
    },
]
`

Expected Behavior

I expected that I can simply map data for expanded rows from my API but looking at expended row example I don't understand how can I do it

Current Behavior

I built cadesandbox example where I created testData file like my API and I can use it as data for my table but I can't find a way how to use it for expanded rows... I was trying to use data.applicants.map() but got undefined "applicants" error

Steps to Reproduce (for bugs)

In ExpandedRows.js I'm trying to {data.applicants.map((applicantsRow) => ( applicantsRow.name ))} but got an undefined "applicants" error so I commended it and now can show only static data cadesandbox example

1. 2. 3. 4.

I hope I can find some advice for my problem here. anyway, I think a more realistic ExpandebleRow example would be nice. Nowadays all data comes from the API and it would be nice to have an example of how to work with it...

Your Environment

Tech Version
Material-UI 5.2.2
MUI-datatables 4.0.0
React 17.0.2
browser
etc
verbeckii commented 2 years ago

okay,I can solve my issue In table options I just pass applicants from my data

renderExpandableRow: (rowData, rowMeta) => {
    const colSpan = rowData.length + 1;
    let index = rowMeta.dataIndex
    return (
      <ExpandedRows index={index} applicants={data[index].applicants}/>
    );
  },

and in the ExpandedRows component I just use it

{applicants.map((applicantsRow) => (
                <>
                    <TableRow key={applicantsRow.id}>
                        <TableCell component="th" scope="row" colSpan={2} align="center">{applicantsRow.name}</TableCell>
                        <TableCell align="center">{applicantsRow.status}</TableCell>
                        <TableCell align="center">{applicantsRow.license_id}</TableCell>
                        <TableCell align="center">{applicantsRow.experience}</TableCell>
                        <TableCell align="center">{applicantsRow.certification}</TableCell>
                        <TableCell align="center" colSpan={2}>{applicantsRow.education}</TableCell>
                    </TableRow>
                </>
            ))}

Anyway, I'd like to hear any advice on how you guys use expanded rows with real API, maybe we can improve the example for it...