Added new attribute named "control" to show and hide controls. [true/ false].
Bugs Fixed
Fixed case-sensitive issue in SQL query syntax.
Improvement
Removed show all from number of row. The maximum number of displayed rows are 50.
Redesigned the form control elements.
Added pagination to the bottom right of the table.
Added exact-match to provide case sensitive searching.
Introduction
Pigeon-table is one of the sub-projects initiated under ngPigeon project. It is a self-contained and convenient module for web application development particularly, for operations such as data retrieval, data presentation as well as data manipulation. The module is handy and adaptable for quick web application prototyping purpose.
By using pigeon-table module, web app developers could render table(s) with data retrieved from databases into their web application by just defining the custom HTML element tag i.e. <pigeon-table> and specify a SQL SELECT statement in the "query" attribute. Besides, pigeon-table also supports aggregated queries statement e.g. SELECT … AVG(…) … GROUP BY… which will return aggregated records and results.
This work has been published in:
Voon, Y. N., & Ong, C. A. (2017). Pigeon-table: A quick prototyping tool using twitter bootstraps and AngularJS for data-driven web application development. In 2017 International Conference on Computer and Drone Applications (IConDA) (pp. 33–37). IEEE. https://doi.org/10.1109/ICONDA.2017.8270395
As soon as you downloaded all the plugins, just includes all the plugins into your project in the order as below:
jQuery
Bootstrap
AngularJS
Angular Cookies
Pigeon Table
*** If your project is running in PHP, you can insert the "includes.php" to include all the dependencies. The "includes.php" file is located in "pigeon-table/php/includes.php".
Database Configuration
A simple database configuration is required to connect and retrieve the data from SQL database. The database configuration is stored in "pigeon-table/configdb.php".
How to use?
Pigeon Table Directive
In order to use pigeon table, you are required to include "pigeon-table" HTML tag into your project.
<pigeon-table query="SELECT * FROM user_account" editable="false" control="true"></pigeon-table>
Pigeon Table Settings
query - SQL query for data retrieval *Required
editable (Default: false) - Whether enable CRUD operation or not. CRUD operation will be disabled if Pigeon Table detects aggregation table or JOIN table.
control (Default: true) - Whether display the panel on top of the Pigeon Table or not.
Pigeon Table Components
Sortable
The data can be sorted to either ascending or descending order by clicking on the column title.
Searchable
The data can be filtered by entering the data you want to search along with the column you want to filter with. Besides that, exact match provides sensitive filtering to the data.
Excludable
The data also can be excluded by entering the data you want to exclude along with the column you want to exclude with. *Note: The data will be excluded in exact match (case sensitive).
Insert (CRUD Operation)
You can insert the data into that MySQL table. The input field of the insertion is based on the columns that are specified in the SQL query. Data validation will be conducted base on the MySQL table column's type.
Edit (CRUD Operation)
You can edit the data of every row. The input field of the edit form is based on the columns that are specified in the SQL query. The validation is based on the MySQL table column's type. *Note: The primary key input field cannot be edit.
Delete (CRUD Operation)
You can delete the data of each row by clicking on the delete button. A delete confirmation box will pop out before perform deletion.
