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>
  );
}

1
function render() {
2
  const items = [
3
    {
4
      name: 'Login service',
5
      alertSeverity: 'CRITICAL',
6
      reporting: true,
7
      favorite: true,
8
    },
9
    {
10
      name: 'Service Gateway',
11
      alertSeverity: 'NOT_ALERTING',
12
      reporting: true,
13
      favorite: false,
14
    },
15
  ];
16
  return (
17
    <Table items={items}>
18
      <TableHeader>
19
        <TableHeaderCell width="56px" />
20
        <TableHeaderCell>Entity</TableHeaderCell>
21
      </TableHeader>
22
      {({ item }) => (
23
        <TableRow>
24
          <FavoriteTableRowCell checked={item.favorite} />
25
          <EntityTitleTableRowCell value={item} />
26
        </TableRow>
27
      )}
28
    </Table>
29
  );
30
}

Props

checkedboolean

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

classNamestring

Inline style for custom styling.

Should be used only for positioning and spacing purposes.

onChangefunction

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

function (event: Event, 
checked: bool 
) => undefined

styleobject

Inline style for custom styling.

Should be used only for positioning and spacing purposes.

toshape|string

Location object or url string to link to.

shape

pathnamerequiredstring

searchstring

hashstring

Methods