View Categories

EA Advanced Data Table

3 min read

EA Advanced Data Table lets you create large Data-Sets on your WordPress website. You can create a data table with a huge number of entries. Moreover, you can import any large Data-Set in CSV format directly into your website using this element. Whether you manually input data or you import data from an external source, you can manually drag and adjust the width for individual row and column.

The biggest disadvantage of working with a huge data-set is, you have to make multiple scrolls to find entries that sit at the bottom of your table. This is why EA Advanced Data Table comes with a “Search” feature that lets you locate your required data using alphabetical and numerical search strings.

How to Activate EA Advanced Data Table #

To use this Essential Addons for Elementor element,

  1. First, find the ‘EA Advanced Data Table’ element from the Search option under the ‘ELEMENTS’ tab.
  2. Simply just Drag & Drop the ‘EA Advanced Data Table’ into the ‘Drag widget here’ or the ‘+’ section.

 

 

Static Data #

EA Advanced Data Table is by default set to Static Data, but you can choose which data table you want to display from the ‘Source’ drop-down menu option. Alternatively, you can manually insert your data-set right from the Elementor Editor.

EA Advanced Data Table

 

EA Advanced Data Table supports inline editing, so if you want you can edit the content for each individual cell directly inside the Advanced Data Table.

EA Advanced Data Table

From the Editor itself, you can easily add new columns or rows from here. If you want, you can even delete a certain row/column as well. Besides, you have the freedom to copy/paste/undo your data content too.

EA Advanced Data Table

Advanced Features #

Advanced Features lets you properly organize large data-sets. Using the toggle bar you can either turn on or off the Sort, Search and Pagination feature. If you keep the Pagination option toggled on, you can also dictate how many rows you want to display per page.

Advanced Data Table

Although these three features ‘Search’, ‘Sort’ and ‘Pagination’ can be seen as an alternative, they are actually complementary to each other. Enabling the Pagination feature means, your users will not have to make many vertical scrolls to reach data entries at the bottom of the table. Even if you decide to keep the Pagination feature off, you can keep the Sort and Search option toggled on to make sure your users can find what they are looking for in the least amount of time regardless of its position inside your Data Table.

Export or Import #

You can import CSV files directly into EA Advanced Data Table or export your table as well. For this demonstration, we are using a data-set with 101 rows (including row headers in the first row) and 14 Columns (including column headers in the first column).

How to Import CSV Data with EA Advanced Data Table #

  • Save your spreadsheet data in CSV format.
  • Launch your CSV file with Notepad, copy (Ctrl+C) all data from Notepad.

Advanced Data Table

  • Paste it inside the little box under the ‘Import’ option. If you want your first row as Header, then make sure to check ‘import first row as Header’.

Advanced Data Table

After you have successfully completed importing your CSV document, it will look something like this:

Advanced Data Table

How to Export CSV Data with EA Advanced Data Table #

You can export your data from EA Advanced Data Table.

  1. To do so, first hit the ‘Export’ button.
  2. EA Advanced Data Table will be downloaded in CSV format.

Advanced Data Table

How to Style EA Advanced Data Table #

Switch to the ‘Style’ tab to style all the features of  EA Advanced Data Table.

Table #

The “Table” section lets you adjust the border of the table, adjust its width as well as color.

Advanced Data Table

Head #

The “Head” section lets you adjust the font styling, Text color, alignment, background color and border for the Column Headers. You can also place a border around the header, adjust its width, padding, and color.

Advanced Data Table

Others #

The “Body” section lets you adjust the font styling, text color, alignment, background color and border for the Table entries. You can also place a border around the entries, adjust its width, padding, and color.

If you have a big data-set and want to highlight a set of table entries, you can do that too. From the “Highlight Row/Column” section pick what entries you want to highlight (use the drop-down menu) and how you want to highlight it (picking a different color for it)

The “Search” lets you adjust the Search Box for your data table. You can adjust the width, height and padding and margin for the Search box. Moreover, you can also adjust the Typography styling for the Search Box. Moreover, the “Pagination” section allows you to adjust the Padding and margin for the Pagination Box. Moreover, you can also adjust the Hover and Normal state Typography for your Pagination Box.

Advanced Data Table

Final Outcome #

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

Advanced Data Table

With the help of EA Advanced Data Table, this is how you can create amazing large data tables to fit in all your important data in one place.

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

Powered by BetterDocs

  • 00Days
  • 00Hours
  • 00Mins
  • 00Secs

Wait... before you go!

Checkout now to Save