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

orz050

<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.

allan

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

orz050

Thank you
It worked.