gridjs icon indicating copy to clipboard operation
gridjs copied to clipboard

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

Open shanemcmurray opened this issue 1 year ago • 0 comments

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

2024-02-09_16-14-39 2024-02-09_16-15-02

Desktop (please complete the following information):

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

shanemcmurray avatar Feb 09 '24 23:02 shanemcmurray