Table

tile/table

Shows tabular data with column definitions and row data. Columns define structure (key, header, alignment). Rows are key-value objects mapping column keys to cell values.

Use a table to present structured data across rows and columns, such as a list of records, a price sheet, or a status report.

Define the shape with columns. Each column has a key that maps to a field in the row data and a header for the display label. Provide the data as rows, where each object’s keys match the column keys. Always set caption to describe the table’s contents for accessibility.

1{
2    "definition": "tile/table",
3    "attributes": {
4        "columns": [
5            { "key": "name", "header": "Name" },
6            { "key": "email", "header": "Email" },
7            { "key": "role", "header": "Role" }
8        ],
9        "rows": [
10            { "name": "John Doe", "email": "john@example.com", "role": "Admin" },
11            { "name": "Jane Smith", "email": "jane@example.com", "role": "User" }
12        ],
13        "caption": "Employee contact information"
14    }
15}

To render a column as something other than plain text, set its columnType value as described in the Column Type section. Right-align numeric columns with align so the digits line up.

1{
2    "definition": "tile/table",
3    "attributes": {
4        "columns": [
5            { "key": "id", "header": "ID" },
6            { "key": "product", "header": "Product" },
7            {
8                "key": "price",
9                "header": "Price",
10                "align": "right",
11                "columnType": {
12                    "type": "number",
13                    "format": "currency",
14                    "currencyCode": "USD",
15                    "minimumFractionDigits": 2
16                }
17            }
18        ],
19        "rows": [
20            { "id": "1", "product": "Widget A", "price": 29.99 },
21            { "id": "2", "product": "Widget B", "price": 39.99 }
22        ],
23        "caption": "Product price list",
24        "appearance": "striped"
25    }
26}

To break a long data set into pages, add pagination with a pageSize.

1{
2    "definition": "tile/table",
3    "attributes": {
4        "columns": [{ "key": "name", "header": "Name" }],
5        "rows": [],
6        "caption": "Team members",
7        "pagination": { "pageSize": 20 }
8    }
9}

To keep column headers visible while the body scrolls, set isStickyHeader to true.

1{
2    "definition": "tile/table",
3    "attributes": {
4        "columns": [{ "key": "name", "header": "Name" }],
5        "rows": [],
6        "caption": "Team members",
7        "isStickyHeader": true
8    }
9}

To show which column the data is sorted by, set sort to a { key, direction } object, and mark columns isSortable so users can re-sort by clicking a header.

1{
2    "definition": "tile/table",
3    "attributes": {
4        "columns": [
5            { "key": "name", "header": "Name", "isSortable": true },
6            { "key": "createdDate", "header": "Created", "isSortable": true }
7        ],
8        "rows": [],
9        "caption": "Records",
10        "sort": { "key": "createdDate", "direction": "desc" }
11    }
12}

To enable row filtering, mark columns isFilterable, which adds each one to a filter panel with an input matched to its type: text search for text and link columns, a dropdown for picklist columns, a min-max range for number columns, and a date range for date columns.

1{
2    "definition": "tile/table",
3    "attributes": {
4        "columns": [
5            { "key": "name", "header": "Name", "isFilterable": true },
6            {
7                "key": "status",
8                "header": "Status",
9                "isFilterable": true,
10                "columnType": {
11                    "type": "picklist",
12                    "options": [
13                        { "label": "Open", "value": "open" },
14                        { "label": "Closed", "value": "closed" }
15                    ]
16                }
17            }
18        ],
19        "rows": [],
20        "caption": "Support tickets"
21    }
22}

Set the columnType on a column to render its cells as something other than plain text. If you don’t set columnType, cells render as plain text by default.

• date: Formats ISO 8601 date strings or numeric timestamps as localized dates or datetimes. Control the output with format, dateStyle, and timeStyle.
• link: Renders cell values as clickable hyperlinks. Set urlKey to point at a separate row field for the URL when the display text and the URL destination differ. Otherwise, the cell value serves as both.
• number: Formats numeric values with locale-aware decimal, percent, or currency formatting, and sorts numerically rather than lexicographically. Currency accepts currencyCode and currencyDisplayAs. Set fraction digits with minimumFractionDigits and maximumFractionDigits.
• picklist: Resolves stored row values to human-readable labels from a defined set of options, each a { label, value } pair. A value with no matching option falls back to the raw value.

Use these appearance values to control the table’s border and row treatment.

• default (default): Standard presentation with minimal horizontal row dividers, for most tables.
• bordered: Emphasized borders on all cell edges. Use bordered for dense data where clear cell boundaries aid readability.
• striped: Alternating row background colors. Use striped for wide tables where the shading helps readers track across a row.

Use these size values to control the cell density.

• sm: Compact cell padding for space-constrained contexts such as chat, or for dense data that fits more rows at once.
• md (default): Standard, comfortable cell padding for most tables.

Consider these guidelines when working with tables.

• Always write a caption that names what the table contains, such as “Open support tickets,” which identifies its purpose.
• Match each column key to a field present in every row. A key with no matching field renders as an empty cell.
• Right-align numeric columns with align: "right" so decimal points line up, and reserve center for short categorical values.
• Use pagination and isStickyHeader on long data sets, so the table stays scannable rather than overwhelming the surface.

Note any limitations that apply to this component.

No known limitations for tile/table in Slackbot.

No known limitations for tile/table in ChatGPT.

Per-column isSortable and isFilterable properties require imperative handlers. pagination is handled via manual data slicing rather than a built-in control.

• HXL Lightning Types Reference
• HXL Playground: Table