PPM site
Just another New Help App Staging Sites site
Advanced Data Table widget 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 Advanced Data Table comes with a “Search” feature that lets you locate your required data using alphabetical and numerical search strings.
To add a table in your page,
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.
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.
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.
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.
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.
You can import CSV files directly into 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).
After you have successfully completed importing your CSV document, it will look something like this:
You can export your data from Advanced Data Table.
Switch to the ‘Style’ tab to style all the features of Advanced Data Table.
The “Table” section lets you adjust the border of the table, adjust its width as well as color.
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.
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.
By following the basic steps and a bit more modifying, you can style your Advanced Data Table as per your preference.
With the help of Advanced Data Table, this is how you can create amazing large data tables to fit in all your important data in one place.
Step-by-Step Instruction on how to connect your Google Spreadsheet with Advanced Data Table:
You just have to create ‘Credentials’ to generate and set the ‘API Key’, ‘OAuth client ID’, and ‘Refresh Token’ in the settings.
To do that, simply go to the Google Developers Console to generate your Google Sheet API. Afterward, you need to create a project and give it a name by clicking on the ‘New Project’ from the Dashboard.
Then click on the ‘Enable APIS and Services’ section to go to the Google Sheet API portion to enable it.
After successfully finishing the previous step, Let’s enable ‘Goole Sheet API’ from ‘API Library’ dashboard.
Afterward, just click on the ‘Create Credential’ option to get your ‘API Key’.
This is how the API Key will appear after clicking on the API Key section.
Now, let’s collect your Sheet ID from the top of your Google Sheet. The ‘Sheet ID’ is the value between the “/d/” and the “/edit” in the URL of your spreadsheet.
Then, pick your Table Range from the Google Sheet which you want to display on your Advanced Data Table.
Note: You should share your Google Sheet on the public and make it visible on your website. To do that, you have to go to the Google Sheet>File>Share>Public on the web (Anyone with the Link can open it) and make the changes.
Now, choose the source to ‘Google Sheet’. Then copy and paste the ‘API Key’, ‘Sheet ID’, and ‘Table Range’ and it will automatically display the table on your Advanced Data Table.
Powered by BetterDocs