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
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
Parameters
visibleText – String
Define the text to be shown on the button
CreatePDFButton
Creates a button to export data to a PDF File
Parameters
visibleText – String
Define the text to be shown on the button
orientation – String
Define the orientation of the pdf Pages
Possible Values:
portrait, landscapepageSize – 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.
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: deferRenderscrollY / 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:
If table is too big on columns you will be able to scroll to see the rest of the table
Example when enabled:
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:
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:
Result:
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
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/i18nAnd proceed to create your own dictionary for language
Note: (there are some reserverd words for DataTables). Like MENU, MAX
LanguageByURL
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:
$8 USD
(Includes AIA and AIX)
You can buy the extension on here:
Thanks
- To Kodular for this amazing platform
- To Shreyash for creating Rush
- To DataTables
- To pjjonesnz for ExcelStyles addon for Datatables (see here)