DevXtreme DataGrid in Vue

Question

I need to make a table with DataGrid in Vue. But I need to display the Data from a v-for as you can see in the code i tried i need to display {{user.name}}, {{user.email}} and {{rol.name}}. And I don't know how to do it. Im pretty new to I tried different thinks but i don't really know how to do it. Thanks all.

Example:

<DxDataGrid
    :columns="columns"
    :show-borders="true"
    :focused-row-enabled="true">
  <div v-for="(user,index) in usersData" :key="index">
    <DxColumn caption="Usuario">{{user.name}}</DxColumn>
    <DxColumn caption="Email">{{user.email}}</DxColumn>
    <span v-for="(rol,index) in user.roles" :key="index">
    <DxColumn caption="Roles">{{rol.name}}</DxColumn>
 </span>
</div>
</DxDataGrid>

Answer 1

The approach you're taking isn't how DxDataGrid is typically used.

Instead of using v-for within the DxDataGrid, you should preprocess your data to fit the structure that DxDataGrid expects:

computed: {
  processedUsersData() {
    return this.usersData.map(user => {
      return {
        name: user.name,
        email: user.email,
        roles: user.roles.map(rol => rol.name).join(', ')
      };
    });
  }
}

And then in template:

<DxDataGrid
    :data-source="processedUsersData"
    :show-borders="true"
    :focused-row-enabled="true">
    <DxColumn dataField="name" caption="Usuario"></DxColumn>
    <DxColumn dataField="email" caption="Email"></DxColumn>
    <DxColumn dataField="roles" caption="Roles"></DxColumn>
</DxDataGrid>

Hope this helps!