> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/lwc-components/data-driven-components/datatable.md).
# Data Table
`avonni-dd-datatable`
The Avonni Data Driven Data Table displays records in a data table format.
## Overview
**Data Table** is a data-driven Lightning Web Component that displays records in a table, with support for sorting, inline editing, row selection, row actions, search, filters, and pagination.
The component runs in two modes. In **query mode** you set a `query` and the component fetches the matching records and formats each cell using the `columns` definitions. In **static mode** you provide rows directly through the `items` property; the component ignores `query` and renders the rows as-is, still using `columns` to format each cell. In both modes the `columns` array defines what is shown and how it behaves.
### Use Cases
* **Record browsers:** Show a paginated, sortable list of any Salesforce object with searchable and filterable columns.
* **Inline editing grids:** Let users edit field values directly in the table and capture draft values on save.
* **Selection lists:** Allow users to select one or more rows (checkbox or radio) to drive a downstream action.
* **Row-action menus:** Surface per-row actions (view, delete, etc.) for quick operations on each record.
* **Static data displays:** Render in-memory or computed rows (no SOQL) while keeping the same formatting, sorting, and pagination features.
***
## Use Case Examples
### Example 1: Query mode
**Scenario:** Display a searchable, sortable, paginated table of Account records with inline editing on selected columns.
```html
```
```js
// accountTable.js
import { LightningElement } from 'lwc';
export default class AccountTable extends LightningElement {
accountQuery = {
objectApiName: 'Account',
orderBy: 'Name ASC',
limit: 50
};
accountColumns = [
{ columnType: 'objectField', fieldName: 'Name', type: 'text', editable: true, searchable: true, sortable: true },
{ columnType: 'objectField', fieldName: 'Industry', type: 'text', filterable: true, sortable: true },
{ columnType: 'objectField', fieldName: 'AnnualRevenue', type: 'currency', editable: true, sortable: true }
];
accountSearchFields = ['Name'];
accountFilters = ['Industry', 'BillingState'];
handleRowAction(event) {
const { name, item, itemSObject } = event.detail; // itemSObject holds the record
}
handleSave(event) {
const drafts = event.detail.draftValues; // persist these
}
handleSelectRows(event) {
const selected = event.detail.selectedRowsKeyValue;
}
handleSort(event) {
const { sortedBy, sortedDirection } = event.detail;
}
}
```
**Result:** A paginated table of Accounts. Users can search by Name, filter by Industry, sort, edit Name and AnnualRevenue inline, and select rows.
### Example 2: Static mode
**Scenario:** Render an in-memory list of destinations (no SOQL) with a rating column, inline-editable price, and per-row actions.
```html
```
```js
// destinationTable.js
import { LightningElement } from 'lwc';
export default class DestinationTable extends LightningElement {
items = [
{ id: 'mountain-lake', name: 'Mountain Lake', category: 'Nature', rating: 5, price: 1200 },
{ id: 'forest-trail', name: 'Forest Trail', category: 'Hiking', rating: 4, price: 450 }
];
columns = [
{ columnType: 'objectField', fieldName: 'name', label: 'Destination', type: 'text', editable: true, sortable: true },
{ columnType: 'objectField', fieldName: 'category', label: 'Category', type: 'text', sortable: true },
{ columnType: 'objectField', fieldName: 'rating', label: 'Rating', type: 'rating', typeAttributes: { rating: { max: 5 } } },
{ columnType: 'objectField', fieldName: 'price', label: 'Price', type: 'currency', editable: true, sortable: true },
{
columnType: 'custom',
customFieldName: 'actions',
type: 'action',
typeAttributes: { action: { rowActions: [{ label: 'View', name: 'view' }, { label: 'Delete', name: 'delete' }] } }
}
];
handleRowAction(event) {
// In static mode itemSObject is null; the row data is in event.detail.item
const { name, item } = event.detail;
}
handleSave(event) {
const drafts = event.detail.draftValues;
}
}
```
**Result:** A four-per-page table of destinations with a star rating, editable price, and a View/Delete action menu on each row. The `id` property is the row key, and `rowaction` returns the row in `item` (with `itemSObject` as `null`).
***
## Specifications
### Attributes
| Name | Description | Type | Default | Required |
| ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- | --------- | -------- |
| `allow-row-click` | If true, table rows are displayed as clickable, and a click on a row fires the `rowselection` event. | Boolean | `false` | |
| `always-display-bottom-bar` | If true, the footer that displays the Save and Cancel buttons is always displayed during inline editing. | Boolean | `false` | |
| `column-widths-mode` | Specifies how column widths are calculated. Valid values are `fixed` and `auto`. Set to `fixed` for columns with equal widths. Set to `auto` for column widths that are based on the width of the column content and the table width. | String | `"fixed"` | |
| `columns` | Array of column objects that define the table columns. | DdDatatableElementColumn\[] | — | |
| `default-search-value` | Default search value for the search input. | String | — | |
| `default-sort-direction` | Default sort direction for the table. Valid values are `asc` for ascending order and `desc` for descending order. | String | — | |
| `draft-values` | Array of record objects containing draft values for inline editing. Each object represents a record with edited field values, where the keys are field API names and the values are the new draft values for those fields. The `Id` field is required. | object\[] | — | |
| `enable-table-header-wrap` | If true, the column headers are wrapped up to 3 lines. By default, column headers display in a single line and content is clipped if it's too wide for the column width. | Boolean | `false` | |
| `errors` | Specifies an object containing information about cell level, row level, and table level errors. When it's set, error messages are displayed on the table accordingly. | Object | — | |
| `export-to-fields` | Array of additional field API names to export when exporting data from the table. These fields will be added to the query fields. | string\[] | — | |
| `filters` | Array of field API names that belong to the queried object. These fields will be displayed as user filters. | string\[] | — | |
| `filters-attributes` | Object defining the filters-specific attributes. | DdElementFiltersAttributes | — | |
| `header-actions` | Array of actions to display at the top right of the header. On click on a header action, the `headeractionclick` event is fired. | DdElementAction\[] | — | |
| `header-avatar` | Avatar displayed at the top left of the header. | DdElementAvatar | — | |
| `header-caption` | Header caption, displayed above the title. | String | — | |
| `header-help-text` | If present, a help text icon is displayed next to the header title. On focus or hover on the icon, the header help text is displayed in a tooltip. | String | — | |
| `header-help-text-attributes` | Object defining the help text-specific attributes. | DdElementHelpTextAttributes | — | |
| `header-show-items-selected-count` | If true, displays the number of selected items in the header. | Boolean | `false` | |
| `header-show-sort` | If true, the sort field and direction are displayed in the header. The sort is based on the value of the `orderBy` query parameter. | Boolean | `false` | |
| `header-title` | Main title displayed in the header. | String | — | |
| `header-visible-actions-count` | Number of header actions that appear as regular buttons. Remaining actions appear in a dropdown menu. | integer | — | |
| `hide-checkbox-column` | If true, the checkbox column for row selection is hidden. | Boolean | `false` | |
| `hide-no-results-image` | If true, the image displayed when the query returns no results is hidden. | Boolean | `false` | |
| `hide-no-results-message` | If true, the message displayed when the query returns no results is hidden. | Boolean | `false` | |
| `hide-table-header` | If true, the table header is hidden. | Boolean | `false` | |
| `items` | Array of static row objects displayed in the table. When this property is set, the table ignores the `query` property and displays the rows directly, using the `columns` definitions to format each cell. Each row is an object whose keys match the column `fieldName` values. | object\[] | — | |
| `items-per-page` | If the pagination is enabled, number of items per page. Otherwise, number of items loaded at once. | integer | `100` | |
| `key-field` | Required for better performance. API name of the field used as unique row identifier. | String | `"Id"` | |
| `max-column-width` | The maximum width for all columns. | Number | `1000` | |
| `max-row-selection` | The maximum number of rows that can be selected. Checkboxes are used for selection by default, and radio buttons are used when maxRowSelection is 1. | integer | — | |
| `min-column-width` | The minimum width for all columns. | Number | `50` | |
| `no-results-message` | The message displayed when there are no results. | String | — | |
| `pagination-attributes` | Object defining the pagination-specific attributes. | DdElementPaginationAttributes | — | |
| `pill-container-attributes` | Object defining the pill container-specific attributes. | DdDatatableElementPillContainerAttributes | — | |
| `query` | Definition of the query to execute to get the records that will be displayed in the data table. | DdElementQuery | — | |
| `read-only` | If true, the table is read-only. | Boolean | `false` | |
| `refresh-emp` | Object describing a platform event that should be subscribed to in order to refresh the component when an event is published. | DdElementRefreshEmp | — | |
| `required` | If true, at least one row must be selected for the form to be valid when the `hide-checkbox-column` attribute is `false`. | Boolean | `false` | |
| `resize-column-disabled` | If true, column resizing is disabled. | Boolean | `false` | |
| `resize-step` | The width in pixels to resize the column when a user presses left or right arrow. | Number | — | |
| `row-number-offset` | Determines where to start counting the row number. | integer | — | |
| `search-attributes` | Object defining the search-specific attributes. | DdElementSearchAttributes | — | |
| `search-fields` | Array of field API names that can be used by the search box to filter the records. The fields must belong to the queried object, and they must be filterable. | string\[] | — | |
| `selected-rows-key-value` | Array of selected rows key field values. These represent the unique key names of rows that are currently selected in the data table. Updated automatically when rows are selected or unselected. | string\[] | — | |
| `show-pagination` | If true, a pagination is displayed at the bottom of the data table. If false and the data table has a height limit, the items will be loaded dynamically as the user scrolls. If false and the data table does not have a height limit, a "show more" button will be displayed at the bottom of the data table. | Boolean | `false` | |
| `show-pill-items-selected-count` | If true, displays the number of selected item in the pill container. | Boolean | `false` | |
| `show-row-number-column` | If true, the row numbers are shown in the first column. | Boolean | `false` | |
| `side-panel-attributes` | Object defining the side panel-specific attributes. | DdElementSidePanelAttributes | — | |
| `suppress-bottom-bar` | If true, the footer that displays the Save and Cancel buttons is hidden during inline editing. | Boolean | `false` | |
| `wrap-text-max-lines` | This value specifies the number of lines after which the content will be cut off and hidden. It must be at least 1 or more. The text in the last line is truncated and shown with an ellipsis. | integer | — | |
### Column Definition
Each entry in `columns` is an object describing one column. The most useful keys:
| Key | Type | Description |
| ----------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `columnType` | String | Column source. Use `objectField` to bind to a record field, or `custom` for a custom column. |
| `fieldName` | String | API name of the field this column displays (for `objectField` columns). Matches `items` keys in static mode. |
| `customFieldName` | String | Key for a `custom` column (for example, an action column). |
| `label` | String | Column header label. Defaults to the field label when omitted. |
| `type` | String | Cell data type: `text`, `currency`, `email`, `rating`, `action`, etc. |
| `typeAttributes` | Object | Type-specific options, e.g. `{ rating: { max: 5 } }` or an `action` column's `rowActions`. |
| `editable` | Boolean | Allows inline editing of the cell. |
| `sortable` | Boolean | Allows sorting by the column. |
| `searchable` | Boolean | Includes the field in the search behavior. |
| `filterable` | Boolean | Exposes the column as a user filter. |
### Methods
| Name | Description | Argument Name | Argument Type | Argument Description |
| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ------------- | ----------------------------------------------------------------- |
| `refresh` | Refresh the query and the records displayed in the component. | `stayOnCurrentPage` | Boolean | If true, the component will refresh but stay on the current page. |
| `validate` | Validates the input of the data table. If the `required` attribute is set to true and no rows are selected (when the checkbox column is visible), the method returns `isValid` as `false` along with an appropriate error message. Otherwise, it returns `isValid` as `true`. | | | |
### Custom Events
#### `cancel`
The event fired when the Cancel button is clicked during inline editing.
The `cancel` event doesn't return any parameters.
| Property | Value | Description |
| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
| bubbles | false | This event does not bubble. |
| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
| composed | false | This event does not propagate outside of the component in which it was dispatched. |
#### `error`
The event fired when an error occurs in the component.
The `error` event returns the following parameters.
| Parameter | Type | Description |
| --------- | ------ | --------------------- |
| `message` | string | Message of the error. |
The event properties are as follows.
| Property | Value | Description |
| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
| bubbles | false | This event does not bubble. |
| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
| composed | false | This event does not propagate outside of the component in which it was dispatched. |
#### `filter`
The event fired when the user filters the records.
The `filter` event returns the following parameters.
| Parameter | Type | Description |
| --------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `value` | object | Object containing the filters applied by the user. Its keys correspond to the field API names of the selected filters. The values are arrays of strings, corresponding to the values selected for the filter. |
The event properties are as follows.
| Property | Value | Description |
| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
| bubbles | false | This event does not bubble. |
| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
| composed | false | This event does not propagate outside of the component in which it was dispatched. |
#### `headeractionclick`
The event fired when a header action is clicked.
The `headeractionclick` event returns the following parameters.
| Parameter | Type | Description |
| --------- | ------ | --------------------------- |
| `name` | string | Name of the action clicked. |
The event properties are as follows.
| Property | Value | Description |
| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
| bubbles | false | This event does not bubble. |
| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
| composed | false | This event does not propagate outside of the component in which it was dispatched. |
#### `nbitemschange`
The event fired when the number of items displayed in the component changes.
The `nbitemschange` event returns the following parameters.
| Parameter | Type | Description |
| --------- | ------- | ------------------------------------------- |
| `value` | integer | Number of items displayed in the component. |
The event properties are as follows.
| Property | Value | Description |
| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
| bubbles | false | This event does not bubble. |
| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
| composed | false | This event does not propagate outside of the component in which it was dispatched. |
#### `pagechange`
The event fired when the page changes.
The `pagechange` event returns the following parameters.
| Parameter | Type | Description |
| --------- | ------- | ---------------- |
| `value` | integer | New page number. |
The event properties are as follows.
| Property | Value | Description |
| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
| bubbles | false | This event does not bubble. |
| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
| composed | false | This event does not propagate outside of the component in which it was dispatched. |
#### `rowaction`
Event fired when a row action is clicked.
The `rowaction` event returns the following parameters.
| Parameter | Type | Description |
| ------------- | ------ | ------------------------------------------------------------------------------------------------------------------ |
| `name` | string | Name of the action clicked. |
| `item` | object | Row the action belongs to, with its formatted column values. |
| `itemSObject` | object | Record corresponding to the row the action belongs to. In static mode, no record is associated and this is `null`. |
The event properties are as follows.
| Property | Value | Description |
| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
| bubbles | false | This event does not bubble. |
| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
| composed | false | This event does not propagate outside of the component in which it was dispatched. |
#### `save`
The event fired when the Save button is clicked during inline editing.
The `save` event returns the following parameters.
| Parameter | Type | Description |
| ------------- | --------- | --------------------------------------------- |
| `draftValues` | object\[] | Array of objects containing the draft values. |
| `newValues` | object\[] | Array of objects containing the new values. |
The event properties are as follows.
| Property | Value | Description |
| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
| bubbles | false | This event does not bubble. |
| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
| composed | false | This event does not propagate outside of the component in which it was dispatched. |
#### `selectrows`
Event fired when the item selection is updated. If items are checked by default, this event will be fired when the query is first executed. It is also fired when items are checked or unchecked by the user.
The `selectrows` event returns the following parameters.
| Parameter | Type | Description |
| ---------------------- | --------- | ---------------------------------------------------------------------- |
| `selectedRowsKeyValue` | string\[] | Array of row field key values, corresponding to the current selection. |
The event properties are as follows.
| Property | Value | Description |
| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
| bubbles | false | This event does not bubble. |
| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
| composed | false | This event does not propagate outside of the component in which it was dispatched. |
#### `sort`
Event fired when user changes the data table sorting.
The `sort` event returns the following parameters.
| Parameter | Type | Description |
| ----------------- | ------ | ------------------------------------------------------ |
| `sortedBy` | string | The API name of the field used for sorting. |
| `sortedDirection` | string | The sort direction. Valid values are `asc` and `desc`. |
The event properties are as follows.
| Property | Value | Description |
| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
| bubbles | false | This event does not bubble. |
| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
| composed | false | This event does not propagate outside of the component in which it was dispatched. |
### Styling Hooks
| CSS Variable | Type | Default |
| ------------------------------------------------------------------------ | --------- | ---------------- |
| `--avonni-dd-datatable-cell-spacing` | string | `0.25rem 0.5rem` |
| `--avonni-dd-datatable-footer-color-background` | color | `#f3f3f3` |
| `--avonni-dd-datatable-footer-color-border` | color | `#c9c9c9` |
| `--avonni-dd-datatable-footer-radius-border` | string | — |
| `--avonni-dd-datatable-footer-sizing-border` | string | — |
| `--avonni-dd-datatable-footer-styling-border` | string | `solid` |
| `--avonni-dd-datatable-header-actions-color-background` | color | — |
| `--avonni-dd-datatable-header-actions-color-background-active` | color | — |
| `--avonni-dd-datatable-header-actions-color-background-hover` | color | — |
| `--avonni-dd-datatable-header-actions-color-border` | color | — |
| `--avonni-dd-datatable-header-actions-color-border-active` | color | — |
| `--avonni-dd-datatable-header-actions-color-border-hover` | color | — |
| `--avonni-dd-datatable-header-actions-text-color` | color | — |
| `--avonni-dd-datatable-header-actions-text-color-active` | color | — |
| `--avonni-dd-datatable-header-actions-text-color-hover` | color | — |
| `--avonni-dd-datatable-header-caption-font-family` | string | — |
| `--avonni-dd-datatable-header-caption-font-size` | dimension | — |
| `--avonni-dd-datatable-header-caption-font-style` | string | `normal` |
| `--avonni-dd-datatable-header-caption-font-weight` | number | `400` |
| `--avonni-dd-datatable-header-caption-letter-spacing` | string | — |
| `--avonni-dd-datatable-header-caption-line-height` | string | — |
| `--avonni-dd-datatable-header-caption-text-color` | color | `#000000` |
| `--avonni-dd-datatable-header-color-background` | color | — |
| `--avonni-dd-datatable-header-color-border` | color | — |
| `--avonni-dd-datatable-header-color-border-bottom` | color | `#c9c9c9` |
| `--avonni-dd-datatable-header-icon-color-background` | color | — |
| `--avonni-dd-datatable-header-icon-color-foreground` | color | — |
| `--avonni-dd-datatable-header-icon-color-foreground-default` | color | — |
| `--avonni-dd-datatable-header-icon-radius-border` | string | — |
| `--avonni-dd-datatable-header-margin-block-end` | dimension | — |
| `--avonni-dd-datatable-header-radius-border` | string | — |
| `--avonni-dd-datatable-header-sizing-border` | string | — |
| `--avonni-dd-datatable-header-sizing-border-bottom` | dimension | `1px` |
| `--avonni-dd-datatable-header-spacing-block-end` | dimension | `0.75rem` |
| `--avonni-dd-datatable-header-spacing-block-start` | dimension | `0.75rem` |
| `--avonni-dd-datatable-header-spacing-inline-end` | dimension | `1rem` |
| `--avonni-dd-datatable-header-spacing-inline-start` | dimension | `1rem` |
| `--avonni-dd-datatable-header-styling-border` | string | — |
| `--avonni-dd-datatable-header-styling-border-bottom` | string | `solid` |
| `--avonni-dd-datatable-header-title-font-family` | string | — |
| `--avonni-dd-datatable-header-title-font-size` | dimension | `1rem` |
| `--avonni-dd-datatable-header-title-font-style` | string | `normal` |
| `--avonni-dd-datatable-header-title-font-weight` | number | `400` |
| `--avonni-dd-datatable-header-title-letter-spacing` | string | — |
| `--avonni-dd-datatable-header-title-line-height` | number | `1.25` |
| `--avonni-dd-datatable-header-title-text-color` | color | `#080707` |
| `--avonni-dd-datatable-pagination-active-button-color-background` | color | `#0176d3` |
| `--avonni-dd-datatable-pagination-active-button-color-background-active` | color | `#014486` |
| `--avonni-dd-datatable-pagination-active-button-color-background-hover` | color | `#014486` |
| `--avonni-dd-datatable-pagination-active-button-color-border` | color | `#0176d3` |
| `--avonni-dd-datatable-pagination-active-button-color-border-active` | color | `#014486` |
| `--avonni-dd-datatable-pagination-active-button-color-border-hover` | color | `#014486` |
| `--avonni-dd-datatable-pagination-active-button-text-color` | color | `#fff` |
| `--avonni-dd-datatable-pagination-active-button-text-color-active` | color | `#fff` |
| `--avonni-dd-datatable-pagination-active-button-text-color-hover` | color | `#fff` |
| `--avonni-dd-datatable-pagination-button-color-background` | color | `#fff` |
| `--avonni-dd-datatable-pagination-button-color-background-active` | color | `#f3f3f3` |
| `--avonni-dd-datatable-pagination-button-color-background-disabled` | color | `#fff` |
| `--avonni-dd-datatable-pagination-button-color-background-hover` | color | `#f3f3f3` |
| `--avonni-dd-datatable-pagination-button-color-border` | color | `#747474` |
| `--avonni-dd-datatable-pagination-button-color-border-active` | color | `#747474` |
| `--avonni-dd-datatable-pagination-button-color-border-disabled` | color | `#747474` |
| `--avonni-dd-datatable-pagination-button-color-border-hover` | color | `#747474` |
| `--avonni-dd-datatable-pagination-button-sizing-border` | dimension | `1px` |
| `--avonni-dd-datatable-pagination-button-styling-border` | string | `solid` |
| `--avonni-dd-datatable-pagination-button-text-color` | color | `#0176d3` |
| `--avonni-dd-datatable-pagination-button-text-color-active` | color | `#014486` |
| `--avonni-dd-datatable-pagination-button-text-color-disabled` | color | `#c9c9c9` |
| `--avonni-dd-datatable-pagination-button-text-color-hover` | color | `#014486` |
| `--avonni-dd-datatable-show-more-button-color-background` | color | — |
| `--avonni-dd-datatable-show-more-button-color-background-active` | color | — |
| `--avonni-dd-datatable-show-more-button-color-background-hover` | color | — |
| `--avonni-dd-datatable-show-more-button-color-border` | color | — |
| `--avonni-dd-datatable-show-more-button-color-border-active` | color | — |
| `--avonni-dd-datatable-show-more-button-color-border-hover` | color | — |
| `--avonni-dd-datatable-show-more-button-radius-border` | string | — |
| `--avonni-dd-datatable-show-more-button-sizing-border` | string | — |
| `--avonni-dd-datatable-show-more-button-spacing-block-end` | dimension | — |
| `--avonni-dd-datatable-show-more-button-spacing-block-start` | dimension | — |
| `--avonni-dd-datatable-show-more-button-spacing-inline-end` | dimension | — |
| `--avonni-dd-datatable-show-more-button-spacing-inline-start` | dimension | — |
| `--avonni-dd-datatable-show-more-button-text-color` | color | — |
| `--avonni-dd-datatable-show-more-button-text-color-active` | color | — |
| `--avonni-dd-datatable-show-more-button-text-color-hover` | color | — |
| `--avonni-dd-datatable-table-header-color-background` | color | `transparent` |
| `--avonni-dd-datatable-table-radius-border` | string | — |
## Key Considerations
* **Mode is set by `items`:** Setting `items` switches the table to static mode and `query` is ignored; clear `items` to return to query mode.
* **`itemSObject` in static mode:** Row-action events carry the row in `item`, but `itemSObject` is always `null` because there is no backing record.
* **`key-field` matters:** It must be unique across rows; it defaults to `Id` and drives selection and efficient re-rendering.
* **Inline editing:** Mark columns `editable` and handle the `save` event to persist `draftValues`; use `read-only` to disable editing entirely.
* **`mapping` is unused here:** Unlike other data-driven components, the data table uses `columns` to define structure, not `mapping`.
* **Best Practice:** Always set `key-field` to a unique identifier (defaults to `Id`) for performant rendering and reliable row selection, and define every column you want to display in the `columns` array.
***
## Troubleshooting Common Issues
* **Cells render blank:** Confirm each column's `fieldName` matches a queried field (query mode) or a key in your `items` objects (static mode).
* **Query mode shows nothing:** Verify `query.objectApiName` is valid and that `items` is not set (any non-null `items` value forces static mode).
* **Selection or sorting behaves oddly:** Ensure `key-field` points to a unique identifier and that the columns you sort by are marked `sortable`.
* **If issues persist:** Contact our support team at for assistance.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.avonnicomponents.com/lwc-components/data-driven-components/datatable.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.