Table: Fix issue with column sort not being visible when resized too small

[austinoneil]

Description

References ##2309

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update

How Has This Been Tested?

Tested using the following HTML in the body of index.html:

<div style="width: 950px">
  <modus-table column-resize="true" />
   </div>
    <script>
       document.querySelector('modus-table').columns = [
         {
           header: 'First Name',
           accessorKey: 'firstName',
           id: 'first-name',
           dataType: 'text',
           size: 150,
           minSize: 80
         },
         {
           header: 'Last Name',
           accessorKey: 'lastName',
           id: 'last-name',
           dataType: 'text',
           size: 150,
           minSize: 80
         },
         {
           header: 'Age',
           accessorKey: 'age',
           id: 'age',
           dataType: 'integer'
         },
         {
           header: 'Visits',
           accessorKey: 'visits',
           id: 'visits',
           dataType: 'integer',
           maxSize: 80,
           minSize: 80,
           enableResizing: false,
         },
         {
           header: 'Status',
           accessorKey: 'status',
           id: 'status',
           dataType: 'text',
           minSize: 80
         },
         {
           header: 'Profile Progress',
           accessorKey: 'progress',
           id: 'progress',
           dataType: 'integer',
           minSize: 100,
         },
         {
           header: 'Created At',
           accessorKey: 'createdAt',
           id: 'createdAt',
           dataType: 'date',
           size: 210,
           minSize: 100,
         },
       ];
       document.querySelector('modus-table').data = [
         {
           firstName: 'Gordon',
           lastName: 'Lemke',
           age: 40,
           visits: 434,
           progress: 97,
           status: 'single',
           createdAt: '2002-11-21T12:48:51.739Z',
         }, {
           firstName: 'Gordon',
           lastName: 'Freeman',
           age: 42,
           visits: 434,
           progress: 97,
           status: 'single',
           createdAt: '2002-11-21T12:48:51.739Z',
         }, {
           firstName: 'Jeff',
           lastName: 'Gordon',
           age: 40,
           visits: 434,
           progress: 97,
           status: 'single',
           createdAt: '2002-11-21T12:48:51.739Z',
         }
       ];
       document.querySelector('modus-table').sort = true;
     </script>

Below is a demo:

modus-table-resize.mov

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules
• I have checked my code and corrected any misspellings

[netlify]

✅ Deploy Preview for moduswebcomponents ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	43ae1d3
🔍 Latest deploy log	https://app.netlify.com/sites/moduswebcomponents/deploys/660f0b67f429c800079ebea8
😎 Deploy Preview	https://deploy-preview-2408--moduswebcomponents.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 27 (🟢 up 1 from production) Accessibility: 98 (no change from production) Best Practices: 92 (no change from production) SEO: 92 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[austinoneil]

@cjwinsor This is the correct PR.

[cjwinsor]

@austinoneil ty!