Thead Invariant Violation Dynamic Data about react-super-responsive-table HOT 2 CLOSED

I think I can spot a problem up front after glancing at your code above; check this section where the error occurs:

<Thead>{headerGroups.map((h, i) => {
    <Tr>
      <Th>{i}</Th>
    </Tr>
  })
}</Thead>

Since you use { } around your map function, those contents (<Tr>...</Tr>) aren't actually getting returned. Second, I don't think you intend to create a row for each header, just a header cell for each within a single row. So you would need to change it up to something like this:

<Thead>
  <Tr>
    {headerGroups.map((h, i) => 
      <Th key={i}>{h}</Th>
    )}
  </Tr>
</Thead>

That way, the contents of your map function will be returned. I also added a key prop since that's preferable any time you have a map.

Now, as for making it work correctly with this library and dynamic headers, the thing you'll need to do is change another key prop on the main <Table> component whenever the columns would be changing--that change lets React know to recreate the component from scratch, which will ensure this library rebuilds the structure of the table headers.

You could do something simple like this, since your headers are just a list of strings inside headerGroups:

<Table
  key={headerGroups.join('|')}
  {...getTableProps()} 
  className='table table-striped table-hover'
>

That merely creates a string key out of the list of headers, so that it will change when they change. I just quickly typed out all of the above, however, so it might be missing something in your use case. If headerGroups doesn't contain strings but something else (I can't tell above), you would use a different method than a join--just any simple way to create a unique string out of the current headerGroups.

from react-super-responsive-table.

@jasonphillips Thank you very much - these insights helped me to resolve my issue - had been banging my head for a while.

from react-super-responsive-table.