TanStack Table Integration
Relevant source files
The following files were used as context for generating this wiki page:
The integration of data-path with TanStack Table provides a type-safe mechanism for defining column accessors and identifiers. By using lambda-based paths instead of raw strings, developers can ensure that table columns remain synchronized with the underlying data model, benefiting from IDE autocomplete and compile-time validation.
In the context of TanStack Table, data-path serves two primary roles: providing the extraction logic for cell values via the .fn accessor and providing a unique, string-based column identifier through the .$ property. This eliminates "refactoring nightmares" where renaming a property in a data model might otherwise leave broken string literals in table definitions.
Sources: README.md:12-21, README.md:280-285, skills/data-path/SKILL.md:68-75
Core Integration Components
The integration relies on specific properties of the Path object to satisfy the requirements of the TanStack Table createColumnHelper API.
Column Accessor and ID
TanStack Table's accessor() method typically requires an extraction function and a unique id when that function is provided. data-path fulfills these requirements using:
path.fn: A pre-bound accessor function that extracts the value from a row object.path.$: The serialized string representation of the path (e.g.,"contact.email"), used as the unique column identifier.
Sources: README.md:287-299, src/types.ts:168-175, src/impl/path-impl.ts:74-76
Data Flow for Table Columns
The following diagram illustrates how a path defined via data-path flows into the TanStack Table configuration to handle data extraction.
The diagram shows the transformation of a TypeScript lambda into a path object, which then provides the necessary metadata and functions to the TanStack Table column definition.
Sources: README.md:287-299, skills/data-path/SKILL.md:68-75
Implementation Details
Type Safety and Autocomplete
Because the path is created using path<T>(p => p.property), the compiler ensures that the path actually exists on the data type T used by the table. This provides 100% type safety for deeply nested structures (e.g., user.contact.address.zipCode).
| Feature | data-path Implementation | Benefit |
|---|---|---|
| Value Extraction | path.fn | Type-safe extraction; returns undefined if intermediate nodes are missing. |
| Column Identity | path.$ | Automatic dot-notation string generation (e.g., "user.0.name"). |
| Deep Access | Proxy-based Lambda | Full IDE autocomplete for nested table data. |
Sources: README.md:24-30, src/types.ts:153-157, src/impl/path-impl.ts:55-66, skills/data-path/references/api.md:14-19
Code Example: Column Definition
The following snippet demonstrates the standard pattern for integrating data-path with the TanStack Table columnHelper.
import { createColumnHelper } from "@tanstack/react-table";
import { path } from "data-path";
type User = { id: string; contact: { email: string } };
const columnHelper = createColumnHelper<User>();
const emailPath = path<User>(p => p.contact.email);
const columns = [
columnHelper.accessor(emailPath.fn, {
id: emailPath.$,
header: "Email",
cell: info => info.getValue(),
}),
];
Sources: README.md:287-299
Relational Algebra in Tables
In complex table scenarios—such as conditional formatting or cell-level validation—the relational algebra features of data-path can be used to compare the current column's path against other paths (e.g., error paths from validation libraries).
Path Comparison Logic
The table below describes methods useful for managing relationships between table columns and external data (like validation errors).
| Method | Description | Use Case |
|---|---|---|
equals(other) | Checks if two paths are identical. | Highlighting a specific cell based on a field-specific error. |
startsWith(other) | Checks if the path is a child of the prefix. | Grouping columns under a shared parent data structure. |
match(other) | Returns the detailed relationship. | Identifying if a changed data path affects a specific column or its parent. |
Sources: src/types.ts:208-245, src/impl/path-impl.ts:165-207, skills/data-path/references/api.md:40-48
Integrating data-path with TanStack Table transforms string-based column definitions into strictly typed, maintainable code. By leveraging path.fn and path.$, developers can ensure that table configuration remains robust against data model refactoring and provides a seamless developer experience with IDE guidance.