Topic: cell formating not working

cardgate priority asked 1 week ago


Expected behavior

The expected behavior is like the docs: https://mdbootstrap.com/docs/vue/data/datatables/#section-cell-formatting

Actual behavior

When I change the example code from const to ref, it doesn't work any more.

const dataset11 = ref({ ....});

Is there any workaround for this?

Code example

setup( ) {

const dataset11 = ref({
  rows: [
    ["Product 1", 10, 103],
    ["Product 2", 45, 110],
    ["Product 3", 76, 56],
    ["Product 4", 89, 230],
    ["Product 5", 104, 240],
    ["Product 6", 97, 187],
    ["Product 7", 167, 130],
    ["Product 8", 50, 199],
    ["Product 9", 4, 206],
    ["Product 10", 120, 88],
    ["Product 11", 22, 100]
  ]
});

const maxValue = Math.max(...dataset11.value.rows.map(row => row[2]));
const minValue = Math.min(...dataset11.value.rows.map(row => row[2]));
const colors = ["#E3F2FD", "#BBDEFB", "#90CAF9", "#64B5F6", "#42A5F5"];
const step = (maxValue - minValue) / (colors.length - 1);
const format = computed(() =>
    dataset11.value.rows.map(row => {
      const colorIndex = Math.floor((row[2] - minValue) / step);
      return {
        backgroundColor: colors[colorIndex],
        fontWeight: 400
      };
    })
);

dataset11.value.columns = [
  { label: "Product", field: "product" },
  { label: "Quantity", field: "quantity" },
  { label: "Purchases", field: "purchases", format }
];

return {
  dataset11
};

}

Bartosz Cylwik staff answered 1 week ago


Hi, thank you for your message. Unfortunately refs won't work with the MDBDatatable component. The Vue documentation recommends not to mutate objects and arrays that are passed as props.

https://vuejs.org/guide/components/props.html#one-way-data-flow

Maybe some of the events from MDBDatatable would be helpful to you?

Best Regards!


cardgate priority commented 3 days ago

If refs won't work with MDBDatables why is it then used with Async Data? https://mdbootstrap.com/docs/vue/data/datatables/#section-async-data Which is definitely working with refs. The correct answer is that cell formatting is not working with refs


Bartosz Cylwik staff commented 2 days ago

Thanks, we will look into this



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Priority
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 3.2.0
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: Yes