> 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. Set `max-edit-limit` to cap how many rows a user can hold in edit or selection at once: once the combined count of edited and selected rows reaches the limit, the remaining rows stop accepting edits and selection, while the rows already edited or selected stay interactive.

### 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.

***

{% hint style="info" %}
**See it in a real project**

[Expense approvals, grouped by employee](https://docs.avonnicomponents.com/projects/use-cases/reporting/expense-approvals-grouped-by-employee): Expense approvals grouped by employee, approved in bulk.
{% endhint %}

## Use Case Examples

### Example 1: Static table with typed columns

**Scenario:** Display a set of opportunities with typed columns and row numbers.

```html
<!-- opportunityTable.html -->
<template>
    <avonni-datatable
        key-field="id"
        columns={columns}
        records={records}
        show-row-number-column
        hide-checkbox-column
    ></avonni-datatable>
</template>
```

```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.

<figure><img src="https://2403786217-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPjQbBtFNxVSSOtnsjuwx%2Fuploads%2FtWS90t50F0icPIIWL54M%2Fdatatable-example-typed-columns.png?alt=media" alt="An Avonni Data Table with Name, Amount and Close Date columns, a row-number column, and no selection checkboxes"><figcaption><p>Example 1 as written: two opportunities, numbered rows, and no checkbox column.</p></figcaption></figure>

### Example 2: Selectable, sortable table

**Scenario:** Let users select rows and sort by a column.

```html
<!-- accountGrid.html -->
<template>
    <avonni-datatable
        key-field="id"
        columns={columns}
        records={records}
        max-row-selection="5"
        sorted-by={sortedBy}
        sorted-direction={sortedDirection}
        default-sort-direction="asc"
        onsort={handleSort}
    ></avonni-datatable>
</template>
```

```js
// accountGrid.js
import { LightningElement } from 'lwc';

export default class AccountGrid extends LightningElement {
    columns = [
        { label: 'Account Name', fieldName: 'name', type: 'text', sortable: true },
        { label: 'Industry', fieldName: 'industry', type: 'text' },
        { label: 'Annual Revenue', fieldName: 'annualRevenue', type: 'currency', sortable: true }
    ];
    records = [
        { id: '1', name: 'Acme', industry: 'Manufacturing', annualRevenue: 12500000 },
        { id: '2', name: 'Blue Harbor Logistics', industry: 'Transportation', annualRevenue: 8400000 },
        { id: '3', name: 'Cedar Health', industry: 'Healthcare', annualRevenue: 21000000 },
        { id: '4', name: 'Global Media', industry: 'Media', annualRevenue: 5600000 },
        { id: '5', name: 'Northwind Traders', industry: 'Retail', annualRevenue: 3200000 }
    ];
    sortedBy = 'name';
    sortedDirection = 'asc';

    // The table only shows the sort arrow: reordering the rows is up to you.
    handleSort(event) {
        const { fieldName, sortDirection } = event.detail;
        const factor = sortDirection === 'asc' ? 1 : -1;
        this.records = [...this.records].sort((a, b) =>
            a[fieldName] > b[fieldName] ? factor : a[fieldName] < b[fieldName] ? -factor : 0
        );
        this.sortedBy = fieldName;
        this.sortedDirection = sortDirection;
    }
}
```

**Result:** Rows load already sorted by account name, with the sort arrow on that column. Clicking a sortable header calls `handleSort`, which reorders the rows. Users can select up to five rows.

<figure><img src="https://2403786217-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPjQbBtFNxVSSOtnsjuwx%2Fuploads%2FZjr3L1eYFfiygowsppBy%2Fdatatable-example-selectable-sortable.png?alt=media" alt="An Avonni Data Table of five accounts sorted by Account Name, with two rows selected"><figcaption><p>Example 2: the arrow beside Account Name shows the active sort, and two of the five rows are selected.</p></figcaption></figure>

## 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'.                                                                                                                                          | 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-edit-limit`          | Maximum number of records that can be edited or selected at once.                                                                                                                                                                                                                                    | Number              | —          |          |
| `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.          |
| `getSelectedRows`      | Returns data in each selected row.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |                  |               |                                          |
| `openInlineEdit`       | Opens the inline edit panel for the datatable's currently active cell. If the active cell is not editable, then the panel is instead opened for the first editable cell in the table. Given two distinct cells, C\_x and C\_y, C\_x is considered "first" in the cell ordering if the following condition evaluates to true: (C\_x.rowIndex < C\_y.rowIndex) \|\| (C\_x.rowIndex === C\_y.rowIndex && C\_x.columnIndex < C\_y.columnIndex) If there is no data in the table or there are no editable cells in the table then calling this function results in a no-op. |                  |               |                                          |
| `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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.avonnicomponents.com/lwc-components/core-components/datatable.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.