🔗 Link to plugin page: https://zeroqode.com/plugin/datatables-1550378900350x360527788313673700
Demo to preview the plugin:
Introduction
A very advanced plugin that gives you the possibility to use dataTables to display your Bubble database!
Fields
Title | Description | Type |
Scroll Collapse | Determines how the scrollable body of the table behaves when the content doesn't fill the available space.
When set to true:
- If the table's content is shorter than the scrollable area, the scrollable body will collapse down to the height of the rows.
- This can create a more compact appearance when there are few rows, as it eliminates unnecessary empty space.
When set to false:
- The scrollable body will maintain its full height regardless of the content's length.
- This can be useful when you want to maintain a consistent layout regardless of the number of rows.
| Checkbox (yes/no) |
Show first column | Controls the visibility of the first column in the table.
When set to true:
- The first column of the table will be hidden from view.
- This can be useful when the first column contains data that you don't want to display initially, such as ID numbers or other internal identifiers.
When set to false:
- All columns, including the first one, will be visible. | Checkbox (yes/no) |
Language | Available options: Afrikaans, Albanian, Amharic, Arabic, Armenian, Azerbaijan, Bangla, Basque, Belarusian, Catalan, Chinese-traditional, Chinese, Croatian, Czech, Danish, English, Estonian, Filipino, Finnish, French, Galician, Georgian, German, Greek, Gujarati, Hebrew, Hindi, Hungarian, Icelandic, Indonesian-Alternative, Indonesian, Irish, Italian, Japanese, Kazakh, Korean, Kyrgyz, Latvian, Lithuanian, Macedonian, Malay, Nepali, Norwegian-Bokmal, Norwegian-Nynorsk, Pashto, Polish, Portuguese-Brasil, Portuguese, Romanian, Russian, Serbian, Sinhala, Slovak, Slovenian, Spanish, Swahili, Swedish, Tamil, Telugu, Thai, Turkish, Ukrainian, Urdu, Uzbek, Vietnamese, Welsh | Dropdown |
Reponsive | Added option automatically hide columns When a column does not fit on the page, it is hidden. The last column in the table being used as the show / hide control for the row details. | Checkbox (yes/no) |
Export filename | Sets the base name for files exported from the table. This is used when generating CSV or PDF exports of the table data. | Text (optional) |
PDF Orientation | Available options: portrait, landscape | Dropdown |
Entries to display | List of numbers separated by a comma | Text |
Font | Font to be used in the table (type in the name) (OPTIONAL) | Text (optional) |
Focus color | Color in HEX format to be used for border when table input elements are focused (OPTIONAL) | Color (optional) |
Show the pagination | Enable or disable table pagination. | Checkbox (yes/no) |
Footer font weight | Available options: bold, bolder, lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900 | Dropdown |
Header font weight | Available options: bold, bolder, lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900 | Dropdown |
◢◤ Stripe | ||
Stripe row odd color | Sets the background color for odd-numbered rows (1st, 3rd, 5th, etc.) | Color (optional) |
Stripe row even color | Sets the background color for even-numbered rows (2nd, 4th, 6th, etc.). | Color (optional) |
◢◤ Hover | ||
Hover color | Sets the background color of a table row when the user hovers over it with their cursor. | Color (optional) |
◢◤ Pagination style selected button | ||
Background | The pagination_background property sets the background color of the active pagination button in the table's pagination controls. This helps to visually distinguish the current page from other available pages. | Color (optional) |
Border color | Sets the border color of the active pagination button in the table's pagination controls. This helps to further highlight and distinguish the current page from other available pages. | Color (optional) |
Text color | Sets the text color of the active pagination button in the table's pagination controls. | Color (optional) |
◢◤ Pagination style buttons | ||
Background on hover | Sets the background color of pagination buttons when a user hovers over them with their cursor. | Color (optional) |
Border width | Sets the border width of the buttons in the table's pagination controls. | Number (optional) |
Border radius | Sets the border radius of the buttons in the table's pagination controls. | Number (optional) |
Border color | Sets the border color of the buttons in the table's pagination controls. | Color (optional) |
Text color | Sets the text color of the buttons in the table's pagination controls. | Color (optional) |
◢◤ Table border | ||
Border width | Border for table and pagination element. | Number (optional) |
Border color | Sets the border color for the table | Color (optional) |
Border radius | Sets the border radius for the table | Number (optional) |
Header background | Color of table’s header background | Color (optional) |
Search Box Position | The position of the search box Available options: TopRight, TopLeft, BottomRight, BottomLeft | Dropdown |
Search Box Background | Search Box Background | Color (optional) |
Search Box Border Color | Search Box Border Color | Color (optional) |
Search Box Border Radius | Search Box Border Radius | Number (optional) |
Search Box Text Color | Search Box Text Color | Color (optional) |
Character Limit | Defines the maximum number of characters to display in a table cell before truncating the text and appending an ellipsis (…). This ensures that the table remains visually clean and prevents overflow of lengthy text. | Number (optional) |
Enable Scroller | Provides virtual scrolling capabilities for large data sets, allowing the table to load data dynamically as the user scrolls, which can significantly improve performance for tables with many rows. | Checkbox (yes/no) |
Enable Checkbox Column | Controls whether a checkbox column is added to the DataTable. When enabled, each row will have a checkbox in the first column, allowing users to select rows. This feature is useful for performing batch operations on selected rows. | Checkbox (yes/no) |
Enable Right-Click Selection | Allows users to enable or disable the functionality of selecting a column or a row by right-clicking. When enabled, right-clicking on a table header will select the entire column, and right-clicking on the first cell of any row will select that row. | Checkbox (yes/no) |
Important:
Make sure that the font name is written correctly, ex: Arial, TahomaIf there are several dataTable elements on the page, you can set them for the different fonts.If the font is not one of the standard browser fonts or has not been used on the page before, the element will fall back to the standard font.
Important:
If there are several dataTable elements on the page, only one focus color can be set.
Colors are set in HEX value, ex: #EB4034, #12A83D
States
Title | Description | Type |
Row | Published when a row is clicked, containing the first element of the clicked row's data(usually the ID) | Text |
Error | Published when an error occurs. It can have two possible values:
A message indicating which fields should have been filled if there's a mismatch between the number of added rows and the number of fields.
The message "Trigger "Add" action before using "Refresh"" if an exception is caught. | Text |
List of styles | List of CSS classes applied to the table element. | Text |
Selected Rows | Published when rows are selected or deselected, containing a list of IDs from the selected rows. | Text |
Selected columns | Published when columns are selected or deselected (if right-click selection is enabled), containing a list of selected column indexes. | Number |
Events
Title | Description |
Row is clicked | Triggered when a row is clicked. |
Error Happened | Triggered when an error occurs, either due to a mismatch in the number of fields or when an exception is caught. |
Row is selected | Triggered when rows are selected or deselected. |
Column is selected | Triggered when columns are selected or deselected (if right-click selection is enabled). |
Element Actions
- Add - action to create a table.
Title | Description | Type |
Add columns | An array from the Database with keys and values | List of key/value reperesenting text |
Initial sort name | Column title for the initial sorting of the table | Text (optional) |
Sort | Available options: Increasing, Decreasing | Dropdown (optional) |
- Refresh - action to refresh the table with new data.
Title | Description | Type |
Update columns | An array from the Database with keys and values | List of key/value reperesenting text |
- CSV from - action to download the data in CSV.
- PDF from - action to download the data in PDF.
- Change style - action to change the table style.
Title | Description | Type |
Style | Available options: display, cell-border, compact, hover, order-column, row-border, stripe | Text |
1.
display- The display class is a short-cut for specifying the stripe hover order-column row-border as the class name for a table. This is shown in the example below.
2. cell-border - Cells with a border
3. compact - Increase the data density by reducing the cell padding
4. hover- Highlight a row when hovered over
5. order-column- Highlight the cells in the column currently being ordering upon
6. row-border- Rows with a border
7. stripe - Zebra striped rowsHow to use this plugin
IMPORTANT: Initialise the plugin element only with the "Page is loaded" event. Use the "Add Table A" action.
IMPORTANT: Date sorting is available only if the date is formatted as yyyy/mm/dd or yy/mm/dd
IMPORTANT: uniqueID MUST be the first field ONLY IF you want to use an on-click event.
In order to display the list of items correctly, when adding columns to the Table in workflow, at the end of the data item add join with and ",". See the image below.
Changelogs
Update: 08/11/2018:
On-click row added!
How to use: When the row is pressed, the Table Row event gets the unique id of that row. So doing a search for X: first item (in properties of the search we will use unique id= this row).
Refresh table after modifying the database:
IMPORTANT: You should use exactly the same number of columns (fields) search as in the initial add table event.
WARNING: Just like with the Add Table event, for the Refresh Table event, when adding columns to the Table in the workflow in order to display the list of items correctly, add join with and "," at the end of the data item.
Update: 08/30/2018 –
- Added support to multiple dataTables on the same page.
- Bug fixes.
Update: 09/06/2018 –
- Bug fixes.
- Live edits are now supported:
Update: 09/15/2018 –
- Added export options: CSV and PDF.
Update: 09/23/2018 –
- Now dataTable supports empty DB or empty searches.
- Changed Row selector to a drop-down
- Improved responsive layout settings
- Added new feature to table options “Scroll collapse”
Update: 03/19/2019 –
- Updated Demo Page with on click events
- Updated links to Demo Page
Update: 07/22/2020 –
- Fixed Refresh a Table action
Update: 08/07/2020 –
- Modified standard table styles
- Deprecated max height and auto-resize proprieties in dataTable element.
Update: 09/18/2020 –
- Added optional Font propriety in dataTable element.
Important:
Make sure that the font name is written correctly, ex: Arial, TahomaIf there are several dataTable elements on the page, you can set them for the different fonts.If the font is not one of the standard browser fonts or has not been used on the page before, the element will fall back to the standard font.
- Added optional Focus color propriety in dataTable element for the Search input.
- Removed deprecated propriety fields from the dataTable element.
Update: 03/05/21
- Added new 'row-border' style and fixed input focus color.
Update: 16/01/24 - Version 2.46.0
- Added "Responsive" option and style fields.
Update: 25/06/24 - Version 2.50.0
- Searchbox styles, clip text, lazy loading on scroll, checkbox column and focus group on right-click
Update 01.11.24 - Version 2.54.0
- Fixed "Refresh" action bug.