---
title: TableRowCell
source: https://docs.newrelic.com/docs/new-relic-solutions/build-nr-ui/sdk-component/tables/TableRowCell
---

Wraps the content of a table cell located in the body of the table. This component is only expected to be used as a children of `<TableRow>`. Cells take care automatically of ellipsifying the content that does not fit and vertically centering it.

This component is the base cell. For common cases, the SDK also provides a set of additional cells so that they always painted consistently across the UI (e.g. entity name with a status, or a user).

### Usage

```jsx
import { TableRowCell } from 'nr1'
```

### Examples

#### Row cell with external links and additional info

```jsx
function render() {
  const items = [
    {
      dashboardName: "Staging service - Errors",
      createdBy: "john@doe.com",
      url: "//fake-url.com/dashboard1",
    },
    {
      dashboardName: "Package Registry - Performance",
      createdBy: "jane@doe.com",
      url: "//fake-url.com/dashboard2",
    },
  ];
  return (
    <Table items={items} multivalue>
      <TableHeader>
        <TableHeaderCell>Name</TableHeaderCell>
        <TableHeaderCell>Url</TableHeaderCell>
      </TableHeader>
      {({ item }) => (
        <TableRow>
          <TableRowCell additionalValue={`Created by ${item.createdBy}`}>
            {item.dashboardName}
          </TableRowCell>
          <TableRowCell>
            <Link to={item.url}>Go to the dashboard</Link>
          </TableRowCell>
        </TableRow>
      )}
    </Table>
  );
}
```

### Props

| `additionalValue` string | Additional information along the main data in the cell. **Note:** At the moment this content becomes visible only when the `multivalue` prop is passed to the parent `Table` component.                                                                                                                                                                             |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `alignmentType` enum     | Defines the text alignment inside the cell. TableRowCell.ALIGNMENT_TYPE.CENTER, TableRowCell.ALIGNMENT_TYPE.LEFT, TableRowCell.ALIGNMENT_TYPE.RIGHT,                                                                                                                                                                                                                |
| `ariaLabel` string       | Use it to describe better the context of the cell's action for users on screen readers. ````jsx <TableRowCell to="/dashboards" ariaLabel="Go to your dashboard">    Go  </TableRowCell>  ```  ````                                                                                                                                                                  |
| `children` node          | Contents of the table cell.                                                                                                                                                                                                                                                                                                                                         |
| `className` string       | Appends class names to the component.Should be used only for positioning and spacing purposes.                                                                                                                                                                                                                                                                      |
| `ellipsisType` enum      | Defines how values are ellipsified within the cells; i.e. where the ellipsis is placed: - `RIGHT`: at the end of the text, preserving its beginning. - `LEFT`: at the beginning of the text, preserving its end. TableRowCell.ELLIPSIS_TYPE.LEFT, TableRowCell.ELLIPSIS_TYPE.RIGHT,                                                                                 |
| `onClick` function       | Callback fired any time the user clicks on the table cell.                                                                                                                                                                                                                                                                                                          |
| `style` object           | Inline style for custom styling.Should be used only for positioning and spacing purposes.                                                                                                                                                                                                                                                                           |
| `testId` string          | Adds a `data-test-id` attribute. Use it to target the component in unit and E2E tests.For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.For example, `my-nerdpack.some-element`. **Note:** You might not see `data-test-id` attributes as they are removed from the DOM, to debug them pass a `e2e-test` query parameter to the URL. |
| `to` shape\|string       | Location object or url string to link to.Linked `TableRowCell`s are unstyled and will not show icons for external links. If the same styling as the Link component is what is desired, then use a `Link` instead as a child component within the cell.shape `pathname` REQUIREDstring `search` string `hash` string                                                 |