first steps to fix calendar order

Author: RafaelGB

package.json

@@ -63,7 +63,7 @@
 		"react-dom": "18.2.0",
 		"react-csv": "2.2.2",
 		"react-popper": "2.3.0",
-		"@tanstack/react-table": "8.3.1",
+		"@tanstack/react-table": "8.3.3",
 		"@tanstack/match-sorter-utils": "8.1.1",
 		"react-select": "5.4.0",
 		"react-color": "2.19.3",

src/components/Table.tsx

@@ -5,7 +5,6 @@ import {
   getFilteredRowModel,
   getExpandedRowModel,
   ColumnDef,
-  ColumnResizeMode,
   ColumnOrderState,
   flexRender,
   Table,
@@ -29,7 +28,6 @@ import {
   ActionTypes,
   DatabaseCore,
   DatabaseLimits,
-  DnDConfiguration,
   MetadataColumns,
   ResizeConfiguration,
 } from "helpers/Constants";
@@ -54,6 +52,7 @@ const defaultColumn: Partial<ColumnDef<RowDataType>> = {
   maxSize: DatabaseLimits.MAX_COLUMN_HEIGHT,
   cell: DefaultCell,
   header: DefaultHeader,
+  sortingFn: "alphanumeric",
 };
 
 /**
@@ -179,6 +178,7 @@ export function Table(tableData: TableDataType) {
       columnSizing: columnSizing,
       sorting: sorting,
     },
+
     onSortingChange: setSorting,
     onColumnSizingChange: (updater) => {
       let list: ColumnSizingState = null;

src/components/portals/CalendarPortal.tsx

@@ -56,12 +56,17 @@ const CalendarPortal = (calendarProps: CalendarProps) => {
       popperContainer={CalendarContainer}
       onBlur={() => setShowDatePicker(false)}
       autoFocus
+      placeholderText="Pick a date..."
     />
   ) : (
-    <span className={`${c("calendar")}`} onClick={handleOnClick}>
+    <span
+      className={`${c("calendar")}`}
+      onClick={handleOnClick}
+      placeholder={"Pick a date..."}
+    >
       {DateTime.isDateTime(calendarState)
         ? (calendarState as unknown as DateTime).toFormat("yyyy-MM-dd")
-        : "Pick a date..."}
+        : null}
     </span>
   );
 };

src/components/portals/CalendarTimePortal.tsx

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