Merge pull request #303 from Vizzuality/SKY30-448-fe-names-starting-w…

…ith-an-accent-a-e-e-etc-not-sorted-correctly-in-the-tables Correctly sort accented strings in tables
Vizzuality · Sep 11, 2024 · 29301d4 · 29301d4
2 parents 6aa53ea + 95016d2
commit 29301d4
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/frontend/src/containers/map/content/details/table/index.tsx b/frontend/src/containers/map/content/details/table/index.tsx
@@ -7,7 +7,7 @@ import {
   getSortedRowModel,
   useReactTable,
 } from '@tanstack/react-table';
-import { useTranslations } from 'next-intl';
+import { useLocale, useTranslations } from 'next-intl';
 
 import { cn } from '@/lib/classnames';
 import { FCWithMessages } from '@/types';
@@ -16,6 +16,7 @@ import { FCWithMessages } from '@/types';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 const MapTable: FCWithMessages = ({ columns, data, columnSeparators = null }) => {
+  const locale = useLocale();
   const t = useTranslations('containers.map');
 
   const tableRef = useRef<HTMLTableElement>();
@@ -36,6 +37,13 @@ const MapTable: FCWithMessages = ({ columns, data, columnSeparators = null }) =>
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getExpandedRowModel: getExpandedRowModel(),
+    sortingFns: {
+      localeStringCompare: (rowA, rowB, columnId) =>
+        (rowA.original[columnId] as string).localeCompare(
+          rowB.original[columnId as string],
+          locale
+        ),
+    },
   });
 
   const hasData = table.getRowModel().rows?.length > 0;

diff --git a/frontend/src/containers/map/content/details/tables/global-regional/useColumns.tsx b/frontend/src/containers/map/content/details/tables/global-regional/useColumns.tsx
@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 
 import Link from 'next/link';
 
-import { ColumnDef } from '@tanstack/react-table';
+import { ColumnDef, SortingFnOption } from '@tanstack/react-table';
 import { useLocale } from 'next-intl';
 import { useTranslations } from 'next-intl';
 
@@ -38,6 +38,7 @@ const useColumns = () => {
     return [
       {
         accessorKey: 'location',
+        sortingFn: 'localeStringCompare' as SortingFnOption<GlobalRegionalTableColumns>,
         header: ({ column }) => (
           <HeaderItem className="ml-1">
             <SortingButton column={column} />

diff --git a/frontend/src/containers/map/content/details/tables/national-highseas/useColumns.tsx b/frontend/src/containers/map/content/details/tables/national-highseas/useColumns.tsx
@@ -1,6 +1,6 @@
 import { ComponentProps, useMemo } from 'react';
 
-import { ColumnDef } from '@tanstack/react-table';
+import { ColumnDef, SortingFnOption } from '@tanstack/react-table';
 import { useLocale, useTranslations } from 'next-intl';
 
 import FiltersButton from '@/components/filters-button';
@@ -53,6 +53,7 @@ const useColumns = ({ filters, onFiltersChange }: UseColumnsProps) => {
     return [
       {
         accessorKey: 'protectedArea',
+        sortingFn: 'localeStringCompare' as SortingFnOption<NationalHighseasTableColumns>,
         header: ({ column }) => (
           <HeaderItem className="ml-6">
             <SortingButton column={column} />