'How to create an exchange-like progress bar behind data-table elements? [Vue/Vuetify]

I'm making an exchange book simulator for some cryptocurrencies, and I need to make the progress bar that is behind the values of a table.

enter image description here

My data-table that receives the data has the following template:

                    <v-data-table
                        :headers="headers_ask"
                        :items="book_item[1]"
                        class="transparent data-table-books-asks ml-3 mr-3"
                    >
                      <template v-slot:item="{item}">
                          <tr>
                            <td>{{item.ask}}</td>
                            <td>{{item.quantity}}</td>
                          </tr>
                      </template>
                    </v-data-table>

How can I create this progress bar on data-table elements without affecting the layout of the template? Note: if I create a div or other tag between that template the items do not match the header

javascripthtmlcssvue.jsvuetify.js


Solution 1:[1]

I made it using a background property on the template elements:

<tr :style="{'background-image': 'linear-gradient(to left, rgba(255, 59, 105, 0.25), rgba(255, 59, 105, 0.25) '+item.percentage+'%, rgba(0, 0, 0, 0) '+item.percentage+'%)'}">
  <td class="text-start items-ask">{{item.ask}}</td>
  <td class="text-center items-quantity">{{item.quantity}}</td>
</tr>

Thank you folks!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Gabriel Franco

Related Questions