Maximum call stack size exceeded error when search is enabled and columns use gridjs.html for formating

[shanemcmurray]

Describe the bug
There seems to be a weird issue/bug when using the search feature and using gridjs.html to format a column . I can duplicate it easily and get rid of the error by either commenting out the search feature or limiting the use of gridjs.html on the columns to 1 instance. Page renders fine... but console has this error.

To Reproduce
You can use this code to reproduce... the code as is generates an error in the console: deepEqual.ts:28 Uncaught RangeError: Maximum call stack size exceeded

Comment out either the search option or remove the gridjs.html format for description and uncomment search, works fine...

<link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />

<div id="thetable"></div>

<script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>

<script>

	let gridData = [

		[ null, "56", "Global Tech", "Litigation", "2/9/2023", "Credit Card", "THNIWN0W73", "Legal services rendered - 11233", "$3964.24" ], 
		[ null, "57", "Global Tech", "Tax Dispute", "10/11/2023", "ACH Transfer", "1YGZGQFBHW", "Legal services rendered - 11234", "$7202.19" ], 
		[ null, "58", "XYZ Inc.", "Contract Review", "12/29/2023", "ACH Transfer", "TU4ASPGN7I", "Partial payment for 11235", "$4743.58" ], 
		[ null, "59", "MegaMart", "Litigation", "5/8/2022", "Wire Transfer", "IXPDQMZ9GT", "Partial payment for 11236", "$8286.82" ], 
		[ null, "60", "Acme Solutions", "Litigation", "8/4/2023", "Wire Transfer", "3NGMSSUN5W", "Retainer fee for 11237", "$3578.57" ], 
		[ null, "61", "XYZ Inc.", "Tax Dispute", "6/6/2022", "Check", "BGFYOHQ7RH", "Legal services rendered - 11238", "$5496.41" ], 
		[ null, "62", "Acme Solutions", "Tax Dispute", "3/20/2022", "ACH Transfer", "IUNNFCA3S8", "Payment for invoice 11239", "$5094.93" ], 
		[ null, "63", "MegaMart", "Tax Dispute", "2/17/2023", "Wire Transfer", "K18W9DZ3XT", "Retainer fee for 11240", "$1658.23" ], 
		[ null, "64", "Global Tech", "Litigation", "2/21/2022", "Wire Transfer", "TLT1YME3HH", "Retainer fee for 11241", "$6286.32" ], 
		[ null, "65", "Acme Solutions", "Litigation", "1/7/2022", "Credit Card", "LHW9CMI3D2", "Legal services rendered - 11242", "$6974.02" ]
	
	];

	const thisgrid = new gridjs.Grid({

		columns: [

			{
				id: 'Action',
				name: 'Action',
				formatter: (cell, row) => {
					return gridjs.html(
						`<a href="/index.cfm?action=payments&view=enter&payment_id=${row.cells[1].data}" class="btn btn-sm btn-outline-primary" title="Edit Payment"><span class="material-symbols-outlined">Edit</span></a>`
					);
				},
				sort: false
			},
			{ 
				id: 'payment_id',
				name: 'payment_id',
				hidden: true
			},  
			{ 
				id: 'Client',
				name: 'Client' 
			},
			{ 
				id: 'Matter',
				name: 'Matter' 
			},
			{ 
				id: 'Date',
				name: 'Date' 
			},
			{ 
				id: 'Type',
				name: 'Type' 
			}, 
			{ 
				id: 'Number',
				name: 'Number'
			},
			{ 
				id: 'Description',
				name: gridjs.html('<span title="Description">Description</span>')
			},
			{ 
				id: 'Amount',
				name: 'Amount' 
			}

		],
		search: true,
		sort: true,
		pagination: {
			limit: 5
		}, 
		data: gridData

	}).render(document.getElementById("thetable"));

</script>

Expected behavior
not expecting this error...

Screenshots
see some attached screenshots

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Chome
• Version: 121.0.6167.161 (Official Build) (64-bit)

[facu-alba]

Same issue here. I need help!

[ryuapp]

This bug seems to be occurring from 6.1.0, so we might want to temporarily downgrade it.

- <script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
+ <script src="https://unpkg.com/[email protected]/dist/gridjs.umd.js"></script>

[facu-alba]

Thank you @ryuapp for your answer. Now it works! Regards