Custom Extensions

Internationalisation

import itables

df = itables.sample_dfs.get_countries()

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
AW	Latin America & Caribbean	Aruba	Oranjestad	-70.016700	12.516700
AF	South Asia	Afghanistan	Kabul	69.176100	34.522800
AO	Sub-Saharan Africa	Angola	Luanda	13.242000	-8.811550
AL	Europe & Central Asia	Albania	Tirane	19.817200	41.331700
AD	Europe & Central Asia	Andorra	Andorra la Vella	1.521800	42.507500
AE	Middle East & North Africa	United Arab Emirates	Abu Dhabi	54.370500	24.476400
AR	Latin America & Caribbean	Argentina	Buenos Aires	-58.417300	-34.611800
AM	Europe & Central Asia	Armenia	Yerevan	44.509000	40.159600
AS	East Asia & Pacific	American Samoa	Pago Pago	-170.691000	-14.284600
AG	Latin America & Caribbean	Antigua and Barbuda	Saint John's	-61.845600	17.117500
(198 more rows not shown)

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).