> 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/core-components/datatable.md).
# Data Table
`avonni-datatable`
Displays tabular data where each column renders the value based on the data type. The data is provided statically through the `records` and `columns` properties.
## Overview
**Data Table** is a Lightning Web Component that displays tabular data, rendering each column according to its data type. You supply the data statically through the `columns` and `records` properties — each column defines a `label`, a `fieldName`, and a `type` (defaulting to `text`).
Use it in your own Lightning Web Components when you have an in-memory set of rows to present as a grid. You control column definitions and widths, row selection, sorting, row numbers, inline-edit draft values, and infinite loading.
### Use Cases
* **Static record grids:** Present a fixed set of rows loaded from Apex or a wire.
* **Editable tables:** Capture inline edits through draft values before saving.
* **Selectable lists:** Let users pick one or many rows with the checkbox column.
* **Sortable data:** Expose column sorting for quick reordering.
* **Long lists:** Page in more rows with infinite loading as the user scrolls.
***
## Use Case Examples
### Example 1: Static table with typed columns
**Scenario:** Display a set of opportunities with typed columns and row numbers.
```html
```
```js
// opportunityTable.js
import { LightningElement } from 'lwc';
export default class OpportunityTable extends LightningElement {
columns = [
{ label: 'Name', fieldName: 'name', type: 'text' },
{ label: 'Amount', fieldName: 'amount', type: 'currency' },
{ label: 'Close Date', fieldName: 'closeDate', type: 'date' }
];
records = [
{ id: '1', name: 'Acme', amount: 25000, closeDate: '2026-03-01' },
{ id: '2', name: 'Global Media', amount: 42000, closeDate: '2026-04-15' }
];
}
```
**Result:** A grid of opportunities with a row-number column and no selection checkboxes.
### Example 2: Selectable, sortable table
**Scenario:** Let users select rows and sort by a column.
```html
```
**Result:** A table sorted by name, limiting selection to five rows.
## Specifications
### Attributes
| Name | Description | Type | Default | Required |
| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ---------- | -------- |
| `column-widths-mode` | Specifies how column widths are calculated. 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. The default is 'fixed'. | String | `"fixed"` | |
| `columns` | Array of the columns object that's used to define the data types. Required properties include 'label', 'fieldName', and 'type'. The default type is 'text'. See the Documentation tab for more information. | DatatableColumn\[] | — | |
| `default-sort-direction` | Specifies the default sorting direction on an unsorted column. Valid options include 'asc' and 'desc'. The default is 'asc' for sorting in ascending order. | String | `"asc"` | |
| `draft-values` | The current values per row that are provided during inline edit. | Object | — | |
| `enable-infinite-loading` | If present, you can load a subset of data and then display more when users scroll to the end of the table. Use with the onloadmore event handler to retrieve more data. | 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 | — | |
| `hide-checkbox-column` | If present, the checkbox column for row selection is hidden. | Boolean | `false` | |
| `hide-table-header` | If present, the table header is hidden. | Boolean | `false` | |
| `is-loading` | If present, a spinner is shown to indicate that more data is loading. | Boolean | `false` | |
| `key-field` | Required for better performance. Associates each row with a unique ID. | String | — | Yes |
| `load-more-offset` | Determines when to trigger infinite loading based on how many pixels the table's scroll position is from the bottom of the table. | Number | `20` | |
| `max-column-width` | The maximum width for all columns. | Number | `"1000px"` | |
| `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. | Number | — | |
| `min-column-width` | The minimum width for all columns. | Number | `"50px"` | |
| `records` | The array of data to be displayed. The objects keys depend on the columns fieldNames. | Array | — | |
| `render-config` | Reserved for internal use. Enables and configures advanced rendering modes. | RenderManagerConfig | — | |
| `render-mode` | Render mode of the table. The `role-based` option rendersand is reserved for internal use. Other valid options are 'default' and 'inline'. 'default' renders the traditional DOM structure. 'inline' renders a simplified DOM structure that improves performance but may break some custom styling. | String | — | |
| `resize-column-disabled` | If present, column resizing is disabled. | Boolean | `false` | |
| `resize-step` | The width to resize the column when a user presses left or right arrow. | Number | `"10px"` | |
| `row-number-offset` | Determines where to start counting the row number. | Number | `0` | |
| `selected-rows` | Enables programmatic row selection with a list of key-field values. | string\[] | — | |
| `show-row-number-column` | If present, the row numbers are shown in the first column. | Boolean | `false` | |
| `sorted-by` | The column key or fieldName that controls the sorting order. Sort the data using the onsort event handler. | String | — | |
| `sorted-direction` | Specifies the sorting direction. Sort the data using the onsort event handler. Valid options include 'asc' and 'desc'. | String | — | |
| `suppress-bottom-bar` | If present, the footer that displays the Save and Cancel buttons is hidden during inline editing. | Boolean | `false` | |
| `wrap-table-header` | If present, the table header is wrapped. | 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 | — | |
### Methods
| Name | Description | Argument Name | Argument Type | Argument Description |
| ---------------------- | ------------------------------------------------------ | ---------------- | ------------- | ---------------------------------------- |
| `focusRow` | Set the focus on the first cell of a given row. | `rowKeyField` | String | The key field value of the row to focus. |
| `getRowHeight` | Gets a row height. | `rowKeyField` | String | The key field value of the row. |
| `resizeColumn` | Calls the resize column method of lightning-datatable. | `event` | event | |
| `scrollToTop` | Scroll the inner table to the top. | | | |
| `setRowHeight` | Sets the height of a row. | `rowKeyField` | String | The key field value of the row. |
| | | `height` | Number | The new height of the row, in pixels. |
| `updateCheckboxColumn` | Updates the checkbox column state. | `disabled` | Boolean | If true, columns are to be disabled. |
| | | `nbSelectedRows` | Number | The number of selected rows. |
---
# 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/core-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.