grid-js / gridjs

Advanced table plugin
https://gridjs.io
MIT License
4.39k stars 240 forks source link

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

Closed shanemcmurray closed 7 months ago

shanemcmurray commented 7 months ago

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):

facu-alba commented 7 months ago

Same issue here. I need help!

ryuapp commented 7 months ago

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/gridjs@6.0.6/dist/gridjs.umd.js"></script>
facu-alba commented 7 months ago

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