implementing bootstrap-table csv export into angular 15 project

I am trying to implement bootstrab-table table export extension for angular project but havnt been successful so far

https://live.bootstrap-table.com/example/extensions/export.html

Any help or example would be great help

Thanks in advance

Please is what i have tried in angular project

html file

<div class="container">
<h1>Run Details</h1>

<div id="toolbar">
    <select class="form-control">
    <option value="basic">Export Basic</option>
    <option value="all">Export All</option>
    <option value="selected">Export Selected</option>
    </select>
</div>

<table
    id="table"
    data-toggle="table"
    data-search="true"
    data-flat="true"
    data-show-columns="true"
    data-show-multi-sort="true"
    class="table table-striped">
    <thead>
    <tr>
        <th data-field="state" data-checkbox="true"></th>
        <th data-field="id" data-sortable="true">ID</th>
        <th data-field="project" data-sortable="true">Project</th>
        <th data-field="test_result" data-sortable="true">Hypothesis</th>
        <th data-field="num_passes" data-sortable="true">Run Path</th>
        <th data-field="user_name" data-sortable="true">User Name</th>
    </tr>
    </thead>
</table>
</div>

<ngx-spinner type="ball-scale-multiple"></ngx-spinner>

below are the two function which are initializing table

ngAfterViewChecked(): void {
    if (this.runData.length > 0 && !this.isTableInitialized) {
    $('#table').bootstrapTable('destroy').bootstrapTable(
        {
        data:this.runData,
        filterControl: true,
        showSearchClearButton: true,
        search: true,
        showColumns: true,
        showColumnsSearch: true,
        pagination: true,
        exportDataType: 'all',
        showExport: true,
        exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel', 'pdf'],
        }
    );
    this.isTableInitialized = true;
    }
}

ngOnInit(): void {
    this.spinner.show()
    this.appService.get_data('get_all_runs').subscribe(
    (data:any )=>{

        if (data['result'] == 'SUCCESS'){
        this.runData = data['rows']
        }
        console.log(this.runData )
        this.spinner.hide()
    }, (error)=>{
        console.log(error)
        this.spinner.hide()
    }
    )
}

Try this.

https://stackblitz.com/edit/stackblitz-starters-wobvc1?file=package.json

index.html

You must include all these script tags.

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.29.0/tableExport.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.29.0/libs/jsPDF/jspdf.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.6/dist/bootstrap-table.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.6/dist/extensions/export/bootstrap-table-export.min.js"></script>

and also include related CSS files inside head tag.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.6/dist/bootstrap-table.min.css"
/>

main.ts

This includes your code pulling the data from web-server and loading the bootstrap table by below config,

$('#table')
  .bootstrapTable('destroy')
  .bootstrapTable({
    exportDataType: 'all',
    data: this.runData,
    filterControl: true,
    showSearchClearButton: true,
    search: true,
    showColumns: true,
    showColumnsSearch: true,
    pagination: true,
    exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel', 'pdf'],
  });

Reference:

https://examples.bootstrap-table.com/index.html#extensions/export.html#view-source

NOTE: column name's must match with th's data-field attribute in HTML and runData object's 'rows' array key in typescript.