Sort link columns

unosquare · May 8, 2024 · 3e1f184 · 3e1f184
1 parent daa597d
commit 3e1f184
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 18 deletions.
diff --git a/sample/data.ts b/sample/data.ts
@@ -24,11 +24,11 @@ export const defaultData = [
         null,
         0.05,
         false,
-        ['https://www.google.com', 'Google'],
+        ['https://www.unosquare.com', 'Unosquare'],
         'Small text',
     ],
     ['Maria', 'NY', new Date('2022-01-05'), 60, 40, 0, 0.55, false, '', 'Small text'],
-    ['Laura', 'Guadalajara', new Date('2022-01-06'), 25, 45, 100, 25, true, 'https://www.google.com', 'Small text'],
+    ['Laura', 'Guadalajara', new Date('2022-01-06'), 25, 45, 100, 25, true, 'https://www.unosquare.com', 'Small text'],
     ['Laura', 'Mexico', new Date('2022-01-07'), 25, 50, 100, 0.125, true, 'https://www.google.com', 'Small text'],
     [
         'Juan',
@@ -46,12 +46,17 @@ export const defaultData = [
 
 export const anotherDataSet = [
     [
-        'Juan',
+        ['https://www.google.com','Abasolo'],
         'Oaxaca',
         new Date('2022-01-08'),
     ],
     [
-        'Pepe',
+        ['https://www.google.com','Pepe'],
+        'Mexico',
+        new Date('2023-01-08'),
+    ],
+    [
+        'https://www.unosquare.com',
         'Mexico',
         new Date('2022-01-01'),
     ]

diff --git a/sample/index.tsx b/sample/index.tsx
@@ -62,7 +62,7 @@ const columns: TableColumn[] = [
 ];
 
 const extraColumns: TableColumn[] = [
-    { label: 'Name', sortOrder: 1, sortDirection: 'asc' },
+    { label: 'Name', dataType: 'link', sortOrder: 1, sortDirection: 'asc' },
     { label: 'City', disableSearch: true, excludeFromSort: true, textAlign: 'left' },
     { label: 'Date', dataType: 'date' },
 ];

diff --git a/src/Table/sortData.ts b/src/Table/sortData.ts
@@ -15,32 +15,47 @@ export const searchData = (search: string | undefined, newData: TableCellTypes[]
 
 const numericTypes: DataTypes[] = ['number', 'decimal', 'percentage', 'money', 'days', 'months', 'boolean'];
 
-const sortOneColumn = <T extends TableColumn>(
-    left: TableCellTypes[],
-    right: TableCellTypes[],
-    { sortOrder, dataType, sortDirection }: T,
-    getSortIndex: (order: number) => number,
-) => {
-    const sortColumn = getSortIndex(sortOrder ?? 0);
+const getArrayValueOrDefault = (value: TableCellTypes) =>
+    value instanceof Array && value.length > 1 ? value[1] : String(value);
 
-    if (left[sortColumn] === null) return 1;
-    if (right[sortColumn] === null) return -1;
+const sortColumnValue = (a: TableCellTypes, b: TableCellTypes, dataType: DataTypes | undefined) => {
+    if (dataType === 'link') {
+        const leftLink = getArrayValueOrDefault(a);
+        const rightLink = getArrayValueOrDefault(b);
 
-    const [a, b] = sortDirection === 'desc' ? [right, left] : [left, right];
+        const result = sortNumericString(leftLink, rightLink);
+        if (result !== 0) return result;
+    }
 
     if (dataType === 'date') {
-        const result = compareDates(String(a[sortColumn]), String(b[sortColumn]));
+        const result = compareDates(String(a), String(b));
 
         if (result !== 0) return result;
     }
 
     if (numericTypes.includes(dataType ?? 'string')) {
-        const result = Number(a[sortColumn]) - Number(b[sortColumn]);
+        const result = Number(a) - Number(b);
 
         if (result !== 0) return result;
     }
 
-    return sortNumericString(String(a[sortColumn]), String(b[sortColumn]));
+    return sortNumericString(String(a), String(b));
+};
+
+const sortOneColumn = <T extends TableColumn>(
+    left: TableCellTypes[],
+    right: TableCellTypes[],
+    { sortOrder, dataType, sortDirection }: T,
+    getSortIndex: (order: number) => number,
+) => {
+    const sortColumn = getSortIndex(sortOrder ?? 0);
+
+    if (left[sortColumn] === null) return 1;
+    if (right[sortColumn] === null) return -1;
+
+    const [a, b] = sortDirection === 'desc' ? [right, left] : [left, right];
+
+    return sortColumnValue(a[sortColumn], b[sortColumn], dataType);
 };
 
 export const searchFooter = <TDataIn extends Array<Record<string, unknown>> | Record<string, unknown>>(