fix sorting with nullables

Author: RafaelGB

src/cdm/HeaderActionModel.ts

@@ -1,4 +1,3 @@
-import { SortedType } from "cdm/DatabaseModel";
 import { HeaderMenuProps } from "cdm/HeaderModel";
 
 export type HeaderActionResponse = {

src/components/DefaultHeader.tsx

@@ -54,6 +54,7 @@ export default function DefaultHeader(headerProps: DatabaseHeaderProps) {
   const created: boolean = false;
   /** Properties of header */
   const { column, header, table } = headerProps;
+
   /** Column values */
   const { id, dataType, options, position, label, config } =
     column.columnDef as TableColumn;

src/components/Table.tsx

@@ -46,13 +46,14 @@ import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import TableCell from "components/TableCell";
 import getInitialColumnSizing from "components/behavior/InitialColumnSizeRecord";
+import customSortingFn from "components/behavior/CustomSortingFn";
 
 const defaultColumn: Partial<ColumnDef<RowDataType>> = {
   minSize: DatabaseLimits.MIN_COLUMN_HEIGHT,
   maxSize: DatabaseLimits.MAX_COLUMN_HEIGHT,
   cell: DefaultCell,
   header: DefaultHeader,
-  sortingFn: "alphanumeric",
+  sortingFn: customSortingFn,
 };
 
 /**

src/components/behavior/CustomSortingFn.ts

@@ -0,0 +1,34 @@
+import { Row } from "@tanstack/react-table";
+import { RowDataType } from "cdm/FolderModel";
+
+function customSortingFn(rowA: Row<RowDataType>, rowB: Row<RowDataType>, columnId: string): number {
+    const a = rowA.getValue(columnId);
+    const b = rowB.getValue(columnId);
+    if (areEqual(a, b)) {
+        return 0;
+    }
+    if (a == null) {
+        return -1;
+    }
+
+    if (b == null) {
+        return 1;
+    }
+
+    return fallback(a, b);
+}
+function areEqual(a: any, b: any): boolean {
+    // It is necessary?
+    if (a == null && b == null) {
+        return true;
+    }
+    return a === b;
+}
+
+function fallback(a: any, b: any): number {
+    return isNaN(a)
+        ? a.localeCompare(b)
+        : a - b;
+}
+
+export default customSortingFn;

src/components/portals/CalendarPortal.tsx

@@ -59,11 +59,7 @@ const CalendarPortal = (calendarProps: CalendarProps) => {
       placeholderText="Pick a date..."
     />
   ) : (
-    <span
-      className={`${c("calendar")}`}
-      onClick={handleOnClick}
-      placeholder={"Pick a date..."}
-    >
+    <span className={`${c("calendar")}`} onClick={handleOnClick}>
       {DateTime.isDateTime(calendarState)
         ? (calendarState as unknown as DateTime).toFormat("yyyy-MM-dd")
         : null}

src/components/portals/CalendarTimePortal.tsx

@@ -41,7 +41,7 @@ const CalendarTimePortal = (calendarTimeProps: CalendarProps) => {
   };
 
   return column.isMetadata ? (
-    <span className="calendar-time" placeholder="Pick a datetime">
+    <span className="calendar-time">
       {DateTime.isDateTime(calendarTimeState)
         ? (calendarTimeState as DateTime).toFormat("yyyy-MM-dd h:mm a")
         : null}