FavoriteTableRowCell

Renders a row table cell showing the favorite status of a particular entity. The favorite status can be controlled through the checked property and the status changes can be listened through the onChange property.

Usage

import { FavoriteTableRowCell } from 'nr1'

Examples

Example 1

function render() {
  const items = [
    {
      name: 'Login service',
      alertSeverity: 'CRITICAL',
      reporting: true,
      favorite: true,
    },
    {
      name: 'Service Gateway',
      alertSeverity: 'NOT_ALERTING',
      reporting: true,
      favorite: false,
    },
  ];
  return (
    <Table items={items}>
      <TableHeader>
        <TableHeaderCell width="56px" />
        <TableHeaderCell>Entity</TableHeaderCell>
      </TableHeader>
      {({ item }) => (
        <TableRow>
          <FavoriteTableRowCell checked={item.favorite} />
          <EntityTitleTableRowCell value={item} />
        </TableRow>
      )}
    </Table>
  );
}

Props

checked

boolean

If true, indicates that the user has marked the entity as favorite.

className

string

Inline style for custom styling.Should be used only for positioning and spacing purposes.

onChange

function

Callback fired any time the favorite status changes. The new favorite status will be passed as second parameter.

function (event: React.MouseEvent, 
checked: boolean 
)

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

Example 1

Props

boolean

string

function

object

string

shape|string

shape

REQUIRED

string

string

string

Usage