serisu

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <body>
    <div id="app">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <Data-Table class="table table-striped table-bordered"
                                        :data="tableData"
                                        ref="table"
                                        :columns="columns">
                                <template #column-0="props">
                                AC {{props.rowData.accountId}}
                                </template>
                            </Data-Table>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</body>
<script type="importmap">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
        "jquery": "https://esm.sh/[email protected]",
        "datatables.net-vue3": "https://unpkg.com/[email protected]/dist/datatables.net-vue3.mjs",
        "datatables.net": "https://cdn.datatables.net/1.13.6/js/jquery.dataTables.mjs",
        "datatables.net-bs4": "https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap4.mjs"
      }
    }
</script>
<script type="module">
    import { createApp } from 'vue';
    import DataTable from 'datatables.net-vue3';
    import DataTableLib from "datatables.net-bs4";
    DataTable.use(DataTableLib);
    const app = createApp({
        setup() { },
        components: {},
        async mounted() { },
        data() {
            return {
                columns: [
          ...