Table: Option to validate and pass error message for each table cell

[prashanthr6383]

Description

References

Fixes #2798, #2810

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?

<div style="width: 950px">
  <modus-table hover="false" sort="false"></modus-table>
</div>
<script>
  const tableElem = document.querySelector('modus-table');
  const columns = [
    { header: 'First Name', accessorKey: 'firstName', id: 'first-name', dataType: 'text', cellEditable: true },
    { header: 'Last Name', accessorKey: 'lastName', id: 'last-name', dataType: 'text', cellEditable: true },
    { 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', cellEditable: true },
  ];
  const data = [
    {
      id: 'd1',
      firstName: 'Gordon',
      lastName: 'Lemke',
      age: 40,
      visits: 434,
      progress: 97,
      status: 'single',
      createdAt: '2002-11-21T12:48:51.739Z',
      priority: 'Low',
    },
    {
      id: 'd2',
      firstName: 'Elliott',
      lastName: 'Bosco',
      age: 21,
      visits: 348,
      progress: 60,
      status: 'complicated',
      createdAt: '2012-02-08T12:14:22.776Z',
      priority: 'High',
    },
  ];

  tableElem.columns = columns;
  tableElem.data = data;

  // Function to update error text
  function updateErrorText(errors, rowId, accessorKey, errorMessage) {
    // Update or remove the errors for the specific accessorKey in the row
    if (errorMessage) {
      errors[rowId] = { ...errors[rowId], [accessorKey]: errorMessage };
    } else {
      if (Object.keys(errors[rowId]).length === 1) {
        delete errors[rowId]; // Remove the specific accessorKey entry if no error message
      } else {
        delete errors[rowId][accessorKey]; // Remove the specific accessorKey entry if no error message
      }
    }
    return { ...errors }; // Return a new array with updated errors
  }

  // Handle cell input value change event
  tableElem.addEventListener('cellInputValueChange', (e) => {
    const modusTable = tableElem;
    const { newValue, row, accessorKey } = e.detail;
    let updatedErrors = modusTable.errors || {}; // Use the current errors

    if (accessorKey === 'firstName' || accessorKey === 'lastName') {
      // Validate input: only letters and spaces allowed
      const pattern = /^[a-zA-Z\s]*$/;
      const regex = new RegExp(pattern);

      if (!regex.test(newValue)) {
        updatedErrors = updateErrorText(
          updatedErrors,
          row.id ?? row.index,
          accessorKey,
          'Only letters and spaces are allowed!'
        );
      } else {
        updatedErrors = updateErrorText(updatedErrors, row.id ?? row.index, accessorKey, ''); // Clear error if valid
      }
    }

    console.log('updatedErrors', updatedErrors);
    modusTable.errors = updatedErrors; // Update table with modified errors
  });
</script>

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!

Name	Link
🔨 Latest commit	34c5861
🔍 Latest deploy log	https://app.netlify.com/sites/moduswebcomponents/deploys/66d07440e8c98000088e6b5f
😎 Deploy Preview	https://deploy-preview-2813--moduswebcomponents.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 24 (no change 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.