如何 hide/show 列与 material-ui table？

Question

我正在使用 http://www.material-ui.com，是否可以根据设备设置 hide/show 列？例如，在桌面上，我想显示 6 列，但在 phone 上，我可能想显示 3 个特定列。如何做到这一点？

Answer 1

您可以在相应的 TableHeaderColumn 和 TableRowColumn 元素上指定一个 CSS className，即 hidden/shown 取决于 CSS @media 查询.

为方便起见，我在下面使用 Bootstrap 及其 "hidden-xs" CSS class，它提供了这样的媒体查询。当您将浏览器 window 调整到特定宽度以下时，您会看到 "Status" 列被隐藏。

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>
    );
  }
}

Answer 2

您可以使用像 reflexbox 这样的网格库。

Answer 3

我知道我迟到了，但这个答案是为那些只想 material-ui 的人准备的。 Material-ui 提供 theme breakpoints and withWidth HOC。它们都可以用于设备大小的 show/hide 列。这是使用主题断点根据设备宽度更改样式的 example。相同的概念可用于 hide/show 列。

Answer 4

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

如何 hide/show 列与 material-ui table？

How to hide/show columns with material-ui table?

reactjs

material-ui