• Log inStart now

TableRowCell

Usage

import { TableRowCell } from 'nr1'

Examples

Props

additionalValuestring

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.

alignmentTypeenum
DEFAULT
TableRowCell.ALIGNMENT_TYPE.LEFT

Defines the text alignment inside the cell.

<One of
TableRowCell.ALIGNMENT_TYPE.CENTER,
TableRowCell.ALIGNMENT_TYPE.LEFT,
TableRowCell.ALIGNMENT_TYPE.RIGHT,
>
ariaLabelstring

Use it to describe better the context of the cell's action for users on screen readers.

childrennode
DEFAULT
null

Contents of the table cell.

classNamestring

Appends class names to the component.

Should be used only for positioning and spacing purposes.

ellipsisTypeenum
DEFAULT
TableRowCell.ELLIPSIS_TYPE.RIGHT

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.
<One of
TableRowCell.ELLIPSIS_TYPE.LEFT,
TableRowCell.ELLIPSIS_TYPE.RIGHT,
>
onClickfunction

Callback fired any time the user clicks on the table cell.

function (
event: React.MouseEvent
)
styleobject

Inline style for custom styling.

Should be used only for positioning and spacing purposes.

testIdstring

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.

toshape|string

Location object or url string to link to.

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

pathnamerequiredstring
searchstring
hashstring
Copyright © 2024 New Relic Inc.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.