Data table

Basic example

Empty example

Custom rendering

Sortable

Apply the sortable prop to a column to indicate that the user should be able to change the sort order of the rows based on that column's data. To set the initial state of the table to be sorted by a particular column, use the sortField and sortOrder props of the data table.

Limited height with sticky header

For long tables, it's possible to show a limited number of rows by setting a fixed height. The user can then scroll within the table to see the remaining rows.

It's best to use this sparingly, since this causes a situation of double scrolling and can make it difficult for users on touch devices to scroll past the table without scrolling to the end of the table. If it must be used, try to set the fixed height such that a partial row is visible, to indicate to the user there is more content that can be scrolled into view.

Freeze one column

This example shows how to use the frozen prop on a column to ensure it stays visible while scrolling the table contents horizontally. This feature is especially useful on mobile when the first column contains primary information that is important to reference when reading the contents of the subsequent columns.

EsDataTable props

For additional EsDataTable props beyond the ones listed below, please reference the PrimeVue DataTable props. Note that styling for features of the data table not demonstrated above may not be supported.

EsDataTableColumn props

For the props available to pass into EsDataTableColumn, please reference the PrimeVue Column props.