The DiviFlash table module for Divi offers a set of tools for managing and presenting tabular data. You can create and style informative tables with this module.
Content
Add New Item
To add a row and its content, click on the plus (+) icon that’s labeled as “Add New Item.” Doing so, you will be taken to the “Table Row Settings” where you can also style each row individually.
To learn more about styling each row, click here.
Settings
Enable responsive mode to optimize the table for smaller devices.
Background
Add a background color, gradient, image, and more to the table.
Admin Label
Change the module name or label if required which will only be visible to you.
Design
Table
Border options for the table container.
Head
Background, typography, and border options for the table’s header.
Body
Background, typography, and border options for the body of the table. You get different background options for the even and odd rows.
Foot
Background, typography, and border options for the table’s footer.
First Column
Background, typography, and border options for the first column of the table. You have the option to exclude the header and footer of the first column.
Last Column
Background, typography, and border options for the last column of the table. You have the option to exclude the header and footer of the last column.
Image
- Image Size: Adjust the size of the images you have used in the table.
- Image Cell Margin: Add custom margins to the cells where you’ve used images.
The rest of the options are for styling the image borders.
Icon
The same options as “Image” but for the icons you use in the table.
Link
Typography, background, and spacing options for the link texts in the table.
Border Style
Enable or disable different borders of the table.
Custom Spacing
Add custom paddings to different items of the table cell and its borders.
Sizing
Adjust the width, height, and alignment of the entire module.
Spacing
Add custom margin and padding to the entire module’s container.
Border
Border customization options for the whole module’s container. You have the option to style each border individually or all the borders together.
Box Shadow
Add a shadow effect to the entire module.
Filters
Add color filters to all the module items.
Animation
Apply a reveal animation effect to the table and customize the delay, duration, repeat, etc. of the animation.
Advanced
The default tab for all Divi modules to add custom CSS code, conditions, visibilities, etc.
Table Row Settings
Content
Content
- Columns: Input the content of your columns in the column editor. Type in to input the data. The data you input in the first line will go to the first column of your table. Press Enter to create the second column and type in the data you want to input there and so on.
To create an empty column use the HTML code for space ( ). If you want to use an icon, use this code <span class=”et-pb-icon”> icon code </span>. You can find a list of icon codes from here.
- Row Type: Choose the type of row you want it to be: a header, a footer, or a body.
- Use Badge: Toggle on to use a badge in the header. Submit the text and the position of the badge. Only available if you choose “Head” as “Row Type.”
Table Options
- Enable Row Merge: Enabling this option lets you merge rows. After enabling, you will also be able to choose which row and how many rows you want to merge.
- Enable Column Merge: Enabling this option lets you merge columns. After enabling, you will also be able to choose which column and how many columns you want to merge.
Admin Label
Change the module name or label if required which will only be visible to you.
Design
Row
Background and typography options for the row.
Icon
The same options as “Icon” in the “Table Settings.”
Link
The same options as “Link” in the “Table Settings.”
Badge
Background, typography, and border options for the badge used in the row.
Advanced
The default tab for all Divi modules to add custom CSS code, conditions, visibilities, etc.
Do You Still Have Questions?
If you still have questions, then contact our support team at support@diviflash.com
Is there a video or instructions on how to add an icon?
Hi Ryan,
Thanks for your comment. Unfortunately, there is no video tutorial on how to add an icon in the table module.
However, You can add icons by using the HTML code under the content section. You can also use the premade demo
layouts and explore the settings. You will find the premade demo layouts from the following URL- https://modules.diviflash.xyz/data-table/
If you need further assistance, you can contact our support team.
https://diviflash.freshdesk.com/
Regards,
Team DiviFlash
I’m looking for instructions for the table module and can’t find anything.
How do I get started with this module or how can I upload the premade demo layouts to understand the structure and way through them?
Thanks
Hi Nikos,
Thanks for your comment. You will find full documentation of the module here on “Table Overview”.
Every feature of the module has been described here. You can also use the premade demo layouts of the module
and can explore the settings.
To use the demo layouts, first of all, download the demo layout which you want to use. The layout will be downloaded as a JSON file.
You can import the JSON file to the Divi library. After importing the JSON file you can add it to your page.
If you need further assistance, you can contact our support team.
https://diviflash.freshdesk.com/
Regards,
Team DiviFlash
I see an area where columns can be merged but Im not understanding how to merge them. For example, I’d like to make my footer row just one column. The rest of the table has 4 columns. There aren’t any json files to download that have merged cells.
Can you help me? You can see what I mean in the url provided.
Thanks