Display Data Using Base Components

A common way to display data is to use datatables. LWC provides the lightning-datatable base component for displaying large amounts of data. lightning-datatable supports a wide range of column types that are ideal for displaying record data, such as currency, date, email, and even a dropdown menu for row-level actions. You can also load more data by implementing pagination or infinite scrolling on the datatable.

To display your records using lightning-datatable, set key-field="Id" and specify the data and column properties.

In your JavaScript, create your columns and define your data using key-value pairs when it’s returned by the GraphQL wire adapter.

Add pagination to the datatable with a refresh button and a next button. The refresh button takes users back to the start of the results. The next button becomes disabled when the end of the results is reached.

Building on the previous lightning-datatable example, query the pageInfo object for cursor and pagination information.