Data Table
How to Configure and Style Elementor Data Table #
Elementor Data Table is going to help you design a well-structured & flexible table with lots of customization options with ease. You are able to display comparison or statistical data using this element. Besides, it allows you to create amazing comparison tables as well.
How to Activate Data Table #
To use this Spexo Elementor Addons element, find the Data Table element from the Search option under the ‘ELEMENTS’ tab. Simply just Drag & Drop the ‘Data Table’ into the ‘Drag widget here’ section.
After you are successfully done with this step, this is how the element is going to look like:
How to Configure the Content Settings #
To configure the content of your Data Table, simply click on the ‘Content’ tab.
General #
From the General section, you can use the toggle to enable/disable the ‘equal column width, table row index, prevent word wrap ’ option. Moreover, you can export table as a CSV file.
Header #
From this section, you are able to add the items which you want to display in data table header. Allows you to define the title, color, background color, col span and alignment. To add more header items, simply click on the ‘+ ADD ITEM’ button from the bottom.
Moreover, Use the toggle to enable/disable the ‘Media’ option. You change media type (Icon and Image). If you can choose Image option then you customize to icon color. If you can choose Image option then you customize image size. You can also change media position (Left, Right, Top and Bottom) as well.
Content #
Make sure the number of Column entries after the First-Row entry matches the number of Header columns. You can change both the Column & Row Span from this section. You can also choose a Row Type & modify it. Besides, you can change color, background color and alignment. You can also set content URL which you can redirect your visitors to any page on your site. To add more content items, simply click on the ‘+ ADD ITEM’ button from the bottom.
Moreover, Use the toggle to enable/disable the ‘Media’ option. You change media type (Icon and Image). If you can choose Image option then you customize to icon color. If you can choose Image option then you customize image size. You can also change media position (Left, Right, Top and Bottom) as well.
Click to see Live Demo #
How to Style Data Table #
Switch to the ‘Style‘ tab to style all the Elements of Data Table. You can change the ‘Background Color’, ‘Header Style’, ‘Content Style’, ‘Border’, ‘Typography’ and many more from this section.
General Style #
From here, you can set a minimum width of table and transition duration. you can add Border & add styling to it as well.
Header #
From the ‘Header’ section under the style tab, you can change the color and background color with normal and hovered options. You can also change icon size, padding, typography, alignment and image or icon margin as well.
Content #
From the ‘content’ section, you can change the Odd Rows ‘color and background color’, Even Rows ‘color and background color’ with hovered and normal options. You can also change icon size, image size, typography, padding, alignment, image border radius and image or icon margin as well.
Final Outcome #
By following the basic steps and a bit more modifying, you can style your Data Table as per your preference.
This is how you can easily design a nice looking table filled with important information using Data Table.
Getting stuck? Feel to Contact Our Support for further assistance.
Functional Always active
Preferences
Statistics
Marketing
Subscribe & Download
Enter Your Email Address to Know About the Latest Updates & Features.