EntityTitleTableRowCell

Renders a row table cell showing the title of a particular entity. This cell takes the entity object as its children, which is in turn compatible with the NerdGraph entity object (needing, at the very least, the name and reporting fields). If alertable, you should also query for alertSeverity.

Usage

import { EntityTitleTableRowCell } from 'nr1'

Examples

Basic

function render() {
  const items = [
    {
      name: 'Login service',
      guid: 'MTIzNDU2fEZPT3xCQVJ8OTg3NjU0MzIx',
      alertSeverity: 'CRITICAL',
      reporting: true,
    },
  ];


  return (
    <Table items={items}>
      <TableHeader>
        <TableHeaderCell>Entity</TableHeaderCell>
      </TableHeader>


      {({ item }) => (
        <TableRow>
          <EntityTitleTableRowCell value={item} />
        </TableRow>
      )}
    </Table>
  );
}

With additional value

function render() {
  const items = [
    {
      name: 'Login service',
      guid: 'MTIzNDU2fEZPT3xCQVJ8OTg3NjU0MzIx',
      alertSeverity: 'CRITICAL',
      reporting: true,
    },
  ];


  return (
    <Table items={items} multivalue>
      <TableHeader>
        <TableHeaderCell>Entity</TableHeaderCell>
      </TableHeader>


      {({ item }) => (
        <TableRow>
          <EntityTitleTableRowCell value={item} additionalValue={item.guid} />
        </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.

className

string

Appends class names to the component.Should be used only for positioning and spacing purposes.

onClick

function

Callback fired any time the user clicks on the 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

string

value

REQUIRED

shape

Entity object, that requires (at least), the name and reporting fields. This object matches with the user structure obtained from NerdGraph.

shape

name

REQUIRED

string

alertSeverity

string

reporting

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

Examples

Basic

With additional value

Props

string

string

function

object

string

shape|string

shape

REQUIRED

string

string

string

REQUIRED

shape

shape

REQUIRED

string

string

REQUIRED

boolean

Usage