javascript - Material Table Detail Panel not re-rendering on state change

Question

I'm having issues getting the Detail Panel of Material Table to re-render when there is a change to the tab selection of a Material-UI tab component. What I'm expecting to happen is when I select the second tab in the tab list, the styling and component should re-render to reflect that in the DOM. As of right now that isn't happening. The value property is being updated, but the DOM is never being re-rendered from the value change. The value property I'm passing to the handleChange function is an index. So for 3 tabs, there would be 3 different values (0, 1, 2)

You can see from this example , when you click a subsequent tab in the AppBar, the state is updated and changed automatically. I'm able to effectively change the 'value' property by clicking a different tab, but the Detail Panel is never re-rendered and the first tab is always selected.

This PR had a similar issue but I wasn't able to get any of the answers to work for my need.

import AppBar from '@material-ui/core/AppBar'
import Tabs from '@material-ui/core/Tabs'
import Tab from '@material-ui/core/Tab'

function TableComponent(props) {
    const [value, setValue] = React.useState(0)

    const handleChange = (event, newValue) => {
        setValue(newValue)
    }

    function getVersionsTabs (rowData) {
        const versions = Object.keys(rowData.versions)
        var versionList = versions.map(function (name, index) {
            const version = rowData.versions[name]
            return <Tab key={index} label={version.versionAlias} />
         })
        return versionList
    }
    return (
        <MaterialTable
            ...otherProps
            detailPanel={
            rowData => {
              return (
                <div>
                  <AppBar position='static' color='default'>
                    <Tabs value={value} onChange={handleChange} indicatorColor='primary' textColor='primary'>
                      {getVersionsTabs(rowData)}
                    </Tabs>
                  </AppBar>
                </div>
              )
            }
        />
    )
}

Any help is greatly appreciated!

question from:https://stackoverflow.com/questions/66066580/material-table-detail-panel-not-re-rendering-on-state-change

Answer 1

Waitting for answers