fix dates rendering in table (#7361)

## 📝 Summary

<!--
Provide a concise summary of what this pull request is addressing.

If this PR fixes any issues, list them here by number (e.g., Fixes
#123).
-->

Fixes #7333 . Some values were not valid dates like 'NaT', 'NaN'.

## 🔍 Description of Changes

<!--
Detail the specific changes made in this pull request. Explain the
problem addressed and how it was resolved. If applicable, provide before
and after comparisons, screenshots, or any relevant details to help
reviewers understand the changes easily.
-->

## 📋 Checklist

- [x] I have read the [contributor
guidelines](https://github.com/marimo-team/marimo/blob/main/CONTRIBUTING.md).
- [ ] For large changes, or changes that affect the public API: this
change was discussed or approved through an issue, on
[Discord](https://marimo.io/discord?ref=pr), or the community
[discussions](https://github.com/marimo-team/marimo/discussions) (Please
provide a link if applicable).
- [x] I have added tests for the changes made.
- [x] I have run the code and verified that it works as expected.

Author: Light2Dark

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

@@ -1,10 +1,16 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
+import type { Column } from "@tanstack/react-table";
 import { render } from "@testing-library/react";
 import { I18nProvider } from "react-aria";
 import { describe, expect, it, test } from "vitest";
 import { TooltipProvider } from "@/components/ui/tooltip";
-import { generateColumns, inferFieldTypes, LocaleNumber } from "../columns";
+import {
+  generateColumns,
+  inferFieldTypes,
+  LocaleNumber,
+  renderCellValue,
+} from "../columns";
 import { getMimeValues, isMimeValue, MimeCell } from "../mime-cell";
 import type { FieldTypesWithExternalType } from "../types";
 import { uniformSample } from "../uniformSample";
@@ -519,3 +525,161 @@ describe("LocaleNumber", () => {
     expect(container.textContent).toMatchInlineSnapshot(`"10,000,000,000"`);
   });
 });
+
+describe("renderCellValue with datetime values", () => {
+  const createMockColumn = () =>
+    ({
+      id: "created",
+      columnDef: {
+        meta: {
+          dataType: "datetime" as const,
+          dtype: "datetime64[ns]",
+        },
+      },
+      getColumnFormatting: () => undefined,
+      getColumnWrapping: () => undefined,
+      applyColumnFormatting: (value: unknown) => value,
+    }) as unknown as Column<unknown>;
+
+  it("should handle null, empty string, and 'null' string datetime values without throwing RangeError", () => {
+    const mockColumn = createMockColumn();
+
+    // Test null, empty string, and "null" string (as they might come from SQL)
+    const nullishValues = [null, "", "null"];
+
+    nullishValues.forEach((value) => {
+      const result = renderCellValue({
+        column: mockColumn,
+        renderValue: () => value,
+        getValue: () => value,
+        selectCell: undefined,
+        cellStyles: "",
+      });
+
+      expect(result).toBeDefined();
+      // Should not throw RangeError when rendering
+      expect(() => {
+        render(
+          <I18nProvider locale="en-US">
+            <TooltipProvider>{result}</TooltipProvider>
+          </I18nProvider>,
+        );
+      }).not.toThrow();
+    });
+  });
+
+  it("should handle invalid date strings without throwing RangeError", () => {
+    const mockColumn = createMockColumn();
+
+    const invalidDates = [
+      "invalid-date",
+      "2024-13-45", // Invalid month/day
+      "not-a-date",
+      "2024-06-14 12:34:20.665332",
+    ];
+
+    invalidDates.forEach((invalidDate) => {
+      const result = renderCellValue({
+        column: mockColumn,
+        renderValue: () => invalidDate,
+        getValue: () => invalidDate,
+        selectCell: undefined,
+        cellStyles: "",
+      });
+      expect(result).toBeDefined();
+      // Should not throw RangeError when rendering
+      expect(() => {
+        render(
+          <I18nProvider locale="en-US">
+            <TooltipProvider>{result}</TooltipProvider>
+          </I18nProvider>,
+        );
+      }).not.toThrow();
+    });
+  });
+
+  it("should still render valid datetime strings correctly", () => {
+    const mockColumn = createMockColumn();
+
+    const validDates = [
+      "2024-06-14T12:34:20Z",
+      "2024-06-14 12:34:20",
+      "2024-06-14",
+    ];
+
+    validDates.forEach((validDate) => {
+      const result = renderCellValue({
+        column: mockColumn,
+        renderValue: () => validDate,
+        getValue: () => validDate,
+        selectCell: undefined,
+        cellStyles: "",
+      });
+      expect(result).toBeDefined();
+      // Should render as a date component, not as plain string
+      expect(result).not.toBeNull();
+      // Should not throw when rendering
+      expect(() => {
+        render(
+          <I18nProvider locale="en-US">
+            <TooltipProvider>{result}</TooltipProvider>
+          </I18nProvider>,
+        );
+      }).not.toThrow();
+    });
+  });
+
+  it("should handle invalid Date instances without throwing RangeError", () => {
+    const mockColumn = createMockColumn();
+
+    const invalidDate = new Date("invalid");
+
+    const result = renderCellValue({
+      column: mockColumn,
+      renderValue: () => invalidDate,
+      getValue: () => invalidDate,
+      selectCell: undefined,
+      cellStyles: "",
+    });
+    expect(result).toBeDefined();
+    // Should not throw RangeError when rendering
+    expect(() => {
+      render(
+        <I18nProvider locale="en-US">
+          <TooltipProvider>{result}</TooltipProvider>
+        </I18nProvider>,
+      );
+    }).not.toThrow();
+  });
+
+  it("should handle mixed valid and null datetime values in a column", () => {
+    const mockColumn = createMockColumn();
+
+    const values = [
+      "2024-06-14T12:34:20Z", // Valid
+      null,
+      "2024-06-15T12:34:20Z", // Valid
+      "",
+      "2024-06-16T12:34:20Z", // Valid
+    ];
+
+    values.forEach((value) => {
+      const result = renderCellValue({
+        column: mockColumn,
+        renderValue: () => value,
+        getValue: () => value,
+        selectCell: undefined,
+        cellStyles: "",
+      });
+      expect(result).toBeDefined();
+      // Should not throw RangeError when rendering
+      expect(() => {
+        render(
+          <I18nProvider locale="en-US">
+            <TooltipProvider>{result}</TooltipProvider>
+          </I18nProvider>,
+        );
+      }).not.toThrow();
+    });
+  });
+});

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

@@ -3,7 +3,7 @@
 
 import { PopoverClose } from "@radix-ui/react-popover";
 import type { Column, ColumnDef } from "@tanstack/react-table";
-import { formatDate } from "date-fns";
+import { formatDate, isValid } from "date-fns";
 import { useLocale, useNumberFormatter } from "react-aria";
 import { WithLocale } from "@/core/i18n/with-locale";
 import type { DataType } from "@/core/kernel/messages";
@@ -490,6 +490,14 @@ export function renderCellValue<TData, TValue>({
 
   if (dataType === "datetime" && typeof value === "string") {
     try {
+      if (!isValid(value)) {
+        return (
+          <div onClick={selectCell} className={cellStyles}>
+            {value}
+          </div>
+        );
+      }
+
       const date = new Date(value);
       const format = getDateFormat(value);
       return (
@@ -505,6 +513,14 @@ export function renderCellValue<TData, TValue>({
   }
 
   if (value instanceof Date) {
+    if (!isValid(value)) {
+      return (
+        <div onClick={selectCell} className={cellStyles}>
+          {value.toString()}
+        </div>
+      );
+    }
+
     // e.g. 2010-10-07 17:15:00
     return (
       <WithLocale>