reactjsmaterial-uireact-tablematerial-react-table

How to access the row data from a single cell in Material React Table


I'm using https://www.material-react-table.com/docs/guides/row-actions

I can render the cell a specific way according to this example

const columns = useMemo(
        () => [
            {
                header: 'Relevance',
                accessorKey: 'rating', 
                size: 40, 
                Cell: ({cell}) => {
                    return <span>{cell.getValue()}</span>;
                },
                
            },
)

but how do I access the full row data from inside the span?


Solution

  • You can use the accessorFn property to get the values of the row.

    const columns = useMemo(
      () => [
        {
          header: "Relevance",
          accessorFn: (row) => row,
          size: 40,
          Cell: ({ cell }) => {
            const row = cell.getValue();
            return <span>{row.theValueYouWant}</span>;
          },
        },
      ],
      []
    );
    

    See here a live preview