how could i apply some classes when createRow in vue 3?

how could i apply some classes when createRow in vue 3?

orz050orz050 Posts: 4Questions: 2Answers: 0
<template>
  <DataTable
    :columns="columns"
    ajax="/data.json"
    ref="table"
    class="table dt-table-hover w-100"
  />
</template>

<script setup>
  import DataTable from 'datatables.net-vue3';
  import DataTablesCore from 'datatables.net';
  DataTable.use(DataTablesCore);

  const columns = [
    {
      data: 'active', // 1 || 0 || -1
      title: 'active',
      searchable: false,
      visible: false,
    },
    {
      data: 'showID',
      title: 'ID',
      searchable: false,
    },
    {
      data: 'showName',
      title: 'Title',
    },
  ];
</script>

I need to apply a class "bg-gray" to a <tr> when active === 0, and apply a class "bg-dark" when active === -1.
How could I do these in vue 3? Thank you.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin
    Answer ✓

    Use the rowCallback option. Add :options="options" to the <DataTable> tag and then:

    const options = {
      rowCallback: (row, data) => {
        row.classList.toggle('bg-gray', data.active === 0);
      }
    };
    

    Allan

  • orz050orz050 Posts: 4Questions: 2Answers: 0

    Thank you <3
    It worked.

Sign In or Register to comment.