alignmentType
enum | Defines the text alignment inside the cell. <One ofTableHeaderCell.ALIGNMENT_TYPE.CENTER,
TableHeaderCell.ALIGNMENT_TYPE.LEFT,
TableHeaderCell.ALIGNMENT_TYPE.RIGHT, |
children
node | 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. |
className
string | Appends class names to the component. |
onClick
function | 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 |
sortable
boolean | 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. |
sortingFunction
function | 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 () => number |
sortingOrder
number | 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. |
sortingType
enum | 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, |
style
object | Inline style for custom styling. |
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. |
title
string | 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. |
value
function | 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. |
width
string | 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.
|