Usage
import { TableHeaderCell } from 'nr1'
Props
TableHeaderCell .ALIGNMENT_TYPE .LEFT
Defines the text alignment inside the cell.
<One ofTableHeaderCell.ALIGNMENT_TYPE.CENTER,TableHeaderCell.ALIGNMENT_TYPE.LEFT,TableHeaderCell.ALIGNMENT_TYPE.RIGHT,>
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: React.MouseEvent, sortingData: Object )
false
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 ) => number
Number .MAX_SAFE_INTEGER
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.
TableHeaderCell .SORTING_TYPE .NONE
Establishes the sorting for the column. Columns are sorted based on
the element returned by the value
prop.
<One ofTableHeaderCell.SORTING_TYPE.ASCENDING,TableHeaderCell.SORTING_TYPE.DESCENDING,TableHeaderCell.SORTING_TYPE.NONE,>
Inline style for custom styling.
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.
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.
1fr
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'
: whereYY
is a number, represents the width of the column in pixels. -
'YY%'
: whereYY
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'
: whereYY
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
and2fr
) 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.