React-table: column show unwork

[liyatang]

Using v7?

hi

Codesandbox!
https://codesandbox.io/s/tannerlinsleyreact-table-basic-i9mvf?fontsize=14&hidenavigation=1&theme=dark

Screenshots

[hanvyj]

Workaround for now, you can filter the columns before rendering them:

{headers.filter(column => column.show).map(column => (
     <th {...column.getHeaderProps()}>{column.render("Header")}</th>
))}

[hanvyj]

Also, after having implemented hidden columns I think this is by design.

For the layout, I think you should use headerGroups:

      {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
          </tr>
        ))}

https://codesandbox.io/s/tannerlinsleyreact-table-basic-xr22d

This will hide columns without 'show' and should be used for rendering the columns.

Having access to the all headers is actually really useful if you want to, say, show a list of columns with checkboxes to show them etc.

[tannerlinsley]

I'm not sure what's going on here. Can you give me more information? The codesandbox definitely helps, but some more description of what is happening, what you're doing, and what you expect would greatly help.

[tannerlinsley]

As @hanvyj stated above, your renderer must use headerGroups, which are intended for display. headers is a flat list, provided as a utility for the exact reasons @hanvyj stated above as well.

[blobinabottle]

I can make this "show" per column work in beta 26, not in 27 or 28. And none of the RC.
Is it by design? We shouldn't use column.show anymore?

[tannerlinsley]

It's recommended to use the new initialState.hiddenColumns state.

https://github.com/tannerlinsley/react-table/blob/master/docs/api/useTable.md#usetable

[kiranvj]

It's recommended to use the new initialState.hiddenColumns state.

https://github.com/tannerlinsley/react-table/blob/master/docs/api/useTable.md#usetable

So is column.show deprecated? Its not working in version 7.0.0-rc.15. initialState.hiddenColumns works, but column.show is more handy.