No style with datatables

[sbellver]

When i use the "demo" content i can't get style

<DataTable :data="[[1,2], [3,4]]" class="display">
	<thead>
		<tr>
			<th>A</th>
			<th>B</th>
		</tr>
	</thead>
</DataTable>

import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net';

DataTable.use(DataTablesCore);

<style>
@import 'datatables.net-dt';
</style>

As i dont use vite, i try to put the url instad in import:

<style>
@import '../../node_modules/datatables.net-dt/css/jquery.dataTables.min.css';
</style>

No luck

Also i try to copy all css file and puto into <style> tag inside my .vue file. Doesn't work too

[AllanJard]

This example shows it working. Please provide a link to a test case that shows the issue if you continue to have problems with this.

[sbellver]

First, i install datatables dt / vue

"datatables.net-dt": "^1.13.6",
"datatables.net-vue3": "^2.1.3",

Then, in muy Page.vue y add

<template>
  <ion-page>

    <ion-content class="ion-padding" :fullscreen="true">


      <template v-if="mode == 'table'">
        <DataTable class="display" width="100%">
          <thead>
            <tr>
              <th>HEAD 1</th>
              <th>HEAD 2</th>
            </tr>
          </thead>
        </DataTable>
      </template>
    </ion-content>

  </ion-page>
</template>

<script>
import { ref } from 'vue';
import {
  ...
} from '@ionic/vue';

...

import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net';
DataTable.use(DataTablesCore);

export default {
  name: 'IncidencesPage',

  components: {
    ...
  },

  setup() {

    return {
      // STORES
      // ICONS
      
      // VARS
      mode: ref('table'),
      ...
    };
  },
  
  
  created() {
  ...
  },
  ionViewWillEnter() {
    ...
  },
  computed: {
    ...
  },

  methods: {
    async presentActionSheetStatus() {
    ...
    },
...
};
</script>

<style>
@import 'datatables.net-dt';
@import '../../node_modules/datatables.net-dt/css/jquery.dataTables.min.css';

</style>

And this is what i get

[AllanJard]

Can you link to a test case showing the issue, per my previous comment please. This is as much about the build toolchain as anything else. I gave a link in my previous comment with a Stackblitz showing it working. I need to be able to see it not working to be able to offer any help.

[sbellver]

You are using vite, but we dont use it.

For this, i use the complete url to css file instead

@import 'datatables.net-dt';

to

@import '../../node_modules/datatables.net-dt/css/jquery.dataTables.min.css';

I try copying styles directly over tags, but nothing works

[sbellver]

I think think link can help: https://stackblitz.com/edit/vue-7pxkuy?file=package.json,src%2FApp.vue

[AllanJard]

@import 'node_modules/datatables.net-dt/css/jquery.dataTables.css';

Does away with the "turbo_modules" error in StackBlitz there. It doesn't render the table, but it appears to allow the CSS to load. Perhaps it is just the leading ../../ in your path that is causing the issue?

[sbellver]

No, i need the ../../

[AllanJard]

This is the updated StackBlitz with the line I suggested: https://stackblitz.com/edit/vue-ioj1ef?file=package.json%2Csrc%2FApp.vue . So I guess there is something else going on.

I need a way to reproduce the error to be able to help resolve it. If you can create a minimal git repo showing the issue, I can look into that.