React Semantic UI : Table.Header Cell is not taking full width

Question

I'm trying to add full width in Semantic React UI, but it's not taking full width.

Code:

<Table.Row>
  <Table.HeaderCell style={{Width: '600px'}}>
    <Search/>
  </Table.HeaderCell>
</Table.Row>

Answer 1

Use props name 'colSpan' to defined number of who column

<Table.HeaderCell  colSpan={8}>
    <Search/>
</Table.HeaderCell>

Answer 2

Looks like you aren't modifying the first header cell for that column (which is actually Company Name, not search).

Here is an example on how to properly modify column widths in a table https://codesandbox.io/s/5v800vplmk?module=/example.js

If your intent is to not make the search bar part of the table column structure, then you probably don't want to put it in a row / cell.