xxxxxxxxxx
1
<template>
2
<MDBDatatable
3
:dataset="dataset11"
4
sortField="purchases"
5
sortOrder="desc"
6
/>
7
</template>
xxxxxxxxxx
1
<style>
2
#app {
3
font-family: Roboto, Helvetica, Arial, sans-serif;
4
}
5
</style>
xxxxxxxxxx
1
<script setup lang="ts">
2
import { computed } from "vue";
3
import { MDBDatatable } from "mdb-vue-ui-kit";
4
5
const dataset11: {columns: {[props:string]: any}[]; rows: (string | number)[][];} = {
6
columns:[],
7
rows: [
8
["Product 1", 10, 103],
9
["Product 2", 45, 110],
10
["Product 3", 76, 56],
11
["Product 4", 89, 230],
12
["Product 5", 104, 240],
13
["Product 6", 97, 187],
14
["Product 7", 167, 130],
15
["Product 8", 50, 199],
16
["Product 9", 4, 206],
17
["Product 10", 120, 88],
18
["Product 11", 22, 100]
19
]
20
};
21
const maxValue = Math.max(...dataset11.rows.map(row => row[2] as number));
22
const minValue = Math.min(...dataset11.rows.map(row => row[2] as number));
23
const colors = ["#E3F2FD", "#BBDEFB", "#90CAF9", "#64B5F6", "#42A5F5"];
24
const step = (maxValue - minValue) / (colors.length - 1);
25
const format = computed(() =>
26
dataset11.rows.map(row => {
27
const colorIndex = Math.floor((row[2] as number - minValue) / step);
28
return {
29
backgroundColor: colors[colorIndex],
30
fontWeight: 400
31
};
32
})
33
);
34
dataset11.columns = [
35
{ label: "Product", field: "product" },
36
{ label: "Quantity", field: "quantity" },
37
{ label: "Purchases", field: "purchases", format }
38
];
39
</script>
Console errors: 0