@dxos/react-ui-table 0.3.9-main.3a0f16f → 0.3.9-main.4e30508

package/dist/types/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,cAAc,SAAS,CAAC"}

package/dist/types/src/schema.d.ts

@@ -4,7 +4,6 @@ export type TableDef = {
     columns: ColumnProps[];
 };
 export type ColumnType = 'number' | 'boolean' | 'date' | 'string' | 'ref';
-export declare const columnTypes: Map<ColumnType, string>;
 export type ColumnProps = {
     id: string;
     prop: string;

package/dist/types/src/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/schema.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,WAAW,EAAE,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC;AAE1E,eAAO,MAAM,WAAW,yBAMtB,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IAGjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/schema.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,WAAW,EAAE,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC;AAE1E,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IAGjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC"}

package/dist/types/src/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/theme.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAWzD,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAE9D,OAAO,EAAE,KAAK,iBAAiB,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAEvE,eAAO,MAAM,UAAU,wCAAwC,CAAC;AAChE,eAAO,MAAM,WAAW,yCAAyC,CAAC;AAClE,eAAO,MAAM,YAAY,gBAAgB,CAAC;AAC1C,eAAO,MAAM,WAAW,kBAAkB,CAAC;AAC3C,eAAO,MAAM,WAAW,kBAAkB,CAAC;AAE3C,eAAO,MAAM,iBAAiB,sFAAsF,CAAC;AAMrH,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC;AAE9D,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,eAAe,CACN,CAAC;AAEpD,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CACH,CAAC;AAMrD,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;AAElD,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,eAAe,CAC8B,CAAC;AAExF,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CAA2C,CAAC;AAEnG,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CAOpD,CAAC;AAEJ,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,eAAe,CAI5D,CAAC;AAEJ,eAAO,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,eAAe,CACQ,CAAC;AAMzE,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC;AAC9D,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,eAAe,CAAkC,CAAC;AAE5F,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC;IAAE,YAAY,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AACpE,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,iBAAiB,CAOtD,CAAC;AAMJ,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,eAAe,CACwD,CAAC;AAC/G,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,WAAW,CAAC,GAAG,EAAE,GAAG,CAAC,CAAkC,CAAC;AAMlG,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC;AAE9D,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,eAAe,CACH,CAAC;AAEvD,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CAAkC,CAAC;AAE1F,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CACQ,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/theme.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAWzD,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAE9D,OAAO,EAAE,KAAK,iBAAiB,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAEvE,eAAO,MAAM,UAAU,wCAAwC,CAAC;AAChE,eAAO,MAAM,WAAW,yCAAyC,CAAC;AAClE,eAAO,MAAM,YAAY,gBAAgB,CAAC;AAC1C,eAAO,MAAM,WAAW,kBAAkB,CAAC;AAC3C,eAAO,MAAM,WAAW,kBAAkB,CAAC;AAE3C,eAAO,MAAM,iBAAiB,sFAAsF,CAAC;AAMrH,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC;AAE9D,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,eAAe,CACN,CAAC;AAEpD,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CACH,CAAC;AAMrD,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;AAElD,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,eAAe,CAC4D,CAAC;AAEtH,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CAA2C,CAAC;AAEnG,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CAOpD,CAAC;AAEJ,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,eAAe,CAI5D,CAAC;AAEJ,eAAO,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,eAAe,CACQ,CAAC;AAMzE,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC;AAC9D,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,eAAe,CAAkC,CAAC;AAE5F,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC;IAAE,YAAY,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AACpE,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,iBAAiB,CAOtD,CAAC;AAMJ,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,eAAe,CACwD,CAAC;AAC/G,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,WAAW,CAAC,GAAG,EAAE,GAAG,CAAC,CAAkC,CAAC;AAMlG,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC;AAE9D,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,eAAe,CACH,CAAC;AAEvD,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CAAkC,CAAC;AAE1F,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CACQ,CAAC"}

package/dist/types/src/translations.d.ts

@@ -3,6 +3,17 @@ declare const _default: {
     'en-US': {
         table: {
             'no selection label': string;
+            'number column type label': string;
+            'boolean column type label': string;
+            'date column type label': string;
+            'string column type label': string;
+            'ref column type label': string;
+            'digits label': string;
+            'save label': string;
+            'delete label': string;
+            'column label label': string;
+            'property key label': string;
+            'column type label': string;
         };
     };
 }[];

package/dist/types/src/translations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,UAAU,CAAC;;;;;;;;AAEtC,wBAQE"}
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,UAAU,CAAC;;;;;;;;;;;;;;;;;;;AAEtC,wBAmBE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-table",
-  "version": "0.3.9-main.3a0f16f",
+  "version": "0.3.9-main.4e30508",
   "description": "A table component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -22,14 +22,14 @@
     "@tanstack/react-table": "^8.9.3",
     "date-fns": "^2.29.3",
     "lodash.defaultsdeep": "^4.6.1",
-    "@dxos/async": "0.3.9-main.3a0f16f",
-    "@dxos/invariant": "0.3.9-main.3a0f16f",
-    "@dxos/keys": "0.3.9-main.3a0f16f",
-    "@dxos/react-ui": "0.3.9-main.3a0f16f",
-    "@dxos/react-ui-theme": "0.3.9-main.3a0f16f",
-    "@dxos/react-ui-searchlist": "0.3.9-main.3a0f16f",
-    "@dxos/react-ui-types": "0.3.9-main.3a0f16f",
-    "@dxos/util": "0.3.9-main.3a0f16f"
+    "@dxos/async": "0.3.9-main.4e30508",
+    "@dxos/invariant": "0.3.9-main.4e30508",
+    "@dxos/keys": "0.3.9-main.4e30508",
+    "@dxos/react-ui": "0.3.9-main.4e30508",
+    "@dxos/react-ui-searchlist": "0.3.9-main.4e30508",
+    "@dxos/react-ui-types": "0.3.9-main.4e30508",
+    "@dxos/util": "0.3.9-main.4e30508",
+    "@dxos/react-ui-theme": "0.3.9-main.4e30508"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.0.2",
@@ -43,7 +43,7 @@
     "react-dom": "^18.2.0",
     "vite": "^4.3.9",
     "vite-plugin-turbosnap": "^1.0.2",
-    "@dxos/react-ui-theme": "0.3.9-main.3a0f16f"
+    "@dxos/react-ui-theme": "0.3.9-main.4e30508"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",

package/src/components/ColumnMenu.tsx

@@ -6,11 +6,12 @@ import { Check, CaretDown, Trash, X } from '@phosphor-icons/react';
 import { type HeaderContext, type RowData } from '@tanstack/react-table';
 import React, { type FC, type PropsWithChildren, useRef, useState } from 'react';
 
-import { Button, DensityProvider, Input, Popover, Select, Separator } from '@dxos/react-ui';
+import { Button, DensityProvider, Input, Popover, Select, Separator, useTranslation } from '@dxos/react-ui';
 import { getSize, mx } from '@dxos/react-ui-theme';
 import { safeParseInt } from '@dxos/util';
 
-import { type TableDef, type ColumnProps, columnTypes } from '../schema';
+import { type TableDef, type ColumnProps, type ColumnType } from '../schema';
+import { translationKey } from '../translations';
 
 export type ColumnMenuProps<TData extends RowData, TValue> = {
   context: HeaderContext<TData, TValue>;
@@ -23,13 +24,11 @@ export type ColumnMenuProps<TData extends RowData, TValue> = {
 
 export const ColumnMenu = <TData extends RowData, TValue>({ column, ...props }: ColumnMenuProps<TData, TValue>) => {
   const title = column.label?.length ? column.label : column.id;
-
   return (
-    <div className='flex grow items-center overflow-hidden'>
-      <div className='truncate' title={title}>
+    <div className='flex items-center gap-2'>
+      <div className='flex-1 min-is-0 truncate' title={title}>
         {title}
       </div>
-      <div className='grow' />
       <div className='flex shrink-0'>
         <ColumnPanel {...props} column={column} />
       </div>
@@ -59,6 +58,7 @@ export const ColumnPanel = <TData extends RowData, TValue>({
   const [label, setLabel] = useState(column.label);
   const [digits, setDigits] = useState(String(column.digits ?? '0'));
   const propRef = useRef<HTMLInputElement>(null);
+  const { t } = useTranslation(translationKey);
 
   const handleCancel = () => {
     setProp(column.id);
@@ -99,7 +99,7 @@ export const ColumnPanel = <TData extends RowData, TValue>({
   return (
     <Popover.Root open={open} onOpenChange={(nextOpen) => setOpen(nextOpen)}>
       <Popover.Trigger asChild>
-        <Button variant='ghost' classNames='p-0'>
+        <Button variant='ghost' classNames='p-1'>
           <CaretDown className={getSize(4)} />
         </Button>
       </Popover.Trigger>
@@ -110,7 +110,7 @@ export const ColumnPanel = <TData extends RowData, TValue>({
               <div className='flex flex-col gap-1'>
                 <Section>
                   <Input.Root>
-                    <Input.Label classNames='mbe-1'>Label</Input.Label>
+                    <Input.Label classNames='mbe-1'>{t('column label label')}</Input.Label>
                     <Input.TextInput
                       placeholder='Column label'
                       value={label ?? ''}
@@ -119,7 +119,7 @@ export const ColumnPanel = <TData extends RowData, TValue>({
                     />
                   </Input.Root>
                   <Input.Root>
-                    <Input.Label classNames='mbe-1 mbs-3'>Property</Input.Label>
+                    <Input.Label classNames='mbe-1 mbs-3'>{t('property key label')}</Input.Label>
                     <Input.TextInput
                       ref={propRef}
                       placeholder='Property key'
@@ -129,15 +129,15 @@ export const ColumnPanel = <TData extends RowData, TValue>({
                     />
                   </Input.Root>
                   <Input.Root>
-                    <Input.Label classNames='mbe-1 mbs-3'>Type</Input.Label>
+                    <Input.Label classNames='mbe-1 mbs-3'>{t('column type label')}</Input.Label>
                     <Select.Root value={type} onValueChange={setType}>
                       <Select.TriggerButton placeholder='Type' classNames='is-full' />
                       <Select.Portal>
                         <Select.Content>
                           <Select.Viewport>
-                            {Array.from(columnTypes.entries()).map(([type, label]) => (
+                            {(['number', 'boolean', 'string', 'ref'] as ColumnType[]).map((type) => (
                               <Select.Option key={type} value={type}>
-                                {label}
+                                {t(`${type} column type label`)}
                               </Select.Option>
                             ))}
                           </Select.Viewport>
@@ -151,7 +151,7 @@ export const ColumnPanel = <TData extends RowData, TValue>({
                   <>
                     <Section>
                       <Input.Root>
-                        <Input.Label classNames='mbe-1 mbs-3'>Decimal places</Input.Label>
+                        <Input.Label classNames='mbe-1 mbs-3'>{t('digits label')}</Input.Label>
                         {/* TODO(burdon): Constrain input to numbers. */}
                         <Input.TextInput value={digits ?? ''} onChange={(event) => setDigits(event.target.value)} />
                       </Input.Root>
@@ -213,17 +213,17 @@ export const ColumnPanel = <TData extends RowData, TValue>({
                 <Section className='space-b-1.5'>
                   {/* TODO(burdon): Style as DropdownMenuItem. */}
                   <Button variant='primary' classNames='is-full flex gap-2' onClick={handleSave}>
-                    <span>Save</span>
+                    <span>{t('save label')}</span>
                     <div className='grow' />
                     <Check className={getSize(5)} />
                   </Button>
                   <Button classNames='is-full flex gap-2' onClick={handleCancel}>
-                    <span>Cancel</span>
+                    <span>{t('cancel label', { ns: 'os' })}</span>
                     <div className='grow' />
                     <X className={getSize(5)} />
                   </Button>
                   <Button classNames='is-full flex gap-2' onClick={() => onDelete?.(column.id)}>
-                    <span>Delete</span>
+                    <span>{t('delete label')}</span>
                     <div className='grow' />
                     <Trash className={getSize(5)} />
                   </Button>

package/src/components/Table/props.ts

@@ -17,6 +17,7 @@ export type TableFlags = Partial<{
   fullWidth: boolean;
   debug: boolean;
   expand: boolean;
+  stickyHeader: boolean;
   rowsSelectable: boolean | 'multi';
 }>;
 

package/src/helpers.tsx

@@ -2,6 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
+import { useFocusFinders } from '@fluentui/react-tabster';
 import { Check, ClipboardText, type Icon, X } from '@phosphor-icons/react';
 import {
   createColumnHelper,
@@ -13,7 +14,7 @@ import {
 } from '@tanstack/react-table';
 import format from 'date-fns/format';
 import formatDistanceToNow from 'date-fns/formatDistanceToNow';
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import { type PublicKey } from '@dxos/keys';
 import { type ClassNameValue, Input, Tooltip } from '@dxos/react-ui';
@@ -132,10 +133,27 @@ const StringBuilderCell = <TData extends RowData>(cellContext: CellContext<TData
   );
 };
 
+const parseNumber = (text?: string) => (text?.trim().length ? Number(text) : NaN);
+
+const displayNumber = (value?: number, digits?: number) =>
+  value || value === 0
+    ? value.toLocaleString(undefined, {
+        minimumFractionDigits: digits ?? 0,
+        maximumFractionDigits: digits ?? 2,
+      })
+    : '';
+
 const NumberBuilderCell = <TData extends RowData>(cellContext: CellContext<TData, number>) => {
-  const { onUpdate, cell, digits } = cellContext.column.columnDef.meta as ColumnMeta<TData, string>;
+  const { onUpdate, digits } = cellContext.column.columnDef.meta as ColumnMeta<TData, string>;
   const value = cellContext.getValue();
-  const [text, setText] = useState<string>();
+  const [text, setText] = useState<string>(displayNumber(value, digits));
+  const { findPrevFocusable } = useFocusFinders();
+  const ref = useRef<HTMLInputElement | null>(null);
+
+  // Update display value if `digits` changes and input is not in focus.
+  useEffect(() => {
+    (!document.activeElement || document.activeElement !== ref.current) && setText(displayNumber(value, digits));
+  }, [digits, value]);
 
   const handleEdit = () => {
     if (onUpdate) {
@@ -145,39 +163,34 @@ const NumberBuilderCell = <TData extends RowData>(cellContext: CellContext<TData
 
   // TODO(burdon): Property is encoded as float (e.g., 6.1 => 6.099)
   const handleSave = () => {
-    const value = text?.trim().length ? Number(text) : NaN;
-    onUpdate?.(cellContext.row.original, cellContext.column.id, isNaN(value) ? undefined : value);
-    setText(undefined);
+    const nextValue = parseNumber(text);
+    onUpdate?.(cellContext.row.original, cellContext.column.id, isNaN(nextValue) ? undefined : nextValue);
+    setText(displayNumber(nextValue, digits));
+    // Shift focus only if input is focused on save (e.g. on `Enter`).
+    ref.current && document.activeElement === ref.current && findPrevFocusable(ref.current)?.focus();
   };
 
-  const handleCancel = () => {
-    setText(undefined);
+  const _handleCancel = () => {
+    setText(displayNumber(value, digits));
+    ref.current && findPrevFocusable(ref.current)?.focus();
   };
 
-  if (text !== undefined) {
-    return (
-      <Input.Root>
-        <Input.TextInput
-          value={text}
-          classNames={['is-full text-end font-mono']}
-          onBlur={handleSave}
-          onChange={(event) => setText(event.target.value)}
-          onKeyDown={(event) => (event.key === 'Escape' && handleCancel()) || (event.key === 'Enter' && handleSave())}
-        />
-      </Input.Root>
-    );
-  }
-
   return (
-    <div
-      className={mx('is-full text-end font-mono empty:after:content-[" "]', textPadding, cell?.classNames)}
-      onClick={handleEdit}
-    >
-      {value?.toLocaleString(undefined, {
-        minimumFractionDigits: digits ?? 0,
-        maximumFractionDigits: digits ?? 2,
-      })}
-    </div>
+    <Input.Root>
+      <Input.TextInput
+        ref={ref}
+        variant='subdued'
+        value={text}
+        classNames={['is-full text-end font-mono', textPadding]}
+        onBlur={handleSave}
+        onFocus={handleEdit}
+        onChange={({ target: { value } }) => setText(value)}
+        onKeyDown={(event) => {
+          // TODO(thure): `Escape` is reserved for blurring the input and moving focus to the cell
+          return /* (event.key === 'Escape' && handleCancel()) || */ event.key === 'Enter' && handleSave();
+        }}
+      />
+    </Input.Root>
   );
 };
 
@@ -238,14 +251,7 @@ export class ColumnBuilder<TData extends RowData> {
     ...props
   }: ComboboxColumnOptions<TData>): Partial<ColumnDef<TData, any>> {
     return {
-      ...props,
       minSize: 100,
-      meta: {
-        ...props.meta,
-        model,
-        onUpdate,
-        cell: { classNames, ...props.meta?.cell },
-      },
       header: (column) => {
         return label ?? column.header.id;
       },
@@ -256,6 +262,13 @@ export class ColumnBuilder<TData extends RowData> {
               const cellValue = cellContext.getValue();
               return <div className={mx('truncate', classNames)}>{cellValue ? model?.getText(cellValue) : ''}</div>;
             },
+      ...props,
+      meta: {
+        ...props.meta,
+        model,
+        onUpdate,
+        cell: { classNames, ...props.meta?.cell },
+      },
     };
   }
 
@@ -266,13 +279,7 @@ export class ColumnBuilder<TData extends RowData> {
     ColumnDef<TData, string>
   > {
     return {
-      ...props,
       minSize: 100,
-      meta: {
-        ...props.meta,
-        onUpdate,
-        cell: { ...props.meta?.cell, classNames },
-      },
       // TODO(burdon): Default.
       header: (column) => {
         return label ?? column.header.id;
@@ -283,6 +290,12 @@ export class ColumnBuilder<TData extends RowData> {
             const value = cell.getValue();
             return <div className={mx('truncate', textPadding, classNames)}>{value}</div>;
           },
+      ...props,
+      meta: {
+        ...props.meta,
+        onUpdate,
+        cell: { ...props.meta?.cell, classNames },
+      },
     };
   }
 
@@ -293,9 +306,11 @@ export class ColumnBuilder<TData extends RowData> {
     ColumnDef<TData, number>
   > {
     return {
-      ...props,
       size: 100,
       minSize: 100,
+      header: (cell) => label ?? cell.header.id,
+      cell: NumberBuilderCell,
+      ...props,
       meta: {
         ...props.meta,
         onUpdate,
@@ -303,8 +318,6 @@ export class ColumnBuilder<TData extends RowData> {
         header: { classNames: 'text-end', ...props.meta?.header },
         cell: { ...props.meta?.cell, classNames },
       },
-      header: (cell) => label ?? cell.header.id,
-      cell: NumberBuilderCell,
     };
   }
 
@@ -316,10 +329,8 @@ export class ColumnBuilder<TData extends RowData> {
     ColumnDef<TData, Date>
   > {
     return {
-      ...props,
       size: 220, // TODO(burdon): Depends on format.
       minSize: 100,
-      meta: { ...props.meta, cell: { ...props.meta?.cell, classNames } },
       header: (cell) => label ?? cell.header.id,
       cell: (cell) => {
         const value = cell.getValue();
@@ -339,6 +350,8 @@ export class ColumnBuilder<TData extends RowData> {
           return null;
         }
       },
+      ...props,
+      meta: { ...props.meta, cell: { ...props.meta?.cell, classNames } },
     };
   }
 
@@ -347,10 +360,8 @@ export class ColumnBuilder<TData extends RowData> {
    */
   key({ label, tooltip, classNames, ...props }: KeyColumnOptions<TData> = {}): Partial<ColumnDef<TData, PublicKey>> {
     return {
-      ...props,
       size: 94,
       minSize: 94,
-      meta: { ...props.meta, cell: { ...props.meta?.cell, classNames: ['font-mono', textPadding, classNames] } },
       header: (cell) => label ?? cell.header.id,
       cell: (cell) => {
         const value = cell.getValue();
@@ -383,6 +394,8 @@ export class ColumnBuilder<TData extends RowData> {
           </Tooltip.Provider>
         );
       },
+      ...props,
+      meta: { ...props.meta, cell: { ...props.meta?.cell, classNames: ['font-mono', textPadding, classNames] } },
     };
   }
 
@@ -423,12 +436,12 @@ export class ColumnBuilder<TData extends RowData> {
     ColumnDef<TData, boolean>
   > {
     return {
-      ...props,
       size: 50,
       minSize: 50,
-      meta: { ...props.meta, onUpdate, cell: { ...props.meta?.cell, classNames: [textPadding, classNames] } },
       header: (column) => label ?? column.header.id,
       cell: SwitchBuilderCell,
+      ...props,
+      meta: { ...props.meta, onUpdate, cell: { ...props.meta?.cell, classNames: [textPadding, classNames] } },
     };
   }
 
@@ -439,7 +452,6 @@ export class ColumnBuilder<TData extends RowData> {
     const IconOn = on?.Icon ?? Check;
     const IconOff = off?.Icon ?? X;
     return {
-      ...props,
       size: size ?? 32,
       header: (column) => <div className={'justify-center'}>{label ?? column.header.id}</div>,
       cell: (cell) => {
@@ -452,6 +464,7 @@ export class ColumnBuilder<TData extends RowData> {
           return null;
         }
       },
+      ...props,
     };
   }
 }

package/src/index.ts

@@ -6,4 +6,5 @@ export * from './components';
 export * from './helpers';
 export * from './schema';
 export * from './theme';
+export { default as translations } from './translations';
 export * from './types';

package/src/schema.ts

@@ -10,14 +10,6 @@ export type TableDef = {
 
 export type ColumnType = 'number' | 'boolean' | 'date' | 'string' | 'ref';
 
-export const columnTypes = new Map<ColumnType, string>([
-  ['string', 'Text'],
-  ['boolean', 'Checkbox'],
-  ['number', 'Number'],
-  ['date', 'Date'],
-  ['ref', 'Reference'],
-]);
-
 export type ColumnProps = {
   id: string;
   prop: string;

package/src/theme.ts

@@ -43,8 +43,8 @@ export const groupTh: ComponentFunction<TableStyleProps> = (_props, ...etc) =>
 
 export type TheadStyleProps = Partial<TableFlags>;
 
-export const theadRoot: ComponentFunction<TheadStyleProps> = ({ header }, ...etc) =>
-  mx(header ? 'sticky block-start-0 z-10' : 'collapse', header && fixedSurface, ...etc);
+export const theadRoot: ComponentFunction<TheadStyleProps> = ({ header, stickyHeader }, ...etc) =>
+  mx(header ? stickyHeader && 'sticky block-start-[--sticky-top] z-[1]' : 'collapse', header && fixedSurface, ...etc);
 
 export const theadTr: ComponentFunction<TheadStyleProps> = (_props, ...etc) => mx('group', ...etc);
 

package/src/translations.ts

@@ -9,6 +9,17 @@ export default [
     'en-US': {
       [translationKey]: {
         'no selection label': ' ',
+        'number column type label': 'Number',
+        'boolean column type label': 'Toggle',
+        'date column type label': 'Date',
+        'string column type label': 'Text',
+        'ref column type label': 'Reference',
+        'digits label': 'Decimal places',
+        'save label': 'Save',
+        'delete label': 'Delete',
+        'column label label': 'Label',
+        'property key label': 'Property',
+        'column type label': 'Type',
       },
     },
   },