DataTable: Filter by Null/Undefined Values

[darioEscuderop]

Describe the bug

I need to implement a filter in PrimeReact's DataTable that allows users to filter for null or undefined values. The filter should provide an option for users to select "Null Values" for different types of fields (e.g., date, text, etc.), so that rows with null or undefined values will appear when this filter is selected.

Reproducer

No response

System Information

npmPackages:
    primereact: 10.6.3 => 10.6.3
    react: ^18.2.0 => 18.3.1
    tailwindcss: ^3.4.4 => 3.4.4

Steps to reproduce the behavior

No response

Expected behavior

No response

[darioEscuderop]

@melloware If you need any additional information or a way to reproduce the issue, please let me know. I would be happy to provide more details or help with testing.

Thanks for your assistance!

[melloware]

I think this has been asked before? Did you search through old tickets?

[melloware]

Maybe this one: https://github.com/primefaces/primereact/issues/6041

[darioEscuderop]

No, that issue is unrelated; I am not changing the global Filter. What I believe is necessary is for the Filter itself to have an additional attribute besides 'Contains', 'Equals', 'Does Not Contain...', which would be 'Non-Null' and 'Null'. This would complement the existing options for all types of filters, such as Dates, Dropdown, Text, etc.

[melloware]

OK since PrimeTek has this in all their libs I will leave it up to PrimeTek for discussion.

[Aaron-Spence]

@darioEscuderop I had the same thought, then realised that Equals and Not Equals can achieve the same outcome as Null and Not Null. Selecting Equals/Not Equals still fires the OnFilter event, with a value of null if the textfield is blank (or returns an empty string of '' if user clicked into the textfield).

Or if you must differentiate between null and empty, you can add your own items to the match mode filter:

const matchModesAll = [
        { label: "Starts with", value: FilterMatchMode.STARTS_WITH },
        { label: "Contains", value: FilterMatchMode.CONTAINS },
        { label: "Not Contains", value: FilterMatchMode.NOT_CONTAINS },
        { label: "Ends with", value: FilterMatchMode.ENDS_WITH },
        { label: "Equals", value: FilterMatchMode.EQUALS },
        { label: "Not Equals", value: FilterMatchMode.NOT_EQUALS },
        { label: "Null", value: "null" },
        { label: "Not Null", value: "notNull" }
    ]

<Column field="myValues" filterMatchModeOptions={matchModesAll} header="My Values" filter filterPlaceholder="Search" />

Although I agree it would be nice to have Null and Not Null as defaults in the match mode dropdown.