Sort & Filter by Emails - Sort by Name (identifer) about twenty HOT 2 OPEN

To implement sorting by email and name for the People object, follow these steps:

1. Update Sorting Logic:

   • Modify the sorting logic in src/components/PeopleTable/PeopleTable.js to include sorting by email and name.

   // Add sorting functions
   const sortByEmail = (a, b) => a.email.localeCompare(b.email);
   const sortByName = (a, b) => a.name.localeCompare(b.name);
   
   // Update sorting logic
   const handleSort = (column) => {
     let sortedData;
     switch (column) {
       case 'email':
         sortedData = [...data].sort(sortByEmail);
         break;
       case 'name':
         sortedData = [...data].sort(sortByName);
         break;
       default:
         sortedData = [...data];
     }
     setData(sortedData);
   };

2. Update Column Header Menu:

   • Ensure the column header menu in src/components/PeopleTable/PeopleTableHeader.js allows sorting by email and name.

   // Add menu items for sorting
   <MenuItem onClick={() => handleSort('email')}>Sort by Email</MenuItem>
   <MenuItem onClick={() => handleSort('name')}>Sort by Name</MenuItem>

3. Handle Click Events:

   • Update the click event handler in src/components/PeopleTable/PeopleTableHeader.js to open the column header menu when clicking anywhere on the first column header except the "+" icon.

   const handleHeaderClick = (e) => {
     if (!e.target.closest('.plus-icon')) {
       openColumnHeaderMenu();
     }
   };

4. CSS Adjustments:

   • Ensure the CSS in src/components/PeopleTable/PeopleTableHeader.css supports the new click behavior.

   .plus-icon {
     pointer-events: none;
   }

References

from twenty.

same!

from twenty.