diff --git a/packages/malloy-render/src/component/render-result-metadata.ts b/packages/malloy-render/src/component/render-result-metadata.ts
new file mode 100644
index 000000000..26e77f0ae
--- /dev/null
+++ b/packages/malloy-render/src/component/render-result-metadata.ts
@@ -0,0 +1,100 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining
+ * a copy of this software and associated documentation files
+ * (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge,
+ * publish, distribute, sublicense, and/or sell copies of the Software,
+ * and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+ * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+ * CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+ * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import {DataArray, Explore, Field, Result} from '@malloydata/malloy';
+import {valueIsNumber, valueIsString} from './util';
+
+export interface FieldRenderMetadata {
+  field: Field;
+  min: number | null;
+  max: number | null;
+  minString: string | null;
+  maxString: string | null;
+}
+
+export interface RenderResultMetadata {
+  fields: Record<string, FieldRenderMetadata>;
+}
+
+export function getResultMetadata(result: Result) {
+  const fieldKeyMap: WeakMap<Field, string> = new WeakMap();
+  const getFieldKey = (f: Field) => {
+    if (fieldKeyMap.has(f)) return fieldKeyMap.get(f)!;
+    const fieldKey = JSON.stringify(f.fieldPath);
+    fieldKeyMap.set(f, fieldKey);
+    return fieldKey;
+  };
+
+  const metadata: RenderResultMetadata = {
+    fields: {},
+  };
+
+  function initFieldMeta(e: Explore) {
+    for (const f of e.allFields) {
+      if (f.isAtomicField()) {
+        const fieldKey = getFieldKey(f);
+        metadata.fields[fieldKey] = {
+          field: f,
+          min: null,
+          max: null,
+          minString: null,
+          maxString: null,
+        };
+      } else if (f.isExploreField()) {
+        initFieldMeta(f);
+      }
+    }
+  }
+
+  const populateFieldMeta = (
+    data: DataArray,
+    metadata: RenderResultMetadata
+  ) => {
+    for (const row of data) {
+      for (const f of data.field.allFields) {
+        const value = f.isAtomicField() ? row.cell(f).value : undefined;
+        const fieldKey = getFieldKey(f);
+        const fieldMeta = metadata.fields[fieldKey];
+        if (valueIsNumber(f, value)) {
+          const n = value;
+          fieldMeta.min = Math.min(fieldMeta.min ?? n, n);
+          fieldMeta.max = Math.max(fieldMeta.max ?? n, n);
+        } else if (valueIsString(f, value)) {
+          const s = value;
+          if (!fieldMeta.minString || fieldMeta.minString.length > s.length)
+            fieldMeta.minString = s;
+          if (!fieldMeta.maxString || fieldMeta.maxString.length < s.length)
+            fieldMeta.maxString = s;
+        } else if (f.isExploreField()) {
+          const data = row.cell(f) as DataArray;
+          populateFieldMeta(data, metadata);
+        }
+      }
+    }
+  };
+
+  initFieldMeta(result.data.field);
+  populateFieldMeta(result.data, metadata);
+
+  return metadata;
+}
diff --git a/packages/malloy-render/src/component/render.ts b/packages/malloy-render/src/component/render.ts
index 1418dec4b..1003c89b3 100644
--- a/packages/malloy-render/src/component/render.ts
+++ b/packages/malloy-render/src/component/render.ts
@@ -22,9 +22,15 @@
  */
 
 import {Result, Tag} from '@malloydata/malloy';
-import {LitElement, html, css} from 'lit';
+import {LitElement, html, css, PropertyValues} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
 import './table';
+import {provide} from '@lit/context';
+import {resultContext} from './result-context';
+import {
+  RenderResultMetadata,
+  getResultMetadata,
+} from './render-result-metadata';
 
 // Get the first valid theme value or fallback to CSS variable
 function getThemeValue(prop: string, ...themes: Array<Tag | undefined>) {
@@ -57,8 +63,9 @@ export class MalloyRender extends LitElement {
       --malloy-theme--table-gutter-size: 15px;
       --malloy-theme--table-pinned-background: #f5fafc;
       --malloy-theme--table-pinned-border: 1px solid #daedf3;
+      --malloy-theme--font-family: Inter, system-ui, sans-serif;
 
-      font-family: Inter, system-ui, sans-serif;
+      font-family: var(--malloy-render--font-family);
       font-size: var(--malloy-render--table-font-size);
     }
 
@@ -79,6 +86,15 @@ export class MalloyRender extends LitElement {
   @property({attribute: false})
   result!: Result;
 
+  @provide({context: resultContext})
+  metadata!: RenderResultMetadata;
+
+  willUpdate(changedProperties: PropertyValues<this>) {
+    if (changedProperties.has('result')) {
+      this.metadata = getResultMetadata(this.result);
+    }
+  }
+
   override render() {
     const modelTag = this.result.modelTag;
     const {tag: resultTag} = this.result.tagParse();
@@ -136,12 +152,14 @@ export class MalloyRender extends LitElement {
       localTheme,
       modelTheme
     );
+    const fontFamily = getThemeValue('fontFamily', localTheme, modelTheme);
 
     const dynamicStyle = html`<style>
       :host {
         --malloy-render--table-row-height: ${tableRowHeight};
         --malloy-render--table-body-color: ${tableBodyColor};
         --malloy-render--table-font-size: ${tableFontSize};
+        --malloy-render--font-family: ${fontFamily};
         --malloy-render--table-header-color: ${tableHeaderColor};
         --malloy-render--table-header-weight: ${tableHeaderWeight};
         --malloy-render--table-body-weight: ${tableBodyWeight};
diff --git a/packages/malloy-render/src/component/result-context.ts b/packages/malloy-render/src/component/result-context.ts
new file mode 100644
index 000000000..bac3777ba
--- /dev/null
+++ b/packages/malloy-render/src/component/result-context.ts
@@ -0,0 +1,29 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining
+ * a copy of this software and associated documentation files
+ * (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge,
+ * publish, distribute, sublicense, and/or sell copies of the Software,
+ * and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+ * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+ * CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+ * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import {createContext} from '@lit/context';
+import {RenderResultMetadata} from './render-result-metadata';
+
+export const resultContext = createContext<RenderResultMetadata>(
+  'malloy-render-result'
+);
diff --git a/packages/malloy-render/src/component/table.ts b/packages/malloy-render/src/component/table.ts
index 559032afc..2b6c35965 100644
--- a/packages/malloy-render/src/component/table.ts
+++ b/packages/malloy-render/src/component/table.ts
@@ -21,118 +21,33 @@
  * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import {DataArray, DataRecord, Field} from '@malloydata/malloy';
+import {AtomicField, DataArray, DataRecord, Field} from '@malloydata/malloy';
 import {LitElement, TemplateResult, css, html, nothing} from 'lit';
 import {customElement, eventOptions, property, state} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
 import {createContext, provide, consume} from '@lit/context';
-import {isFirstChild, isLastChild} from './util';
+import {
+  clamp,
+  getTextWidth,
+  isFirstChild,
+  isLastChild,
+  valueIsNumber,
+} from './util';
 import {renderNumericField} from './render-numeric-field';
+import {resultContext} from './result-context';
+import {RenderResultMetadata} from './render-result-metadata';
+
+const MIN_COLUMN_WIDTH = 32;
+const MAX_COLUMN_WIDTH = 384;
+const COLUMN_BUFFER = 12;
 
 type TableContext = {
   root: boolean;
+  widthCache: Map<Field, number>;
 };
 
 const tableContext = createContext<TableContext | undefined>('table');
 
-type RenderOptions = {
-  pinnedHeader?: boolean;
-};
-
-// TODO: replace with an estimator per column
-function getColumnWidth() {
-  return 130;
-}
-
-const getContentStyle = (f: Field) => {
-  if (f.isAtomicField()) {
-    const width = getColumnWidth();
-    return `width: ${width}px; min-width: ${width}px; max-width: ${width}px;`;
-  }
-  return '';
-};
-
-const renderCell = (
-  f: Field,
-  value: unknown,
-  options: {
-    hideStartGutter: boolean;
-    hideEndGutter: boolean;
-  }
-) => {
-  return html`<div class="cell-wrapper">
-    <div
-      class=${classMap({
-        'cell-gutter': true,
-        'hide-gutter-border': options.hideStartGutter,
-      })}
-    ></div>
-    <div class="cell-content" style="${getContentStyle(f)}">${value}</div>
-    <div
-      class=${classMap({
-        'cell-gutter': true,
-        'hide-gutter-border': options.hideEndGutter,
-      })}
-    ></div>
-  </div>`;
-};
-
-const renderFieldContent = (
-  row: DataRecord,
-  f: Field,
-  options: RenderOptions
-) => {
-  if (f.isExploreField()) {
-    return html`<malloy-table
-      .data=${row.cell(f) as DataArray}
-      .pinnedHeader=${options.pinnedHeader ?? false}
-      .rowLimit=${options.pinnedHeader ? 1 : Infinity}
-    ></malloy-table>`;
-  }
-  let value: number | string = row.cell(f).value as number;
-  if (options.pinnedHeader) value = '';
-  else if (f.isAtomicField() && f.isNumber()) {
-    value = renderNumericField(f, value);
-  }
-
-  return renderCell(f, value, {
-    hideStartGutter: isFirstChild(f),
-    hideEndGutter: isLastChild(f),
-  });
-};
-
-const renderField = (row: DataRecord, f: Field, options: RenderOptions) => {
-  return html`<td
-    class="column-cell ${classMap({
-      numeric: f.isAtomicField() && f.isNumber(),
-    })}"
-  >
-    ${renderFieldContent(row, f, options)}
-  </td>`;
-};
-
-const renderHeader = (f: Field) => {
-  const isFirst = isFirstChild(f);
-  const isParentFirst = isFirstChild(f.parentExplore);
-  const isParentNotAField = !f.parentExplore.isExploreField();
-  const hideStartGutter = isFirst && (isParentFirst || isParentNotAField);
-
-  const isLast = isLastChild(f);
-  const isParentLast = isLastChild(f.parentExplore);
-  const hideEndGutter = isLast && (isParentLast || isParentNotAField);
-
-  return html`<th
-    class="column-cell ${classMap({
-      numeric: f.isAtomicField() && f.isNumber(),
-    })}"
-  >
-    ${renderCell(f, f.name, {
-      hideStartGutter,
-      hideEndGutter,
-    })}
-  </th>`;
-};
-
 @customElement('malloy-table')
 export class Table extends LitElement {
   static override styles = css`
@@ -264,13 +179,23 @@ export class Table extends LitElement {
   public parentCtx: TableContext | undefined;
 
   @provide({context: tableContext})
-  ctx = {root: false};
+  ctx!: TableContext;
+
+  @consume({context: resultContext})
+  @property({attribute: false})
+  metadata!: RenderResultMetadata;
 
   override connectedCallback() {
     super.connectedCallback();
     if (typeof this.parentCtx === 'undefined') {
       this.ctx = {
         root: true,
+        widthCache: new Map(),
+      };
+    } else {
+      this.ctx = {
+        root: false,
+        widthCache: this.parentCtx.widthCache,
       };
     }
   }
@@ -287,14 +212,149 @@ export class Table extends LitElement {
     return super.createRenderRoot();
   }
 
-  override render() {
-    const fields = this.data.field.allFields;
+  private renderHeader(f: Field) {
+    const isFirst = isFirstChild(f);
+    const isParentFirst = isFirstChild(f.parentExplore);
+    const isParentNotAField = !f.parentExplore.isExploreField();
+    const hideStartGutter = isFirst && (isParentFirst || isParentNotAField);
 
-    const headers = fields.map(f => renderHeader(f));
+    const isLast = isLastChild(f);
+    const isParentLast = isLastChild(f.parentExplore);
+    const hideEndGutter = isLast && (isParentLast || isParentNotAField);
 
-    const renderOptions: RenderOptions = {
-      pinnedHeader: this.pinnedHeader,
+    return html`<th
+      class="column-cell ${classMap({
+        numeric: f.isAtomicField() && f.isNumber(),
+      })}"
+    >
+      ${this.renderCell(f, f.name, {
+        hideStartGutter,
+        hideEndGutter,
+      })}
+    </th>`;
+  }
+
+  private renderField(row: DataRecord, f: Field) {
+    return html`<td
+      class="column-cell ${classMap({
+        numeric: f.isAtomicField() && f.isNumber(),
+      })}"
+    >
+      ${this.renderFieldContent(row, f)}
+    </td>`;
+  }
+
+  private getCellFontStyling() {
+    const rootStyle = getComputedStyle(this);
+    const fontFamily = rootStyle
+      .getPropertyValue('--malloy-render--font-family')
+      .trim();
+    const fontSize = rootStyle
+      .getPropertyValue('--malloy-render--table-font-size')
+      .trim();
+    return {
+      fontFamily,
+      fontSize,
     };
+  }
+
+  private measuringCanvas = document.createElement('canvas');
+
+  private getColumnWidth(f: Field) {
+    const fieldKey = JSON.stringify(f.fieldPath);
+    const fieldMeta = this.metadata.fields[fieldKey];
+    let width = this.ctx.widthCache.get(f);
+
+    if (typeof width === 'undefined') {
+      const fontStyles = this.getCellFontStyling();
+      const font = `${fontStyles.fontSize} ${fontStyles.fontFamily}`;
+      const titleWidth = getTextWidth(f.name, font, this.measuringCanvas);
+      if (f.isAtomicField() && f.isString()) {
+        width =
+          Math.max(
+            getTextWidth(fieldMeta.maxString!, font, this.measuringCanvas),
+            titleWidth
+          ) + COLUMN_BUFFER;
+      } else if (f.isAtomicField() && f.isNumber()) {
+        const formattedValue = renderNumericField(f, fieldMeta.max!);
+        width =
+          Math.max(
+            getTextWidth(formattedValue, font, this.measuringCanvas),
+            titleWidth
+          ) + COLUMN_BUFFER;
+      } else width = 130;
+      width = clamp(MIN_COLUMN_WIDTH, MAX_COLUMN_WIDTH, width);
+      this.ctx.widthCache.set(f, width);
+    }
+
+    return width;
+  }
+
+  private getContentStyle(f: Field) {
+    if (f.isAtomicField()) {
+      const width = this.getColumnWidth(f);
+      return `width: ${width}px; min-width: ${width}px; max-width: ${width}px;`;
+    }
+    return '';
+  }
+
+  private renderCell(
+    f: Field,
+    value: string | number,
+    options: {
+      hideStartGutter: boolean;
+      hideEndGutter: boolean;
+    }
+  ) {
+    return html`<div class="cell-wrapper">
+      <div
+        class=${classMap({
+          'cell-gutter': true,
+          'hide-gutter-border': options.hideStartGutter,
+        })}
+      ></div>
+      <div
+        class="cell-content"
+        style="${this.getContentStyle(f)}"
+        title="${value}"
+      >
+        ${value}
+      </div>
+      <div
+        class=${classMap({
+          'cell-gutter': true,
+          'hide-gutter-border': options.hideEndGutter,
+        })}
+      ></div>
+    </div>`;
+  }
+
+  private renderFieldContent(row: DataRecord, f: Field) {
+    if (f.isExploreField()) {
+      return html`<malloy-table
+        .data=${row.cell(f) as DataArray}
+        .pinnedHeader=${this.pinnedHeader ?? false}
+        .rowLimit=${this.pinnedHeader ? 1 : Infinity}
+      ></malloy-table>`;
+    }
+    let value: number | string = row.cell(f).value as number;
+    if (this.pinnedHeader) value = '';
+    else if (valueIsNumber(f, value)) {
+      // TS doesn't support typeguards for multiple parameters, so unfortunately have to assert AtomicField here. https://github.com/microsoft/TypeScript/issues/26916
+      value = renderNumericField(f as AtomicField, value);
+    } else if (value === null) {
+      value = '∅';
+    }
+
+    return this.renderCell(f, value, {
+      hideStartGutter: isFirstChild(f),
+      hideEndGutter: isLastChild(f),
+    });
+  }
+
+  override render() {
+    const fields = this.data.field.allFields;
+    const headers = fields.map(f => this.renderHeader(f));
 
     const rows: TemplateResult[] = [];
     let i = 0;
@@ -302,7 +362,7 @@ export class Table extends LitElement {
       if (i >= this.rowLimit) break;
       rows.push(
         html`<tr>
-          ${fields.map(f => renderField(row, f, renderOptions))}
+          ${fields.map(f => this.renderField(row, f))}
         </tr>`
       );
       i++;
diff --git a/packages/malloy-render/src/component/util.ts b/packages/malloy-render/src/component/util.ts
index 7fda7ee99..4134eb22f 100644
--- a/packages/malloy-render/src/component/util.ts
+++ b/packages/malloy-render/src/component/util.ts
@@ -36,3 +36,27 @@ export function isLastChild(f: Field | Explore) {
 export function isFirstChild(f: Field | Explore) {
   return getLocationInParent(f) === 0;
 }
+
+export function valueIsNumber(f: Field, v: unknown): v is number {
+  return f.isAtomicField() && f.isNumber() && v !== null;
+}
+
+export function valueIsString(f: Field, s: unknown): s is string {
+  return f.isAtomicField() && f.isString() && s !== null;
+}
+
+export function getTextWidth(
+  text: string,
+  font: string,
+  canvasToUse?: HTMLCanvasElement
+) {
+  const canvas = canvasToUse ?? document.createElement('canvas');
+  const context = canvas.getContext('2d')!;
+  context.font = font;
+  const metrics = context.measureText(text);
+  return metrics.width;
+}
+
+export function clamp(s: number, e: number, v: number) {
+  return Math.max(s, Math.min(e, v));
+}
diff --git a/packages/malloy-render/src/stories/static/tables.malloy b/packages/malloy-render/src/stories/static/tables.malloy
index 3d7c16d9d..4e1f1b751 100644
--- a/packages/malloy-render/src/stories/static/tables.malloy
+++ b/packages/malloy-render/src/stories/static/tables.malloy
@@ -62,4 +62,10 @@ source: products is duckdb.table("data/products.parquet") extend {
       # duration
       avg_retail_duration is round(retail_price.avg())
   }
-};
\ No newline at end of file
+}
+
+source: null_test is duckdb.sql("select unnest([1,null,3]) as i") extend {}
+
+run: products -> { group_by: category aggregate: `t.x` is max(1) }
+
+run: duckdb.sql("select unnest([1,null,3]) as i") -> { select: * }
diff --git a/packages/malloy-render/src/stories/tables.stories.ts b/packages/malloy-render/src/stories/tables.stories.ts
index 6e9503e7f..a8110482b 100644
--- a/packages/malloy-render/src/stories/tables.stories.ts
+++ b/packages/malloy-render/src/stories/tables.stories.ts
@@ -57,3 +57,10 @@ export const NumberFormatting = {
     view: 'number_formats',
   },
 };
+
+export const NullTest = {
+  args: {
+    source: 'null_test',
+    view: '{ select: * }',
+  },
+};
diff --git a/packages/malloy/src/malloy.ts b/packages/malloy/src/malloy.ts
index 197f333cb..3da1d5502 100644
--- a/packages/malloy/src/malloy.ts
+++ b/packages/malloy/src/malloy.ts
@@ -1415,6 +1415,16 @@ abstract class Entity {
     return sourceClasses;
   }
 
+  public get fieldPath(): string[] {
+    const path: string[] = [this.name];
+    let f: Entity | undefined = this._parent;
+    while (f) {
+      path.unshift(f.name);
+      f = f._parent;
+    }
+    return path;
+  }
+
   public hasParentExplore(): this is Field {
     return this._parent !== undefined;
   }