@marimo-team/frontend 0.15.5 → 0.16.0-dev96986

package/src/components/data-table/column-formatting/feature.ts

@@ -16,6 +16,7 @@ import {
   prettyNumber,
   prettyScientificNumber,
 } from "@/utils/numbers";
+import { memoizeLastValue } from "@/utils/once";
 import type {
   ColumnFormattingOptions,
   ColumnFormattingState,
@@ -39,6 +40,7 @@ export const ColumnFormattingFeature: TableFeature = {
     return {
       enableColumnFormatting: true,
       onColumnFormattingChange: makeStateUpdater("columnFormatting", table),
+      locale: navigator.language,
     } as ColumnFormattingOptions;
   },
 
@@ -74,36 +76,50 @@ export const ColumnFormattingFeature: TableFeature = {
       const dataType = column.columnDef.meta?.dataType;
       const format = column.getColumnFormatting?.();
       if (format) {
-        return applyFormat(value, { format, dataType });
+        return applyFormat(value, {
+          format,
+          dataType,
+          locale: table.options.locale,
+        });
       }
       return value;
     };
   },
 };
 
-const percentFormatter = new Intl.NumberFormat(undefined, {
-  style: "percent",
-  minimumFractionDigits: 0,
-  maximumFractionDigits: 2,
-});
+export const getFormatters = memoizeLastValue((locale: string) => {
+  const percentFormatter = new Intl.NumberFormat(locale, {
+    style: "percent",
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+  });
 
-const dateFormatter = new Intl.DateTimeFormat(undefined, {
-  dateStyle: "short", // 3/4/2024
-});
+  const dateFormatter = new Intl.DateTimeFormat(locale, {
+    dateStyle: "short", // 3/4/2024
+  });
 
-const dateTimeFormatter = new Intl.DateTimeFormat(undefined, {
-  dateStyle: "short", // 3/4/2024
-  timeStyle: "long", // 3:04:05 PM
-  timeZone: "UTC",
-});
+  const dateTimeFormatter = new Intl.DateTimeFormat(locale, {
+    dateStyle: "short", // 3/4/2024
+    timeStyle: "long", // 3:04:05 PM
+    timeZone: "UTC",
+  });
 
-const timeFormatter = new Intl.DateTimeFormat(undefined, {
-  timeStyle: "long", // 3:04:05 PM
-  timeZone: "UTC",
-});
+  const timeFormatter = new Intl.DateTimeFormat(locale, {
+    timeStyle: "long", // 3:04:05 PM
+    timeZone: "UTC",
+  });
 
-const integerFormatter = new Intl.NumberFormat(undefined, {
-  maximumFractionDigits: 0, // 1,000,000
+  const integerFormatter = new Intl.NumberFormat(locale, {
+    maximumFractionDigits: 0, // 1,000,000
+  });
+
+  return {
+    percentFormatter,
+    dateFormatter,
+    dateTimeFormatter,
+    timeFormatter,
+    integerFormatter,
+  };
 });
 
 // Apply formatting to a value given a format and data type
@@ -112,9 +128,18 @@ export const applyFormat = (
   options: {
     format: FormatOption;
     dataType: DataType | undefined;
+    locale: string;
   },
 ) => {
-  const { format, dataType } = options;
+  const { format, dataType, locale } = options;
+  const {
+    percentFormatter,
+    dateFormatter,
+    dateTimeFormatter,
+    timeFormatter,
+    integerFormatter,
+  } = getFormatters(locale);
+
   // If the value is null, return an empty string
   if (value === null || value === undefined || value === "") {
     return "";
@@ -143,13 +168,13 @@ export const applyFormat = (
       const num = Number.parseFloat(value as string);
       switch (format) {
         case "Auto":
-          return prettyNumber(num);
+          return prettyNumber(num, locale);
         case "Percent":
           return percentFormatter.format(num);
         case "Scientific":
-          return prettyScientificNumber(num, { shouldRound: true });
+          return prettyScientificNumber(num, { shouldRound: true, locale });
         case "Engineering":
-          return prettyEngineeringNumber(num);
+          return prettyEngineeringNumber(num, locale);
         case "Integer":
           return integerFormatter.format(num);
         default:
@@ -198,32 +223,35 @@ export const applyFormat = (
 
 export function formattingExample(
   format: FormatOption,
+  locale: string,
 ): string | number | undefined | null {
   switch (format) {
     case "Date":
       return String(
-        applyFormat(new Date(), { format: "Date", dataType: "date" }),
+        applyFormat(new Date(), { format: "Date", dataType: "date", locale }),
       );
     case "Datetime":
       return String(
         applyFormat(new Date(), {
           format: "Datetime",
           dataType: "date",
+          locale,
         }),
       );
     case "Time":
       return String(
-        applyFormat(new Date(), { format: "Time", dataType: "date" }),
+        applyFormat(new Date(), { format: "Time", dataType: "date", locale }),
       );
     case "Percent":
       return String(
-        applyFormat(0.1234, { format: "Percent", dataType: "number" }),
+        applyFormat(0.1234, { format: "Percent", dataType: "number", locale }),
       );
     case "Scientific":
       return String(
         applyFormat(12_345_678_910, {
           format: "Scientific",
           dataType: "number",
+          locale,
         }),
       );
     case "Engineering":
@@ -231,15 +259,20 @@ export function formattingExample(
         applyFormat(12_345_678_910, {
           format: "Engineering",
           dataType: "number",
+          locale,
         }),
       );
     case "Integer":
       return String(
-        applyFormat(1234.567, { format: "Integer", dataType: "number" }),
+        applyFormat(1234.567, {
+          format: "Integer",
+          dataType: "number",
+          locale,
+        }),
       );
     case "Auto":
       return String(
-        applyFormat(1234.567, { format: "Auto", dataType: "number" }),
+        applyFormat(1234.567, { format: "Auto", dataType: "number", locale }),
       );
     default:
       return null;

package/src/components/data-table/column-formatting/types.ts

@@ -28,6 +28,7 @@ export interface ColumnFormattingTableState {
 
 // define types for column formatting's table options
 export interface ColumnFormattingOptions {
+  locale: string;
   enableColumnFormatting?: boolean;
   onColumnFormattingChange?: OnChangeFn<ColumnFormattingState>;
 }

package/src/components/data-table/column-header.tsx

@@ -5,6 +5,7 @@ import type { Column } from "@tanstack/react-table";
 import { capitalize } from "lodash-es";
 import { FilterIcon, MinusIcon, TextIcon, XIcon } from "lucide-react";
 import { useMemo, useRef, useState } from "react";
+import { useLocale } from "react-aria";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -76,6 +77,7 @@ export const DataTableColumnHeader = <TData, TValue>({
   calculateTopKRows,
 }: DataTableColumnHeaderProps<TData, TValue>) => {
   const [isFilterValueOpen, setIsFilterValueOpen] = useState(false);
+  const { locale } = useLocale();
 
   // No header
   if (!header) {
@@ -119,7 +121,7 @@ export const DataTableColumnHeader = <TData, TValue>({
           {renderCopyColumn(column)}
           {renderColumnPinning(column)}
           {renderColumnWrapping(column)}
-          {renderFormatOptions(column)}
+          {renderFormatOptions(column, locale)}
           <DropdownMenuSeparator />
           {renderMenuItemFilter(column)}
           {renderFilterByValues(column, setIsFilterValueOpen)}

package/src/components/data-table/column-summary/chart-spec-model.tsx

@@ -64,17 +64,34 @@ export class ColumnChartSpecModel<T> {
   private dataSpec: TopLevelSpec["data"];
   private sourceName: "data_0" | "source_0";
 
+  private readonly data: T[] | string;
+  private readonly fieldTypes: FieldTypes;
+  readonly stats: Record<ColumnName, Partial<ColumnHeaderStats>>;
+  readonly binValues: Record<ColumnName, BinValues>;
+  readonly valueCounts: Record<ColumnName, ValueCounts>;
+  private readonly opts: {
+    includeCharts: boolean;
+    usePreComputedValues?: boolean;
+  };
+
   constructor(
-    private readonly data: T[] | string,
-    private readonly fieldTypes: FieldTypes,
-    readonly stats: Record<ColumnName, Partial<ColumnHeaderStats>>,
-    readonly binValues: Record<ColumnName, BinValues>,
-    readonly valueCounts: Record<ColumnName, ValueCounts>,
-    private readonly opts: {
+    data: T[] | string,
+    fieldTypes: FieldTypes,
+    stats: Record<ColumnName, Partial<ColumnHeaderStats>>,
+    binValues: Record<ColumnName, BinValues>,
+    valueCounts: Record<ColumnName, ValueCounts>,
+    opts: {
       includeCharts: boolean;
       usePreComputedValues?: boolean;
     },
   ) {
+    this.data = data;
+    this.fieldTypes = fieldTypes;
+    this.stats = stats;
+    this.binValues = binValues;
+    this.valueCounts = valueCounts;
+    this.opts = opts;
+
     // Data may come in from a few different sources:
     // - A URL
     // - A CSV data URI (e.g. "data:text/csv;base64,...")
@@ -93,9 +110,9 @@ export class ColumnChartSpecModel<T> {
         const decoded = typedAtob(base64);
 
         if (decoded.startsWith(ARROW_MAGIC_NUMBER)) {
+          // @ts-expect-error vega-typings does not include arrow format
           this.dataSpec = {
             values: byteStringToBinary(decoded),
-            // @ts-expect-error vega-typings does not include arrow format
             format: { type: "arrow" },
           };
         } else {

package/src/components/data-table/column-summary/column-summary.tsx

@@ -1,5 +1,6 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 import React, { Suspense } from "react";
+import { useLocale } from "react-aria";
 import { createBatchedLoader } from "@/plugins/impl/vega/batched";
 import { useTheme } from "@/theme/useTheme";
 import { logNever } from "@/utils/assertNever";
@@ -29,6 +30,8 @@ const batchedLoader = createBatchedLoader();
 export const TableColumnSummary = <TData, TValue>({
   columnId,
 }: Props<TData, TValue>) => {
+  const { locale } = useLocale();
+
   const chartSpecModel = React.use(ColumnChartContext);
   const { theme } = useTheme();
   const { spec, type, stats } = chartSpecModel.getHeaderSummary(columnId);
@@ -65,7 +68,7 @@ export const TableColumnSummary = <TData, TValue>({
   ) => {
     return (
       <DatePopover date={date} type={type}>
-        {prettyDate(date, type)}
+        {prettyDate(date, type, locale)}
       </DatePopover>
     );
   };
@@ -84,7 +87,7 @@ export const TableColumnSummary = <TData, TValue>({
             <div className="flex flex-col whitespace-pre">
               <span>min: {renderDate(stats.min, type)}</span>
               <span>max: {renderDate(stats.max, type)}</span>
-              <span>unique: {prettyNumber(stats.unique)}</span>
+              <span>unique: {prettyNumber(stats.unique, locale)}</span>
             </div>
           );
         }
@@ -106,16 +109,22 @@ export const TableColumnSummary = <TData, TValue>({
               <span>
                 min:{" "}
                 {typeof stats.min === "number"
-                  ? prettyScientificNumber(stats.min, { shouldRound: true })
+                  ? prettyScientificNumber(stats.min, {
+                      shouldRound: true,
+                      locale,
+                    })
                   : stats.min}
               </span>
               <span>
                 max:{" "}
                 {typeof stats.max === "number"
-                  ? prettyScientificNumber(stats.max, { shouldRound: true })
+                  ? prettyScientificNumber(stats.max, {
+                      shouldRound: true,
+                      locale,
+                    })
                   : stats.max}
               </span>
-              <span>unique: {prettyNumber(stats.unique)}</span>
+              <span>unique: {prettyNumber(stats.unique, locale)}</span>
             </div>
           );
         }
@@ -127,8 +136,8 @@ export const TableColumnSummary = <TData, TValue>({
         if (!spec) {
           return (
             <div className="flex flex-col whitespace-pre">
-              <span>true: {prettyNumber(stats.true)}</span>
-              <span>false: {prettyNumber(stats.false)}</span>
+              <span>true: {prettyNumber(stats.true, locale)}</span>
+              <span>false: {prettyNumber(stats.false, locale)}</span>
             </div>
           );
         }
@@ -140,7 +149,7 @@ export const TableColumnSummary = <TData, TValue>({
         if (!spec) {
           return (
             <div className="flex flex-col whitespace-pre">
-              <span>unique: {prettyNumber(stats.unique)}</span>
+              <span>unique: {prettyNumber(stats.unique, locale)}</span>
             </div>
           );
         }
@@ -148,7 +157,7 @@ export const TableColumnSummary = <TData, TValue>({
       case "unknown":
         return (
           <div className="flex flex-col whitespace-pre">
-            <span>nulls: {prettyNumber(stats.nulls)}</span>
+            <span>nulls: {prettyNumber(stats.nulls, locale)}</span>
           </div>
         );
       default:

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

@@ -4,6 +4,7 @@
 import { PopoverClose } from "@radix-ui/react-popover";
 import type { Column, ColumnDef } from "@tanstack/react-table";
 import { formatDate } from "date-fns";
+import { WithLocale } from "@/core/i18n/with-locale";
 import type { DataType } from "@/core/kernel/messages";
 import type { CalculateTopKRows } from "@/plugins/impl/DataTablePlugin";
 import { cn } from "@/utils/cn";
@@ -227,13 +228,13 @@ export function generateColumns<T>({
           isCellSelected,
         );
 
-        const renderedCell = renderCellValue(
+        const renderedCell = renderCellValue({
           column,
           renderValue,
           getValue,
           selectCell,
           cellStyles,
-        );
+        });
 
         // Row headers are bold
         if (rowHeadersSet.has(key)) {
@@ -403,18 +404,25 @@ function renderAny(value: unknown): string {
   }
 }
 
-function renderDate(
-  value: Date,
-  dataType?: DataType,
-  dtype?: string,
-  format?: DateFormat | null,
-): React.ReactNode {
+function renderDate({
+  value,
+  dataType,
+  dtype,
+  format,
+  locale,
+}: {
+  value: Date;
+  dataType?: DataType;
+  dtype?: string;
+  format?: DateFormat | null;
+  locale: string;
+}): React.ReactNode {
   const type = dataType === "date" ? "date" : "datetime";
   const timezone = extractTimezone(dtype);
 
   const exactValue = format
     ? formatDate(value, format)
-    : exactDateTime(value, timezone);
+    : exactDateTime(value, timezone, locale);
 
   return (
     <DatePopover date={value} type={type}>
@@ -423,13 +431,19 @@ function renderDate(
   );
 }
 
-export function renderCellValue<TData, TValue>(
-  column: Column<TData, TValue>,
-  renderValue: () => TValue | null,
-  getValue: () => TValue,
-  selectCell?: () => void,
-  cellStyles?: string,
-) {
+export function renderCellValue<TData, TValue>({
+  column,
+  renderValue,
+  getValue,
+  selectCell,
+  cellStyles,
+}: {
+  column: Column<TData, TValue>;
+  renderValue: () => TValue | null;
+  getValue: () => TValue;
+  selectCell?: () => void;
+  cellStyles?: string;
+}) {
   const value = getValue();
   const format = column.getColumnFormatting?.();
 
@@ -440,7 +454,13 @@ export function renderCellValue<TData, TValue>(
     try {
       const date = new Date(value);
       const format = getDateFormat(value);
-      return renderDate(date, dataType, dtype, format);
+      return (
+        <WithLocale>
+          {(locale) =>
+            renderDate({ value: date, dataType, dtype, format, locale })
+          }
+        </WithLocale>
+      );
     } catch (error) {
       Logger.error("Error parsing datetime, fallback to string", error);
     }
@@ -448,7 +468,11 @@ export function renderCellValue<TData, TValue>(
 
   if (value instanceof Date) {
     // e.g. 2010-10-07 17:15:00
-    return renderDate(value, dataType, dtype);
+    return (
+      <WithLocale>
+        {(locale) => renderDate({ value, dataType, dtype, locale })}
+      </WithLocale>
+    );
   }
 
   if (typeof value === "string") {

package/src/components/data-table/data-table.tsx

@@ -19,11 +19,13 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 import React, { memo } from "react";
+import { useLocale } from "react-aria";
 
 import { Table } from "@/components/ui/table";
 import type { GetRowIds } from "@/plugins/impl/DataTablePlugin";
 import { cn } from "@/utils/cn";
 import type { PanelType } from "../editor/chrome/panels/context-aware-panel/context-aware-panel";
+import { CellHoverTemplateFeature } from "./cell-hover-template/feature";
 import { CellSelectionFeature } from "./cell-selection/feature";
 import type { CellSelectionState } from "./cell-selection/types";
 import { CellStylingFeature } from "./cell-styling/feature";
@@ -63,6 +65,7 @@ interface DataTableProps<TData> extends Partial<DownloadActionProps> {
   rowSelection?: RowSelectionState;
   cellSelection?: CellSelectionState;
   cellStyling?: CellStyleState | null;
+  hoverTemplate?: string | null;
   onRowSelectionChange?: OnChangeFn<RowSelectionState>;
   onCellSelectionChange?: OnChangeFn<CellSelectionState>;
   getRowIds?: GetRowIds;
@@ -103,6 +106,7 @@ const DataTableInternal = <TData,>({
   rowSelection,
   cellSelection,
   cellStyling,
+  hoverTemplate,
   paginationState,
   setPaginationState,
   downloadAs,
@@ -131,6 +135,7 @@ const DataTableInternal = <TData,>({
 }: DataTableProps<TData>) => {
   const [isSearchEnabled, setIsSearchEnabled] = React.useState<boolean>(false);
   const [showLoadingBar, setShowLoadingBar] = React.useState<boolean>(false);
+  const { locale } = useLocale();
 
   const { columnPinning, setColumnPinning } = useColumnPinning(
     freezeColumnsLeft,
@@ -176,6 +181,7 @@ const DataTableInternal = <TData,>({
       ColumnFormattingFeature,
       CellSelectionFeature,
       CellStylingFeature,
+      CellHoverTemplateFeature,
       CopyColumnFeature,
       FocusRowFeature,
     ],
@@ -199,6 +205,7 @@ const DataTableInternal = <TData,>({
           },
         }
       : {}),
+    locale: locale,
     manualPagination: manualPagination,
     getPaginationRowModel: getPaginationRowModel(),
     // sorting
@@ -233,10 +240,11 @@ const DataTableInternal = <TData,>({
           ? {}
           : // No pagination, show all rows
             { pagination: { pageIndex: 0, pageSize: data.length } }),
-      rowSelection,
-      cellSelection,
+      rowSelection: rowSelection ?? {},
+      cellSelection: cellSelection ?? [],
       cellStyling,
       columnPinning: columnPinning,
+      cellHoverTemplate: hoverTemplate,
     },
   });