T
TanStack•2y ago
absent-sapphire

Attempting to make a file-explorer like sorting table, issues keeping folders on top

    sortingFn: (rowA: Row<File>, rowB: Row<File>, columnId: string) => {
      const typeA = rowA.getValue("type");
      const typeB = rowB.getValue("type");
      const nameA = rowA.getValue("name");
      const nameB = rowB.getValue("name");

      // Check if both are folders or not
      const bothFolders = typeA === "folder" && typeB === "folder";
      const bothFiles = typeA !== "folder" && typeB !== "folder";

      // If both are either folders or files, sort alphabetically
      if (bothFolders || bothFiles) {
        if (nameA! < nameB!) return -1;
        if (nameA! > nameB!) return 1;
        return 0;
      }

      // Sort folders first
// HERE I need to somehow get sorting direction, and swap these values perhaps?
      if (typeA === "folder") return 1;
      if (typeB === "folder") return -1;

      // Default case - sort alphabetically for files
      if (nameA! < nameB!) return -1;
      if (nameA! > nameB!) return 1;
      return 0;
    }
    sortingFn: (rowA: Row<File>, rowB: Row<File>, columnId: string) => {
      const typeA = rowA.getValue("type");
      const typeB = rowB.getValue("type");
      const nameA = rowA.getValue("name");
      const nameB = rowB.getValue("name");

      // Check if both are folders or not
      const bothFolders = typeA === "folder" && typeB === "folder";
      const bothFiles = typeA !== "folder" && typeB !== "folder";

      // If both are either folders or files, sort alphabetically
      if (bothFolders || bothFiles) {
        if (nameA! < nameB!) return -1;
        if (nameA! > nameB!) return 1;
        return 0;
      }

      // Sort folders first
// HERE I need to somehow get sorting direction, and swap these values perhaps?
      if (typeA === "folder") return 1;
      if (typeB === "folder") return -1;

      // Default case - sort alphabetically for files
      if (nameA! < nameB!) return -1;
      if (nameA! > nameB!) return 1;
      return 0;
    }
This is my current sortingFn, is there any way for me to achieve this?
1 Reply
absent-sapphire
absent-sapphireOP•2y ago
interface ColSortingState {
  [columnId: string]: {
    isSorted: boolean;
    isSortedDesc: boolean;
  };
}

const sortingState: ColSortingState = {};
interface ColSortingState {
  [columnId: string]: {
    isSorted: boolean;
    isSortedDesc: boolean;
  };
}

const sortingState: ColSortingState = {};
    sortingFn: (rowA: Row<File>, rowB: Row<File>, columnId: string) => {
      const { isSorted, isSortedDesc } = sortingState[columnId]
      const typeA = rowA.getValue("type");
      const typeB = rowB.getValue("type");
      const nameA = rowA.getValue("name");
      const nameB = rowB.getValue("name");

      // Check if both are folders or not
      const bothFolders = typeA === "folder" && typeB === "folder";
      const bothFiles = typeA !== "folder" && typeB !== "folder";

      // If both are either folders or files, sort alphabetically
      if (bothFolders || bothFiles) {
        if (nameA! < nameB!) return -1;
        if (nameA! > nameB!) return 1;
        return 0;
      }

      // Sort folders first
      if (isSorted && isSortedDesc) {
        if (typeA === "folder") return 1;
        if (typeB === "folder") return -1;
      } else {
        if (typeA === "folder") return -1;
        if (typeB === "folder") return 1;
      }

      // Default case - sort alphabetically for files
      if (nameA! < nameB!) return -1;
      if (nameA! > nameB!) return 1;
      return 0;
    }
    sortingFn: (rowA: Row<File>, rowB: Row<File>, columnId: string) => {
      const { isSorted, isSortedDesc } = sortingState[columnId]
      const typeA = rowA.getValue("type");
      const typeB = rowB.getValue("type");
      const nameA = rowA.getValue("name");
      const nameB = rowB.getValue("name");

      // Check if both are folders or not
      const bothFolders = typeA === "folder" && typeB === "folder";
      const bothFiles = typeA !== "folder" && typeB !== "folder";

      // If both are either folders or files, sort alphabetically
      if (bothFolders || bothFiles) {
        if (nameA! < nameB!) return -1;
        if (nameA! > nameB!) return 1;
        return 0;
      }

      // Sort folders first
      if (isSorted && isSortedDesc) {
        if (typeA === "folder") return 1;
        if (typeB === "folder") return -1;
      } else {
        if (typeA === "folder") return -1;
        if (typeB === "folder") return 1;
      }

      // Default case - sort alphabetically for files
      if (nameA! < nameB!) return -1;
      if (nameA! > nameB!) return 1;
      return 0;
    }
Solved with this bit of code and changing the sorted values in onClick in the header, if anyone runs into this in the future

Did you find this page helpful?