DataTable: underscore in value prop causing two "bugs" (Solved)

[dnairns]

Hello Team,

I am having a very strange issue with the datatable. This is likely to end up being a bug report, but wanted to do a sanity check here first to make sure im not submitting a duplicate or known issue, or making a "basic" mistake. Nothing worse than being "basic!" LOL

When I try to display results that have stringified JSON data in the one column, two things break.

1. When selecting a single row, it selects the checkboxes in EVERY row. However the onSelectionChange events pipe only the one to the event handler that was actually checked.
2. The global filter breaks entirely. Typing any character(s) into the global filter breaks it entirely.

A little more background:
I made one table using the same code, and it works perfectly. The key difference between the one that works, and the two that are malfunctioning, is that the one that works is all strings, and they do not contain the bracket characters. More specifically the one that works does not display a string with "Stringified" JSON.

For Example,

Code: Select all

{"title": "This is the JSON Stringified."}

I have a feeling it has to do with the way the DataTable handles brackets in its internal function code. It might think im trying to "inject" code into it by piping a function call, when it is in fact text.

Here is a screenshot of the table to help you visualize:


Here is a screenshot of the data "assessments" stored in my useState in the code below: (Chrome)


Here is the code of the datatable:

Code: Select all

    return (
        <div className="p-grid table-demo">
            <div className="p-col-12">
                <div className="card">
                    <div className="card-title">
                    <h5>Result Management</h5>
                        <Dialog header="Edit Result:" visible={displayBasic} style={{ width: '50vw' }} modal footer={basicDialogFooter} onHide={() => setDisplayBasic(false)}>
                        {editResult(resultBeingEdited)}
                        </Dialog>
                    </div>
                    <DataTable value={results} paginator className="p-datatable-customers p-datatable-responsive" rows={10} dataKey="id" rowHover selection={selectedResults1} onSelectionChange={(e) => {setSelectedResults1(e.value); console.log("e: " + e.value)}}
                        globalFilter={globalFilter1} emptyMessage="No results found." loading={loading1} header={result1TableHeader}>
                        <Column selectionMode="multiple" headerStyle={{ width: '3em' }}></Column>
                        <Column field="assessmentId" header="Assessment ID" filterMatchMode="contains" sortable filter body={assessmentIdBodyTemplate}></Column>
                        <Column field="name" header="User ID" sortable filter filterMatchMode="contains" body={userIdBodyTemplate}></Column>
                        <Column field="id" header="Result ID" sortable filter filterMatchMode="contains" body={resultIdBodyTemplate}></Column>
                        <Column field="data" header="Result JSON" sortable filter filterMatchMode="contains" body={resultDataBodyTemplate}></Column>
                        <Column headerStyle={{ width: '8rem', textAlign: 'center' }} bodyStyle={{ textAlign: 'center', overflow: 'visible' }} body={actionTemplate}></Column>
                    </DataTable>
                </div>
            </div>
        </div>
    )
}

This is the code for the header, which include the global filter change handler:

Code: Select all

    const result1TableHeader = (
        <div className="table-header">
            <span className="p-input-icon-left">
                <i className="pi pi-search" />
                <InputText value={globalFilter1} onChange={(e) => {setGlobalFilter1(e.target.value); console.log(e.target.value); }} placeholder="Global Search" />
            </span>
        </div>
    );

Primereact version: 6.0.2
React version: 17.0.1
Browers tested: [Chrome Version 88.0.4324.96 | Safari 12.0.3]

Any help understanding how to resolve the issue would be great. I am happy to provide more info, just let me know what else you need, or would like to see. I can do a screen recording if necessary.

Thanks in advance!
- D.

[dnairns]

Just a quick note:

I figured out the issue, it happens when you have an underscore in the array that gets passed to the value prop. For Instance:

Array to value prop in working table:


Array to value prop that breaks both Global Search, and selecting individual items:


So removing any underscores from the arrays before passing them to the component's value prop fixes the problem! hope this helps others who are having issues!!

Once I removed the underscores the select buttons work perfectly, and the fields become searchable, with the exception to the JSON data, but that is something i need to debug further.

Cheers!
-D.