Dynamic Page Navigation Sidebar

Overview

The Dynamic Page Navigation Sidebar Plugin enhances user experience by automatically scanning the page for all elements with the x-type-data-table class and generating a sidebar for easy navigation. Each table component is assigned a unique ID, allowing users to smoothly scroll to the corresponding section by clicking the sidebar links. Additionally, as users scroll, the active component is highlighted, improving visibility and accessibility across content-heavy pages.

Use Cases

• This plugin is ideal for pages containing multiple data tables, reports, or sections where users need a quick way to navigate between different components. It enhances usability for dashboards, reports, and any interface with multiple structured data views.

Installing the plugin

Prerequisites:

1. The page must have any component
2. The component must have an any fields
3. Javascript must be enabled (applicable if your're on trial account)

Step-by-Step Installation:

1. Navigate to the page with this component, this can be a parent or child page. 
2. Click on the Plugins
3. Find the Dynamic Page Navigation Sidebar Plugin
4. Select the any component
5. Select the any field

Removing the Plugin

To remove the plugin, find the Javascript code that is surrounted with a comment for the plugin name and delete the code. Do the same for the CSS as well.