@dxos/react-ui-table 0.6.7-staging.e9eb1ed → 0.6.8-main.046e6cf

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

@@ -1,4 +1,5 @@
 import '@dxosTheme';
+import React from 'react';
 declare const _default: {
     title: string;
     args: {};
@@ -6,6 +7,6 @@ declare const _default: {
 };
 export default _default;
 export declare const SchemaTable: {
-    render: () => JSX.Element;
+    render: () => React.JSX.Element;
 };
 //# sourceMappingURL=SchemaToTable.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SchemaToTable.stories.d.ts","sourceRoot":"","sources":["../../../../src/schema/SchemaToTable.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;;;;;;AAapB,wBAWE;AAuBF,eAAO,MAAM,WAAW;;CAmBvB,CAAC"}
+{"version":3,"file":"SchemaToTable.stories.d.ts","sourceRoot":"","sources":["../../../../src/schema/SchemaToTable.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAIpB,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAS1B,wBAWE;AAuBF,eAAO,MAAM,WAAW;;CAmBvB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../../src/schema/schema.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,CAAC,MAAM,uBAAuB,CAAC;AAEhD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C,MAAM,MAAM,oBAAoB,GAAG,UAAU,GAAG,SAAS,CAAC;AAG1D,eAAO,MAAM,wBAAwB,WAAY,EAAE,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,KAAG,CAAC,MAAM,EAAE,oBAAoB,CAAC,EAwBnG,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../../src/schema/schema.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,CAAC,MAAM,uBAAuB,CAAC;AAEhD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C,MAAM,MAAM,oBAAoB,GAAG,UAAU,GAAG,SAAS,CAAC;AAG1D,eAAO,MAAM,wBAAwB,WAAY,CAAC,CAAC,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,KAAG,CAAC,MAAM,EAAE,oBAAoB,CAAC,EAwBnG,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"schemaToColumns.d.ts","sourceRoot":"","sources":["../../../../src/schema/schemaToColumns.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,KAAK,EAAE,CAAC,EAAE,MAAM,mBAAmB,CAAC;AAK3C,eAAO,MAAM,kBAAkB,cAAe,EAAE,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC,KAAG,UAAU,CAAC,EAAE,GAAG,CAAC,EAoCjF,CAAC"}
+{"version":3,"file":"schemaToColumns.d.ts","sourceRoot":"","sources":["../../../../src/schema/schemaToColumns.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,KAAK,EAAE,CAAC,EAAE,MAAM,mBAAmB,CAAC;AAK3C,eAAO,MAAM,kBAAkB,GAAI,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC,KAAG,SAAS,CAAC,CAAC,EAAE,GAAG,CAAC,EAoCjF,CAAC"}

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

@@ -1,12 +1,11 @@
-import { type CellContext } from '@tanstack/react-table';
 import { type ComponentFunction } from '@dxos/react-ui-types';
 import { type TableContextValue, type TableFlags } from './components';
 export declare const currentRow = "!bg-neutral-75 !dark:bg-neutral-850";
 export declare const selectedRow = "!bg-primary-100 dark:!bg-primary-700";
 export declare const flushPadding = "pli-0 plb-0";
-export declare const textPadding = "pli-2 plb-0.5";
-export declare const headPadding = "pli-2 plb-1";
-export declare const gridCellFocusRing = "focus-within:outline outline-2 outline-primary-500 dark:outline-primary-400";
+export declare const textPadding = "pli-2 plb-0";
+export declare const headPadding = "pli-2 plb-0";
+export declare const gridCellFocusRing = "relative focus-within:outline focus-within:outline-1 outline-primary-500 outline-offset-[-1px]";
 export type TableStyleProps = Partial<TableContextValue<any>>;
 export declare const tableRoot: ComponentFunction<TableStyleProps>;
 export declare const groupTh: ComponentFunction<TableStyleProps>;
@@ -24,10 +23,7 @@ export type TbodyTrStyleProps = Partial<{
     isPinned?: boolean;
 }>;
 export declare const tbodyTr: ComponentFunction<TbodyTrStyleProps>;
-export declare const tdRoot: ComponentFunction<TbodyStyleProps>;
-export declare const tdContent: ComponentFunction<CellContext<any, any>>;
-export type TfootStyleProps = Partial<TableContextValue<any>>;
-export declare const tfootRoot: ComponentFunction<TfootStyleProps>;
-export declare const tfootTr: ComponentFunction<TfootStyleProps>;
-export declare const tfootTh: ComponentFunction<TfootStyleProps>;
+export declare const tdRoot: ComponentFunction<TbodyStyleProps & {
+    pinned?: boolean;
+}>;
 //# sourceMappingURL=theme.d.ts.map

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;AAGzD,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,gBAAgB,CAAC;AAEzC,eAAO,MAAM,iBAAiB,gFAAgF,CAAC;AAM/G,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,CAMtD,CAAC;AAEJ,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CAA2C,CAAC;AAEnG,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CAQpD,CAAC;AAEJ,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC;IAAE,UAAU,EAAE,OAAO,CAAA;CAAE,CAUtE,CAAC;AAMF,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,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AACxF,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,iBAAiB,CAQtD,CAAC;AAMJ,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,eAAe,CACwD,CAAC;AAE/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,CACJ,CAAC;AAEtD,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CAAkC,CAAC;AAE1F,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CACO,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/theme.ts"],"names":[],"mappings":"AAKA,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,gBAAgB,CAAC;AACzC,eAAO,MAAM,WAAW,gBAAgB,CAAC;AAEzC,eAAO,MAAM,iBAAiB,mGACoE,CAAC;AAInG,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC;AAE9D,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,eAAe,CACoC,CAAC;AAE9F,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CACH,CAAC;AAErD,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;AAElD,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,eAAe,CACqD,CAAC;AAE/G,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CAA2C,CAAC;AAEnG,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,eAAe,CAQpD,CAAC;AAEJ,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC;IAAE,UAAU,EAAE,OAAO,CAAA;CAAE,CAUtE,CAAC;AAEF,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,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AACxF,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,iBAAiB,CAStD,CAAC;AAEJ,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,eAAe,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,CAS1E,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-table",
-  "version": "0.6.7-staging.e9eb1ed",
+  "version": "0.6.8-main.046e6cf",
   "description": "A table component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -31,29 +31,29 @@
     "@tanstack/react-virtual": "^3.9.0",
     "date-fns": "^3.3.1",
     "effect": "^3.2.7",
-    "@dxos/invariant": "0.6.7-staging.e9eb1ed",
-    "@dxos/async": "0.6.7-staging.e9eb1ed",
-    "@dxos/keys": "0.6.7-staging.e9eb1ed",
-    "@dxos/log": "0.6.7-staging.e9eb1ed",
-    "@dxos/react-ui": "0.6.7-staging.e9eb1ed",
-    "@dxos/react-ui-searchlist": "0.6.7-staging.e9eb1ed",
-    "@dxos/react-ui-theme": "0.6.7-staging.e9eb1ed",
-    "@dxos/react-ui-types": "0.6.7-staging.e9eb1ed",
-    "@dxos/util": "0.6.7-staging.e9eb1ed"
+    "@dxos/async": "0.6.8-main.046e6cf",
+    "@dxos/invariant": "0.6.8-main.046e6cf",
+    "@dxos/keys": "0.6.8-main.046e6cf",
+    "@dxos/react-ui": "0.6.8-main.046e6cf",
+    "@dxos/log": "0.6.8-main.046e6cf",
+    "@dxos/react-ui-searchlist": "0.6.8-main.046e6cf",
+    "@dxos/react-ui-theme": "0.6.8-main.046e6cf",
+    "@dxos/react-ui-types": "0.6.8-main.046e6cf",
+    "@dxos/util": "0.6.8-main.046e6cf"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
-    "@types/react": "^18.0.21",
-    "@types/react-dom": "^18.0.6",
+    "@types/react": "~18.2.0",
+    "@types/react-dom": "~18.2.0",
     "fast-check": "^3.19.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "^5.3.4",
-    "@dxos/echo-schema": "0.6.7-staging.e9eb1ed",
-    "@dxos/random": "0.6.7-staging.e9eb1ed",
-    "@dxos/react-ui-theme": "0.6.7-staging.e9eb1ed",
-    "@dxos/echo-signals": "0.6.7-staging.e9eb1ed",
-    "@dxos/storybook-utils": "0.6.7-staging.e9eb1ed"
+    "@dxos/echo-signals": "0.6.8-main.046e6cf",
+    "@dxos/echo-schema": "0.6.8-main.046e6cf",
+    "@dxos/react-ui-theme": "0.6.8-main.046e6cf",
+    "@dxos/random": "0.6.8-main.046e6cf",
+    "@dxos/storybook-utils": "0.6.8-main.046e6cf"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",

package/src/components/Cell/Cell.tsx

@@ -4,7 +4,7 @@
 
 import { useFocusableGroup } from '@fluentui/react-tabster';
 import { type Cell as CellType, type RowData } from '@tanstack/react-table';
-import React, { type PropsWithChildren } from 'react';
+import React, { useCallback, type PropsWithChildren, type KeyboardEvent } from 'react';
 
 import { tdRoot } from '../../theme';
 import { useTableContext } from '../Table/TableContext';
@@ -19,10 +19,48 @@ const FocusableCell = <TData extends RowData, TValue>({ cell, children }: CellPr
   const tableContext = useTableContext();
   const domAttributes = useFocusableGroup({ tabBehavior: 'limited' });
 
-  const className = tdRoot(tableContext, cell.column.columnDef.meta?.cell?.classNames);
+  const pinned = tableContext.table.getState().rowPinning?.bottom?.includes(cell.row.id);
+  const className = tdRoot({ ...tableContext, pinned }, cell.column.columnDef.meta?.cell?.classNames);
+
+  const handleKeyDown = useCallback(({ key, currentTarget }: KeyboardEvent<HTMLTableCellElement>) => {
+    if (key !== 'Enter') {
+      return;
+    }
+
+    const currentRow = currentTarget.closest('tr');
+    if (!currentRow) {
+      return;
+    }
+
+    const cellIndex = Array.from(currentRow.cells || []).indexOf(currentTarget);
+
+    const nextSibling = currentRow.nextElementSibling;
+    if (!(nextSibling instanceof HTMLTableRowElement)) {
+      let depth = 0;
+      // Poll for the new 'add row' row to be added to the DOM.
+      const pollForNewRow = () => {
+        const newNextSibling = currentRow.nextElementSibling;
+        if (newNextSibling instanceof HTMLTableRowElement) {
+          const nextCell = newNextSibling.cells[cellIndex];
+          // Find the input within next cell and focus it.
+          const input = nextCell.querySelector('input');
+          if (input) {
+            input.focus();
+          }
+
+          // TODO(Zan): Use the same utility that sheets uses.
+          // Scroll current row into view after it's been hidden behind the sticky add-row row.
+          currentRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        } else if (depth++ < 100) {
+          requestAnimationFrame(pollForNewRow);
+        }
+      };
+      requestAnimationFrame(pollForNewRow);
+    }
+  }, []);
 
   return (
-    <td tabIndex={0} {...domAttributes} className={className}>
+    <td data-testid='table.cell' tabIndex={0} {...domAttributes} className={className} onKeyDown={handleKeyDown}>
       {children}
     </td>
   );
@@ -30,7 +68,11 @@ const FocusableCell = <TData extends RowData, TValue>({ cell, children }: CellPr
 
 const StaticCell = <TData extends RowData, TValue>({ cell, children }: CellProps<TData, TValue>) => {
   const tableContext = useTableContext();
-  return <td className={tdRoot(tableContext, cell.column.columnDef.meta?.cell?.classNames)}>{children}</td>;
+  return (
+    <td data-testid='table.cell' className={tdRoot(tableContext, cell.column.columnDef.meta?.cell?.classNames)}>
+      {children}
+    </td>
+  );
 };
 
 const Cell = <TData extends RowData, TValue>({ cell, children }: CellProps<TData, TValue>) => {

package/src/components/ColumnMenu/ColumnMenu.tsx

@@ -6,7 +6,7 @@ import { X, GearSix, CaretDown, ArrowDown, ArrowUp, ArrowRight, ArrowLeft } from
 import { type SortDirection, type HeaderContext, type RowData } from '@tanstack/react-table';
 import React, { useRef, useState, useCallback } from 'react';
 
-import { Button, DensityProvider, Popover, DropdownMenu } from '@dxos/react-ui';
+import { Button, Popover, DropdownMenu } from '@dxos/react-ui';
 import { getSize, mx } from '@dxos/react-ui-theme';
 
 import { ColumnSettingsForm } from './ColumnSettingsForm';
@@ -59,7 +59,7 @@ export const ColumnMenu = <TData extends RowData, TValue>({
   );
 
   return (
-    <div className='flex items-center justify-center justify-between'>
+    <div className='flex items-center justify-between'>
       <div className='flex items-center gap-1 truncate' title={title}>
         <SortIndicator direction={sortDirection} onClick={onToggleSort} />
         <div className='truncate'>{title}</div>
@@ -69,7 +69,7 @@ export const ColumnMenu = <TData extends RowData, TValue>({
         <Popover.Root open={isColumnSettingsOpen} onOpenChange={setIsColumnSettingsOpen} modal={false}>
           <DropdownMenu.Trigger ref={columnSettingsAnchorRef} asChild>
             <Popover.Anchor asChild>
-              <Button variant='ghost'>
+              <Button variant='ghost' data-testid='table.column-menu'>
                 <CaretDown className={getSize(4)} />
               </Button>
             </Popover.Anchor>
@@ -124,7 +124,7 @@ export const ColumnMenu = <TData extends RowData, TValue>({
                   </>
                 )}
 
-                <DropdownMenu.Item onClick={onOpenColumnSettings}>
+                <DropdownMenu.Item onClick={onOpenColumnSettings} data-testid='table.open-column-settings'>
                   <span className='grow'>Column settings</span>
                   <span className='opacity-50'>
                     <GearSix className={mx(getSize(4), 'rotate-90')} />
@@ -137,10 +137,8 @@ export const ColumnMenu = <TData extends RowData, TValue>({
 
           <Popover.Portal>
             <Popover.Content>
-              <Popover.Viewport classNames='w-60'>
-                <DensityProvider density='fine'>
-                  <ColumnSettingsForm {...props} column={column} onClose={() => setIsColumnSettingsOpen(false)} />
-                </DensityProvider>
+              <Popover.Viewport>
+                <ColumnSettingsForm {...props} column={column} onClose={() => setIsColumnSettingsOpen(false)} />
               </Popover.Viewport>
               <Popover.Arrow />
             </Popover.Content>

package/src/components/ColumnMenu/ColumnSettingsForm.stories.tsx

@@ -0,0 +1,104 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxosTheme';
+import React from 'react';
+
+import { withTheme } from '@dxos/storybook-utils';
+
+import { ColumnSettingsForm, type ColumnSettingsFormProps } from './ColumnSettingsForm';
+import { type TableDef } from '../../schema';
+
+export default {
+  title: 'react-ui-table/ColumnSettingsForm',
+  component: ColumnSettingsForm,
+  decorators: [withTheme],
+};
+
+const sampleTableDef: TableDef = {
+  id: '1',
+  name: 'Sample Table',
+  columns: [
+    { id: 'col-1', prop: 'name', type: 'string', label: 'Name' },
+    { id: 'col-2', prop: 'age', type: 'number', label: 'Age', digits: 0 },
+  ],
+};
+
+const sampleTablesToReference: TableDef[] = [
+  sampleTableDef,
+  {
+    id: '2',
+    name: 'Reference Table',
+    columns: [
+      { id: 'ref-col-1', prop: 'id', type: 'string', label: 'ID' },
+      { id: 'ref-col-2', prop: 'description', type: 'string', label: 'Description' },
+    ],
+  },
+];
+
+const defaultArgs: ColumnSettingsFormProps = {
+  column: {
+    id: 'col-1',
+    prop: 'name',
+    type: 'string',
+    label: 'Name',
+  },
+  tableDef: sampleTableDef,
+  tablesToReference: sampleTablesToReference,
+  onUpdate: (id, column) => console.log('onUpdate', { id, column }),
+  onDelete: (id) => console.log('onDelete', id),
+  onClose: () => console.log('onClose'),
+};
+
+export const Default = {
+  args: defaultArgs,
+};
+
+export const NumberColumn = {
+  args: {
+    ...defaultArgs,
+    column: {
+      id: 'col-2',
+      prop: 'age',
+      type: 'number',
+      label: 'Age',
+      digits: 0,
+    },
+  },
+};
+
+export const ReferenceColumn = {
+  args: {
+    ...defaultArgs,
+    column: {
+      id: 'col-3',
+      prop: 'reference',
+      type: 'ref',
+      label: 'Reference',
+      refTable: '2',
+      refProp: 'ref-col-1',
+    },
+  },
+};
+
+export const NewColumn = {
+  args: {
+    ...defaultArgs,
+    column: {
+      id: 'new-col',
+      prop: '',
+      type: 'string',
+      label: '',
+    },
+  },
+};
+
+const Template = (args: ColumnSettingsFormProps) => (
+  <div className='p-4 max-is-64'>
+    <ColumnSettingsForm {...args} />
+  </div>
+);
+
+export const Interactive = Template.bind({});
+(Interactive as any).args = defaultArgs;

package/src/components/ColumnMenu/ColumnSettingsForm.tsx

@@ -1,22 +1,14 @@
 //
 // Copyright 2024 DXOS.org
 //
-import { Check, Trash, X } from '@phosphor-icons/react';
-import React, { type FC, type PropsWithChildren, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 
-import { Button, Input, Select, Separator, useTranslation } from '@dxos/react-ui';
-import { getSize, mx } from '@dxos/react-ui-theme';
+import { Button, Input, Select, useTranslation } from '@dxos/react-ui';
 import { safeParseInt } from '@dxos/util';
 
 import { type TableDef, type ColumnProps, type ColumnType } from '../../schema';
 import { translationKey } from '../../translations';
 
-const Section: FC<PropsWithChildren & { className?: string }> = ({ children, className }) => (
-  <div role='none' className={mx('p-2', className)}>
-    {children}
-  </div>
-);
-
 export type ColumnSettingsFormProps = {
   column: ColumnProps;
   tableDef: TableDef;
@@ -46,10 +38,6 @@ export const ColumnSettingsForm = ({
   const propRef = useRef<HTMLInputElement>(null);
   const { t } = useTranslation(translationKey);
 
-  const handleCancel = () => {
-    onClose?.();
-  };
-
   const handleSave = () => {
     const { prop, refTable, refProp, type, label, digits } = formState;
 
@@ -88,19 +76,22 @@ export const ColumnSettingsForm = ({
   };
 
   return (
-    <div className='flex flex-col gap-1'>
-      <Section>
+    <div className='p-1 space-y-2'>
+      <div className='space-y-1'>
         <Input.Root>
-          <Input.Label classNames='mbe-1'>{t('column label label')}</Input.Label>
+          <Input.Label>{t('column label label')}</Input.Label>
           <Input.TextInput
             placeholder='Column label'
             value={formState.label ?? ''}
             onChange={(event) => setFormState((prevState) => ({ ...prevState, label: event.target.value }))}
             autoFocus
+            data-testid='table.column-settings.label'
           />
         </Input.Root>
+      </div>
+      <div className='space-y-1'>
         <Input.Root>
-          <Input.Label classNames='mbe-1 mbs-3'>{t('property key label')}</Input.Label>
+          <Input.Label>{t('property key label')}</Input.Label>
           <Input.TextInput
             ref={propRef}
             placeholder='Property key'
@@ -110,13 +101,15 @@ export const ColumnSettingsForm = ({
             }
           />
         </Input.Root>
+      </div>
+      <div className='space-y-1'>
         <Input.Root>
-          <Input.Label classNames='mbe-1 mbs-3'>{t('column type label')}</Input.Label>
+          <Input.Label>{t('column type label')}</Input.Label>
           <Select.Root
             value={formState.type}
             onValueChange={(value) => setFormState((prevState) => ({ ...prevState, type: value }))}
           >
-            <Select.TriggerButton placeholder='Type' classNames='is-full' />
+            <Select.TriggerButton classNames='is-full' placeholder='Type' />
             <Select.Portal>
               <Select.Content>
                 <Select.Viewport>
@@ -130,60 +123,37 @@ export const ColumnSettingsForm = ({
             </Select.Portal>
           </Select.Root>
         </Input.Root>
-      </Section>
+      </div>
       {formState.type === 'number' && (
-        <Section>
+        <div className='space-y-1'>
           <Input.Root>
-            <Input.Label classNames='mbe-1 mbs-3'>{t('digits label')}</Input.Label>
+            <Input.Label>{t('digits label')}</Input.Label>
             <Input.TextInput
               value={formState.digits ?? ''}
               onChange={(event) => setFormState((prevState) => ({ ...prevState, digits: event.target.value }))}
             />
           </Input.Root>
-        </Section>
+        </div>
       )}
 
       {formState.type === 'ref' && (
-        <Section>
-          <Input.Root>
-            <Input.Label classNames='mbe-1 mbs-3'>Table</Input.Label>
-            <Select.Root
-              value={formState.refTable}
-              onValueChange={(value) => setFormState((prevState) => ({ ...prevState, refTable: value }))}
-            >
-              <Select.TriggerButton placeholder='Table' classNames='is-full' />
-              <Select.Portal>
-                <Select.Content>
-                  <Select.Viewport>
-                    {tablesToReference
-                      .filter((t) => t.id !== tableDef.id)
-                      .map(({ id, name }) => (
-                        <Select.Option key={id} value={id}>
-                          {name ?? id}
-                        </Select.Option>
-                      ))}
-                  </Select.Viewport>
-                </Select.Content>
-              </Select.Portal>
-            </Select.Root>
-          </Input.Root>
-
-          {formState.refTable && (
+        <>
+          <div className='space-y-1'>
             <Input.Root>
-              <Input.Label classNames='mbe-1 mbs-3'>Table property</Input.Label>
+              <Input.Label>Table</Input.Label>
               <Select.Root
-                value={formState.refProp}
-                onValueChange={(value) => setFormState((prevState) => ({ ...prevState, refProp: value }))}
+                value={formState.refTable}
+                onValueChange={(value) => setFormState((prevState) => ({ ...prevState, refTable: value }))}
               >
-                <Select.TriggerButton placeholder='Property' classNames='is-full' />
+                <Select.TriggerButton placeholder='Table' classNames='is-full' />
                 <Select.Portal>
                   <Select.Content>
                     <Select.Viewport>
                       {tablesToReference
-                        .find((tableDef) => tableDef.id === formState.refTable)
-                        ?.columns.map(({ id, label }) => (
+                        .filter((t) => t.id !== tableDef.id)
+                        .map(({ id, name }) => (
                           <Select.Option key={id} value={id}>
-                            {label ?? id}
+                            {name ?? id}
                           </Select.Option>
                         ))}
                     </Select.Viewport>
@@ -191,29 +161,46 @@ export const ColumnSettingsForm = ({
                 </Select.Portal>
               </Select.Root>
             </Input.Root>
+          </div>
+          {formState.refTable && (
+            <div className='space-y-1'>
+              <Input.Root>
+                <Input.Label>Table property</Input.Label>
+                <Select.Root
+                  value={formState.refProp}
+                  onValueChange={(value) => setFormState((prevState) => ({ ...prevState, refProp: value }))}
+                >
+                  <Select.TriggerButton placeholder='Property' />
+                  <Select.Portal>
+                    <Select.Content>
+                      <Select.Viewport>
+                        {tablesToReference
+                          .find((tableDef) => tableDef.id === formState.refTable)
+                          ?.columns.map(({ id, label }) => (
+                            <Select.Option key={id} value={id}>
+                              {label ?? id}
+                            </Select.Option>
+                          ))}
+                      </Select.Viewport>
+                    </Select.Content>
+                  </Select.Portal>
+                </Select.Root>
+              </Input.Root>
+            </div>
           )}
-        </Section>
+        </>
       )}
 
-      <Separator classNames='mli-2' />
+      <div role='none' className='h-1' />
 
-      <Section className='space-b-1.5'>
-        <Button variant='primary' classNames='is-full flex gap-2' onClick={handleSave}>
-          <span>{t('save label')}</span>
-          <div className='grow' />
-          <Check className={getSize(5)} />
-        </Button>
-        <Button classNames='is-full flex gap-2' onClick={handleCancel}>
-          <span>{t('cancel label', { ns: 'os' })}</span>
-          <div className='grow' />
-          <X className={getSize(5)} />
+      <div className='flex flex-row justify-end gap-1'>
+        <Button onClick={handleDelete} data-testid='table.column-settings.delete'>
+          {t('delete label')}
         </Button>
-        <Button classNames='is-full flex gap-2' onClick={handleDelete}>
-          <span>{t('delete label')}</span>
-          <div className='grow' />
-          <Trash className={getSize(5)} />
+        <Button variant='primary' onClick={handleSave} data-testid='table.column-settings.save'>
+          {t('save label')}
         </Button>
-      </Section>
+      </div>
     </div>
   );
 };

package/src/components/Table/Table.stories.tsx

@@ -323,7 +323,7 @@ export const InsertDelete = {
     };
 
     return (
-      <div>
+      <div className='space-y-4'>
         <div className='flex flex-row gap-2'>
           <Button onClick={onInsertFirst}>Insert first</Button>
           <Button onClick={onInsertLast}>Insert last</Button>
@@ -331,7 +331,7 @@ export const InsertDelete = {
           <Button onClick={onDeleteLast}>Delete last</Button>
         </div>
         <Table.Root>
-          <Table.Viewport classNames='fixed inset-0'>
+          <Table.Viewport>
             <Table.Main<Item>
               role='grid'
               rowsSelectable='multi'

package/src/components/Table/Table.tsx

@@ -25,12 +25,11 @@ import React, {
   memo,
 } from 'react';
 
-import { type ThemedClassName, useDefaultValue } from '@dxos/react-ui';
+import { DensityProvider, type ThemedClassName, useDefaultValue } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
 import { TableBody } from './TableBody';
 import { type TypedTableProvider, TableProvider as UntypedTableProvider, useTableContext } from './TableContext';
-import { TableFooter } from './TableFooter';
 import { TableHead } from './TableHead';
 import { TableRootContext, useTableRootContext } from './TableRootContext';
 import { type TableProps } from './props';
@@ -41,7 +40,11 @@ type TableRootProps = { children: ReactNode };
 
 const TableRoot = ({ children }: TableRootProps) => {
   const contextValue = useTableRootContext();
-  return <TableRootContext.Provider value={contextValue}>{children}</TableRootContext.Provider>;
+  return (
+    <TableRootContext.Provider value={contextValue}>
+      <DensityProvider density='fine'>{children}</DensityProvider>
+    </TableRootContext.Provider>
+  );
 };
 
 type TableViewportProps = ThemedClassName<ComponentPropsWithoutRef<typeof Primitive.div>> & {
@@ -175,7 +178,7 @@ export const TablePrimitive = <TData extends RowData>(props: TableProps<TData>)
  * Pure implementation of table outside of context set-up.
  */
 const TableImpl = <TData extends RowData>(props: TableProps<TData>) => {
-  const { debug, classNames, role, footer, grouping, fullWidth } = props;
+  const { debug, classNames, role, grouping, fullWidth } = props;
   const { table } = useTableContext<TData>();
 
   if (debug) {
@@ -194,13 +197,15 @@ const TableImpl = <TData extends RowData>(props: TableProps<TData>) => {
     <table
       role={role}
       className={tableRoot(props, classNames)}
-      {...(!fullWidth && { style: { width: table.getTotalSize() } })}
+      style={{
+        // borderCollapse: 'separate',
+        borderSpacing: 0,
+        ...(!fullWidth && { width: table.getTotalSize() }),
+      }}
     >
       <TableHead />
 
       {grouping?.length !== 0 ? <TableComponent /> : <GroupedTableContent />}
-
-      {footer && <TableFooter />}
     </table>
   );
 };