Как скрыть/показать столбцы с помощью таблицы материалов?

Question

Я использую http://www.material-ui.com, возможно ли скрыть/показать столбцы на основе устройства? Например, на рабочем столе я хочу показать 6 столбцов, но на телефоне, возможно, я хочу показать 3 конкретных столбца. Как это сделать?

Answer 1

Вы можете задать CSS className на соответствующих TableHeaderColumn и TableRowColumn элементов, который скрыт/показан в зависимости от CSS @media запроса.

Для удобства я использую Bootstrap ниже и его CSS-класс «hidden-xs», который предоставляет такой медиа-запрос. Вы увидите, что столбец «Статус» скрыт при изменении размера окна браузера под определенной шириной.

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

Answer 2

Вы можете использовать библиотеку сетки, как reflexbox.