Mobile view headers not updating about react-super-responsive-table HOT 2 CLOSED

Good call; this is a consequence of a couple of things.

There's a PR now to update the internal use of context (which was on the old paradigm, that doesn't broadcast changes well) to use the new official Context API in React 16;

...but in this case, a glance back through the code reminded me that the real issue is how the headers have to be statefully stored on first render of the table, since the library doesn't use props for them and just checks the children of the thead to build its internal list of headers upon construction.

The code could be updated to more smartly handle this situation of deriving state during initial render, but a simple workaround is to follow one of the latest "official" recommendations on this topic and just use a key prop to ensure the components are all internally updated when you're making this kind of change.

I think that's reasonable for now, since a change in key essentially indicates to React "this is now a new table, not merely new data inside the old one" and should solve your problem reasonably well when you're looking to dynamically change the columns.

I added a test related to this in the latest PR; look at it to see how I set a key prop (just on the Table element itself will suffice) and change it when the columns are changed.

It boils down to using something like this:

<Table key={i}>
      <Thead>
      <Tr>
        <Th>{headers[0]}</Th>
        <Th>{headers[1]}</Th>
      </Tr>
      </Thead>
      <Tbody>
      <Tr>
        <Td>item 1</Td>
        <Td>item 2</Td>
      </Tr>
      </Tbody>
  </Table>

...so that if you ensure that the key prop on the Table changes whenever the headers change, the table should update correctly and the new header context should make its way into all the cells, solving the mobile issue you noticed.

@coston - probably makes sense to add this to documentation under "using dynamic headers" or something

from react-super-responsive-table.

@lazev3do i've added a simple section to the readme with instructions taken from the comment above from @jasonphillips. How does this resolution work for you?

from react-super-responsive-table.