如何使用material-ui表隐藏/显示列？

Question

我正在使用http://www.material-ui.com，是否可以根据设备隐藏/显示列？例如，在桌面上，我想显示6列，但在手机上，我可能想要显示3个特定列。怎么做？

Answer 1

有一个隐藏组件可以完全满足您的要求。 See the documentation。

Answer 2

您可以根据CSS TableRowColumn查询在隐藏/显示的相应@media和class Example extends React.Component { render() { return ( <div> <Table> <TableHeader> <TableRow> <TableHeaderColumn>ID</TableHeaderColumn> <TableHeaderColumn>Name</TableHeaderColumn> <TableHeaderColumn className="hidden-xs">Status</TableHeaderColumn> </TableRow> </TableHeader> <TableBody> <TableRow> <TableRowColumn>1</TableRowColumn> <TableRowColumn>John Smith</TableRowColumn> <TableRowColumn className="hidden-xs">Employed</TableRowColumn> </TableRow> <TableRow> <TableRowColumn>2</TableRowColumn> <TableRowColumn>Randal White</TableRowColumn> <TableRowColumn className="hidden-xs">Unemployed</TableRowColumn> </TableRow> <TableRow> <TableRowColumn>3</TableRowColumn> <TableRowColumn>Stephanie Sanders</TableRowColumn> <TableRowColumn className="hidden-xs">Employed</TableRowColumn> </TableRow> <TableRow> <TableRowColumn>4</TableRowColumn> <TableRowColumn>Steve Brown</TableRowColumn> <TableRowColumn className="hidden-xs">Employed</TableRowColumn> </TableRow> </TableBody> </Table> </div> ); } } 元素上指定CSS {{1}}。

为方便起见，我正在使用下面的Bootstrap及其“hidden-xs”CSS类，它提供了这样的媒体查询。当您将浏览器窗口调整到一定宽度以下时，您会看到“状态”列被隐藏。

https://jsfiddle.net/2uepwbd9/1/

{{1}}

Answer 3

您可以使用reflexbox等网格库。

Answer 4

我知道我来晚了，但是这个答案是给那些只希望使用Material-UI的人的。 Material-ui提供了theme breakpoints和withWidth HOC。它们都可以用于显示/隐藏设备大小列。 这是example，使用主题断点根据设备宽度更改样式。可以使用相同的概念来隐藏/显示列。