javascript - How to set custom CoreUI column names in Vue?

Question

I have an array of item objects for the table. e.g.:

[{ name: 'Sam', age: 24 }]

I want to set custom field names like instead of column to be named as age, I want it to display column name as Id instead of age. So, basically how can I set custom column names?

Here is their documentation if that helps: https://coreui.io/vue/docs/components/table.html

Check fields props.

Answer 1

Using the fields attribute of the <CDataTable>, you can specify an array of fields to use for column names. That can be an array of strings or objects. When using the object syntax, you can specify various properties, such as the label of the column. See in the <CDataTable> docs:

key (required)(String) - define column name equal to item key.

label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting

This lets you name the column differently from the key. Here is an example where the table has column keys "id" and "name", but the label is "ID" and "Surname":

<div id="app">
  <cdatatable
    :items="items"
    :fields="fields"
  >
  </cdatatable>
</div>

new Vue({
  el: "#app",
  data() {
    return {
      items: [
        { id: 1, name: 'Mary' },
        { id: 2, name: 'Bob' }
      ],
      fields: [                      // Array of column object data
        { key: 'id', label: 'ID' },
        { key: 'name', label: 'Surname' }
      ]
    }
  }
});