the nested grid only redraws when you close and open the expander. is it because I'm using a reducer? or something else?
import React, { useReducer } from 'react';
import './App.css';
import { DataGrid, GridColumn, LinkButton } from 'rc-easyui';
function App() {
const [data, setData] = useReducer(dataReducer, null, () => (
[
{ a1:"a", a2:"A", c:[{ b1:"x", b2:"X" }] },
{ a1:"b", a2:"B", c:[] },
{ a1:"c", a2:"C", c:[] },
]));
return (
<div className="App">
<DataGrid
data={data}
renderDetail={({row}) => {
return (
<div style={{ marginLeft: 30 }}>
<DataGrid
data={row.c}
>
<GridColumn field="b1" title="Col1" width={110} />
<GridColumn field="b2" title="Col2" width={110} />
</DataGrid>
</div>
);
}}
>
<GridColumn key="e" field="e" expander width={30}></GridColumn>
<GridColumn field="a1" title="Col1" width={110} />
<GridColumn field="a2" title="Col2" width={110} />
</DataGrid>
<LinkButton onClick={()=>setData({a1:"a", c:{ b1:"y", b2:"Y" }})}>Add y-Y row to a-A</LinkButton>
<LinkButton onClick={()=>setData({a1:"a", c:{ b1:"z", b2:"Z" }})}>Add z-Z row to a-A</LinkButton>
<LinkButton onClick={()=>setData({a1:"b", c:{ b1:"y", b2:"Y" }})}>Add y-Y row to b-B</LinkButton>
<LinkButton onClick={()=>setData({a1:"b", c:{ b1:"z", b2:"Z" }})}>Add z-Z row to b-B</LinkButton>
</div>
);
}
const dataReducer = (data, item) => {
let newData = [ ...[], ...data];
newData.find(s=>s.a1===item.a1).c.push(item.c);
return newData;
}
export default App;