CODEWITHSUNDEEP
vue.jsbulmabuefy
exareyn
exareyn

Reputation: 1

How can I change the backgroundColor of a row in a beufy datatable with a given color for each row?

I'm new to web technologies and I'm stuck this this problem: I would like to be able to change the color of a row dynamically.

I tried different things with my knowledge and none worked well. I have a json with information for the table with the color code inside (ex: #D465F2). I wasn't able to find a way to color the entire row in one time dynamically. I can do it with predetermined css but it's not what I need.

The only way it worked is this one:

Template:

<template>
  <div>
    <p class="title">logs</p>
    <b-table
      :data="loginfo"
      :sticky-header="stickyHeaders"
      height="1200px"
      :row-class="() => 'relative'"
    >
      <b-table-column v-slot="props" field="log_id" label="color">
        <div class="colored-cell" :style="{ backgroundColor: props.row.color }">
          <p>{{ props.row.color }}</p>
        </div>
      </b-table-column>
    </b-table>
  </div>
</template>

Script:

<script>
import axios from 'axios'
export default {
  props: {
    id: Number,
    state: Number,
  },
  data() {
    return {
      loginfo: [],
      stickyHeaders: true,
      dateSearchable: false,
    }
  },
  watch: {
    id(newId) {
      this.newLog()
    },
  },
  methods: {
    async newLog() {
      await axios
        .get('http://127.0.0.2:5001/api/log?sequence=' + this.id)
        .then((response) => (this.loginfo = response.data.data))
    },
  },
}

Exemple of json send to the script:

"data": [
    {
      "color": "#15986E", 
      "log_id": 25, 
      "logged_at": "2022-05-17 16:27:00.015", 
    },

and this is my css:

.relative {
  position: relative;
}
.colored-cell {
  position: absolute;
  top: 0;
  left: 0;
  padding: 8px 12px;
}

With this code I color each cell one by one but it makes the table unreadable and all broken. Everything is on top of each other. TableBroken Screen

If anyone have the solution to make the table looks great again/color row dynamically or anything that can help me, another lib which allows me to change the row color dynamically.

Upvotes: 0

Views: 638

Answers (1)

Michal Lev&#253;
Michal Lev&#253;

Reputation: 37903

Just use a td-attrs prop as documented

  <b-table>
      :data="loginfo"
      :sticky-header="stickyHeaders"
      height="1200px"
    >
      <b-table-column v-slot="props" field="log_id" label="color" :td-attrs="columnTdAttrs">     
        {{ props.row.color }}
      </b-table-column>
    </b-table>
  </div>

export default {
  methods: {
    columnTdAttrs(row, column) {
      return {
        style: {
          backgroundColor: row.color
        }
      }
    }
  },
}

Upvotes: 0

Related Questions