> For the complete documentation index, see [llms.txt](https://bubble.digital-bird.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bubble.digital-bird.com/plugins/tables-grids-excel.md). # Advanced Dynamic Tables 🚀 ## 🔗 Links > [Demo 1(Default theme)](https://digitaleyedemo.bubbleapps.io/datatable) | [Editor](https://bubble.io/page?type=page\&name=datatable\&id=digitaleyedemo\&tab=tabs-1) > [Demo 2 (Semantic UI theme)](https://digitaleyedemo.bubbleapps.io/datatable-semanticui) | [Editor](https://bubble.io/page?type=page\&name=datatable-semanticui\&id=digitaleyedemo\&tab=tabs-1) > [Demo 3 (5000 records)](https://digitaleyedemo.bubbleapps.io/version-test/datatable-large) | [Editor](https://bubble.io/page?type=page\&name=datatable-large\&id=digitaleyedemo\&tab=tabs-1) > [Plugin Page](https://bubble.io/plugin/excel-like-data-table-and-grid-1617804294068x151014387640434700) > [Forum](https://forum.bubble.io/t/plugin-release-advanced-dynamic-tables-for-bubble-excel-like/145600) ## ℹ️ Introduction Populate your table with data and update data dynamically at any time. Update any table's option dynamically without page reloads. Includes sorting, search and pagination out of the box. ## 🔥 Main Features * Two styling themes * Conditional formatting 🎨 * Large data support * Row selection * Columns reordering * Populate your table with data dynamically at any time without page reloads * Responsive table automatically adapts to any screen size * Multiple styling options: hoverable rows, compact mode, striped rows, borders etc * 84 languages included * Row click event returns row id so you can edit / remove your data * Advanced settings (enable/disable search for some columns, enable/disable sorting for some columns, ...) Please check our demos and documentation for more features! ## 📚 Documentation ### ➡️ Plugin actions, events and states Actions: * Populate: provide data to the table * Export: export table data to CSV * Set Language: Change table language * Refresh table * Destroy: remove the table * Order column: choose a column to sort * Add Conditional Formatting * Clear Conditional Formatting Events: * Row clicked * Row selected * Row deselected * Column reordered * Table drawn: table fully rendered on the page States: * Clicked row (text): row unique id * Search term (text): current value in the search box * Selected rows: list of selected rows ### ➡️ Add table on the page Install the plugin and add a *DataTable* element on the page. ![](/files/-MZ9lMLl9iBdzVdnO-y1) You have a bunch of options to customize your table. Most of them are dynamic which means you can change them at any time in your app (just like in our demo). | | Option | Type | Description | | ------------------------------ | ------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **General** | Theme | Dropdown | Plugin supports 2 styling themes: Default and Semantic UI | | | Language | Dropdown | Table captions language | | **Search** | Enable search | Yes/No | Enable or disable table searching | | | Limit searchable cols | String | Disable search on the data in certain columns. Comma-separated column indexes: "1,2,4" | | **Ordering** | Enable ordering | Yes/No | Enable or disable column sorting | | | Limit orderable cols | String | Disable ordering for certain columns. Comma-separated column indexes: "1,2,4" | | | Default ordering (column) | Number | Column index (1,2 etc) that will be ordered by default. Can be empty | | | Ascending order | Yes/No | 'Yes' for Ascending order; 'No' for Descending order (used for default ordering) | | **Pagination** | Enable pagination | Yes/No | Enable or disable table pagination | | | Length change | Yes/No | Feature control the end user's ability to change the paging display length of the table | | | Nb of records per page | String | Possible options to choose for the number of records per page. Comma-separated values: "25,50,100". "Show All" option is inserted automatically. | | | "Show all" localization | String | If the custom number of results per page is defined above, this field allows to translate the "Show All" option if need. | | **Row selection** | Selectable rows | Dropdown | Possible values are : Disabled, Single, Multi, OS. Multi and OS allows to select multiple rows in a slightly different way | | | Blur selection | Checkbox | Deselect the selected items automatically when the user moves focus outside of the table | | **Other** | Show info | Yes/No | Show/hide table information display field (number of entries) | | | Reorderable columns | Yes/No | Enable/Disable column sorting | | | Hidden columns | String | Columns to hide. Format: "1,2,4" (comma-separated column indexes) | | | Horizontal scrolling | Yes/No | Enable horizontal scrolling. When a table is too wide to fit into a certain layout, or you have a large number of columns in the table, you can enable horizontal (x) scrolling to show the table in a viewport, which can be scrolled. This is particularly useful when you want to show the table on mobile devices | | | Large data | Checkbox | You may want to use this mode to render thousands of rows | | **Styles (all themes)** | Striped rows | Yes/No | Changes background color of all the odd rows in the table. More info: | | | Cell border | Yes/No | Strong delineation between individual cells. More info: | | | Compact mode | Yes/No | Reduces the amount of white-space in the default styling, increasing the information density on screen. More info: | | | Row selected | Color picker | Row selected color | | | Control text | Color picker | Control text color | | **Styles (Default theme)** | Scroll collapse | Yes/No | Allow the table to reduce in height when a limited number of rows are shown. More info: | | | Hoverable rows | Yes/No | Highlight a row when the mouse is hovered over it. More info: | | | Order column | Yes/No | Highligth the columns to indicate the sorting. More info: | | | Row borders | Yes/No | Strong delineation between rows. More info: | | **Styles (Semantic UI theme)** | Inverted | Yes/No | Invert table colors | | | Table color | String | A table can be given a color to distinguish it from other tables. Possible values are: red \| orange \| yellow \| olive \| green \| teal \| blue \| violet \| purple \| pink \| brown \| grey \| black | ### ➡️ Populate table with data You should populate your table in the workflow. Call the "Populate" action (for example, from the "Page is loaded" event): ![](/files/-MXmbQTXONBl7w_zzrRk) Define all the **column** names and data. Please note that the column data must be a string separated by the **","** sequence (comma between double quotes). **Row IDs** field is optional but if you are planning to use the "Row clicked" event (see below) you must provide it. It defines a unique ID for each row. Clicking on a row will trigger the "Row clicked" event which will provide a row id value. ### ➡️ Update table data Simply call the "Populate" action anytime when your source data is changed. ### ➡️ Themes and Styling Plugin supports 2 themes: Default and Semantic UI. It also supports many styling options defined above. Check our [Demo1(Default theme)](https://digitaleyedemo.bubbleapps.io/datatable) and [Demo2 (Semantic UI theme)](https://digitaleyedemo.bubbleapps.io/datatable-semanticui) to check how both themes look like. ### ➡️ Export table data to a file Call the "Export" action from your Workflow: ![](/files/-MXmamGkMRoIP7cKcQ4S) Choose a filename and export format. Only CSV format is available at this moment. We have planned to add exporting to PDF very soon! ### ➡️ Row click event To use this event, you need to provide the "Row IDs" field when populating your table with data. Therefore each of your rows will have a unique ID. Clicking on a row will produce an event "**Row clicked**" so you can catch it in the workflow: ![](/files/-MXm_XyYMIhlDjvBPwhT) Now you can access the "**Clicked row**" state with the row id: ![](/files/-MXm_pjuGDxUJNEJFoZE) ### ➡️ Search Term state You can access the current search term ("new york" on the image below) by reading the "Search Term" state. ![](/files/-MY14erl9bGjFvg6s0Ua) ### ➡️ Conditional Formatting Conditional formatting allows you to automatically apply formatting: font colors, background colors, font weight to one or more cells based on the cell value. To do this, you’ll need to create a conditional formatting rule. Supported operations: =, <, >, !=, <=, >=, contains, doesn’t contain, startsWith, endsWith Supported styles: font color, background color, bold font 1\. Call the “Add Conditional Formatting” action, provide a column index, condition (operation + value to compare) and styles ![](/files/-MZP9hhJ4WlV8ZLdWfi6) 2\. Add one or several conditions to one or several columns 3\. Call the “Refresh” action ![](/files/-MZP9k_P5vxRFOaIWZIT) Result: ![](/files/-MZP9pKZsaa2zMpD-VXp) Check out our [DEMO 1](https://digitaleyedemo.bubbleapps.io/datatable) to see it in action. **Related action**: Clear conditional formatting ## 🙋‍♀️ FAQ ⁉️ ### **Q: Why my data is not showing?** **A:** If your data source is Bubble Database, first of all check your privacy rules. Also you can try to render the same set of the data (or just a number of found items) in another widget (text box / repeating group etc) to verify that you actually have access to the data. ![](/files/-MZP6ddCdU9Da5pQmlK7) If it doesn't help, most likely you should check the format of the provided data for every column (refer to the [Populate table with data](https://bubble.digital-bird.com/plugins/tables-grids-excel#populate-table-with-data) section) ### **Q: Can I add formatting for the cells data?** **A:** The plugin supports HTML code as the cells value. As long as you can generate HTML data, you are able to customize your cells: ![](/files/-MZP8_J6Q4abB3IKJgSL)