vue3 datatable styling not working

jemz

Hi need some help please, I am using vue3 and datables, I followed this basic example https://datatables.net/blog/2022-06-22-vue, but unfortunately, the styling did not work. as you can see on my screenshot the table display did not work.

rf1234

but unfortunately, the styling did not work. as you can see on my screenshot the table display did not work.

Too bad, it didn't work. But without a test case or your code I am afraid nobody will be able to help you.

jemz

If I hover the this import DataTableBs5 from 'datatables.net-bs5';

it says dataTables.bootstrap5.d.ts is not a module

jemz

<template>
  <div class="about">

    <h1>This is an about page</h1>


      <DataTable :data="data" class="display" width="100%">
        <thead>
        <tr>
          <th>A</th>
          <th>B</th>
        </tr>
        </thead>
      </DataTable>

  </div>

</template>

<script setup lang="ts">

import * as bootstrap from 'bootstrap';
import DataTable from 'datatables.net-vue3';

import DataTableBs5 from 'datatables.net-bs5';
DataTable.use(DataTableBs5);

const data = [
  [1, 2],
  [3, 4],
];

</script>

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

jemz

it's working now

KyokuSama

Hi @jemz .
Could you explain how you solved this?

allan

I would guess by adding the class table to the table or possibly just style="width: 100%" as the rest looks okay.

If that doesn't fix it for you, please link us to your page so we can take a look into it.

Allan