Data Table

How to Configure and Style EA Data Table #

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.

Table of Contents: #

  1. How to Activate Data Table
  2. How to Configure the Content Settings
    2.1. Header
    2.2. Content
  3. How to Style Data Table
    3.1. General Style
    3.2. Header Style
    3.3. Content Style
    3.4. Responsive Options
  4. Final Outcome

1. How to Activate Data Table #

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.

Data Table

After you are successfully done with this step, this is how the element is going to look like:

Data Table

2. How to Configure the Content Settings #

Under the ‘Content’ tab, you will find the ‘Header’ section.

2.1. Header #

From the Header section, you can select the first row of your table. You can choose your preferred Column Names, Column Spans & Header Icons.

Data Table

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.

Data Table

You can enable Table Sorting option to sort your table elements alphabetically or numerically.

Data Table

2.2. Content #

To add data entries, first, make sure the first entry is a Row entry. Afterward, fill up the row by inserting Columns entry.

Data Table

Make sure the number of Column entries after the First-Row entry matches the number of Header columns.

Data Table

You can change both the Column & Row Span from this section. You can also choose a Content Type & modify it.Data Table

After taking these above steps, this is how the EA Data Table would look like:

Data Table

Click to See Live Demo #

3. How to Style Data Table #

Switch to the Styletab 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.

3.1. General Style #

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.

Data Table

3.2. Header Style #

From this section, you can adjust the Border Radius, Text color &t typography and alignment.

Data Table

3.3. Content Style #

‘Content Style’ allows you to adjust the data entry fields in general. However, you can definitely keep separate layouts for even and odd entries.

Data Table

3.4. Responsive Options #

By enabling the ‘’Responsive Table’ option, your table will be automatically responsive to small screens.

Data Table

4. Final Outcome #

By following the basic steps and a bit more modifying, you can style your Data Table as per your preference.

Data Table

This is how you can easily design a nice looking table filled with important information using EA Data Table.

Getting stuck? Feel to Contact Our Support for further assistance.

Get Started Now

Powered by BetterDocs