Material-table: Is it possible to make a nested column table

[fluorish]

I want to make a table look like the picture above. What if I have an object data like this

[{ averageA: { lower:8, upper:9 }, averageB: { lower:9, upper:10 } }, { averageA: { lower:1, upper:3 }, averageB: { lower:3, upper:10 } }]

Is it possible to pass an object directly to column cells or I have to convert each key into unique key as averageA_lower, averageA_upper, averageB_lower, averageB_upper and use these keys as a field for each column instead.

[pichaya07]

For me, I add a custom header in the component
Here is what I did

     <MaterialTable
            components={{
              Header: props => (
                <thead style={StyleTHeader}>
                  <tr>
                    <th colSpan="2" style={StyleHeader}>
                      Average A
                    </th>
                    <th colSpan="2" style={StyleHeader}>
                      Average B
                    </th>
                  </tr>
                  <tr>
                    {props.columns.map(title => {
                      return (
                        <td style={StyleHeader}>
                          <b>{title.title}</b> //show title of column
                        </td>
                      );
                    })}
                  </tr>
                </thead>
              )
            }}
            title=""

            ...

>

[tudro]

Hello @pichaya07 , can you edit the table properly after you do this? I'm on 1.53.0 and if i try to override the Header i am not able to properly edit the table anymore, meaning that if i have an error on the data updated and i need to call reject() in the onRowUpdate(), the row grays out:

It doesn't matter with what i override it, event if i do

Header: props => null

this still happens. If i remove the override, everything works fine.

Thank you

[pichaya07]

Hi, @tudro I can edit the table properly.
I'm not sure about your case. For me, I also add a custom component to each column using "editComponent"
for example

column: [
        {
          title: "home",
          field: "stc_type",
          editComponent: props => (
               <input type="text" onChange={event => props.onChange(event.target.value)} /> 
          )
       },
       { ... }
]

[tudro]

Thank you for the answer. I have editComponent, too. Just to be clear, this edit problem only happens when i updated an existing row and i have to call reject in the onRowUpdate. If the data is ok and i call resolve the table works properly.

[tudro]

@pichaya07 I think i've found when this happens. If you have time, please check so that i can be 100% that this is a bug. So, the problems appears if you do a setState while editing a row. More exactly, when i edit a row and onRowUpdate gets called, inside onRowUpdate i do a validation of the new data. If there is a problem with it, i do a setState({alert: 'blabla'}) to get an alert notification about the problem and then i call reject().

If the table has the Header overridden, then the row gets grayed out. If no Header override, everything is ok.

Thank you

[pichaya07]

@tudro Thank you for mention that point

As you said the row gets grayed out when the table has the Header overridden.
I cannot fix this at the moment.

Will update you again if I find a solution.

Any idea for fixing this?

[tudro]

@pichaya07 Thank you for confirming. I have no idea how to fix this. I will post a separate issue describing this, maybe somebody can help us.

[tudro]

@pichaya07 version 1.54.1 solves this problem.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.