PPM site
Just another New Help App Staging Sites site
EA 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.
To use this Essential Addons element, find the EA Data Table element from the Search option under the ‘ELEMENTS’ tab. Simply just Drag & Drop the ‘EA 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:
Under the ‘Content’ tab, you will find the ‘Header’ section.
From the Header section, you can select the first row of your table. You can choose your preferred Column Names, Column Spans & Header Icons.
You can also modify the Column Span to increase its width. Besides, you have the freedom to add your own CSS Class or ID to each of the Column. Then if you want, you can easily add custom CSS to the respective Class or ID.
You can enable Table Sorting option to sort your table elements alphabetically or numerically.
To add data entries, first, make sure the first entry is a Row entry. Afterward, fill up the row by inserting Columns entry.
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 Content Type & modify it.
After taking these above steps, this is how the EA Data Table would look like:
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.
From here, you can pick a general background color for the element, adjust the padding, margin, and radius. Afterwards, adjust the Table Header and Data padding.
From this section, you can adjust the Border Radius, Text color &t typography and alignment.
‘Content Style’ allows you to adjust the data entry fields in general. However, you can definitely keep separate layouts for even and odd entries.
By enabling the ‘’Responsive Table’ option, your table will be automatically responsive to small screens.
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 EA Data Table.
Powered by BetterDocs