npm create vite@latest sample-vanilla-ts -- --template vanilla-ts
npm install --save jquery
npm install --save bootstrap
npm install --save datatables.net
npm install --save datatables.net-bs5
npm install --save datatables.net-select
npm install --save datatables.net-select-bs5
npm install --save datatables.net-searchpanes
npm install --save datatables.net-searchpanes-bs5
SearchPanes example from here
Added to main.ts
with the necessary imports
import $ from 'jquery';
import 'bootstrap';
import 'datatables.net';
import 'datatables.net-select';
import 'datatables.net-searchpanes';
// Commenting out following imports will result in an error
//import 'datatables.net-bs5';
//import 'datatables.net-select-bs5';
//import 'datatables.net-searchpanes-bs5';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'datatables.net-bs5/css/dataTables.bootstrap5.min.css';
import 'datatables.net-select-bs5/css/select.bootstrap5.min.css';
import 'datatables.net-searchpanes-bs5/css/searchPanes.bootstrap5.min.css';
You get a javascript error on console screen of the browser and blank screen.
Uncaught TypeError: Cannot read properties of undefined (reading 'classes')