New

Powerful Svelte-Bootstrap SaaS App Template

Admin CRM Application Template

Robust Next.js SaaS App Template

Powerful React-Bootstrap SaaS App Template

Modern Remix SaaS App Template

VueJS-Bootstrap SaaS App Template

Intuitive Nuxt-Bootstrap SaaS App Template

Data Tables

This is a our tailor-made hk-data-table based on react-bootstrap table.

Basic example

Add advanced interaction controls to Data tables like search, pagination etc. For responsive table just add the wrapperClasses="table-responsive" on <BootstrapTable />. View all options.

items

ID	Name	Position	Office	Start Date	Salary

0 of 50

Previous
1(current)
Next

<table id="datable_1" class="table nowrap">
	<thead>
		<tr>
			<th>Seq.</th>
			<th>Name</th>
			<th>Position</th>
			<th>Office</th>
			<th>Start date</th>
			<th>Salary</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>2</td>
			<td>Tiger Nixon</td>
			<td>System Architect</td>
			<td>Edinburgh</td>
			<td>2011/04/25</td>
			<td>$320,800</td>
		</tr>
		...
		<tr>
			<td>19</td>
			<td>Donna Snider</td>
			<td>Customer Support</td>
			<td>New York</td>
			<td>2011/01/25</td>
			<td>$112,000</td>
		</tr>
	</tbody>
</table>

<!-- Data Table JS -->
<script src="vendors/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="vendors/datatables.net-bs5/js/dataTables.bootstrap5.min.js"></script>
<script src="vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="vendors/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="vendors/jszip/dist/jszip.min.js"></script>
<script src="vendors/pdfmake/build/pdfmake.min.js"></script>
<script src="vendors/pdfmake/build/vfs_fonts.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="vendors/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script>
<script src="vendors/datatables.net-select/js/dataTables.select.min.js"></script>
<script src="vendors/datatables.net-fixedcolumns/js/dataTables.fixedColumns.min.js"></script>
<script src="vendors/datatables.net-rowreorder/js/dataTables.rowReorder.min.js"></script>
$('#datable_1').DataTable( {
	scrollX:  true,
	autoWidth: false,
	language: { search: "",
		searchPlaceholder: "Search",
		sLengthMenu: "_MENU_items",
		paginate: {
			next: '', // or '→'
			previous: '' // or '←'
		}
	},
	"drawCallback": function () {
		$('.dataTables_paginate > .pagination').addClass('custom-pagination pagination-simple');
	}
});

<template>
  <BTable
    :sort-by="[{key: 'first_name', order: 'desc'}]"
    :items="items"
    :fields="fields"
  />
</template>
<script setup lang="ts">
import type {TableFieldRaw, TableItem} from 'bootstrap-vue-next'
interface SortPerson {
  first_name: string
  last_name: string
  age: number
  isActive: boolean
}
const items: TableItem<SortPerson>[] = [
  {isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald'},
  {isActive: true, age: 45, first_name: 'Zelda', last_name: 'Macdonald'},
  {isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw'},
  {isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson'},
  {isActive: false, age: 89, first_name: 'Gary', last_name: 'Wilson'},
  {isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney'},
]
const fields: Exclude<TableFieldRaw<SortPerson>, string>[] = [
  {key: 'last_name', sortable: true},
  {key: 'first_name', sortable: true},
  {key: 'age', sortable: true},
  {key: 'isActive', sortable: false},
]
</script>

<template>
  <BTable
    :sort-by="[{key: 'first_name', order: 'desc'}]"
    :items="items"
    :fields="fields"
  />
</template>
<script setup lang="ts">
import type {TableFieldRaw, TableItem} from 'bootstrap-vue-next'
interface SortPerson {
  first_name: string
  last_name: string
  age: number
  isActive: boolean
}
const items: TableItem<SortPerson>[] = [
  {isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald'},
  {isActive: true, age: 45, first_name: 'Zelda', last_name: 'Macdonald'},
  {isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw'},
  {isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson'},
  {isActive: false, age: 89, first_name: 'Gary', last_name: 'Wilson'},
  {isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney'},
]
const fields: Exclude<TableFieldRaw<SortPerson>, string>[] = [
  {key: 'last_name', sortable: true},
  {key: 'first_name', sortable: true},
  {key: 'age', sortable: true},
  {key: 'isActive', sortable: false},
]
</script>

<table id="datable_1" class="table nowrap">
	<thead>
		<tr>
			<th>Seq.</th>
			<th>Name</th>
			<th>Position</th>
			<th>Office</th>
			<th>Start date</th>
			<th>Salary</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>2</td>
			<td>Tiger Nixon</td>
			<td>System Architect</td>
			<td>Edinburgh</td>
			<td>2011/04/25</td>
			<td>$320,800</td>
		</tr>
		...
		<tr>
			<td>19</td>
			<td>Donna Snider</td>
			<td>Customer Support</td>
			<td>New York</td>
			<td>2011/01/25</td>
			<td>$112,000</td>
		</tr>
	</tbody>
</table>

Sorting

For column sorting on table, you can add sort:true in Column.

items

ID	Name	Position	Office	Start Date	Salary

0 of 50

Previous
1(current)
Next

<table id="datable_1" class="table nowrap">
	<thead>
		<tr>
			<th>Seq.</th>
			<th>Name</th>
			<th>Position</th>
			<th>Office</th>
			<th>Start date</th>
			<th>Salary</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>2</td>
			<td>Tiger Nixon</td>
			<td>System Architect</td>
			<td>Edinburgh</td>
			<td>2011/04/25</td>
			<td>$320,800</td>
		</tr>
		...
		<tr>
			<td>19</td>
			<td>Donna Snider</td>
			<td>Customer Support</td>
			<td>New York</td>
			<td>2011/01/25</td>
			<td>$112,000</td>
		</tr>
	</tbody>
</table>

<!-- Data Table JS -->
<script src="vendors/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="vendors/datatables.net-bs5/js/dataTables.bootstrap5.min.js"></script>
<script src="vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="vendors/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="vendors/jszip/dist/jszip.min.js"></script>
<script src="vendors/pdfmake/build/pdfmake.min.js"></script>
<script src="vendors/pdfmake/build/vfs_fonts.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="vendors/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script>
<script src="vendors/datatables.net-select/js/dataTables.select.min.js"></script>
<script src="vendors/datatables.net-fixedcolumns/js/dataTables.fixedColumns.min.js"></script>
<script src="vendors/datatables.net-rowreorder/js/dataTables.rowReorder.min.js"></script>
$('#datable_1').DataTable( {
	scrollX:  true,
	autoWidth: false,
	language: { search: "",
		searchPlaceholder: "Search",
		sLengthMenu: "_MENU_items",
		paginate: {
			next: '', // or '→'
			previous: '' // or '←'
		}
	},
	"drawCallback": function () {
		$('.dataTables_paginate > .pagination').addClass('custom-pagination pagination-simple');
	}
});

<template>
  <BTable
    :sort-by="[{key: 'first_name', order: 'desc'}]"
    :items="items"
    :fields="fields"
  />
</template>
<script setup lang="ts">
import type {TableFieldRaw, TableItem} from 'bootstrap-vue-next'
interface SortPerson {
  first_name: string
  last_name: string
  age: number
  isActive: boolean
}
const items: TableItem<SortPerson>[] = [
  {isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald'},
  {isActive: true, age: 45, first_name: 'Zelda', last_name: 'Macdonald'},
  {isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw'},
  {isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson'},
  {isActive: false, age: 89, first_name: 'Gary', last_name: 'Wilson'},
  {isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney'},
]
const fields: Exclude<TableFieldRaw<SortPerson>, string>[] = [
  {key: 'last_name', sortable: true},
  {key: 'first_name', sortable: true},
  {key: 'age', sortable: true},
  {key: 'isActive', sortable: false},
]
</script>

<template>
  <BTable
    :sort-by="[{key: 'first_name', order: 'desc'}]"
    :items="items"
    :fields="fields"
  />
</template>
<script setup lang="ts">
import type {TableFieldRaw, TableItem} from 'bootstrap-vue-next'
interface SortPerson {
  first_name: string
  last_name: string
  age: number
  isActive: boolean
}
const items: TableItem<SortPerson>[] = [
  {isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald'},
  {isActive: true, age: 45, first_name: 'Zelda', last_name: 'Macdonald'},
  {isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw'},
  {isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson'},
  {isActive: false, age: 89, first_name: 'Gary', last_name: 'Wilson'},
  {isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney'},
]
const fields: Exclude<TableFieldRaw<SortPerson>, string>[] = [
  {key: 'last_name', sortable: true},
  {key: 'first_name', sortable: true},
  {key: 'age', sortable: true},
  {key: 'isActive', sortable: false},
]
</script>

<table id="datable_1" class="table nowrap">
	<thead>
		<tr>
			<th>Seq.</th>
			<th>Name</th>
			<th>Position</th>
			<th>Office</th>
			<th>Start date</th>
			<th>Salary</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>2</td>
			<td>Tiger Nixon</td>
			<td>System Architect</td>
			<td>Edinburgh</td>
			<td>2011/04/25</td>
			<td>$320,800</td>
		</tr>
		...
		<tr>
			<td>19</td>
			<td>Donna Snider</td>
			<td>Customer Support</td>
			<td>New York</td>
			<td>2011/01/25</td>
			<td>$112,000</td>
		</tr>
	</tbody>
</table>

Default Search

Add advanced interaction controls to Data tables like search, pagination etc. For responsive table just add the wrapperClasses="table-responsive" on <BootstrapTable />. View all options.

items

ID	Name	Position	Office	Start Date	Salary

0 of 50

Previous
1(current)
Next

<table id="datable_1" class="table nowrap">
	<thead>
		<tr>
			<th>Seq.</th>
			<th>Name</th>
			<th>Position</th>
			<th>Office</th>
			<th>Start date</th>
			<th>Salary</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>2</td>
			<td>Tiger Nixon</td>
			<td>System Architect</td>
			<td>Edinburgh</td>
			<td>2011/04/25</td>
			<td>$320,800</td>
		</tr>
		...
		<tr>
			<td>19</td>
			<td>Donna Snider</td>
			<td>Customer Support</td>
			<td>New York</td>
			<td>2011/01/25</td>
			<td>$112,000</td>
		</tr>
	</tbody>
</table>

<!-- Data Table JS -->
<script src="vendors/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="vendors/datatables.net-bs5/js/dataTables.bootstrap5.min.js"></script>
<script src="vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="vendors/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="vendors/jszip/dist/jszip.min.js"></script>
<script src="vendors/pdfmake/build/pdfmake.min.js"></script>
<script src="vendors/pdfmake/build/vfs_fonts.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="vendors/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script>
<script src="vendors/datatables.net-select/js/dataTables.select.min.js"></script>
<script src="vendors/datatables.net-fixedcolumns/js/dataTables.fixedColumns.min.js"></script>
<script src="vendors/datatables.net-rowreorder/js/dataTables.rowReorder.min.js"></script>
$('#datable_1').DataTable( {
	scrollX:  true,
	autoWidth: false,
	language: { search: "",
		searchPlaceholder: "Search",
		sLengthMenu: "_MENU_items",
		paginate: {
			next: '', // or '→'
			previous: '' // or '←'
		}
	},
	"drawCallback": function () {
		$('.dataTables_paginate > .pagination').addClass('custom-pagination pagination-simple');
	}
});

<template>
  <BTable
    :sort-by="[{key: 'first_name', order: 'desc'}]"
    :items="items"
    :fields="fields"
  />
</template>
<script setup lang="ts">
import type {TableFieldRaw, TableItem} from 'bootstrap-vue-next'
interface SortPerson {
  first_name: string
  last_name: string
  age: number
  isActive: boolean
}
const items: TableItem<SortPerson>[] = [
  {isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald'},
  {isActive: true, age: 45, first_name: 'Zelda', last_name: 'Macdonald'},
  {isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw'},
  {isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson'},
  {isActive: false, age: 89, first_name: 'Gary', last_name: 'Wilson'},
  {isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney'},
]
const fields: Exclude<TableFieldRaw<SortPerson>, string>[] = [
  {key: 'last_name', sortable: true},
  {key: 'first_name', sortable: true},
  {key: 'age', sortable: true},
  {key: 'isActive', sortable: false},
]
</script>

<template>
  <BTable
    :sort-by="[{key: 'first_name', order: 'desc'}]"
    :items="items"
    :fields="fields"
  />
</template>
<script setup lang="ts">
import type {TableFieldRaw, TableItem} from 'bootstrap-vue-next'
interface SortPerson {
  first_name: string
  last_name: string
  age: number
  isActive: boolean
}
const items: TableItem<SortPerson>[] = [
  {isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald'},
  {isActive: true, age: 45, first_name: 'Zelda', last_name: 'Macdonald'},
  {isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw'},
  {isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson'},
  {isActive: false, age: 89, first_name: 'Gary', last_name: 'Wilson'},
  {isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney'},
]
const fields: Exclude<TableFieldRaw<SortPerson>, string>[] = [
  {key: 'last_name', sortable: true},
  {key: 'first_name', sortable: true},
  {key: 'age', sortable: true},
  {key: 'isActive', sortable: false},
]
</script>

<table id="datable_1" class="table nowrap">
	<thead>
		<tr>
			<th>Seq.</th>
			<th>Name</th>
			<th>Position</th>
			<th>Office</th>
			<th>Start date</th>
			<th>Salary</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>2</td>
			<td>Tiger Nixon</td>
			<td>System Architect</td>
			<td>Edinburgh</td>
			<td>2011/04/25</td>
			<td>$320,800</td>
		</tr>
		...
		<tr>
			<td>19</td>
			<td>Donna Snider</td>
			<td>Customer Support</td>
			<td>New York</td>
			<td>2011/01/25</td>
			<td>$112,000</td>
		</tr>
	</tbody>
</table>

Custom Search

Add advanced interaction controls to Data tables like search, pagination etc. For responsive table just add the wrapperClasses="table-responsive" on <BootstrapTable />. View all options.

ID	Name	Position	Office	Start Date	Salary

<table id="datable_1" class="table nowrap">
	<thead>
		<tr>
			<th>Seq.</th>
			<th>Name</th>
			<th>Position</th>
			<th>Office</th>
			<th>Start date</th>
			<th>Salary</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>2</td>
			<td>Tiger Nixon</td>
			<td>System Architect</td>
			<td>Edinburgh</td>
			<td>2011/04/25</td>
			<td>$320,800</td>
		</tr>
		...
		<tr>
			<td>19</td>
			<td>Donna Snider</td>
			<td>Customer Support</td>
			<td>New York</td>
			<td>2011/01/25</td>
			<td>$112,000</td>
		</tr>
	</tbody>
</table>

<!-- Data Table JS -->
<script src="vendors/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="vendors/datatables.net-bs5/js/dataTables.bootstrap5.min.js"></script>
<script src="vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="vendors/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="vendors/jszip/dist/jszip.min.js"></script>
<script src="vendors/pdfmake/build/pdfmake.min.js"></script>
<script src="vendors/pdfmake/build/vfs_fonts.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="vendors/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script>
<script src="vendors/datatables.net-select/js/dataTables.select.min.js"></script>
<script src="vendors/datatables.net-fixedcolumns/js/dataTables.fixedColumns.min.js"></script>
<script src="vendors/datatables.net-rowreorder/js/dataTables.rowReorder.min.js"></script>
$('#datable_1').DataTable( {
	scrollX:  true,
	autoWidth: false,
	language: { search: "",
		searchPlaceholder: "Search",
		sLengthMenu: "_MENU_items",
		paginate: {
			next: '', // or '→'
			previous: '' // or '←'
		}
	},
	"drawCallback": function () {
		$('.dataTables_paginate > .pagination').addClass('custom-pagination pagination-simple');
	}
});

<template>
  <BTable
    :sort-by="[{key: 'first_name', order: 'desc'}]"
    :items="items"
    :fields="fields"
  />
</template>
<script setup lang="ts">
import type {TableFieldRaw, TableItem} from 'bootstrap-vue-next'
interface SortPerson {
  first_name: string
  last_name: string
  age: number
  isActive: boolean
}
const items: TableItem<SortPerson>[] = [
  {isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald'},
  {isActive: true, age: 45, first_name: 'Zelda', last_name: 'Macdonald'},
  {isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw'},
  {isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson'},
  {isActive: false, age: 89, first_name: 'Gary', last_name: 'Wilson'},
  {isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney'},
]
const fields: Exclude<TableFieldRaw<SortPerson>, string>[] = [
  {key: 'last_name', sortable: true},
  {key: 'first_name', sortable: true},
  {key: 'age', sortable: true},
  {key: 'isActive', sortable: false},
]
</script>

<template>
  <BTable
    :sort-by="[{key: 'first_name', order: 'desc'}]"
    :items="items"
    :fields="fields"
  />
</template>
<script setup lang="ts">
import type {TableFieldRaw, TableItem} from 'bootstrap-vue-next'
interface SortPerson {
  first_name: string
  last_name: string
  age: number
  isActive: boolean
}
const items: TableItem<SortPerson>[] = [
  {isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald'},
  {isActive: true, age: 45, first_name: 'Zelda', last_name: 'Macdonald'},
  {isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw'},
  {isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson'},
  {isActive: false, age: 89, first_name: 'Gary', last_name: 'Wilson'},
  {isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney'},
]
const fields: Exclude<TableFieldRaw<SortPerson>, string>[] = [
  {key: 'last_name', sortable: true},
  {key: 'first_name', sortable: true},
  {key: 'age', sortable: true},
  {key: 'isActive', sortable: false},
]
</script>

<table id="datable_1" class="table nowrap">
	<thead>
		<tr>
			<th>Seq.</th>
			<th>Name</th>
			<th>Position</th>
			<th>Office</th>
			<th>Start date</th>
			<th>Salary</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>2</td>
			<td>Tiger Nixon</td>
			<td>System Architect</td>
			<td>Edinburgh</td>
			<td>2011/04/25</td>
			<td>$320,800</td>
		</tr>
		...
		<tr>
			<td>19</td>
			<td>Donna Snider</td>
			<td>Customer Support</td>
			<td>New York</td>
			<td>2011/01/25</td>
			<td>$112,000</td>
		</tr>
	</tbody>
</table>

Checkbox select

You can add check-box selection on table by adding a rowSelection props on <HkDataTable />

items

	ID	Name	Position	Office	Start Date	Salary

0 of 50

Previous
1(current)
Next

<table id="datable_1" class="table nowrap">
	<thead>
		<tr>
			<th>Seq.</th>
			<th>Name</th>
			<th>Position</th>
			<th>Office</th>
			<th>Start date</th>
			<th>Salary</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>2</td>
			<td>Tiger Nixon</td>
			<td>System Architect</td>
			<td>Edinburgh</td>
			<td>2011/04/25</td>
			<td>$320,800</td>
		</tr>
		...
		<tr>
			<td>19</td>
			<td>Donna Snider</td>
			<td>Customer Support</td>
			<td>New York</td>
			<td>2011/01/25</td>
			<td>$112,000</td>
		</tr>
	</tbody>
</table>

<!-- Data Table JS -->
<script src="vendors/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="vendors/datatables.net-bs5/js/dataTables.bootstrap5.min.js"></script>
<script src="vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="vendors/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="vendors/jszip/dist/jszip.min.js"></script>
<script src="vendors/pdfmake/build/pdfmake.min.js"></script>
<script src="vendors/pdfmake/build/vfs_fonts.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="vendors/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script>
<script src="vendors/datatables.net-select/js/dataTables.select.min.js"></script>
<script src="vendors/datatables.net-fixedcolumns/js/dataTables.fixedColumns.min.js"></script>
<script src="vendors/datatables.net-rowreorder/js/dataTables.rowReorder.min.js"></script>
$('#datable_1').DataTable( {
	scrollX:  true,
	autoWidth: false,
	language: { search: "",
		searchPlaceholder: "Search",
		sLengthMenu: "_MENU_items",
		paginate: {
			next: '', // or '→'
			previous: '' // or '←'
		}
	},
	"drawCallback": function () {
		$('.dataTables_paginate > .pagination').addClass('custom-pagination pagination-simple');
	}
});

<template>
  <BTable
    :sort-by="[{key: 'first_name', order: 'desc'}]"
    :items="items"
    :fields="fields"
  />
</template>
<script setup lang="ts">
import type {TableFieldRaw, TableItem} from 'bootstrap-vue-next'
interface SortPerson {
  first_name: string
  last_name: string
  age: number
  isActive: boolean
}
const items: TableItem<SortPerson>[] = [
  {isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald'},
  {isActive: true, age: 45, first_name: 'Zelda', last_name: 'Macdonald'},
  {isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw'},
  {isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson'},
  {isActive: false, age: 89, first_name: 'Gary', last_name: 'Wilson'},
  {isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney'},
]
const fields: Exclude<TableFieldRaw<SortPerson>, string>[] = [
  {key: 'last_name', sortable: true},
  {key: 'first_name', sortable: true},
  {key: 'age', sortable: true},
  {key: 'isActive', sortable: false},
]
</script>

<template>
  <BTable
    :sort-by="[{key: 'first_name', order: 'desc'}]"
    :items="items"
    :fields="fields"
  />
</template>
<script setup lang="ts">
import type {TableFieldRaw, TableItem} from 'bootstrap-vue-next'
interface SortPerson {
  first_name: string
  last_name: string
  age: number
  isActive: boolean
}
const items: TableItem<SortPerson>[] = [
  {isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald'},
  {isActive: true, age: 45, first_name: 'Zelda', last_name: 'Macdonald'},
  {isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw'},
  {isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson'},
  {isActive: false, age: 89, first_name: 'Gary', last_name: 'Wilson'},
  {isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney'},
]
const fields: Exclude<TableFieldRaw<SortPerson>, string>[] = [
  {key: 'last_name', sortable: true},
  {key: 'first_name', sortable: true},
  {key: 'age', sortable: true},
  {key: 'isActive', sortable: false},
]
</script>

<table id="datable_1" class="table nowrap">
	<thead>
		<tr>
			<th>Seq.</th>
			<th>Name</th>
			<th>Position</th>
			<th>Office</th>
			<th>Start date</th>
			<th>Salary</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>2</td>
			<td>Tiger Nixon</td>
			<td>System Architect</td>
			<td>Edinburgh</td>
			<td>2011/04/25</td>
			<td>$320,800</td>
		</tr>
		...
		<tr>
			<td>19</td>
			<td>Donna Snider</td>
			<td>Customer Support</td>
			<td>New York</td>
			<td>2011/01/25</td>
			<td>$112,000</td>
		</tr>
	</tbody>
</table>

Export Table

You can export your table as a pdf, csv and excel by adding a exports props in <HkDataTable />.

ID	Name	Position	Office	Start Date	Salary

<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>

<template>
    <div class="row">
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
        </div>
    </div>
</template>

<template>
    <div class="row">
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
        </div>
    </div>
</template>

<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>

Basic example
Sorting
Default Table Search
Custom Search
Checkbox Selection
Export Table