gridjs
gridjs copied to clipboard
Maximum call stack size exceeded error when search is enabled and columns use gridjs.html for formating
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)