bootstrap styling with tabler

tacman1123

https://kpa.survos.com/songs/browse

I've replaced bootstrap with tabler.io, which I believe is a super-set of bootstrap, or rather, a theme built on top of bootstrap.

In searchpanes, though, I've lost some icons and the background color when a filter is selected.

I'm including all the bootstrap plugins, and I don't want to re-import bootstrap css, and even when I try that doesn't work. So I think I'm missing some file somewhere.

import 'datatables.net-select-bs5';
import "https://cdn.datatables.net/tmp/dataTables.searchPanes.mjs";
import 'datatables.net-searchbuilder-bs5';
import 'datatables.net-buttons-bs5';
import 'datatables.net-select-bs5';
import 'datatables.net-responsive-bs5';
import 'datatables.net-scroller-bs5';
import 'datatables.net-bs5/css/dataTables.bootstrap5.min.css';
import 'datatables.net-searchpanes-bs5/css/searchPanes.bootstrap5.min.css';
import 'datatables.net-searchbuilder-bs5/css/searchBuilder.bootstrap5.min.css';
import 'datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css';
import 'datatables.net-scroller-bs5/css/scroller.bootstrap5.min.css';
import 'datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css';

allan

You've got the SearchPanes CSS for Bootstrap 5 included okay on your page, but I don't think the SearchPanes / Bootstrap 5 has been loaded.

Can you show me your JS imports as well?

Allan

tacman1123

Something is different with select, I get this message when installing.

Updating package datatables.net-select-bs5 from 3.0.0 to ^2.0.

That makes no sense, it's not an update! But I can't figure out why its happening. I'll report back.

tacman1123

Is there a list of all the packages and their latest versions?

I tracked the issue to a dependency that installs the plugins, but I'm not sure how to get the latest ones without looking them up on npmjs/jsdelivr one at a time.

    "importmap": {
      "@hotwired/stimulus": "^3.1.0",
      "@popperjs/core": "^2.11.8",
      "bootstrap": "^5.3.2",
      "jquery": "^3.7.1",
      "datatables.net-plugins/i18n/en-GB.mjs": "^1.13.6",
      "datatables.net-bs5": "2.1.6",
      "datatables.net-buttons-bs5": "2.4.2",
      "datatables.net-select-bs5": "3.0.0",
      "datatables.net-scroller-bs5": "2.3.0",
      "datatables.net-responsive-bs5": "^3.0.3",
      "datatables.net-searchpanes-bs5": "2.3.3"
    }
  },
  "peerDependencies": {
    "@hotwired/stimulus": "^3.2.0"
  },
  "devDependencies": {
    "@hotwired/stimulus": "^3.2.2"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.8",
    "datatables.net-buttons-bs5": "^2.2",
    "datatables.net-colreorder": "^1.5.4",
    "datatables.net-colreorder-bs5": "^1.5.4",
    "datatables.net-datetime": "^1.4.1",
    "datatables.net-fixedcolumns-bs5": "^4.0.0",
    "datatables.net-fixedheader-bs5": "^3.2.2",
    "datatables.net-responsive": "^2.4.0",
    "datatables.net-responsive-bs5": "^2.4.0",
    "datatables.net-scroller": "^2.0.4",
    "datatables.net-scroller-bs5": "^2.0.4",
    "bootstrap": "^5.3.2",
    "jquery": "^3.7.1",

allan

Is there a list of all the packages and their latest versions?

The download page shows the versions. Also available as a JSON API.

You should be able to just npm install <packageName> to install the latest version.

You don't appear to have datatables.net-select-bs5 in your dependencies list.

Allan