Data Table

INFO

This component is adopted from PrimeVue. Its full documentation can be found here.

import {
  XerDataTable,
  XerColumn,
  XerColumnGroup, // Optional
  XerRow, // Optional
  // Style variants
  xerDataTableDataViewPT, // For static data visualization
  xerDataTableDefaultPT, // For interactive table use
} from "@xerius/codey-components";

Notice

The XerDataTable and all the capabilities provided by PrimeVue are available but might require additional styling/design changes from our side. At this point the provided examples are covered in the styling setup. If you use additional features, please let us know.

Showcases

Default Data Table

This represents the layout for data visualization. It's a static table with no interactions. Note that the :pt prop is passed with xerDataTableDataViewPT to apply the correct styling.

With Filter, Sorting, Paginator

This represents the layout for an interactive table. It includes filtering, sorting, and pagination. Note that the :pt prop is passed with xerDataTableDefaultPT to apply the correct styling.

With Custom Data Template

This represents the layout for an interactive table with a custom data template. Note that the :pt prop is passed with xerDataTableDefaultPT to apply the correct styling.