I am working on a cryptocurrency exchange book simulator and I am trying to implement a progress bar that will be displayed behind the values in a table.
https://i.stack.imgur.com/9gVsY.png
This is the template for my data-table:
<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>
Is there a way to add a progress bar to the data-table elements without disrupting the layout of the template? Adding a div or other tag between the items and headers causes them to not align properly.