Usage
import { Table } from 'nr1'
Examples
Props
Provide an accessibility label that describes the purpose of the
table, e.g. "All entities"
.
Contents of the table. Table can only contain as children
<TableHeader>
and a function returning <TableRow>
s.
Appends class names to the component.
Should be used only for positioning and spacing purposes.
false
Establishes whether the table should render in compact mode (compact mode has narrower rows). In general, use the standard mode, since compact is reserved for data representation, e.g. in a dashboard.
[]
The items to be used when rendering.
They are required when rendering items with a render callback.
Each item can have any structure and type possible, and will the corresponding one will be provided when rendering each element list.
0
Column containing the main data identifying the row. Often the first column (index 0) is the relevant one, but actions (like favorites) could be placed before it.
false
Enables a second line of content for cell which support the
additionalValue
prop.
Note: The multivalue
mode works only in the default size, not
in compact
.
Callback fired when more items must be loaded. This happens when
you're lazy loading the items and the items that are about to render
cannot be found in the items
array.
This callback should be used to fetch/load the missing items from the backend or other sources.
The returned Promise should be resolved once item data has finished loading. It will be used to determine when to refresh the list with the newly-loaded data. This callback may be called multiple times in reaction to a single scroll event.
function (cursor: Cursor Items to load.
)
Function called when the user clicks over a row checkbox.
It is called with the event of the checkbox, as well as with an
object containing the item representing the row, its index in the
items
array passed to the table, and the items themselves.
When the user selects or unselects the header checkbox (select / unselect all), the callback will be called once for every item, representing individual clicks over each row. The header checkbox state is automatically controlled by the table.
function (event: React.ChangeEvent, selectedItem: SelectedCallbackArgument )
Number of rows.
By default it's equal to length of array passed in the items prop.
You should specify the rowCount
when you know the total number of
items but you want to lazy load them while scrolling.
Function that returns whether a row is selected. It needs to return a boolean representing the state of the row.
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.
function (item: SelectedCallbackArgument ) => boolean
Table .SELECTION_TYPE .BULK
Sets the selection mode of the Table
. Use it along with onSelect
and selected
props to determine which row is checked by the user.
-
Table.SELECTION_TYPE.BULK
displays checkboxes per each row, along with a checkbox in the header to select all items. When an item is selected, header actions become available. -
Table.SELECTION_TYPE.SINGLE
doesn't display checkboxes, the user picks a row by just clicking on it. Though not enforced in the component, theselected
callback should returntrue
only for one item. Check the examples of the component to see how it works.
<One ofTable.SELECTION_TYPE.BULK,Table.SELECTION_TYPE.SINGLE,>
Spacing property. Spacing is defined as a tuple of zero to four
values, which follow the same conventions as CSS properties like
margin
or padding
. To omit a value, use SPACING_TYPE.OMIT
.
<Array of<One ofTable.SPACING_TYPE.EXTRA_LARGE,Table.SPACING_TYPE.LARGE,Table.SPACING_TYPE.MEDIUM,Table.SPACING_TYPE.NONE,Table.SPACING_TYPE.OMIT,Table.SPACING_TYPE.SMALL,>
>
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.
Type definitions
Cursor
{startIndex: number, First index of the range of items to load.
stopIndex: number, Last index of the range of items to load.
}
SelectedCallbackArgument
{item: any, Item to check.
index: number, Index of the item in the items array.
items: any[], Array of all items passed.
}