[Vuejs]-PrimeVue DataTable Row Color based off of Column Item

by

3👍

✅

When you provide a function to :rowStyle or :rowClass, the first argument is row’s data, which you can use to decide the color.

<DataTable :rowClass="({ desc }) => desc === 'Disconnected' ? 'text-red-500': null">
  ...
</DataTable>

Similarly, inside a <Column>‘s #body slot, you will find data and field properties, which can be used to decide the color:

<Column field="desc" header="Desc.">
  <template #body="{ field, data }">
    <div :class="data[field] === 'Disconnected' ? 'text-red-500' : null">
      {{ data[field] }}
    </div>
  </template>
</Column>

Docs example.

You might want to write the function inside <script> and reference it in template, as shown in the example, instead of writing it inline, as I did above. Both work.

👤tao

Leave a comment