[Feature Request] Data table items value normalization

[alOneh]

Problem to solve

Every time I use the Data table component, I'm forced to create many custom scoped slots just to format date time, numbers or boolean values into human-readable labels. It's time consuming and I think we can improve the developer experience here to address such common tasks.

There is an open issue #11588, related to this feature request but my approach is less specific and can also address this specific point with less code to write.

Proposed solution

Add support for a normalize callback function in the headers definition, like we do for filter or sort. By default, the normalize function just return the default value coming from the API or whatever the source is.

headers: [
  {
    text: 'Dessert (100g serving)',
    align: 'start',
    sortable: false,
    value: 'name',
  },
  { text: 'Calories', value: 'calories' },
  { text: 'Fat (g)', value: 'fat', normalize: formatWeight },
  { text: 'Carbs (g)', value: 'carbs', normalize: formatWeight },
  { text: 'Protein (g)', value: 'protein', normalize: formatWeight },
  { text: 'Iron (%)', value: 'iron' },
  { text: 'In stock', value: 'inStock', normalize: (v) => !!v ? 'Yes' : 'No' },
  { text: 'Expiry Date', value: 'expiryDate', normalize: formatDate },
],

const formatWeight = (v) => Number.parseFloat(x).toFixed(2)

const formatDate = (v) => (/* your implementation */)

[nekosaur]

Not sure I see the benefit of this in contrast with just doing it in a computed prop.

computedItems () {
  return items.map(item => ({
    ...
  })
}

[nekosaur]

Thank you for the Feature Request and interest in improving Vuetify. Unfortunately this is not functionality that we are looking to implement at this time.

If you have any additional questions, please reach out to us in our Discord community.