Problem adding <div> custom-header class to v-slot:header.name

Dashboard
1

Here is my header template

<template v-slot:header.livePrice>
    <div class="custom-header">Current Price</div>
</template>

here is the CSS

/* Style for the header */
.custom-header {
  color: #E0E1DD;
  font-weight: bold;
  padding: 10px;
}

here is how the browser is rendering it

<th class="v-data-table__td v-data-table-column--align-start v-data-table__th--sortable v-data-table__th" colspan="1" rowspan="1">
  <div class="v-data-table-header__content d-flex align-center">
    <span class="custom-header">Current Price</span>
    <i class="mdi-arrow-up mdi v-icon notranslate v-theme--nrdb v-icon--size-default v-data-table-header__sort-icon" aria-hidden="true"></i>
  </div>
</th>

Any idea why my custom header is on the <span tag instead of <div tag?

This template is the same

<template v-slot:header.liveProfit>
  <div class="v-data-table-header__content">Profit</div>
</template>

I have a v-chip on that and doesn't work at all

<template v-slot:item.liveProfit="{ item }">
    <v-chip :color="getChipColor(item.liveProfit)">
        {{ item.liveProfit }} %
    </v-chip>
</template>

here is the script part

<script>
export default {
  data() {
    return {
      search: '', // Search query
      headers: [
	{ title: 'Current Price', key: 'livePrice' },
	{ title: 'Current Profit', key: 'liveProfit' },
      ]
    };
  },
  props: {
    msg: {
      type: Object,
      required: true
    }
  },
  methods: {
    // Determine the color of the profit chip based on profit value
    getChipColor(item.liveProfit) {
      if (item !== undefined) {
        if (item.liveProfit > 0) {
          return 'green';  // Profit is positive
        } else if (item.liveProfit < 0) {
          return 'red';    // Profit is negative
        } else {
          return 'orange'; // Profit is neutral
        }
      }
    }
  }
};
</script>
2

You are giving us snippets of code that dont make a lot of sense by themselves.

For example, pulling some of the parts together, i can get v-chips to display...

<template>
  <div v-for="item in items">
    <v-chip :color="getChipColor(item)">
        {{ item.liveProfit }} %
    </v-chip>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: '', // Search query
      headers: [
        { title: 'Current Price', key: 'livePrice' },
        { title: 'Current Profit', key: 'liveProfit' },
      ],
      items: [
        {liveProfit: 1.5},
        {liveProfit: -1.5},
        {liveProfit: 0},
      ]
    };
  },
  methods: {
    // Determine the color of the profit chip based on profit value
    getChipColor(item) {
      if (item !== undefined) {
        if (item.liveProfit > 0) {
          return 'green';  // Profit is positive
        } else if (item.liveProfit < 0) {
          return 'red';    // Profit is negative
        } else {
          return 'orange'; // Profit is neutral
        }
      }
    }
  }
};
</script>

image
image169Ă—207 3.13 KB

Perhaps if you share a minimal flow, with sample data, we can help further.

1 Like
3

That's more then enough for the chips I know where is the problem. The function should send the array data as numbers not as a string

But why the headers are rendered it as default class instead of using my custom class? some of the other columns have the same template with div class and they are OK

4

Here is the template I don't understand why this is not working. I use the same template for other data and I do not have problem

<template>
  <div>
    <v-card flat>
			<v-card-title class="d-flex align-center pe-2">
				<v-icon icon="mdi-check"></v-icon> &nbsp;
				Pending Trades ({{ msg?.payload[0]?.tradeCount || 0 }})

				<v-spacer></v-spacer>

				<v-text-field
					v-model="search"
					density="compact"
					label="Search"
					prepend-inner-icon="mdi-magnify"
					variant="solo-filled"
					flat
					hide-details
					single-line
				></v-text-field>
			</v-card-title>
		</v-card>
    <!-- Data Table -->
    <v-data-table 
			class="custom-table-background"
      v-model:search="search" 
      :items="msg?.payload" 
      :headers="headers">
      
      <!-- Custom header for Trade# column -->
      <template v-slot:header.trade>
        <div class="custom-header">Trade#</div>
      </template>

      <!-- Custom header for Pair column -->
      <template v-slot:header.pair>
        <div class="custom-header">Pair</div>
      </template>

      <!-- Custom header for Direction column -->
      <template v-slot:header.direction>
        <div class="custom-header">Direction</div>
      </template>

      <!-- Custom header for Entry Price column -->
      <template v-slot:header.buyPrice>
        <div class="custom-header">Entry Price</div>
      </template>
			
			<!-- Custom header for Exit Price at column -->
			<template v-slot:header.sellPrice>
        <div class="custom-header">Exit Price</div>
      </template>
			
			<!-- Custom header for Current Price at column -->
			<template v-slot:header.livePrice>
        <div class="custom-header">Current Price</div>
      </template>
			
			<!-- Custom header for Live Profit column -->
      <template v-slot:header.liveProfit>
        <div class="custom-header">Profit</div>
      </template>

      <!-- Custom header for Status column -->
      <template v-slot:header.status>
        <div class="custom-header">Status</div>
      </template>

      <!-- Displaying Live profit with custom color and percentage -->
      <template v-slot:item.liveProfit="{ item }">
        <v-chip :color="getChipColor(item)">
          {{ item.liveProfit }} %
        </v-chip>
      </template>
	  
			<!-- Displaying Trade Number with custom color and percentage -->
      <template v-slot:item.trade="{ item }">
        <v-chip class="ma-2" color="green" label>
           {{ item.trade }}
        </v-chip>
      </template>

      <!-- Displaying direction (logo, position, margin mode, leverage) -->
      <template v-slot:item.direction="{ item }">
        <div class="trade-container">
          <img :src="item.logoUrl" :alt="`${item.symbol} logo`" class="trade-logo" />
          <div class="trade-details">
            <span class="trade-position">{{ item.position }}</span><br />
            <span class="trade-margin">{{ item.marginMode }} {{ item.leverage }}X</span>
          </div>
        </div>
      </template>

    </v-data-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: '', // Search query
      headers: [
        { title: 'Trade#', key: 'trade' },
        { title: 'Pair', key: 'pair' },
        { title: 'Direction', key: 'direction' },
        { title: 'Entry Price', key: 'buyPrice' },
	{ title: 'Exit Price', key: 'sellPrice' },
	{ title: 'Current Price', key: 'livePrice' },
	{ title: 'Current Profit', key: 'liveProfit' },
        { title: 'Status', key: 'status' },
      ]
    };
  },
  props: {
    msg: {
      type: Object,
      required: true
    }
  },
  methods: {
    // Determine the color of the profit chip based on profit value
    getChipColor(item) {
      if (item !== undefined) {
        if (item.liveProfit > 0) {
          return 'green';  // Profit is positive
        } else if (item.liveProfit < 0) {
          return 'red';    // Profit is negative
        } else {
          return 'orange'; // Profit is neutral
        }
      }
    }
  }
};
</script>

<style>
/* Helper classes */
.bg-basil {
  background-color: #0D1B2A !important;
}
.text-basil {
  color: #E0E1DD !important;
}
/* ============ Closed Styles ============ */
/* Styling the container that holds logo, position, margin */
.trade-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Style for the trade logo */
.trade-logo {
  width: 30px;
  height: 30px;
  margin-right: 20px;
  vertical-align: middle;
  padding: 0;
}

/* Style for the trade details */
.trade-details {
  margin: 0;
  padding: 0;
  text-align: left;
}

/* Style for the trade position text */
.trade-position {
  color: #9ACD32; /* Green color */
  margin: 0;
  padding: 0;
}

/* Style for the margin mode and leverage */
.trade-margin {
  color: #9ACD32; /* Green color */
  margin: 0;
  padding: 0;
}
/* Style for the header */
.custom-header {
  color: #E0E1DD;
  font-weight: bold;
  padding: 10px;
}
.custom-table-background {
  background-color: #1B263B; /* Dark background example */
  border-radius: 12px; /* Customize the value for more or less rounding */
  overflow: hidden; /* Ensures content stays within the rounded corners */
  margin-top: 20px; /* Adds top margin */
}
</style>

Here is the example of object from the array

[
    {
        "trade": "#15",
        "pair": "BTCUSDT",
        "position": "Long",
        "logoUrl": "https://static.coinpaprika.com/coin/btc-bitcoin/logo.png",
        "symbol": "BTCUSDT",
        "marginMode": "Cross",
        "leverage": 20,
        "buyPrice": 1000.14,
        "sellPrice": 1000.98,
        "livePrice": 1000.63,
        "closed": "undefined",
        "status": "Pending",
        "profit": 1.84,
        "opened": "Oct 17th, 22, 23:06",
        "liveProfit": "10.52",
        "tradeCount": 20
    }
]