Customize Background Colors for Individual Cells in Bootstrap Vue b-table Component

My display of items is done using bootstrap vue b-table:

<b-table striped bordered :tbody-tr-class="row_class" :fields="fields" :items="items" head-variant="light" class="o-list"
    thead-class="o-gradient-header"
    @row-selected="onRowSelected" selectable
    no-local-sorting @sort-changed="change_sort" :sort-by="list_options.sort"
    :sort-desc="list_options.order==='desc'">

...

</b-table>

A function call needs to be made to change the background color of each cell:

row_class(item) {
    // Implement necessary conditionals here
    // Return CSS class string 
}

The issue is that instead of changing only the style of the cell, it's affecting the whole row. Is there a way to individually modify the background color of each cell?

javascriptcssvue.jsbootstrap-vue

Answer №1

To customize each row, utilize the tbody-tr-class property

<b-table striped hover caption-top
          :items="items"
          :fields="fields"
          :tbody-tr-class="rowClass"
    >
    </b-table>

script

new Vue({
    el: "#app",
    data() {
      return {
        fields: [
          {
            key: "name",
            label: "Name",
            sortable: true
          },
          {
            key: "email",
            label: "Email",
            sortable: true
          },
          {
            key: "age",
            label: "Old",
            sortable: true
          }
        ],
        items: [
          { age: 40, name: "admin1", email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e48c8b8381a4828b96ca8e94">[email protected]</a>" },
          { age: 21, name: "admin2", email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5d35283a3c1d3b322f73372d">[email protected]</a>" },
          { age: 89, name: "admin3", email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f3f2636200f29203d61253f">[email protected]</a>" },
          { age: 38, name: "admin4", email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95f4f4f4f4f4d5f3fae7bbffe5">[email protected]</a>" }
        ]
      };
    },
    methods: {
      rowClass(item, type) {
        if (!item || type !== 'row') return
        if (item.age > 30) return 'table-success'
      }
    }
  });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the reason behind the additional height created by line-height?

<div><iframe style="height: 100px"></iframe></div> <div style="line-height: 0"><iframe style="height: 100px"></iframe></div> Click here to view the code snippet on jsFiddle. Upon inspecting the DOM, it is e ...

htmlcssiframe

What is the method for locating all anchor tags "In General" within the inner HTML of a div using XPath?

This query is related to a discussion on anchor tags in this thread. I am interested in identifying all anchor tags within a string. The scenario provided below is similar to the aforementioned issue, however, I aim to accomplish this using xpath and angu ...

javascripthtmlxpath

Browserify pulls in entire module even if only specific parts are utilized, such as react-addons

I am currently using Browserify to bundle my server-side react.js code for the client. There is a concern that utilizing a module from an npm package may result in the entire package being bundled by Browserify. Question: Will require('react-addons& ...

javascriptnode.jsnpmreactjsbrowserify

Disable the confirmation dialog for PUT and DELETE requests from Backbone to Django API in Firefox

Why is Firefox showing a confirmation box for PUT and DELETE requests sent from Backbone to Django REST API, while no such confirmation is required for POST requests? This webpage is being redirected to a new location. Would you like to resend the form ...

javascriptdjangojqueryfirefoxbackbone.js

Firefox returns empty computed value in getComputedStyle function

When I use getComputedStyle on an element that has defined properties for left, right, and bottom, I noticed that Chrome returns 'auto' as the value for top, whereas Firefox returns the pixel value. However, interestingly, the top value does not ...

javascriptcssfirefoxgetcomputedstyle

Troubleshooting: Why isn't my Vue v-for list updating when using v

I have a basic application that retrieves data from an API and displays the array on the screen using a v-for loop. The array is structured like this items : [{id : 1, quantity: 2}, {id: 2, quantity: 3} ...] The loop is set up like this <div v-for=&qu ...

javascriptvue.js

Is there a way to ensure that all images are uniform in size and aligned in a row?

I have an upcoming exam covering various topics that the teacher and I worked on together today, with the exception of the photo tab. The teacher instructed me to submit it within a few days, completed in full. I have independently completed everything o ...

htmlcss

Refresh the page to view multiple modals in one window on W3

I've been attempting to repurpose the W3 image modal code in order to open multiple modals on the same page. I managed to come up with a solution based on answers I found here, but unfortunately, it only seems to work if I refresh the browser page (si ...

javascriptjquery

Is a specific format necessary for express next(err) to function properly?

Recently, while working on my express sub app that utilizes the http-errors module, I encountered an interesting issue. When passing new Forbidden() to the next() callback, it seemed to vanish without triggering any callbacks. However, passing new Error() ...

javascriptnode.jsexpressswagger

What is the best way to handle newline characters ( ) when retrieving text files using AJAX?

When using an AJAX call to read a text file, I encountered an issue where it reads the \n\t and backslash symbols. These characters are not needed in the pure text message. How can I ignore or remove them for a clean text display? ...

javascriptajax

How to retrieve query parameters from the base of a URL in Express.js (A different approach from using req.params)

Recently, I created an API and set up the routing in the following manner: Starting with the main routes file: // Sub-route included app.use('/api/test/:test', require('./api/test')); // Without sub-route app.use('/api/t ...

javascriptnode.jsexpressurl-routing

"Revolutionary jQuery plugin designed to function independently of HTML elements

Is it possible to create a jQuery plugin that can be executed without the use of an element selector? Typically, we use: $('#myElementID').myPluginFunction(myVariables); But, is there a way to do it like this instead? $.myPluginFunction(my ...

javascriptjquery

Error: Vue cannot be created due to lack of permissions

Can anyone assist me with this issue I'm having while trying to install a Vue app using the command "npm init vue@latest"? Unfortunately, I keep encountering an error and I've tried various solutions such as executing "chmod -R 755 .npm" and "sud ...

linuxvue.jsubuntu

What is the best way to initiate a local Node.js server specifically when launching a desktop Electron application?

I am looking to ensure that my node js server runs while my electron app is open. One method I have attempted is using the child_process module to execute a shell command as shown below: const {exec} = require('child_process') const startDBServ ...

javascriptnode.jsmongodbelectrondesktop

Obtain the string value of `reader.result` from the `FileReader

Struggling to retrieve a string in a reader.onloadend but it's constantly returning my entire function. Here is the function I'm using: uploadFile() { let vm = this; var file = vm.$refs["testeLogo"].files[0]; var reade ...

javascriptimagefunctionvue.jsbase64

The stylesheet is linked, but no changes are taking effect

I've linked my template.php to style.css, and when I make changes in template.php, they show up fine. However, if I make changes in the stylesheet, nothing happens. What should I do? My website is not live; I'm working on it using a WAMP server. ...

javascriptphphtmlcss

"Troubleshooting a minor jQuery problem - update on current URL and refresh the page

I have developed a jQuery script that is designed to search through a webpage for specific text and then perform an action based on the findings. My query is straightforward. If I want to apply this script to a current website, such as www.google.com, how ...

javascriptjquery

SSL is being compromised due to the enablement of AJAX image loading

Although my site is fully SSL secured, I have noticed that the images pulled from an ajax call are not encrypted: $.ajax({ url : 'index.php?route=taobao/taobao/related_products&product_id=<?php echo $product_id;?>&cid=<?p ...

javascriptjqueryajaxssl

The transparent overlay div does not activate when clicking on a button in Internet Explorer 10

While tidying up my CSS and JavaScript, I may have gone a bit overboard. The code seems to work fine on Chrome, Safari, and Firefox, but it's causing chaos in IE10. Check out the code here <div id="bgmbutton1"> <img id="button1" src ...

jquerycsshtmlinternet-explorer-10incompatibility

When a Double Click event is activated in EaselJS, it also automatically triggers a Click event

Listening for Events function Solitaire() { this.table.addEventListener("click", this.handleClick.bind(this)); this.table.addEventListener("dblclick", this.handleDoubleClick.bind(this)); } Event Handling Solitaire.prototype.handleDoubleClick = f ...

javascriptcreatejseaseljs