React semantic UI table show and hide columns

Question

In version 1.2.1 of semantic UI React table, I can't find any native behaviour for showing or hiding columns in the : https://react.semantic-ui.com/collections/table/#types-pagination

And actually, I'm not using columns, just rows, as in the first example:

<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>

Do I just need to use the standard hmtl css display none? I would have thought there would be some properties built into the table?

Answer 1

In react you can do it using the state management.

Example:

1. In constructor, create

   this.state={hide:true}

in table if you want to hide a Table Row,

write like this:

{
(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>
}

It will not show that row. This is because the react rendering is state based.

If you want to hide then you have to set the state as hide=true i.e.

this.setState({hide:true})