Vuetify, v-data-table headers value purpose

Question

What is the purpose of the value property in headers array of objects for v-data-table?

In the documentation it says

An array of objects that each describe a header column. See the example below for a definition of all properties.

{
  text: string",
  value: string",
  align: 'left' | 'center' | 'right'",
  sortable: boolean",
  class: string[] | string",
  width: string"
}

But it never actually explains the purpose of it.

Does the header object just need a unique key or can I can someone use that value in the html?

Answer 1

When you define that column as sortable: true, it is the value, and not the text, that will be set on the pagination object.

For instance, my column is called Created at (text), and it's value is created_at. This allows me to watch the pagination object, and send the order by data directly without an extra mapping step, as my API expects the value of orderBy to be either created_at or nothing.