React Table Accessor Page

If you are migrating code or reading older tutorials, you will notice a syntax shift.

Responsible for the underlying data value . This value is what the table uses for sorting, filtering, and grouping .

import useTable from 'react-table';

const columns = [ Header: "First Name", accessor: "firstName" , // simple property Header: "City", accessor: "address.city" // nested via dot ];

It uses the string to look up the value in the row. Modern versions (v8) also support "dot notation" for deep nesting (e.g., user.profile.name ). react table accessor

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.

In the world of tables—most notably with the industry-standard TanStack Table (formerly React Table) —the accessor is the "bridge" that connects your raw data to a specific column. If you are migrating code or reading older

const columns = [

header: 'Full Name', accessorFn: (row) => `$row.firstName $row.lastName`, , import useTable from 'react-table'; const columns = [