[PAID] DataTables Extension (Create custom HTML tables and export to Excel, PDF, CSV)

At first:

What is DataTables?

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, built upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table.

Source: https://datatables.net/

So, basically with this tool you can create easily beautiful and flexible HTML tables. Including a lot of customization, and extensions such as: Search, Pagination, Responsiveness, Export to files like CSV, Excel, PDF.

DataTables is completely free and Open Source and in order to use it on Kodular/AppInventor you may need to have some HTML and Javascript knowledge or go on an easier way and use an already existing extension or use my new extension instead (I will talk more about it later).

Extension Description:

This extension allows you to generate an customize HTML tables using DataTables library on an easy way

Explanation of blocks:

BuildTable

Returns the HTML text to create a DataTable
image

Parameters
  • headers – List

    List of Strings containing the column names/headers to be displayed on the table

  • data – List

    A list of lists containing the data to be displayed on the table

  • visibleButtons – List

    A list containing the buttons to be displayed on the table. (Empty list if you don’t want any button to be shown)
    This text will be hidden

¿What values need to be added on VisibleButtons parameter?

Use the following blocks.

CreateCSVButton

Creates a button to export the data to CSV
image

Parameters

visibleText – String

Define the text to be shown on the button

CreatePDFButton

Creates a button to export data to a PDF File
image

Parameters

visibleText – String

Define the text to be shown on the button

orientation – String

Define the orientation of the pdf Pages

Possible Values:
portrait, landscape

pageSize – String

Define the size of the PDF pages based on paper sizes.
Example values:

* '4A0', '2A0', 'A0', 'A1', 'A2', 'A3', 'A4', 'A5', 'A6', 'A7', 'A8', 'A9', 'A10',
* 'B0', 'B1', 'B2', 'B3', 'B4', 'B5', 'B6', 'B7', 'B8', 'B9', 'B10',
* 'C0', 'C1', 'C2', 'C3', 'C4', 'C5', 'C6', 'C7', 'C8', 'C9', 'C10',
* 'RA0', 'RA1', 'RA2', 'RA3', 'RA4',
* 'SRA0', 'SRA1', 'SRA2', 'SRA3', 'SRA4',
* 'EXECUTIVE', 'FOLIO', 'LEGAL', 'LETTER', 'TABLOID'

CreateExcelButton

Creates a button to export data to a xlsx(excel) file

Parameters

visibleText – String

Define the text to be shown on the button

autoFilter – Boolean

True if you want the exported excel file to have filters added automatically on each column

template – String

Define a color template for the exported file

Possible values:

  • black_medium
  • blue_gray_medium
  • blue_medium
  • cyan_medium
  • gold_medium
  • gray_medium
  • green_medium
  • light_gray_medium
  • orange_medium

Examples of exported file using these templates:

font – String

Set a defult font for the excel file like Arial, Calibri, and others. (The text doesn’t have to be a path to the font, just the name of the desired font).

fontSize – number

set a default size for the excel file text

bold – Boolean

Set the the font to bold

CreateColVisButton

Creates a button with the ability to show or hide columns on the table

DisplaySettings

DataTables has a huge range of options can be used to customize the way that it will present its interface, and the features available, to the end user. This is done through its configuration options, which are set at initialization time.
image

Parameters

deferRender – Boolean

To enable/disable control deferred rendering feature for additional speed of initialisation. (True recommended when a lot of data will be displayed on the table).
More on: deferRender

scrollY / scrollX – Boolean

Enable/Disable vertical and horizontal scrolling

scrollColapse – Boolean

Allow the table to reduce in height when a limited number of rows are shown

More on: scrollCollapse

scroller – Boolean

Enable/Disable Scroller Extension for DataTables which provides virtual rendering support -i.e. it will draw only the small visible section of the table (plus a small overlap for smooth scrolling)

responsive – Boolean

Make the table auto adjust of parent view width

Example when disabled:
ezgif-2-e9b9691f17

If table is too big on columns you will be able to scroll to see the rest of the table

Example when enabled:
ezgif-2-8c6c76a13a

If table is too big on columns you won’t be able to scroll but click on the row and it will expand the rest of columns that don’t fit on the screen

searching – Boolean

Enable/Disable searching features on the table.

If True you will see a TextBox like this:
image

If False the textbox won’t be shown:

pagination - Boolean

Define if you want to add pagination or not to the table.

Let’s say you will make a table with 300 rows. So, when enabled you will see a determined number of rows. And this menu will be displayed near the table:

Where you can choose how many rows you want to see or jump between pages.

If disabled all the rows will be shown and the menu won’t be shown

(See the PaginationOptions block next)

SetPaginationOptions

Sets options for pagination tool

Parameters

numberList – List

Define the options to display a determined number of rows then pagination is enabled

stringList – List

Define the text that will displayed on the options defined above.

defaultSelection - Number

Define the default number of rows to be shown when pagination is enabled

Example:
image

Result:
image

Note: -1 is used to show all rows

LanguageByDictionary and LanguageByURL

Datatables includes an Internalisation plugin to automatically define lang texts for search options, pagination and other.

LanguageByDictionary

image

Parameters

dictionary – Dictionary (not string)

you can define your own texts to be used on DataTables similar to this:

Which you can find more info on here:
https://datatables.net/manual/i18n

And proceed to create your own dictionary for language

Note: (there are some reserverd words for DataTables). Like MENU, MAX

LanguageByURL

image

Parameters

jsonUrl – String

If creating your own dictionary is not want you want. DataTables community has created ready to use translations which you can find on here:
https://datatables.net/plug-ins/i18n/

You can click on the desired language and then scroll to find the corresponding URL that you can use on this block

Extension Properties:

Properties Detail

ExportedFileHeader

The text to be on top of the PDF and Excel files

Font

A google font Name to show on all the HTML Body

BootstrapTableStyle

Table style based on the Bootstrap css class for tables. Examples: table-hovered, table-bordered

AditionalCSS

Extra CSS code to customize the table.
A possible example:

tr{
background-color: sandybrown;
}

Dom

Control the elements to appear on the page and in what order.

More Info:
https://datatables.net/reference/option/dom

Extension usage:

The extension will return only the HTML to display the DataTable.

If you want to visualize it you will need to use a WebViewer.

That’s why the BuildTable block returns a value.

You can use the WebView component but as there is an issue when loading html text.
Check this topic for reference of the issue (web_Viewer => Load HTML problem)

You will need to use the NoFileHtml extension:
https://community.appinventor.mit.edu/t/free-nofilehtml-view-html-without-files/44308

Otherwise you can use a custom Web Viewer like this one:
https://community.kodular.io/t/customwebview-an-extended-form-of-web-viewer/63037

You can use the BuildTableBlock without the configuration blocks, and the table will load with the default configuration. But if you don’t like the default configuration you can use the corresponding blocks before building the table.

Other considerations:

Open this
  • When you click on a row from the table, the data can be obtained through the WebViewString.
  • Exporting a file will take in notice the visible columns and the Search result (if searching is enabled).
  • When a CSV,PDF or excel files are exported. They are returned as a base 64 file. You can store them as base64 on a database or use the Base64 to File extension to save them on the ASD for example:
    https://community.appinventor.mit.edu/t/free-base-64-extension-file-to-from-base-64/41014?u=taifun

As a final point I want to make some clarifications.
You can achieve all what is done in this extension for free. But you need to have the knowledge on html, javascript and datatables to do it. But even if you do it in that way. You won’t be able to export pdf or excel files. Because by default when you generate a local file, the library returns a Blob object to be downloaded. This is not fully compatible on Android WebView but on desktop clients. Other users have fronted this issue: [Download locally created pdf file] How to use Webview to convert and download Blob files

So, in order to make it work. I had to modify the source code of the library that creates the file to return a base 64 file instead of a Blob Object so you can convert it to a File and save it on the device.

And finally, there’s an existing DataTables extension which is free to use and you can find on here:

https://community.thunkable.com/t/free-extension-dendritastable-csvtohtml-list-to-html-list-to-json-datatables-js-08-12-17/3399. You can visit the topic and check the differences with my extension

I know all the explanation sounds kind of difficult but the extension is pretty easy to use.
Here’s a video with a demo:

And the blocks used in this demo:

Price:

$6 USD / PayPal
(Includes AIA and AIX)

Send me a PM if you are interested in buying the extension.
Please do not post contact information on the comments.

Thanks

  • To Kodular for this amazing platform
  • To Shreyash for creating Rush
  • To DataTables
  • To pjjonesnz for ExcelStyles addon for Datatables (see here)
15 Likes

Can you have install DEMO? thanks

Really Nice Extension

1 Like

is it still available?

Hi
i want to buy it …