Why the text of the dom: is red?

ag281198

Im using the dom: Bfrtip but the letters are red like this:

This is my code:

<template>
    <DataTable :data="data" :columns="tableColumns" :options="tableOptions" :buttons="buttons"></DataTable>
</template>

<script>
import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net';
import Buttons from 'datatables.net-buttons-bs5';
import print from 'datatables.net-buttons/js/buttons.print';
import ButtonsHtml5 from 'datatables.net-buttons/js/buttons.html5';
import pdfmake from 'pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
import JsZip from 'jszip';
pdfmake.vfs = pdfFonts.pdfMake.vfs;
window.JSZip = JsZip;
DataTable.use(Buttons);
DataTable.use(pdfmake);
DataTable.use(print);
DataTable.use(ButtonsHtml5);
DataTable.use(DataTablesCore);

export default {
    props: {
        fetchUrl: {
            type: String,
            required: true
        }
    },
    components: {
        DataTable,
    },
    data() {
        return {
        data: [],
        tableOptions: {
            dom: 'Bfrtip',
            responsive: false,
            paging: true,
            pageLength: 10,
            ordering: true,
            searching: true,
            autoWidth: false,
            buttons: [
            {
                title: 'Excel',
                extend: 'excelHtml5',
                text: '<i class="fa-solid fa-file-excel"></i> Excel',
                className: 'btn btn-success'
            },
            {
                title: 'PDF',
                extend: 'pdfHtml5',
                text: '<i class="fa-solid fa-file-pdf"></i> PDF',
                className: 'btn btn-danger'
            },
            {
                title: 'Print',
                extend: 'print',
                text: '<i class="fa-solid fa-print"></i> Print',
                className: 'btn-print'
            },
            
            ],
            language: {
            paginate: {
                first: 'First',
                previous: 'Previous',
                next: 'Next',
                last: 'Last',
            },
            search: 'Filter:',
            emptyTable: 'No data',
            },
        },
        tableColumns: [
            { title: 'ID', data: 'Id' },
            { title: 'Name', data: 'Name' },
            { title: 'Description', data: 'Description' },
            { title: 'Building', data: 'Building' },
            { title: 'Country', data: 'Country' },
            {
                title: 'Actions',
                data: null,
                render: function(data, type, row) {
                    return '<button class="btn btn-primary" @click="handleActionClick(' + row.Id + ')">Details</button>';
                }
            },
        ],
        }
    },
    created() {
        fetch(this.fetchUrl)
        .then((response) => response.json())
        .then((data) => {
        this.data = data || [];
        })
        .catch((error) => {
        console.error('Error:', error);
        });
    },
}
</script>

allan

Its impossible to say without being able to "inspect" the page. There will be some CSS on the page somewhere, and it isn't coming from DataTables (since our examples don't look like that), but that CSS is what is causing the buttons to look like that.

If you link to the page, I'll be able to tell you where the styling is coming from.

Allan

kthorngren

I must not have clicked Post Comment. I did create a test case with snippets from your code to show that red text is not the default:
https://live.datatables.net/muyiqovo/1/edit

As Allan said inspect the buttons to see where the red text is coming from. Otherwise we'll need to see the issue to help debug.

Kevin