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
InputAreaandBoardContainercomponent 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).dataRefandtableTitleRefare bind to input DOM element.headerDataRefis 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
headerDataRefwhich caused by interactions inInputColHeaderItemcomponent, the table data will not be updated. I am sure that theheaderDataRefhas correct data andcolumnsmemo is re calculated and the table option is set, but the output DOM not seem to change.