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.

Let's add pagination to the datatable, with a refresh button that takes users back to the start of the results, and a next button that 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.