How to disable the css changes made by Link/href

Question

Currently there is a table with some columns which looks like this: If one wants to see details about a company it must click on the arrow at the right-end of the row.

The problem appears when I want to make the whole row clickable, it destroys the design of the page even if there are no css classes added with that.

Here is the code when only the right-end arrow is clickable:

import React from 'react';
import { Table, Image, Icon } from 'semantic-ui-react';
import { Link } from 'react-router-dom';

export default class GenericTable extends React.PureComponent {
  constructor(props) {
    super(props);
  }

  render() {
    const { headers, emptyFirstHeader, rows, entityName, idList } = this.props;

    return (
      <Table>
        <Table.Header>
          <Table.Row>
            {emptyFirstHeader && <Table.HeaderCell />}
            {headers.map(header => (
              <Table.HeaderCell key={headers.indexOf(header)}>
                {header}
              </Table.HeaderCell>
            ))}
            <Table.HeaderCell textAlign="right" />
          </Table.Row>
        </Table.Header>

        <Table.Body>
          {rows.map((row, rowIndex) => (
            <Table.Row key={idList && idList[rowIndex]}>
              {emptyFirstHeader && (
                <Table.Cell>
                  <Image src={row.cells[0]} />
                </Table.Cell>
              )}

              {
                (emptyFirstHeader ? row.cells.shift() : row,
                row.cells.map((cell, cellIndex) => {
                  if (cell === undefined) {
                    return null;
                  }
                  return (
                    <Table.Cell
                      key={
                        idList && `${idList[rowIndex]} ${headers[cellIndex]}`
                      }>
                      {cell}
                    </Table.Cell>
                  );
                }))
              }

              <Table.Cell>
                <Link
                  to={
                    entityName && `/${entityName}/${idList[rows.indexOf(row)]}`
                  }>
                  <Icon name="chevron right" />
                </Link>
              </Table.Cell>
            </Table.Row>
          ))}
        </Table.Body>
      </Table>
    );
  }
}

And when I include each <Table.Row> inside a <Link> it makes the row clickable but it breaks the design:

import React from 'react';
import { Table, Image, Icon } from 'semantic-ui-react';
import { Link } from 'react-router-dom';

export default class GenericTable extends React.PureComponent {
  constructor(props) {
    super(props);
  }

  render() {
    const { headers, emptyFirstHeader, rows, entityName, idList } = this.props;

    return (
      <Table>
        <Table.Header>
          <Table.Row>
            {emptyFirstHeader && <Table.HeaderCell />}
            {headers.map(header => (
              <Table.HeaderCell key={headers.indexOf(header)}>
                {header}
              </Table.HeaderCell>
            ))}
            <Table.HeaderCell textAlign="right" />
          </Table.Row>
        </Table.Header>

        <Table.Body>
          {rows.map((row, rowIndex) => (
             <Link // ADDED HERE 
                to={
                  entityName && `/${entityName}/${idList[rows.indexOf(row)]}`
                }>
            <Table.Row key={idList && idList[rowIndex]}>
              {emptyFirstHeader && (
                <Table.Cell>
                  <Image src={row.cells[0]} />
                </Table.Cell>
              )}

              {
                (emptyFirstHeader ? row.cells.shift() : row,
                row.cells.map((cell, cellIndex) => {
                  if (cell === undefined) {
                    return null;
                  }
                  return (
                    <Table.Cell
                      key={
                        idList && `${idList[rowIndex]} ${headers[cellIndex]}`
                      }>
                      {cell}
                    </Table.Cell>
                  );
                }))
              }

              <Table.Cell>
                <Link
                  to={
                    entityName && `/${entityName}/${idList[rows.indexOf(row)]}`
                  }>
                  <Icon name="chevron right" />
                </Link>
              </Table.Cell>
            </Table.Row>
         </Link> // CLOSED HERE
          ))}
        </Table.Body>
      </Table>
    );
  }
}

How can it be done without affecting the design?

Answer 1

If you done need semantic HTML, you can edit the Table.Row to use Link as its components, like so. And then give the Row a class or style display: table-row

<Table.Row as={Link} style={{display: "table-row"}} to={"/"}>content of the Row</Table.Row>

You can replace the default element with the as prop and the library will pass any other props to the new component, so if you pass to it will pass the link to the Link component.