Custom Extensions

Custom Extensions#

Internationalisation#

import itables

df = itables.sample_dfs.get_countries(html=False)

DataTables controls can use a different language than English. To display the table controls in another language, go to the internationalisation plug-ins page and find the language URL, like e.g.

itables.show(
    df,
    language={"url": "https://cdn.datatables.net/plug-ins/2.0.2/i18n/fr-FR.json"},
)
region country capital longitude latitude
code
Loading ITables v2.3.0 from the internet... (need help?)

Tip

You can also use the internationalization in the offline mode. Download the translation file, then set itables.options.language accordingly:

import json

with open("fr-FR.json") as fp:
    itables.options.language = json.load(fp)

Creating a custom DataTables bundle#

To use custom extensions in the offline mode, you will need to create a bundle of jQuery, DataTables, and the desired extensions.

To do so, make a copy of packages/dt_for_itables:

$ tree

.
├── LICENSE
├── package.json
├── package-lock.json
├── README.md
└── src
    └── index.js

Add or remove the desired extensions in package.json and src/index.js. To do this, you can use the DataTables download page and follow the instructions for the NPM download method.

For instance, say you want to bundle the PDF export button. Change src/index.js to this code:

import JSZip from 'jszip';
import jQuery from 'jquery';
import pdfMake from 'pdfmake';
import DataTable from 'datatables.net-dt';
import 'datatables.net-dt/css/dataTables.dataTables.min.css';

import 'datatables.net-buttons-dt';
import 'datatables.net-buttons/js/buttons.html5.mjs';
import 'datatables.net-buttons/js/buttons.print.mjs';
import 'datatables.net-buttons-dt/css/buttons.dataTables.min.css';

DataTable.Buttons.jszip(JSZip);
DataTable.Buttons.pdfMake(pdfMake);

pdfMake.vfs = pdfFonts.pdfMake.vfs;

export { DataTable, jQuery };

and run these commands:

# Install the dependencies in package.json
npm install

# Install the additional dependencies
npm install pdfmake --save

# Create dt_bundle.js and dt_bundle.css
npm run build

Finally, you can either deploy dt_bundle.js and dt_bundle.css on an http server and pass the URL of dt_bundle.js as the dt_url option to show, or, in the offline mode, pass the path to dt_bundle.js as the dt_bundle argument of the init_notebook_mode method (in either case you can set the values permanently on itables.options).

Contents