Right now, in Leaderboard component, we have an InputArea and BoardContainer component in vertical layout.
All the data and setting excepts fields - which defines what should display in the dropdown select of header setting - are all stored in the top level component(index.js).
dataRef and tableTitleRef are bind to input DOM element. headerDataRef is a pure object which saves the columns header settings includes column name, column data type and the data fields used in the column.
Right now all works fine for the first time rendering after the submit button clicked. But after the settings changed in headerDataRef which caused by interactions in InputColHeaderItem component, the table data will not be updated. I am sure that the headerDataRef has correct data and columns memo is re calculated and the table option is set, but the output DOM not seem to change.
Right now, in Leaderboard component, we have an
InputArea
andBoardContainer
component in vertical layout.All the data and setting excepts
fields
- which defines what should display in the dropdown select of header setting - are all stored in the top level component(index.js
).dataRef
andtableTitleRef
are bind to input DOM element.headerDataRef
is a pure object which saves the columns header settings includes column name, column data type and the data fields used in the column.Right now all works fine for the first time rendering after the submit button clicked. But after the settings changed in
headerDataRef
which caused by interactions inInputColHeaderItem
component, the table data will not be updated. I am sure that theheaderDataRef
has correct data andcolumns
memo is re calculated and the table option is set, but the output DOM not seem to change.