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

import { TableRowCell } from 'nr1'

Examples

Row cell with external links and additional info

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.

<One ofTableRowCell.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.

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

onClick

function

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

function (event: React.MouseEvent 
)

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

pathname

REQUIRED

string

search

string

hash

Usage.css-21sua1{background:none;border:none;width:0;padding:0;}

Examples

Row cell with external links and additional info

Props

string

enum

string

node

string

enum

function

object

string

shape|string

shape

REQUIRED

string

string

string

Usage