Table
<afp-table>
A table component for displaying tabular data with support for sorting, selection and pagination.
Examples #
Alignment #
Use the alignment attribute to set the alignment of the column content. The available options are start, center, and end.
Width #
Use the width attribute to set a fixed width for a column.
Clickable Cells #
Use the clickable attribute to make a column clickable. You can listen for the afp-click event to handle clicks on the cells.
Clickable Row #
Use the clickableRow (clickablerow) property to make the entire row clickable. You can listen for the afp-row-click event to handle clicks on the rows.
Sortable #
Use the sortable attribute to make a column sortable. By default, the component will sort the column based on the value of the key property, but you can also provide a custom sorting function using the sortValue and sortType property.
Selectable #
Use the selectable attribute to make rows selectable. You can listen for the afp-select-change event to handle row selection.
You can also use the selectedBg (selectedbg) attribute to apply a background color to selected rows.
Pagination #
Use the pagination attribute to enable pagination for the table. You can use the page and pageSize (pagesize) attributes to set the initial page and page size.
Rendering #
Use the render attribute to provide a custom rendering function for the column cells. You can also use the headerRender to provide a custom rendering function for the column header.
Empty Data #
Use the emptystate attribute to display a message when there is no data to show in the table.
Properties
Learn more about properties.
| Name | Description | Reflects | ||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
data
|
Table data as an array of objects. Each object represents a row, and the properties of the object correspond to the column keys defined in the columns property.
The table will render a row for each object in the data array, and the cells in each row will be populated based on the column definitions.
You can update this property to change the displayed data, and the table will automatically re-render to reflect the changes.
Type
T[]
Default
[] |
|||||||||||||||||||||||||||||
columns
|
Column definitions for the table. Each column is defined by an object that specifies the key, header, sorting behavior, and rendering logic for that column.
Type
AfpTableColumn
Default
[] |
|||||||||||||||||||||||||||||
selectable
|
Enables row selection with checkboxes.
When set to true, a selection column with checkboxes will be added to the table,
allowing users to select individual rows or all rows at once using the header checkbox.
Type
boolean
Default
false |
|
||||||||||||||||||||||||||||
selectedBg
selectedbg
|
When set to true, selected rows will have a different background color to visually indicate their selection state.
This works in conjunction with the selectable property, which enables row selection functionality.
Type
boolean
Default
false |
|
||||||||||||||||||||||||||||
clickableRow
clickablerow
|
Enables row click events. When set to true, clicking on a cell that is marked as clickable will
emit an 'afp-row-click' event with the corresponding row data in the event detail.
This allows for interactive behavior when users click on specific cells in the table.
Type
boolean
Default
false |
|
||||||||||||||||||||||||||||
pagination
|
Enables pagination for the table. When set to true, the table will display a subset of the data based
on the current page and page size, and pagination controls will be rendered to allow users to navigate between pages.
The pagination behavior is controlled by the page and pageSize properties,
which determine the current page number and the number of items displayed per page, respectively.
Type
boolean
Default
false |
|
||||||||||||||||||||||||||||
page
|
Current page number (1-based index). This property is used when pagination is enabled to determine which subset of the data to display.
Type
number
Default
1 |
|
||||||||||||||||||||||||||||
pageSize
pagesize
|
Number of items to display per page when pagination is enabled. This property determines how many rows of data are shown on each page of the table.
Type
number
Default
25 |
|
||||||||||||||||||||||||||||
rowDisabled
|
Set row disabled state based on row data.
Type
(row: T) => boolean | undefined
|
|||||||||||||||||||||||||||||
emptyState
emptystate
|
Custom HTML content rendered when the table has no visible rows.
The value is treated as HTML and rendered into the empty state cell.
Type
string
Default
'' |
|||||||||||||||||||||||||||||
sortIconUp
sorticonup
|
Name of the icon used for ascending sort state.
This value is passed to the `name` attribute of the internal `afp-icon`.
Type
string
Default
'arrow-up-short' |
|
||||||||||||||||||||||||||||
sortIconDown
sorticondown
|
Name of the icon used for descending sort state.
This value is passed to the `name` attribute of the internal `afp-icon`.
Type
string
Default
'arrow-down-short' |
|
||||||||||||||||||||||||||||
sortIconDefault
sorticondefault
|
Name of the icon used for the default unsorted state.
This value is passed to the `name` attribute of the internal `afp-icon`.
Type
string
Default
'arrow-down-short' |
|
||||||||||||||||||||||||||||
pageIconBack
pageiconback
|
Name of the icon used for the previous-page pagination button.
This value is passed to the `name` attribute of the internal `afp-icon`.
Type
string
Default
'chevron-left' |
|
||||||||||||||||||||||||||||
pageIconNext
pageiconnext
|
Name of the icon used for the next-page pagination button.
This value is passed to the `name` attribute of the internal `afp-icon`.
Type
string
Default
'chevron-right' |
|
Methods
Learn more about using methods.
| Name | Description | Arguments |
|---|---|---|
setPage
|
Sets the current page number and emits a 'afp-page-change' event if the page has changed. The event detail includes the new page number, page size, total pages, and total items.
|
next<number>
— The new page number to set. This should be a 1-based index representing the desired page to navigate to.
|
getSelectedRows
|
This method can be used by external code to retrieve the current selection state of the table when the selectable property is enabled.
|
- |
clearSelection
|
This method can be used by external code to clear all selections in the table when the selectable property is enabled.
It clears the selectedRows Set and emits a selection change event to notify any listeners about the update.
|
- |
selectRow
|
This method can be used by external code to programmatically select or deselect a specific row based on a property key and value when the selectable property is enabled.
|
key<keyof T>
— The property name used to identify the row
id<string | number>
— The value to match against the row property
checked<boolean>
— Whether the row should be selected or not
|
selectAll
|
This method can be used by external code to programmatically select or deselect all rows in the table when the selectable property is enabled.
|
checked<boolean>
— Whether all rows should be selected or deselected
|
Events
Learn more about events.
| Name | Return | Description |
|---|---|---|
afp-sort-change
|
{sortKey: string, sortDir: string}
|
Emitted when the sorting of the table changes, providing the new sort key and direction in the event detail.
|
afp-page-change
|
{ page: number, pageSize: number, totalPages: number, totalItems: number}
|
Emitted when the page changes (when pagination is true), providing the new page number, page size, total pages, and total items in the event detail.
|
afp-click
|
T
|
Emitted when a cell marked as clickable is clicked, providing the corresponding row data in the event detail.
|
afp-row-click
|
T
|
Emitted when a row is clicked (when clickableRow is true), providing the corresponding row data in the event detail.
|
afp-select-change
|
T
|
Emitted when the selection of rows changes (when selectable is true), providing an array of the currently selected rows in the event detail.
|
CSS Custom Properties
| Name | Description | Default |
|---|---|---|
--afp-table-border-radius
|
The border radius applied to the table corners.
|
--afp-border-radius-m
|
--afp-table-border-width
|
The width of the table borders.
|
--afp-border-width-s
|
--afp-table-border-color
|
The color of the table borders.
|
--afp-color-surface-border-subtle
|
--afp-table-action-color
|
The color used for interactive elements in the table (e.g., sort indicators, selection checkboxes).
|
--afp-color-surface-elevated
|
--afp-table-padding
|
The padding applied to table cells.
|
--afp-space-xs
|
--afp-table-selection-color
|
The background color applied to selected rows when selectedBg is true.
|
--afp-color-surface-elevated
|
--afp-table-highlight-color
|
The background color applied to highlighted rows based on the column's highlighted function.
|
--afp-color-warning-fill-subtle
|
--afp-table-disabled-color
|
The background color applied to disabled rows based on the rowDisabled function.
|
--afp-color-error-fill-subtle
|
--afp-table-selection-width
|
The width of the selection column when selectable is true.
|
--afp-size-xl
|
Dependencies
The component automatically brings in the listed items, including any nested dependencies that may exist.
Importing
Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.
import '@afp-design-system/core/dist/components/table/table.js';