Color each row in PrimeVue DataTable based on the value of a specific column item

Question

Color each row in PrimeVue DataTable based on the value of a specific column item

Recently, I came across a PrimeVue DataTable with a specific structure:

<DataTable value="info">
  <Column header="Name" field="name" />
  <Column header="Desc." field="desc" />
  <Column header="Date" field="date" />
</DataTable>

The DataTable's value is filled with data from the "info" array, retrieved from an API. I've been trying to change the color of certain rows in the DataTable based on the "desc" property within the "info" array. Here's what I have attempted:

Using rowStyle

<DataTable value="info" :rowStyle="desc === 'Disconnected' ? 'color:red' : null">
  <Column header="Name" field="name" />
  <Column header="Desc." field="desc" />
  <Column header="Date" field="date" />
</DataTable>

I've experimented with various versions of rowStyle, but my main challenge lies in accessing variables within the DataTable when applying styles. Would using a ColumnGroup and assigning a <Row> value, then customizing it with the corresponding color change be a better approach?

Any assistance would be appreciated. Thank you!

javascript css vue.js datatable primevue

Answer 1

Answer №1

When providing a function to determine row style with :rowStyle or :rowClass, the first argument is the row's data, allowing you to choose the color accordingly.

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

Similarly, within a <Column>'s #body slot, you can access the data and field properties to determine 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>

See the docs example here.

To keep things organized, consider writing the function within <script> and referencing it in the template, as demonstrated in the example, instead of writing it inline like shown above. Both methods are effective.

Answer 2

When providing a function to determine row style with :rowStyle or :rowClass, the first argument is the row's data, allowing you to choose the color accordingly.

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

Similarly, within a <Column>'s #body slot, you can access the data and field properties to determine 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>

See the docs example here.

To keep things organized, consider writing the function within <script> and referencing it in the template, as demonstrated in the example, instead of writing it inline like shown above. Both methods are effective.

Color each row in PrimeVue DataTable based on the value of a specific column item

Answer №1

Similar questions

In pursuit of increased speed

Iterate through the JSON response and send it back to Jquery

What sets cross-fetch apart from isomorphic-fetch?

Accessing Elasticsearch from Kibana without the need for authentication and sending requests freely

Please indicate a width of 3 characters for the HTML input text

Gathering feedback from a webpage using JavaScript and jQuery

Using Node JS as both an HTTP server and a TCP socket client simultaneously

Get the JSON file from Firebase storage

Switch up the hover color of the dropdown menu in the Bootstrap navbar

Error message displayed when pressing a button on React Native: "Uncaught Error in Redux - Actions must be plain objects. To handle async actions, use custom middleware."

Issue encountered during production build in Angular 6 due to NGRX

Is it possible to use null and Infinity interchangeably in JavaScript?

Having trouble rendering the React app; encountered an error: JSX contents are unterminated

Discover the security vulnerabilities in Node.js when using VS Code with FREECODECAMP's React app

What is the method for configuring body attributes in CSS with AngularJS?

Is there a way to incorporate a base64 encoded image from a text file into an HTML image?

Discover the steps for activating Vue devtools in production mode specifically for Chrome extensions

Is there a way to keep my navbar fixed at the top as I scroll down the page? And is it possible to have a picture appear above the navbar when scrolling up to the top?

Using AXIOS and VueJs to visually represent data with a two-dimensional array

GAS: What strategies can I implement to optimize the speed of this script?