Ability to sort on setting tables

[FelixMalfait]

We should be able to sort tables in settings.

Mostly SettingsObjects, SettingsObjectDetail, but also potentially other ones (e.g. webhooks/api keys)

We want to do this in a clean and generic way. Avoid having too much duplicated code :)

CC @Bonapara fyi if you want to add arrow up/down keys on table header upon click?

[greptile-apps]

Disclaimer: This comment was automatically generated with AI. It can give some useful hints as to where to look for, but sometimes it can also give very inaccurate answers so takes this with a pinch of salt :).

To implement sorting on tables in settings, follow these steps:

1. Modify SettingsObjects Component:

   • File: src/components/settings/SettingsObjects.js
   • Add state to manage sorting order and column.
   • Update the table headers to handle click events for sorting.
   • Implement sorting logic in the data rendering method.

2. Modify SettingsObjectDetail Component:

   • File: src/components/settings/SettingsObjectDetail.js
   • Similar to SettingsObjects, add state for sorting and update headers.
   • Implement sorting logic.

3. Modify SettingsWebhooksTable Component:

   • File: src/components/settings/SettingsWebhooksTable.js
   • Add sorting state and update headers for sorting.
   • Implement sorting logic.

4. Modify SettingsApiKeysTable Component:

   • File: src/components/settings/SettingsApiKeysTable.js
   • Add sorting state and update headers for sorting.
   • Implement sorting logic.

5. Create a Reusable Sorting Hook:

   • File: src/hooks/useSorting.js
   • Implement a custom hook to manage sorting state and logic.
   • Use this hook in the above components to avoid code duplication.

Example for useSorting.js:

import { useState } from 'react';

const useSorting = (initialColumn) => {
  const [sortConfig, setSortConfig] = useState({ key: initialColumn, direction: 'ascending' });

  const sortedData = (data) => {
    return [...data].sort((a, b) => {
      if (a[sortConfig.key] < b[sortConfig.key]) {
        return sortConfig.direction === 'ascending' ? -1 : 1;
      }
      if (a[sortConfig.key] > b[sortConfig.key]) {
        return sortConfig.direction === 'ascending' ? 1 : -1;
      }
      return 0;
    });
  };

  const requestSort = (key) => {
    let direction = 'ascending';
    if (sortConfig.key === key && sortConfig.direction === 'ascending') {
      direction = 'descending';
    }
    setSortConfig({ key, direction });
  };

  return { sortedData, requestSort, sortConfig };
};

export default useSorting;

Use the useSorting hook in your components to manage sorting state and logic.

References

[Bonapara]

Sorting should always be applied by default. Clicking on a header should change the sorting direction. Clicking on a different header should cancel and replace the previous sorting. The arrow should be on the right for text, relation, and tag headers, and on the left for number headers.

CleanShot.2024-06-07.at.17.47.17.mp4

https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=11519-270312&t=CaT8OmWYVmqhuf0a-11

[FelixMalfait]

Thanks! Adding "good first issue" tag as it doesn't require much context on the overall project but it needs to be someone experienced to do this well

[Anand-Krishnan-M-J]

Hey @Bonapara
Could you please assign this issue to me?
I would like to work on this.

[FelixMalfait]

Hey @Anand-Krishnan-M-J thanks 🙏

[Bonapara]

Hi @Anand-Krishnan-M-J, thanks for contributing & your PR draft! I was wondering, are you still on it?

[Anand-Krishnan-M-J]

@Bonapara

Yeah, I am still on it. Would it be okay if I update the PR by July 04?
I have a few doubts in some areas, especially as to why we would have to keep the key in the specific way as mentioned in the comments. Will add them as comments

[Bonapara]

@Anand-Krishnan-M-J Sure! Thanks a lot for working on it 😊

[Anand-Krishnan-M-J]

Updated PR: #5787