Vue 3 datatable Individual column searching dropdown.

draw134

Is this possible in vue 3?
https://www.datatables.net/examples/api/multi_filter_select.html

currently my implentation is

            <DataTable class="display" ref="table" id="example">
              <thead>
                <tr>
                  <th>Date</th>
                  <th>Title</th>
                  <th>Name</th>
                  <th>Degree Type</th>
                  <th>Status</th>
                  <th>Adviser</th>
                  <th>Program</th>
                  <th>Panels</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="submission in formattedSubmissions" :key="submission.id">
                  <td>{{ submission.formattedDate }}</td>
                  <td>{{ submission.title }}</td>
                  <td>{{ submission.user.name }}</td>
                  <td>{{ submission.user.degree_type.toUpperCase() }}</td>
                  <td v-html="statusBadge(submission)"></td>
                  <td>{{ submission.adviser }}</td>
                  <td>{{ submission.user.course.name }}</td>
                  <td>{{ submission.panels }}</td>
                  <td>
                    <Link :href="`/wala`" class="btn btn-sm um-button">View</Link>
                  </td>
                </tr>
              </tbody>
            </DataTable>

and I tried something like

const initializeDataTable = () => {
  const table = new DataTable('#example', {
    initComplete: function () {
      this.api()
        .columns()
        .every(function () {
          let column = this;

          // Create select element
          let select = document.createElement('select');
          select.add(new Option(''));
          column.footer().replaceChildren(select);

          // Apply listener for user change in value
          select.addEventListener('change', function () {
            var val = DataTable.util.escapeRegex(select.value);

            column
              .search(val ? '^' + val + '$' : '', true, false)
              .draw();
          });

          // Add list of options
          column
            .data()
            .unique()
            .sort()
            .each(function (d, j) {
              select.add(new Option(d));
            });
        });
    },
  });
};

onMounted(() => {
  initializeDataTable();
});

and it says DataTable is not a constructor. Can someone correct my usage? Thanks

allan

Hi,

You can't use v-for with the DataTable component. The problem with it is that it would result in both DataTables and Vue trying to control the same DOM elements in the tbody. That is never going to work unfortunately.

You need to pass the data to DataTables from your data (formattedSubmissions in this case) as shown in the documentation.

Unfortunately you can't yet use Vue components in the table cells with a DataTable. That is a limitation I'm looking into.

I doubt that is the actual issue you are facing, but I'd need a test case showing the issue to be able to diagnose it, as I don't see how you are doing your imports or even if you are using our Vue3 component. However, the approach above just won't work at all I'm afraid - because of that issue with trying to control the same DOM.

Allan