如何使用material-ui表隐藏/显示列? [英] How to hide/show columns with material-ui table?

问题描述

我正在使用 http://www.material-ui.com，是否可以隐藏/显示基于设备的列?例如，在台式机上，我想显示6列，但在电话上，我可能想显示3个特定列.该怎么做?

I'm using http://www.material-ui.com, Is it possible to hide/show columns based on the device? For example, on desktop, I want to show 6 columns but on a phone, I might want to show 3 specific columns. How to do this?

推荐答案

您可以在相应的 TableHeaderColumn 和 TableRowColumn 上指定CSS className 隐藏/显示的元素取决于CSS @media 查询.

You can specify a CSS className on the corresponding TableHeaderColumn and TableRowColumn elements that is hidden/shown depending on a CSS @media query.

为了方便起见，我在下面使用Bootstrap及其"hidden-xs" CSS类，该类提供了这种媒体查询.将浏览器窗口的大小调整为一定宽度以下时，您会发现状态"列处于隐藏状态.

For convenience sake, I'm using Bootstrap below and its "hidden-xs" CSS class, which provides such a media query. You'll see that the "Status" column is hidden when you resize the browser window below a certain width.

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

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

这篇关于如何使用material-ui表隐藏/显示列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！