Show boolean values in table using semantic-ui-react

Question

I am new to React and semantic-ui-react. I am creating a table to display a few values, including a boolean, from a mongo database. The column header is defined like this:

<Table.HeaderCell
  width={2}
  textAlign="center"
  sorted={column === "activeFlag" ? direction : null}
  onClick={this.handleSort("activeFlag")}
  >
 Active
</Table.HeaderCell>

And the table rows are rendered like this:

{_.map(data, ({ repoName, repoDesc, activeFlag }, index) => (
     <Table.Row className="devRow" key={index} active onClick={e => this.updateRepo(index)}>
        <Table.Cell>{repoName}</Table.Cell>
        <Table.Cell>{repoDesc}</Table.Cell>
        <Table.Cell textAlign="center">{activeFlag}</Table.Cell>
      </Table.Row>
     )
  )}

activeFlag was originally defined as Boolean with default value false, but the value did not appear in the table. When activeFlag was redefined to be a String, then the value appeared in the table. Can boolean values be shown in a table?

Maniraj Murugan · Accepted Answer · 2020-05-12 07:18:18Z

4

The reason that nothing is shown in this line,

<Table.Cell textAlign="center">{activeFlag}</Table.Cell>

is due to that activeFlag is a real boolean value and not a string or number..

So to display any boolean value in template, you could use the following,

<Table.Cell textAlign="center">{String(isActive)}</Table.Cell>

If you want to display a literal "true" or "false" you should convert it to a string and then display.

Working Sandbox: https://codesandbox.io/s/semantic-ui-drag-table-rows-k45i

answered May 12, 2020 at 7:18

Maniraj Murugan

9,11424 gold badges77 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kodali444 Over a year ago

Tq, using String(isActive) i'm able to print boolean value.

Collectives™ on Stack Overflow

Show boolean values in table using semantic-ui-react

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related