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.

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

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

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

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.