GlobalFilter with filter-match-highlighting

[nimo23]

I have enableGlobalFilter: true and the following example works correctly. However, I am not able to set filter-match-highlighting (see https://www.material-react-table.com/docs/guides/global-filtering#filter-match-highlighting) for my custom cell:

	// TODO: how to use "renderedCellValue" in combination with "row.original"
	columnHelper.accessor((row) => row.age, {
		header: 'AgeWithTaskName',
		id: 'task.name',
		Cell: ({ row }) =>
			personWithTaskCell(row.original), // convert back to string for display

	}),

Full code:

import {
	createMRTColumnHelper,
	MaterialReactTable,
	useMaterialReactTable
} from 'material-react-table';


type Person = {
	name: string;
	age: number;
}

type Task = {
	id: number;
	name: string;
}

type PersonWithTask = Person & {
	task: Task;
}


const data: PersonWithTask[] = [
	{
		name: 'John',
		age: 30,
		task: {
			id: 1,
			name: "task-1"
		}
	},
	{
		name: 'Sara',
		age: 25,
		task: {
			id: 2,
			name: "task-2"
		}
	},
];

function personWithTaskCell(personWithTask: PersonWithTask) {
	return (
		<>
			<div>
				{personWithTask.age}
			</div>
			<div style={{ paddingTop: '3px', fontSize: '0.7rem' }}>
				{personWithTask.task.name}
			</div>
		</>
	);
};

const columnHelper = createMRTColumnHelper<PersonWithTask>();

// To make a variable stable, we define it outside of a component 
// so it does not get recreated on every render and cause an infinite re-render loop.
const columns = [
	columnHelper.accessor("name", {
		header: 'Name',
	}),
	// TODO: how to use "renderedCellValue" in combination with "row.original"
	columnHelper.accessor((row) => row.age, {
		header: 'AgeWithTaskName',
		id: 'task.name',
		Cell: ({ row }) =>
			personWithTaskCell(row.original), // convert back to string for display

	}),
];

export default function UserTable() {
	const table = useMaterialReactTable({
		columns,
		data, //is stable (because we defined it outside of this component)
		enableGlobalFilter: true,
		positionGlobalFilter: 'left',
		initialState: {
			showGlobalFilter: true
		},
	});


	return <MaterialReactTable table={table} />;
}