fix: detect datetime and handle timezones for pandas

frontend/src/components/data-table/__tests__/columns.test.tsx

@@ -225,7 +225,9 @@ describe("generateColumns", () => {
     // Assuming getCellStyleClass is a function that returns a class name
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const cell = (columns[0].cell as any)({
-      column: columns[0],
+      column: {
+        columnDef: columns[0],
+      },
       renderValue: () => "John",
       getValue: () => "John",
     });

frontend/src/components/data-table/__tests__/types.test.ts

@@ -26,5 +26,19 @@ describe("extractTimezone", () => {
     expect(extractTimezone("datetime[m,UTC]")).toBe("UTC");
     expect(extractTimezone("datetime[m,US/Eastern]")).toBe("US/Eastern");
     expect(extractTimezone("datetime[m,Europe/London]")).toBe("Europe/London");
+
+    // With spaces
+    expect(extractTimezone("datetime[ns, UTC]")).toBe("UTC");
+    expect(extractTimezone("datetime[ns, US/Eastern]")).toBe("US/Eastern");
+    expect(extractTimezone("datetime[m, Europe/London]")).toBe("Europe/London");
+  });
+
+  it("should return timezone for datetime64", () => {
+    expect(extractTimezone("datetime64[ns, UTC]")).toBe("UTC");
+    expect(extractTimezone("datetime64[ns, US/Eastern]")).toBe("US/Eastern");
+    expect(extractTimezone("datetime64[ns, Europe/London]")).toBe(
+      "Europe/London",
+    );
+    expect(extractTimezone("datetime64[m,US/Eastern]")).toBe("US/Eastern");
   });
 });

frontend/src/components/data-table/columns.tsx

@@ -7,6 +7,7 @@ import type { DataType } from "@/core/kernel/messages";
 import type { CalculateTopKRows } from "@/plugins/impl/DataTablePlugin";
 import { cn } from "@/utils/cn";
 import { exactDateTime } from "@/utils/dates";
+import { Logger } from "@/utils/Logger";
 import { Maps } from "@/utils/maps";
 import { Objects } from "@/utils/objects";
 import { EmotionCacheProvider } from "../editor/output/EmotionCacheProvider";
@@ -395,6 +396,20 @@ function renderAny(value: unknown): string {
   }
 }
 
+function renderDate(
+  value: Date,
+  dataType?: DataType,
+  dtype?: string,
+): React.ReactNode {
+  const type = dataType === "date" ? "date" : "datetime";
+  const timezone = extractTimezone(dtype);
+  return (
+    <DatePopover date={value} type={type}>
+      {exactDateTime(value, timezone)}
+    </DatePopover>
+  );
+}
+
 export function renderCellValue<TData, TValue>(
   column: Column<TData, TValue>,
   renderValue: () => TValue | null,
@@ -405,6 +420,23 @@ export function renderCellValue<TData, TValue>(
   const value = getValue();
   const format = column.getColumnFormatting?.();
 
+  const dataType = column.columnDef.meta?.dataType;
+  const dtype = column.columnDef.meta?.dtype;
+
+  if (dataType === "datetime" && typeof value === "string") {
+    try {
+      const date = new Date(value);
+      return renderDate(date, dataType, dtype);
+    } catch (error) {
+      Logger.error("Error parsing datetime, fallback to string", error);
+    }
+  }
+
+  if (value instanceof Date) {
+    // e.g. 2010-10-07 17:15:00
+    return renderDate(value, dataType, dtype);
+  }
+
   if (typeof value === "string") {
     const stringValue = format
       ? String(column.applyColumnFormatting(value))
@@ -450,20 +482,6 @@ export function renderCellValue<TData, TValue>(
     );
   }
 
-  if (value instanceof Date) {
-    // e.g. 2010-10-07 17:15:00
-    const type =
-      column.columnDef.meta?.dataType === "date" ? "date" : "datetime";
-    const timezone = extractTimezone(column.columnDef.meta?.dtype);
-    return (
-      <div onClick={selectCell} className={cellStyles}>
-        <DatePopover date={value} type={type}>
-          {exactDateTime(value, timezone)}
-        </DatePopover>
-      </div>
-    );
-  }
-
   const mimeValues = getMimeValues(value);
   if (mimeValues) {
     return (

frontend/src/components/data-table/types.ts

@@ -60,9 +60,9 @@ export function extractTimezone(dtype: string | undefined): string | undefined {
   if (!dtype) {
     return undefined;
   }
-  // Check for datetime[X,Y] format
+  // Check for datetime[X,Y] and datetime64[X,Y] format
   // We do this for any timezone-aware datetime type
   // not just UTC (as this is what Polars does by default)
-  const match = /^datetime\[[^,]+,([^,]+)]$/.exec(dtype);
+  const match = /^datetime(?:64)?\[[^,]+,([^,]+)]$/.exec(dtype);
   return match?.[1]?.trim();
 }

marimo/_plugins/ui/_impl/tables/pandas_table.py

@@ -254,7 +254,7 @@ def get_field_type(
                     return ("string", dtype)
                 if dtype == "bool":
                     return ("boolean", dtype)
-                if dtype == "datetime64[ns]":
+                if dtype.startswith("datetime"):
                     return ("datetime", dtype)
                 if dtype == "date":
                     return ("date", dtype)

tests/_plugins/ui/_impl/tables/test_pandas_table.py

@@ -1064,6 +1064,17 @@ def test_get_field_types_with_datetime(self):
                     datetime.time(4, 5, 6),
                     datetime.time(7, 8, 9),
                 ],
+                "datetime_tz_col": [
+                    datetime.datetime(
+                        2021, 1, 1, tzinfo=datetime.timezone.utc
+                    ),
+                    datetime.datetime(
+                        2021, 1, 2, tzinfo=datetime.timezone.utc
+                    ),
+                    datetime.datetime(
+                        2021, 1, 3, tzinfo=datetime.timezone.utc
+                    ),
+                ],
             }
         )
         manager = self.factory.create()(data)
@@ -1074,6 +1085,10 @@ def test_get_field_types_with_datetime(self):
             "datetime64[ns]",
         )
         assert manager.get_field_type("time_col") == ("string", "object")
+        assert manager.get_field_type("datetime_tz_col") == (
+            "datetime",
+            "datetime64[ns, UTC]",
+        )
 
     def test_get_sample_values(self) -> None:
         df = pd.DataFrame({"A": [1, 2, 3, 4], "B": ["a", "b", "c", "d"]})