Table: Set state when columns property changed

[dnarey]

Description

Set 'columnOrder' state when new columns array provided to modus table. This change support column reordering when new columns were added after table's initial render.

References #2811

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?

Ran all unit and e2e tests using npm run test
Exploratory testing locally in index.html file

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	8f2f51d
🔍 Latest deploy log	https://app.netlify.com/sites/moduswebcomponents/deploys/66ce25cec32f530008297835
😎 Deploy Preview	https://deploy-preview-2812--moduswebcomponents.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 24 (🟢 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.

[dnarey]

@cjwinsor - Here's the code used for testing inside index.html:

 <!-- Test components -->
      <modus-card width="950px" height="100%">
        <p>
          Click on the <em>Add Column</em> button to generate a new auto-incremented column name and add it to table's
          <em>columns</em>.
        </p>
        <p>
          Once <em>Column Reordering</em> switch is enabled, any new columns created after initial render cannot be reordered
          with drag and drop or keyboard.
        </p>
      </modus-card>

      <div style="width: 950px">
        <modus-table
          hover="true"
          sort="true"
          column-resize="true"
          pagination="true"
          show-sort-icon-hover="true"
          toolbar="true" />
      </div>
      <br />
      <div style="display: flex; align-items: center; gap: 3rem">
        <modus-button id="change-columns" color="primary">Change Columns</modus-button>
        <modus-button id="add-column" color="secondary">Add Column</modus-button>
        <modus-switch label="Column Reordering"></modus-switch>
      </div>

      <script>
        // set toolbar options
        document.querySelector('modus-table').toolbarOptions = {
          columnsVisibility: {
            title: '',
            requiredColumns: ['first-name'],
            hiddenColumns: ['last-name'],
          },
        };

        // set initial table columns
        document.querySelector('modus-table').columns = [
          {
            header: 'First Name',
            accessorKey: 'firstName',
            id: 'first-name',
            dataType: 'text',
          },
          {
            header: 'Last Name',
            accessorKey: 'lastName',
            id: 'last-name',
            dataType: 'text',
          },
          { header: 'Age', accessorKey: 'age', id: 'age', dataType: 'integer' },
          {
            header: 'Visits',
            accessorKey: 'visits',
            id: 'visits',
            dataType: 'integer',
          },
          {
            header: 'Status',
            accessorKey: 'status',
            id: 'status',
            dataType: 'text',
          },
          {
            header: 'Profile Progress',
            accessorKey: 'progress',
            id: 'progress',
            dataType: 'integer',
          },
          {
            header: 'Created At',
            accessorKey: 'createdAt',
            id: 'createdAt',
            dataType: 'date',
          },
        ];

        // set table data
        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: 'Elliott',
            lastName: 'Bosco',
            age: 21,
            visits: 348,
            progress: 60,
            status: 'complicated',
            createdAt: '2012-02-08T12:14:22.776Z',
          },
          {
            firstName: 'Agnes',
            lastName: 'Breitenberg',
            age: 34,
            visits: 639,
            progress: 84,
            status: 'single',
            createdAt: '1995-04-07T07:24:57.577Z',
          },
          {
            firstName: 'Nicolette',
            lastName: 'Stamm',
            age: 13,
            visits: 518,
            progress: 28,
            status: 'relationship',
            createdAt: '2009-07-28T14:29:51.505Z',
          },
        ];

        // shuffle columns on button click
        document.querySelector('#change-columns').addEventListener('buttonClick', () => {
          const table = document.querySelector('modus-table');
          table.columns = getShuffledArr(table.columns);
        });

        // add a new column on button click
        let newColumnCount = 0;
        document.querySelector('#add-column').addEventListener('buttonClick', () => {
          newColumnCount++;
          const table = document.querySelector('modus-table');
          table.columns = [
            ...table.columns,
            {
              header: `New Column ${newColumnCount}`,
              accessorKey: `newColumn${newColumnCount}`,
              id: `new-column-${newColumnCount}`,
              dataType: 'text',
            },
          ];
        });

        // add reordering to table when switch is enabled
        document.querySelector('modus-switch').addEventListener('switchClick', (e) => {
          document.querySelector('modus-table').columnReorder = e.detail;
        });

        // return a new randomly shuffled array
        const getShuffledArr = (arr) => {
          const newArr = arr.slice();
          for (let i = newArr.length - 1; i > 0; i--) {
            const rand = Math.floor(Math.random() * (i + 1));
            [newArr[i], newArr[rand]] = [newArr[rand], newArr[i]];
          }
          return newArr;
        };
      </script>

[cjwinsor]

@prashanth-offcl I think this change is good. I think the drop arrow needs work as far as showing up where its actually dropped, but that's outside the scope of this ticket. I'm going to approve but not merge.