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

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

pweilpweil Posts: 6Questions: 1Answers: 0

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>

Answers

  • allanallan Posts: 61,022Questions: 1Answers: 9,951 Site admin

    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

  • pweilpweil Posts: 6Questions: 1Answers: 0

    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.

  • allanallan Posts: 61,022Questions: 1Answers: 9,951 Site admin

    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

  • pweilpweil Posts: 6Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 19,924Questions: 26Answers: 4,696

    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

Sign In or Register to comment.