Hiding Table columns based on breakpoints

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

Even when the Table component shows an horizontal scroll on small screens, it can be frustrating on tables with many columns. In some cases, just hiding columns that are not important, can help to improve the user experience.

What does the proposed API look like?

The columns can have properties to show or hide them in specific endpoints.

const columns = [{
  title: 'Name',
  dataIndex: 'name',
  key: 'name',
}, {
  title: 'Age',
  dataIndex: 'age',
  key: 'age',
  hideOn: ['xs', 'sm'], // <-- Hide this column on small resolutions
}, {
  title: 'Address',
  dataIndex: 'address',
  key: 'address',
  visibleOn: ['lg', 'xl'],  // <-- Hide this column on larger resolutions (the "mobile first" approach)
}];

const dataSource = [...]

<Table dataSource={dataSource} columns={columns} />

[eduludi]

I created an alternative solution, based on @yesmeck’s one: https://codesandbox.io/s/nn1y6q1rv4

[eduludi]

Thanks for your quick answer @yesmeck!

Still I think this will be a nice feature to use, also to keep consistency with other components that have built-in breakpoint support, like Layout, Layout.Sider and Grid.