feat(DataTable): add truncate prop to Column with auto title tooltip

[erickteowarang]

Summary

• Adds truncate: boolean to Column<TRow>. Text overflow is universal across list tables — today callers wire CSS truncate + a title attribute inside their custom render to surface the full value on hover. This pushes both concerns to the column level.
• When truncate: true, body cells get truncate max-w-0 (so they stay shrinkable inside the row), and the full value is auto-revealed in an app-shell <Tooltip> on hover when the resolved cell value is a stringifiable primitive.
• Non-stringifiable values (objects, arrays) and absent values still apply the truncate CSS but skip the tooltip wiring — callers can render their own tooltip inside render for those cases.

How the tooltip resolves its value

The tooltip goes through the same precedence rule the built-in type renderers use — getCellValue (now exported from cell-renderers.tsx):

1. col.accessor(row) if defined,
2. otherwise row[col.id] if id is set,
3. otherwise no tooltip.

Routing both the typed renderers and the truncate tooltip through one helper means consumers don't have to learn two different "what does this cell read?" rules. As a bonus, inferColumns now pins id to the metadata field name, so the spread pattern works without an explicit accessor:

// Explicit accessor (any column type):
column({
  label: "Description",
  accessor: (row) => row.description,
  truncate: true,
});

// Inferred — id resolves via `row[col.id]`, no accessor needed:
column({ ...infer("description"), truncate: true });

Accessibility considerations

• Wins over a title attribute: proper role="tooltip" + aria-describedby semantics from Base UI; screen readers get the full text from the cell DOM regardless of CSS truncation.
• Known gap (not regressing from title): the <td> isn't focusable, so sighted keyboard-only users can't trigger the tooltip. Adding tabIndex={0} to tooltip-wired cells is a possible follow-up; SR users are unaffected because cell text is intact.
• Tooltip fires regardless of actual overflow — short values that fit also show a tooltip on hover. Detecting real overflow needs JS DOM measurement; out of scope here.
• Touch — Base UI tooltips don't surface on tap; touch users see the truncated value only. Standard limitation.

Why this is part of a three-PR series

This is 3 / 3 in a series porting patterns from a downstream consumer's ReconciliationList into the platform DataTable. PR 1 (#247) adds type for built-in cell renderers; PR 2 (#248) adds align. Each PR is cut from main and is independent — they can land in any order.

Notes for reviewers

• max-w-0 is what makes the truncation actually take effect inside table layout. Without it, the cell sizes to its content and the ellipsis never fires. Documented in the JSDoc on Column.truncate so callers know to anchor row width via width on neighboring columns (or fixed-size columns like selection / row actions).
• A Tooltip.Provider (delay 300ms) is mounted at DataTable.Root, so all truncate tooltips in a single table share hover-delay state. Benign no-op for tables that don't use truncate.
• inferColumns now sets id: fieldName in addition to label. Previously consumers calling toggleColumn(label) on inferred columns would have used the label string; now toggleColumn(fieldName) works (and is the more stable identifier). The label-based form continues to resolve via the id ?? label fallback.
• Demo update: the data-table demo now includes a Description column with varied-length copy (most 140–200 chars, a few 30–60 chars) to exercise the ellipsis + tooltip behavior end-to-end via column({ ...infer("description"), type: "text", truncate: true }).

Test plan

• pnpm --filter @tailor-platform/app-shell type-check — clean
• pnpm -r type-check — workspace clean (vite + nextjs demos typecheck)
• pnpm --filter @tailor-platform/app-shell test — 1011 passed (6 new truncate tests: classes, string/number accessor wiring, object accessor skipped, no-accessor skipped, row[col.id] fallback wired)
• pnpm --filter @tailor-platform/app-shell lint — clean
• pnpm --filter @tailor-platform/app-shell build — dist .d.ts reflects the new id on inferred columns
• pnpm fmt:check — clean across 346 files
• Reviewer smoke-test: set truncate: true on a column with accessor (or an inferred column) in data-table-demo, narrow the column, confirm the ellipsis appears and hover shows the full value via the app-shell <Tooltip>

🤖 Generated with Claude Code

[IzumiSy]

@copilot does this PR implement behaviour to show tooltip as the description says?

[Copilot]

@copilot does this PR implement behaviour to show tooltip as the description says?

Yes — d0ef9be implements it as a native browser hover tooltip via the cell’s title attribute when truncate: true and accessor returns a string or number (packages/core/src/components/data-table/data-table.tsx). The behavior is covered in packages/core/src/components/data-table/data-table.test.tsx. It does not render the app-shell Tooltip component; it relies on the browser’s default tooltip.

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@tailor-platform/app-shell@249

npm i https://pkg.pr.new/@tailor-platform/app-shell-sdk-plugin@249

npm i https://pkg.pr.new/@tailor-platform/app-shell-vite-plugin@249

commit: e92a4e1

[IzumiSy]

LGTM!

[IzumiSy]

Using getCellValue here makes sense!