unable to import datatables.net-select (Vue 3 & Vite)

pweil

I'm getting a "failed to import" error from Vite when adding the Select extension. What I am doing wrong?

The responsive extension works fine. I copied the code right from the DataTables Vue page:

<script setup>
  import DataTable from 'datatables.net-vue3';
  import DataTablesCore from 'datatables.net';
  import 'datatables.net-responsive'
  import 'datatables.net-select'

  DataTable.use(DataTablesCore);

</script>

allan

That looks like it should work to me. Here is an example of DataTables + Select + Vue being built with Vite, which is basically the same as you have there, and it seems to be working as expected.

Perhaps you can create a repo or Stackblitz with a minimal test case showing the issue please?

Allan

pweil

Thanks @Allan. After reading further about Select, I don't think I need it after all. I was looking for something to enable selecting a row as a link... but I don't think that's what Select is for. I'm pretty new to DT.

allan

Do you mean from inside a row, or external to the table? It is possible to use select.selector to control what inside a table row will trigger the row selection. By default that is the whole row, but it is possible to change that. This example shows the first cell in the rows being used, but if you wanted to use an a tag in a column, you could do that.

If you wanted it to happen externally, you can do that too through the API - row().select().

Allan

pweil

Somewhere I got the idea that you could click a row and it would go to a URL based on based in the rowId. If I read you correctly, it's possible to do with an anchor in one of the columns? How would you configure the select option to do that? Right now I do have the anchor in one of the columns, which works fine, but being able to do this with the entire row might be better.

Just to give you a slightly clearer picture, each row contains data for a "project". I'd like to be able to click in a row to go to the project based on the project id -- instead of clicking on the anchor in the "project name" column.

kthorngren

Take a look at this example. It shows how to get the row data of the clicked row. You can then use Javascript code to open the URL from the project ID.

Kevin