Vue3 ColumnControls custom content

Marto31d3cz2

How to describe new custom content in vue3? Tried few different ways but always ended at no registered myButton class.

<template>
    <div class="card-body p-3">
        <DataTable class="table table-sm table-hover" :options="lcOptions" ref="table">
        </DataTable>
    </div>
</template>
<script setup lang="ts">
    import DataTable from 'datatables.net-vue3';
    import DataTablesLib, { type Config } from 'datatables.net-bs5';
    import 'datatables.net-buttons/js/buttons.html5';
    import 'datatables.net-buttons';
    import 'datatables.net-fixedcolumns-bs5';
    import ColumnControl from 'datatables.net-columncontrol';
    import jszip from 'jszip';
    import type { LayoutKey } from '#build/types/layouts';

    const { options, layout } = defineProps<{
        options: Config,
        layout?: Partial<Record<LayoutKey, any>>
    }>();
    const toolbar = ref();
    const table = ref();

    DataTable.use(DataTablesLib);
    DataTablesLib.Buttons.jszip(jszip);

    DataTablesLib.ColumnControl = ColumnControl;

    if (!DataTablesLib.ColumnControl.buttons) {
        DataTablesLib.ColumnControl.buttons = {};
    }

    DataTablesLib.ColumnControl.buttons.myButton = {
        defaults: {
            text: 'My Button'
        },
        init: function (config: any) {
            const button = document.createElement('button');
            button.className = 'btn btn-primary';
            button.textContent = config.text;
            button.addEventListener('click', () => {
                alert('You have clicked my button!');
            });
            return button;
        }
    };

    const columnControl = [{
        target: 0,
        content: [
            'order',
            {
                extend: 'dropdown',
                text: 'Columns',
                content: ['colVis']
            }
        ]
    }, {
        target: 1,
        content: [{ extend: 'myButton' }]
    }];

    const lcOptions: Config = {
        columnControl,
        ordering: {
            indicators: false,
            handler: false
        },
        stateSave: false,
        scrollX: true,
        scrollCollapse: true,
        processing: true,
        serverSide: true,
        pageLength: 50,
        buttons: ['csv', 'copy', 'excel'],
        layout: {
            topStart: null,
            topEnd: null,
            top: () => toolbar.value,
            ...layout
        },
        ...options
    }

</script>

allan

DataTablesLib.ColumnControl.buttons.myButton

Should be:

DataTablesLib.ColumnControl.content.myButton

The content property is used to store custom content types for ColumnControl (not buttons since content might be a button, or it might be something like a search input, hence why I used content). See the manual for further info on creating custom content types in ColumnControl.

Thanks,
Allan