This allows you to pass a function that receives the row object and returns the desired value.
const data = [ firstName: "John", lastName: "Doe", address: city: "NYC" , birthDate: "2000-01-01" ];
In the TanStack Table ecosystem (the industry standard for headless UI tables), the "accessor" is the key that unlocks specific data points from your row objects for sorting, filtering, and displaying.
The simplest method. You provide a string that matches a key in your data object. This also supports for nested data. javascript react table accessor
Header: "Full Name", id: "full", accessor: row => $row.firstName $row.lastName
When a string is used, the library automatically uses that string as the column's unique ID for internal operations like sorting and state management. Functional Accessors ( accessorFn )
import useTable from 'react-table';
const columns = [ id: 'fullName', header: 'Full Name', accessorFn: (row) => `$row.firstName $row.lastName`, ]; Use code with caution. Copied to clipboard 3. Array Index Accessors
];
When building data grids in React, one of the most fundamental challenges is bridging the gap between your raw data structure (how your API sends it) and your UI structure (how the table displays it). This is where the comes in. This allows you to pass a function that
A is the primary mechanism used to connect a column to a specific piece of data within your row objects . It acts as a "bridge," telling the table library exactly which property or computed value from your dataset should be displayed, sorted, and filtered in a given column.
Responsible for the underlying data value . This value is what the table uses for sorting, filtering, and grouping .