Search code examples
vue.jsvuejs2vue-componentquasar-frameworkquasar

change specific column in Quasar's table


How can I change the style of a specific column in Quasar's table? I read documentation, but I didn't see that how can I change it without defining all columns in the Vue layout's page.

It works but in the first column.

<template v-slot:body-cell-name="props">
    <q-td :props="props">
      <div>
        <q-badge color="purple" :label="props.value" />
      </div>
      <div class="my-table-details">
        {{ props.row.details }}
      </div>
    </q-td>
</template>

Solution

  • The example you provided is from the correct Quasar Docs. It works for the first column because the name of the first property is name - hence body-cell-name.

    If in this example you would like to change the fifth column with the property protein you would need to call that slot body-cell-protein