Блог

В версии 1.2.1 таблицы semantic UI React я не могу найти никакого собственного поведения для отображения или скрытия столбцов в :https://react.semantic-ui.com/collections/table/#types-pagination

И на самом деле, я не использую столбцы, только строки, как в первом примере:

 <Table celled>
    <Table.Header>
      <Table.Row>
        <Table.HeaderCell>Header</Table.HeaderCell>
        <Table.HeaderCell>Header</Table.HeaderCell>
        <Table.HeaderCell>Header</Table.HeaderCell>
      </Table.Row>
    </Table.Header>

    <Table.Body>
      <Table.Row>
        <Table.Cell>
          <Label ribbon>First</Label>
        </Table.Cell>
        <Table.Cell>Cell</Table.Cell>
        <Table.Cell>Cell</Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>Cell</Table.Cell>
        <Table.Cell>Cell</Table.Cell>
        <Table.Cell>Cell</Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>Cell</Table.Cell>
        <Table.Cell>Cell</Table.Cell>
        <Table.Cell>Cell</Table.Cell>
      </Table.Row>
    </Table.Body>
</Table>
  

Нужно ли мне просто использовать стандартный hmtl css display none? Я бы подумал, что в таблицу будут встроены какие-то свойства?

В react вы можете сделать это с помощью управления состоянием.

Пример:

1. В конструкторе создайте

   this.state={скрыть:true}

в таблице, если вы хотите скрыть строку таблицы,

напишите так:

 {
(this.state.hide==false)?null:<Table.Row>
        <Table.Cell>Cell</Table.Cell>
        <Table.Cell>Cell</Table.Cell>
        <Table.Cell>Cell</Table.Cell>
      </Table.Row>
    </Table.Body>
}
  

Эта строка отображаться не будет.
Это связано с тем, что рендеринг react основан на состоянии.

Если вы хотите скрыть, вам нужно установить состояние как hide = true, т.Е.

 this.setState({hide:true})