caMicroscope icon indicating copy to clipboard operation
caMicroscope copied to clipboard

Fixes #847: table duplication on mobile views due to multiple initializations

Open harshpreet14 opened this issue 3 months ago • 0 comments

** Summary**

This pull request resolves an issue where the responsive table implementation (using the stacktable plugin) was causing duplicate tables to be rendered on mobile devices. The changes ensure that only a single instance of the responsive table is present at any given time, preventing duplication and maintaining a consistent user experience across devices and refreshes.

Changes

  1. Added a check to remove existing .stacktable elements if they are present: Before initializing the stacktable plugin, the code now checks if any existing .stacktable elements exist in the DOM. If found, these elements are removed to prevent duplication.

  2. Cleared the table body (tbody) before new data is injected: To ensure a clean slate before rendering new data, the existing table body (tbody) is now emptied before the new rows are injected.

  3. Re-applied the stacktable plugin only if the table has not been previously stacked: The stacktable plugin is now initialized only if the table does not already have the stacktable class, preventing redundant initialization and potential conflicts.

image

Motivation

To fix a bug where mobile devices showed the same table twice after refreshing data. The goal is to make sure that the tables on mobile are shown correctly without any errors. Testing The changes have been thoroughly tested in the following scenarios:

  1. Refreshing data on mobile devices (both actual devices and desktop browser's responsive mode)
  2. Navigating between different views and re-rendering the table
  3. Resizing the browser window to trigger responsive behavior In all cases, the expected behavior of maintaining a single instance of the responsive table was consistently observed, with no duplication of tables or rendering issues.

harshpreet14 avatar Mar 22 '24 15:03 harshpreet14