Table
Table can be used to display a data set in an easy to scan way.
Examples
Name | Age | Gender | ||
|---|---|---|---|---|
Rory Boisvert | 50 | M | ||
Sharon Monroe | 49 | F | ||
Lucy Booth | 18 | F | ||
Usage
Define your data and your columns, and the table will handle the rest.
Do
- Use table for tabular content
- Keep content easy to scan
- Only display data that is relevant to the user flow, without cluttering
- Give columns ample default width to display information
- Always include a header row
- Keep number of decimals consistent throughout
Don't
- Use table for layout purposes only
- Overload the view with too many columns that require excessive horizontal scrolling
- Make columns so narrow that it truncates the information in typical cases
- Center align content or headers
Anatomy
Basic elements
-
Table header row: Header rows are mandatory for all tables, and are always rendered at 40px. For cards with lists without header rows, check the List component.
-
Table row: The table structural row placed at the surface level. Generally, heights are 40px, 48px, 56px, or 64px.
-
Table header cell: Header cells can only include simple labels, and may be interactive to allow sorting.
-
Table cell: An individual cell inside a row. It always preserves a 12px horizontal padding.
-
Card: Tables are always rendered inside card containers, except in legacy pages that don't support cards.
-
Tree chevron: Chevrons are used to expand and collapse trees.
-
Table row padding: Rows have 8px of horizontal padding. No element should be placed in that space.
-
Supporting visual: Visual prefixes are placed in cells and can be icons, persona avatars, and other assets. General sizes are 16px, 24px, and 32px.
-
Unread status: The unread status is used to convey the element is new or was recently changed, and needs attention. Usually the main column gets a bold treatment as well. The unread status tick is not interactive
-
Side actions: Icon buttons, rendered at 32px, are presented vertically centered on mouseover or focus, and get a subtle style on hover
- Checkbox: Checkboxes can be prefixed in rows to allow batch operations. They're always placed at the leftmost corner of the row.
Table cell types
Single-line cell
The most common cell is a single-line label. It is vertically centered in the row, and it ellipsizes by default.
Labels may be rendered in different colors and font familes. $secondary-text may be used for less important cells, monospaced fonts for representing technical references, and semibold for primary cells.
Icons or status visuals may be used prefixed to labels to help identifying the artifact.
Persona avatars and other illustrations may include a bigger supporting visual area at 24px. Rows need to be at least 48px height for using this cell.
Two-line cell
Secondary labels may be included in cells to help identifying the first label. Caution: use a table header that is compatible with all the column information.
Use 32px visual for bigger visuals in 56px-tall rows. Only represent a persona avatar in this size if the person is the primary information of the row.
Tags cell
Cells can include a list of tags. Instead of ellipsis, a fade out is used when space is not sufficient.
Commit cell
Unlike two-line cells with prefixed visuals, commit cells apply a custom element in the secondary label. This makes sure the author is not referenced as the main artifact of the row.
Rows: interactions, side actions, and links
The default state of a row doesn't have any special background. Generally, rows are 40px, 48px, 56px, or 64px tall.
Rows don't change their heights on demand, and don't scale according to the content. If cells don't fit the space, the content either ellipsizes (text), fades out (other custom elements that don't support ellipsis), or adapts its size to fit.
Mouse over
Interactive rows get a mouseover style, highlighting the entire row to inform it is clickable.
Rows that are draggable get a special hint on mouseover.
Selected row
Rows that can be selected always have a checkbox control, allowing the selection to happen.
Selected rows on mouseover get a slightly darker background.
Side actions
Side actions enable direct manipulation of artifacts in tables.
By default, a "more" icon is used to show a context menu with the available options. However, a single secondary action may be represented directly, like the "Remove" action below.
Side action buttons are only visible on hover/focus, and should never represent the main action of the row. E.g. an "Open" action should be triggered only by clicking in the row, and should not be referenced in the context menu.
Single secondary actions may be placed directly in the side action area.
Entire row clickable
For interactive rows, the primary action is activated by clicking in the row. Alternative actions may exist inside the row, like side actions, tree chevrons, checkboxes, or inline links. These actions impede the primary action to be triggered.
Inline links
Labels may have an inline link, letting the user to navigate away from the table.
Tree tables
Hierarchical representations can exist inside tables. Chevrons and spacing help to identify the structure and allow navigation inside the tree.
Chevrons follow the same style behavior as icon buttons.
Drag & drop
Drag & drop is supported in tables, and draggable rows are represented with a special handle on hover.
-
Grab cursor: A draggable row should reserve an area that replaces the cursor to a "grab" mode in the first 16px, in order to enforce the draggable aspect of the row. No extra spacing is required for the cells (they should use the 8px row padding as normal).
-
Previous state: While the user is dragging a row, the row cells get dimmed at 40% opacity. This acts as a small reminder to users where the element was previously.
-
Drop target: A drop target is used to represent where the drop placement will be. For tree tables, the left circle may be placed inset to demonstrate a nested drop.
Sorting
Table supports ordering through interactive header cells. If ordering is supported, one column should be active by default.
-
Hover state: Interactive table header cells get a hover style to identify it is interactive.
-
Cycle through valves: When the user clicks in an interactive table header cell, the ordering cycles first to Descending, and then to Ascending.
-
Focus style: When the user clicks in an interactive table header cell, the ordering cycles first to Descending, and then to Ascending.
APIs
ITable<T>
addOverlayInherited From: IRowOverlayableUI
(id: string, rowIndex: number, render: (props: IOverlayRenderProps) => React.ReactNode, zIndex?: number, columnIndex?: number): void
addOverlay is used to create, or update an existing, overlay over an existing list row.
This allows the caller to apply effects to the row by having elements
that appear over top of the row.
@param id This is a unique id for this overlay.
@param rowIndex The index of the row the overlay should hover over.
@param render A function which returns the React nodes that should be placed within the overlay.
The parent element will be positioned, and have the same height and width
as the underlying row element.
@param zIndex If there are multiple overlays the caller can use the zIndex
parameter to ensure they are layered correctly.
@param columnIndex The index of the column the overlay should hover over (used for column header drag/drop)
focusRowInherited From: IList<T>
(rowIndex: number, direction?: number): Promise<void>
Sets the focus to the given row after scrolling to it. If it's not focusable, it will use `direction` to find the closest one.
@param rowIndex The index of the row to focus.
@param direction Use 1 or -1 to try previous or next rows when given row is not focusable.
getStatsInherited From: IList<T>
(): IListMaterializedStats
Returns an object with the indexes of the first and last materialized and rendered rows.
removeOverlayInherited From: IRowOverlayableUI
(id: string): void
removeOverlay is used to remove an overlay that has already been registered.
The unique id is all that is needed.
@param id This is a unique id for this overlay.
scrollIntoViewInherited From: IList<T>
(rowIndex: number, options?: ScrollIntoViewOptions, onScrollComplete?: (rowIndex: number) => void) => void
scrollIntoView works like the element method in the browser, but instead of being
based on the element scrollIntoView will scroll the row specified by the rowIndex
into view.
@param rowIndex The 0 based rowIndex that should be scrolled into view.
@param options These options are passed on to the underlying element.
@param onScrollComplete This delegate is called when the scrolling is complete.
This may not be immediate if the list has to materialize rows to scroll.
NOTE: The rowIndex passed to the delegate will be the requested rowIndex or
-1 if another scrollIntoView request is made before this scroll request completes.
ITableRow<T>
dataInherited From: IListRow<T>
T
Data that represents the instance of T for this row. In some cases the
row data may not be available.
ITableRowDetails<T>
ariaBusyoptionalInherited From: IListItemDetails<T>
boolean
Sets aria-busy on the list item element.
ariaCurrentoptionalInherited From: IListItemDetails<T>
"page" | "step" | "location" | "date" | "time" | "true" | "false"
Sets aria-current value if the row matches the requirements of aria-current
More information: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current
ariaDescribedByoptionalInherited From: IListItemDetails<T>
string
Sets aria-describedby on the list item element.
ariaLabeloptionalInherited From: IListItemDetails<T>
string
ariaLabel allows the caller to describe the elements contents to assistive
technology.
ariaLabelledByoptionalInherited From: IListItemDetails<T>
string
ariaLabelledBy property enables authors to reference other elements on the page to define an accessible name to assistive
technology.
ariaPosInSetoptionalInherited From: IListItemDetails<T>
number | null
Sets aria-posinset on the tr element. Defaults to the item index.
ariaRowOffset1 The default value is 1 because the aria-rowindex is 1-based instead of 0-basedInherited From: IListItemDetails<T>
number
Amount to offset the aria-rowindex attribute of a row. This should be added
to the index to produce the aria-rowindex of the row. The common use case for this property
is accounting for the header row of a Table. Per the ARIA spec, a header row should be included in
the aria-rowcount, and provided an aria-rowindex of 1, meaning the first actual row of the table
needs an aria-rowindex of 2.
ariaSetSizeoptionalInherited From: IListItemDetails<T>
number | null
Sets aria-setsize on the tr element. Defaults to the itemProvider length.
classNameoptional
string
css class name to add to the rendered row element.
dataoptionalInherited From: IListItemDetails<T>
T
The data represents the object being rendered in this row. If the caller
has asynchronous loading of rows, the data MAY be undefined while we wait
for the data to be resolved.
eventDispatchInherited From: IListItemDetails<T>
IEventDispatch
An event dispatch the row MAY use to dispatch custom events to list behaviors.
excludeFocusZoneoptionalInherited From: IListItemDetails<T>
boolean
Set to true to exclude the list item from the focus zone.
excludeTabStoptrueoptionalInherited From: IListItemDetails<T>
boolean
If false, the row will get tabIndex=0, otherwise tabIndex=-1.
idoptional
string
id to add to the rendered row element.
itemProvider
IItemProvider<T | IReadonlyObservableValue<T | undefined>>
The caller MUST supply the set of items to be shown through the ItemProvider.
The IItemProvider allows the caller to store their items in the form that
bests suits their needs but gives the table a well defined interface for
requesting the items. This can include async fetching of items through
observables.
listPropsInherited From: IListItemDetails<T>
Properties used to render the list as a whole.
onFocusItemInherited From: IListItemDetails<T>
(rowIndex: number, event: React.FocusEvent<HTMLElement>) => void
The row MUST call onFocusItem when a row or one of the child elements of the row receives focus.
renderSpaceroptional
(rowIndex: number, left: boolean) => React.ReactNode | null
renderSpacer can be supplied to override the spacer columns before and
after the actual columns in the table. This is used to apply custom
semantics to these areas. The standard spacers should be used unless there
is a specific need otherwise.
roleoptional
string
Sets the aria role on the tr element.
selectableTextoptionalInherited From: IListItemDetails<T>
boolean
Set to true if text in the list row should be selectable.
selectionoptional
A selection object can be supplied for managing the table selection. This
is not required since the table offers onSelect as a delegate. If the caller
wants multi-selction they must use an IListSelection that supports multi
select.
singleClickActivationoptional
boolean
Using singleClickActivation will activate the item when the row is clicked.
Where setting singleClickActivation to false will require a doubleclick to
activate a given row.
ITableProps<T>
ariaLabel
string
ariaLabel allows the caller to describe the elements contents to assistive
technology.
behaviors
Array<IBehavior<ITableProps<T>, ITable<T>>>
Behaviors can be added to the table and monitor events and interact with the
component through the ITable methods.
className
string
CSS className to add to the table root element.
columnsrequired
Array<ITableColumn<T>>
columns is a required property of a table used to define the column layout
for the table.
containerClassName
string
CSS className to add to the container element.
enforceSingleSelect
boolean
A custom way to force single-select options in a multi-select selection.
eventDispatch
IEventDispatch
The caller can supply an EventDispatch to the table if it wishes to
participate it extending the behaviors. If one isn't supplied the table will
create its own dispatcher when behaviors are supplied.
excludeTabStop
boolean
Set to true to set the tabIndex of the first row to -1 instead of 0.
focuszoneProps
focuszoneProps allows the caller to manage the how the table rows are focused.
The default focuszone if one isn't supplied is a Vertical non-cyclic focus zone.
id
string
Unique Id for this table.
itemProviderrequired
IItemProvider<T | IReadonlyObservableValue<T | undefined>>
The caller MUST supply the set of items to be shown through the ItemProvider.
The IItemProvider allows the caller to store their items in the form that
bests suits their needs but gives the table a well defined interface for
requesting the items. This can include async fetching of items through
observables.
There is simple ArrayItemProvider<T> for those that just have a set of items
they want to supply without writing a custom ItemProvider.
maxHeight100000
number
The maximum height of the table when virtualized. Browsers have issues
rendering elements that are too large and when the List contains thousands
of elements, the list renders very large spacer elements to correctly
position the scroll bar. The large spacer elements cause rendering issues
across browsers. To bypass this, we need to limit how large the list can
grow to. By default this size is 100,000px. However, if you have multiple
items within a scrollable region, this number might need to be reduced.
For instance, if you have 5 lists that can contain a lot of rows in the
same scrollable region, you would likely want to set the max height for
each list to 20,000. Keep in mind that the smaller this number, the harder
it will be for a user to scroll with precision.
onActivate
(event: React.SyntheticEvent<HTMLElement>, tableRow: ITableRow<T>) => void
onActivate is called when the row is activated. Activation occurs on
the Enter keystroke or double click.
@param event - This is the event that is causing the activation.
@param tableRow - Details about the table row being activated.
onFocus
(event: React.SyntheticEvent<HTMLElement>, listRow: ITableRow<T>) => void
onFocus is called when a item in the list is focused. Preventing default
on the focus event will prevent row selection from occuring even if
selectOnFocus is set to true.
@param event This is the event that is causing the activation.
@param tableRow Details about the list row being activated.
onSelect
(event: React.SyntheticEvent<HTMLElement>, tableRow: ITableRow<T>) => void
onSelect is called when the row is selected. Selection occurs on the
Space keystroke or click.
@param event - This is the event that is causing the selection.
@param tableRow - Details about the table row being selected.
pageSize10
number
pageSize controls the granularity of row rendering. The table always renders
a full page worth of rows even when they are not needed to fill the viewport.
Smaller values will help reduce the number of wasted rows that are rendered
outside the viewport, but will force the table to re-render more often as
scrolling occurs.
renderHeader
(columns: Array<ITableColumn<T>>) => JSX.Element
Tables MAY render a header above the table contents. This is done through the
onRenderHeader. Like the renderRow method, there are set of restrictions the
implmentation MUST follow.
Requirements:
1) The header function MUST return a singlely rooted component that resolves
to single rooted element, or return a single element that is either a <tr>
or another acceptable tag that is marked as a display: table-row.
2) The header function MUST only include direct child elements that are either
<td>'s or acceptable elements that are maked as display: table-cell. The
renderer MUST return one element for each defined column even if there is
no data to be rendered in the column.
renderLoadingRow
(index: number, details: ITableRowDetails<T>) => JSX.Element
When a row's value is given as an ObservableValue with an undefined value,
the list will render a Loading row for the content. The default will be
a shimmer row that is semi random and matches the content.
@param index This is the 0 based row index that should be rendered.
@param details Additional details about this row.
renderRow
TableRowRenderer<T>
The requirements of this function are quite complicated and before writing
a new row renderer you should ensure one doesnt already exist that solves
your needs.
Requirements:
1) The row function MUST return a singlely rooted component that resolves
to single rooted element, or return a single element that is either a <tr>
or another acceptable tag that is marked as a display: table-row.
2) The row function MUST only include direct child elements that are either
<td>'s or acceptable elements that are maked as display: table-cell. The
renderer MUST return one element for each defined column even if there is
no data to be rendered in the column.
3) The row function MUST call onFocusItem when a either the row element of
any of the rows child elements receive the focus. This is needed to ensure
navigation within the table as well as in and out of the table function
correctly.
4) The row function MUST ensure the className for each of the columns is
added the cell for the given colmn.
5) The row function MAY dispatch events for behaviors but is not required.
If any events are dispatched they should be documented on the row renderer.
6) The row function is responsible for all accessibility and focus
management within the row.
renderSpacer
(rowIndex: number, left: boolean) => React.ReactNode | null
renderSpacer can be supplied to override the spacer columns before and
after the actual columns in the table. This is used to apply custom
semantics to these areas. The standard spacers should be used unless there
is a specific need otherwise.
@param rowIndex - The index of the row to render for.
@param left - True if this is the left spacer, false if it is the right spacer
role"grid"
string
role defines the aria role of the table and defaults to "grid"
If the table does not have any focusable elements within the rows, set the role as "table" instead of "grid"
rowHeight
number
If the caller has variable height rows they can specify the rowHeight they
want used to estimate the size of virtualized rows. This means that when rows
are not rendered, the component will create virtual space for those rows to
ensure the scrolling behavior acts appropriately.
If the table has fixed size rows there is no need to specify a rowHeight. The
table will determine the height of the rows after the initial render when
the observer reports on page visibility.
Question: How do I determine the rowHeight if their are variable height rows.
This one is a tough question, and the general answer is come up with a fair
average for the rows on a given page. If the select too large or too small
scrolling behaviors can become a bit odd, generally select on the smaller
side if you are unsure.
rowHeights
number[]
An array of heights to be used when calculating the spacer heights. If not supplied, the heights used
will be estimations.
scrollable
boolean
scrollable should be set to true if the table is not contained in a
scrolling element. This will ensure the table scrolls vertically within
the table element itself.
selectRowOnClicktrue
boolean
Should the table select a row when it is clicked?
selectableText
boolean
Set to true to allow text selection for table rows.
selection
A selection object can be supplied for managing the table selection. This
is not required since the table offers onSelect as a delegate. If the caller
wants multi-selction they must use an IListSelection that supports multi
select.
There is a basic ListSelection implementation available from the List
component.
showHeadertrue
boolean | ((screenSize: ScreenSize) => boolean)
showHeader determines whether or not the column headers are shown at the top
of the table. If a function is passed, this function will be called whenever
the screen size changes.
showLinestrue
boolean
showLines determines whether or not lines displayed between rows.
showScrollfalse
boolean
showScroll determines whether we allow overflow on the table
if it is false (as in default), we will add scroll-hidden css class to the table
singleClickActivationtrue
boolean
Using singleClickActivation will activate the item when the row is clicked.
Where setting singleClickActivation to false will require a doubleclick to
activate a given row.
spacerWidth
number
Determines the width of the spacer cells on either side of each row.
tableBreakpoints
A table can be defined with a set of breakpoints. These breakpoints will be
used to control the column layout as the space available to the table changes.
virtualize
boolean
If virtualize false is supplied the list will render all the items supplied
to it. This shouldn't be used unless you know you have a limited number of
rows. Virtualization is used to avoid performance problems.
TableColumnLayout
none0
number
If a column is noted as none, when an asynchronous row is loaded no
animation will be added to this column.
singleLine1
number
The row uses a single line of text. This is the default for a column that
doesnt explicitly define a column layout
singleLinePrefix2
number
The row uses a single line of text with a small prefix.
twoLine3
number
The row uses two lines of text.
twoLinePrefix4
number
The row uses two lines of text with a large prefex.
TableColumnStyle
Secondary1
number
Secondary colums should be rendered normally.
Primary2
number
Primary columns should be rendered with emphasis.
Tertiary3
number
Tertiary columns should be rendered de-emphasized.
ITableColumnBehaviorProps<T>
columnIndexrequired
number
tablePropsrequired
Partial<ITableProps<T>>
SortOrder
ascending0
number
descending1
number
ColumnJustification
Left0
number
Right1
number
IColumnSortProps
ariaLabelAscending
string
This is deprecated, aria-sort is used instead.
ariaLabelDescending
string
This is deprecated, aria-sort is used instead.
sortOrder
If a column is tagged as sorted, the header will indicate the sort order with
a visual icon in the if the header uses the standard renderer. If a custom
renderer is used, it should handle the sortOrder.
ITableBreakpoint
breakpoint
number
The table is defined with series of breakpoints. Each of the breakpoints
will have a mapping for the column widths. Columns widths should be
defined the same here as within an ITableColumn, except 0 should be used
for columns that are hidden at this breakpoint.
columnWidths
number[]
The width of each column in the table when this breakpoint is active.
The width can be a positive number for a fixed width, a negative number
for a proportional width, or 0 for a hidden column.
IMeasurementStyle
Pixel0
number
Pixels represented by the 'px' css measurement.
REM1
number
RootEMs represented by the 'rem' css measurement.
ITableColumn<T>
ariaLabeloptional
string
ariaLabel allows the caller to describe the elements contents to assistive
technology. Used when no column name or icon is provided.
behaviorsoptional
Array<IBehavior<ITableColumnBehaviorProps<T>, {}>>
Behaviors can be added a column to monitor events and interact with the column.
classNameoptional
string
CSS className to that should be added to the table cell for each of the
values in this column.
columnLayoutoptional
This is used to help the table understand the general layout of the data.
One of the general purposes of this value is used when data is loaded
asynchronously the table will render a loading animation by default and
the layout is used to help define the visuals for the animation.
A column with no columnLayout defined will use the TableColumnLayout.singleLine
style.
columnStyleoptional
cell renders MAY use the column style to apply css or other behaviors to
this column.
headerClassNameoptional
string
CSS className that will be added to the cell for each header element.
headerTitleClassNameoptional
string
CSS className that will be added to the header title.
iconPropsoptional
If iconProps are supplied the Icon will be drawn to the left of the
column name in the header cell.
id
string
Unique Id for this table. NOTE: If this column uses the renderSimpleCell function
the id is used as the property name of the row object to render.
justificationoptional
How to justify the content within cells. Will also effect the position of the sorting
arrow
maxWidthoptional
number
maxWidth defines how large the column MAY grow if the column is resizble.
This must be an absolute number, it can't be supplied as a percentage.
minWidthoptional
number
minWidth defines how small the column MAY shrink if the column is resizble.
This must be an absolute number, it can't be supplied as a percentage.
nameoptional
string
The name of the column is used to render the column header string. If the
column has no header shown or only an icon the name can be omitted.
onSizeoptional
(event: MouseEvent | KeyboardEvent, columnIndex: number, width: number, column: ITableColumn<T>) => void
onSize is triggered when the column header is sized by the user. This is
a required property to enable the column to be resized.
@param event - This is the mouse or keyboard event that has caused the resize to occur.
@param index - This is the 0 based column index being resized.
@param width - This is the updated width of the column. Note: this is called
with values that conform to the defined min/max values.
@param column - This is the column definition for the column being resized.
onSizeEndoptional
() => void
onSizeEnd is called when the currently active sizing operation has completed.
This means the user has stopped sizing the column. Any actions the consumer
wants to take when sizing ends, they should implement here.
readonlyfalseoptional
boolean
Mark as readonly if there are no interactive elements in the column
renderCell
(rowIndex: number, columnIndex: number, tableColumn: ITableColumn<T>, tableItem: T, ariaRowIndex?: number, role?: string) => JSX.Element
renderCell MUST be supplied for a column. This defines how the column values
will be rendered in the table. Row rendering functions should use this
function unless the row rendering function has a custom presentation for
the row/column.
@param rowIndex - This is the 0 based row index.
@param columnIndex - This is the 0 based column index.
@param tableColumn - This is the column definition for this cell.
@param tableItem - This is the object being rendered in this row.
@param ariaRowIndex - This is the index of the row that aria will read.
@param role - This is the role of child "tr" element.
renderHeaderCelloptional
(columnIndex: number, tableColumn: ITableColumn<T>, focuszoneId?: string, isFirstActionableHeader?: boolean) => JSX.Element
renderHeaderCell can be supplied to render a custom header. It will be
the responsibility of the custom render function to manage all status
of the header. This includes all accessibitlity and focus management.
@param index - This is the 0 based column index.
@param tableColumn - This is the column definition for the header being rendered.
@param focuszoneId - Focuszone id that needs to be included if the header is focusable.
@param isFirstActionableHeader - True for the first column header that gets focused on keyboard accessibility.
requiredoptional
boolean
Set to mark the column field as required, primarily for editable grids. This will display an asterisk next to the column name.
showSizerDividerfalseoptional
boolean
Show the column divider for resizable columns
sortPropsoptional
Within a table columns may optionally be sorted. The table will render an indicator
in the header by default for the current sort order. SortProps should be supplied
for each column that MAY be sorted even if it isn't currently sorted. This allows
the table to know which columns are and which are not sortable.
width
IReadonlyObservableValue<number> | number
The width of a column can one of two values:
Positive value - This is the exact width of the column in pixels. This
would be something like 250 to have a 250px column.
Negative value - This is the percentage of the remaining space in the
containing element this column should consume. This would be something
like -100 for 100% of the remaining space.
NOTE: This is different than css since we dont want to do unneeded
string processing, CSS would have you use a string like 250px or 100%.
widthStyleoptional
The widthStyle can be set when the width is a positive number. By default
the width is interpreted as a fixed pixel value. If the column is going to have
a small UI representation such as a Coin, User Image, and a button these will
scale with font size and should be represented with root EM values. This
corresponds to the css rem measurement.
ITableHeaderCellProps<T>
ariaLabel
string
ariaLabel to pass to the header cell. By default, the cell is labelled by its content element.
If specified, aria-hidden will be set to true on the content element to prevent dupplicate announcements.
columnIndexrequired
number
columnIndex is used to define the index of this column.
focuszoneId
string
An optional focuszoneId that should be added to the component when supplied.
This allows the table to provider keyboard accessibility to the header
through a focuszone.
isFirstActionableHeader
boolean
Identifies the first column header that will get the focus via keyboard accessibility.
ITableRowProps<T>
className
string
css class names that should be added to the row element.
indexrequired
number
Index of the row that should be rendered.
linkPropsdeprecated
ISimpleTableCell
[prop
string]: ISimpleListCell | string | number
Styles
link
.bolt-table-cell-content-with-link
Apply to a cell's content if the cell contains only a link.
.bolt-table-cell-content-with-inline-link
Apply to a cell's content if the cell contains an inline link, along with other content.
.bolt-table-cell-content-with-button
Apply to a cell's content if the cell contains a button.
.bolt-table-link.bolt-link
Apply bolt-table-link to a link in a table.
.bolt-table-inline-link.bolt-table-link
Apply to a link in a table that is inline - meaning there are multiple links or other non-link content in the cell.
visibility
.bolt-table-cell-content-reveal
Apply to your cell's content to only show on row hover/focus