Passing custom data to a Cell component

[brandondurham]

I need to pass a <Link /> component into my Cells so that users can click an order number to view the order. I know how to access the value for the Cell, but I’m not clear about how to pass an href.

My data and columns look something like this:

import { Link } from '../Link';

export const data = [
	{
		date: 'March 17, 2021',
		orderNumber: 'c150be5f-195a-4e66-bf1e-55af785628cc',
	},
	{
		date: 'March 18, 2021',
		orderNumber: '1c2bef06-f57f-4d99-b0fc-f072ca91bff0',
	},
	{
		date: 'March 19, 2021',
		orderNumber: 'e49425d4-2f28-4f48-b8d9-85e859ed6ce5',
	},
];

export const columns = [
	{
		accessor: 'date',
		Header: 'Date',
	},
	{
		accessor: 'orderNumber',
		Cell: props => {
			console.log(props);
			return <Link href="/">{ props.value }</Link>;
		},
		Header: 'Amount',
	},
];

When using custom components in Cell, how do you pass additional data on to that component from the data collection?

I know I can do something like this, but I don’t expect this is the recommended way:

import { Link } from '../Link';

export const data = [
	{
		date: 'March 17, 2021',
		href: '/order/something',
		orderNumber: 'c150be5f-195a-4e66-bf1e-55af785628cc',
	},
	{
		date: 'March 18, 2021',
		href: '/order/nothing',
		orderNumber: '1c2bef06-f57f-4d99-b0fc-f072ca91bff0',
	},
	{
		date: 'March 19, 2021',
		href: '/order/everything',
		orderNumber: 'e49425d4-2f28-4f48-b8d9-85e859ed6ce5',
	},
];

export const columns = [
	{
		accessor: 'date',
		Header: 'Date',
	},
	{
		accessor: 'orderNumber',
		Cell: props => {
			return <Link href={ props?.cell?.row?.original?.href }>{ props.value }</Link>;
		},
		Header: 'Amount',
	},
];

[xavier-taylor]

Try this - I am doing something similar in my app, it works.

export const data = [
	{
	       date: 'March 17, 2021',
               order: {
               		href: '/order/something',
		       orderNumber: 'c150be5f-195a-4e66-bf1e-55af785628cc',
               },
	},
	.....
];

[brandondurham]

Well hell, it’s as simple as that. :)

Thanks, @xavier-taylor!