Usage
import { TableRowCell } from 'nr1'
Examples
Props
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.
TableRowCell .ALIGNMENT_TYPE .LEFT
Defines the text alignment inside the cell.
<One ofTableRowCell.ALIGNMENT_TYPE.CENTER,TableRowCell.ALIGNMENT_TYPE.LEFT,TableRowCell.ALIGNMENT_TYPE.RIGHT,>
Use it to describe better the context of the cell's action for users on screen readers.
null
Contents of the table cell.
Appends class names to the component.
Should be used only for positioning and spacing purposes.
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 ofTableRowCell.ELLIPSIS_TYPE.LEFT,TableRowCell.ELLIPSIS_TYPE.RIGHT,>
Callback fired any time the user clicks on the table cell.
function (event: React.MouseEvent )
Inline style for custom styling.
Should be used only for positioning and spacing purposes.
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.
Location object or url string to link to.
Linked TableRowCell
s 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.