• /
  • Log in


Wraps the content of a table cell located in the header of the table, by keeping them at the top and adding additional controls as required, e.g. sorting mechanisms.


import { TableHeaderCell } from 'nr1'



Defines the text alignment inside the cell.

<One of

Contents of the table cell. If left empty, make sure you pass title so that users get a reference about the data the column shows.


Appends class names to the component.


Callback fired any time the user clicks on the header. When clicked, sorting information (and the next sorting state) will be passed as the second parameter. Use it rather than computing it yourself.

function (
event: Event,
sortingData: Object
) => undefined

Whether the column is sortable. This means that the up and down arrows will be shown, side to the heading text.

Sorting is a controlled component interface, you are in charge of listening for the sorting event and applying the sorting to the corresponding column, by changing its sortingOrder prop.


Method for sorting rows. The default method will usually do the right thing (alphabetical ordering for text, numerical ordering for numbers and boolean grouping), but if needed this can be overridden.

The function takes two parameters (a and b) and has to return a negative number if a is considered to appear before b, a positive one if it's considered to appear after, and zero if both values are identical.

Each of the objects passed to the callback contains the value for the given row (i.e. the result of calling value over the row), the row item (as item), the index of the row (as index) and all the items in the items array (as items). Generally you will compare rows using a.item and b.item.

function (
a: object,
b: object
) => undefined

Establishes the sorting order. A lowest number indicates a highest sorting priority, meaning that 0 will be the first column sorted, and if two items are identical, we will use column 1 and so on. Columns that do not have an explicit sorting order are used after all columns that do have it, and they are applied in order of appearance.


Establishes the sorting for the column. Columns are sorted based on the element returned by the value prop.

<One of

Inline style for custom styling.


Adds a data-test-id.

Used to target the component in unit and e2e testing.


Establishes the title of the cell. This is used for tooltip purposes, when the width of the column is small enough to not show the entire heading. Defaults to the stringified version of the provided children.


Function that is used to extract the raw value representing a column. The raw value may be a boolean (e.g. if you render a checkbox), a number (if you render a metric) or text for others.

It is called with an object containing the item representing the row, its index in the items array passed to the table, and the items themselves.

This function is used for sorting the table (by the given value) as well as for the heuristics of 'fit-content' widths.

function () => undefined

Represents the width of the column. It is always a string, and it can be of one of the following types:

  • 'fit-content': the column will take the minimum required space to allocate all items in the column. For virtualized lists, a heuristic will be used to avoid rendering all cells.

  • 'YYpx': where YY is a number, represents the width of the column in pixels.

  • 'YY%': where YY is a number, represents the width of the column in percentage, relative to the size of the available space where the table is being rendered.

  • 'YYfr': where YY is a number, it represents a fraction of the available width. Fractions are proportional ones to others; for instance, a table with two columns (1fr and 2fr) will have the second column twice as large as the first one.

If, after computing the widths, the overall size of the table does not cover the available space, all columns will be proportionally stretched to fit all available space.



function () => undefined
Create issueEdit page
Copyright © 2021 New Relic Inc.