Codey

Appearance

Data Table ​

INFO

This component is adopted from PrimeVue. It's full documentation can be found here.

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