Column Width and Position Shifting During Pagination and Sorting

[r-jacko]

Issue Check list

• [x] Agree to the Code of Conduct
• [x] Read the README
• [x] You are using React 16.8.0+
• [x] You installed styled-components
• [x] Include relevant code or preferably a code sandbox

Describe the bug

If the component has pagination enabled, switching between different pages can sometimes cause column widths to change. However, the bigger issue arises when sorting is enabled. If a user clicks on a column to sort it, after the sorting function is executed, a completely different column may end up under their cursor. This issue occurs especially in tables with narrow columns (e.g., displaying short numeric data) or tables with a large number of columns.

To Reproduce

Steps to reproduce the behavior:

1. Open the default sandbox assigned to the GitHub issue template.
2. Adjust the slider separating the code view and preview.
3. Click on the 'Director' column to trigger sorting.
4. Notice how the columns change their width and their position along the X-axis.

Expected behavior

Columns should retain their width and position during both sorting and page changes in pagination. This is probably not feasible for server-side pagination, but maybe it can be adjusted when that option is disabled.

Code Sandbox, Screenshots, or Relevant Code

Default sandbox.

Here the issue is demonstrated on a smaller section of a larger table (1920px width monitor, just a lot of data)

Versions (please complete the following information)

• React (RDT requires 16.8.0+) → 18.2.0
• RDT → 7.6.2
• Styled Components → 5.3.11
• OS: [e.g. iOS] → W11
• Browser [e.g. chrome, safari, firefox] → Chrome, Brave, Firefox, basically anything