Bootstrap-table extension import in ES6

Question

I'd like to load/import and use the Bootstrap-table extensions but no luck yet...

The basic module load is fine:

I've added with yarn to the package.json and it sits there like this:

"bootstrap-table": "^1.11.2",

In the javascript file I import it:

import BootstrapTable from "bootstrap-table";

And the usage is fine as well:

$.extend($.fn.bootstrapTable.defaults, {
  filterControl: true,
  showMultiSort: true
});

$('.element').bootstrapTable();

But (obviously) it doesn't pick the custom options up. How should I load the extensions from the node_modules/bootstrap-table/src/extensions directory?

in ES5 I've had to load those js files one by one, after the bootstrap-table.js. But how does it work in ES6?

Thank you!

Answer 1

To use named imports the package would need to use named exports, I've just taken a look at that package and it doesn't, so you can't import a single module member with the ES6 syntax:

import {Module} from 'my-package';

so you will have to reference the file directly in your node_modules folder:

import FilterControl from '/node_modules/bootstrap-table/dist/extensions/filter-control/bootstrap-table-filter-control.min.js';

It might be worth raising an issue asking the package publisher to add the named exports, which is essentially one file entry point that exports everything for you.