Skip to content

feat: add column calculation summary row to database table view #1245

Description

@sw-factory-automations

Description

Database table views have no way to see aggregate values for a column. In Notion, clicking a "Calculate" button at the bottom of each column shows sum, average, min, max, count, etc. This is one of the most-used database features for project tracking and data analysis. Adding a summary row at the bottom of the table gives users at-a-glance insights without exporting to a spreadsheet.

Approval Required

This is a HIGH risk change because it adds a new feature surface:

  • Adds a new UI element (summary row) to the table view that interacts with virtualization, column resize, and column reorder
  • Requires per-column calculation config persisted in database_views.config
  • Calculation logic must handle all property types correctly (sum only for numbers, count for all types, etc.)
  • The summary row must stay pinned at the bottom during scroll (outside the virtualized area)

Comment "approved" to release this to the automation queue.

Acceptance Criteria

  • A summary row appears at the bottom of the table view, pinned below the scrollable area
  • Each column cell in the summary row shows a "Calculate" button (muted text) when empty
  • Clicking "Calculate" opens a dropdown with type-appropriate options:
    • All types: None, Count all, Count values, Count unique, Count empty, Percent empty, Percent filled
    • Number: + Sum, Average, Min, Max, Median, Range
    • Date: + Earliest, Latest, Date range
    • Checkbox: + Checked, Unchecked, Percent checked
  • Selecting a calculation shows the result in the summary cell
  • Results update live as rows are added, edited, or filtered
  • The selected calculation per column is persisted in database_views.config.column_calculations
  • Each view maintains independent calculation settings
  • Summary row aligns with column widths (including after resize and reorder)
  • Storybook stories cover: no calculations, mixed calculations, number sum, date range
  • E2E test: add number column → add rows with values → select "Sum" → verify sum displays → filter rows → sum updates → switch view → switch back → calculation persists
  • pnpm lint && pnpm typecheck && pnpm test pass

Dependencies

None

Technical Notes

  • Add column_calculations?: Record<string, string> to DatabaseViewConfig in src/lib/types.ts (maps property ID → calculation type)
  • Create src/lib/database-calculations.ts with pure functions: calculateColumnSummary(rows, propertyId, calculationType, propertyType) — returns formatted string
  • Render the summary row outside the virtualized container in table-view.tsx, below the scrollable area, using the same CSS grid template as data rows
  • Use handleViewConfigChange to persist calculation selections (same pattern as column_widths, row_height)
  • The summary row should use position: sticky; bottom: 0 or be placed after the scroll container
  • Use a DropdownMenu for the calculation picker, grouped by category (Common, Number-specific, etc.)
  • Reference .agents/conventions.md for component patterns and .agents/design.md for visual styling

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestneeds-humanNeeds human input — automation will re-queue when user respondspriority:3

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions