TreeTable: Unable to custom columns' filter

[BAISTM]

Describe the bug

Using the columns' filterElement prop is not working. The passed function is not called.

Reproducer

https://codesandbox.io/p/sandbox/primereact-demo-forked-7j2jpq?file=%2Fsrc%2FApp.js%3A40%2C68-40%2C81

PrimeReact version

10.0.9

React version

17.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[BAISTM]

@melloware There is any work-around that will make us customize TreeTable filters and calls primereact filters function?

Thank you for your response!

[melloware]

I will take a look.

[toddsmith-adsk]

https://codesandbox.io/p/sandbox/primereact-demo-forked-dc785t?file=%2Fsrc%2FApp.js%3A137%2C24

Works for DataTable but not TreeTable.

DataTable uses ObjectUtils.getJSXElement() and TreeTable does not.

const createFilterElement = (model, index) => {
        const value = model ? model.value : null;

        return getColumnProp('filterElement') ? (
            ObjectUtils.getJSXElement(getColumnProp('filterElement'), { field, index, filterModel: model, value, filterApplyCallback, filterCallback })
        ) : (
            <InputText
                type={getColumnProp('filterType')}
                value={value || ''}
                onChange={(e) => onInputChange(e, index)}
                onKeyDown={(e) => onInputKeydown(e, index)}
                className="p-column-filter"
                placeholder={getColumnProp('filterPlaceholder')}
                maxLength={getColumnProp('filterMaxLength')}
                aria-label={getColumnProp('filterPlaceholder')}
                unstyled={props.unstyled}
                __parentMetadata={{ parent: props.metaData }}
            />
        );
    };

      if (getColumnProp(column, 'filter') && options.renderFilter) {
            filterElement = getColumnProp(column, 'filterElement') || (
                <InputText
                    onInput={(e) => onFilterInput(e, column)}
                    type={props.filterType}
                    defaultValue={props.filters && props.filters[getColumnProp(column, 'field')] ? props.filters[getColumnProp(column, 'field')].value : null}
                    className="p-column-filter"
                    placeholder={getColumnProp(column, 'filterPlaceholder')}
                    maxLength={getColumnProp(column, 'filterMaxLength')}
                    pt={getColumnPTOptions(column, 'filterInput')}
                    unstyled={props.unstyled}
                    __parentMetadata={{ parent: props.metaData }}
                />
            );
        }

[melloware]

I looked and TreeTable is definitely missing a lot compared to Datatable as far as custom filtering goes

[toddsmith-adsk]

BTW this code looks odd in TreeTable.js

if (
  (isStrictMode && !(findFilteredNodes(copyNode, paramsWithoutNode) || isFilterMatched(copyNode, paramsWithoutNode))) ||
  (!isStrictMode && !(isFilterMatched(copyNode, paramsWithoutNode) || findFilteredNodes(copyNode, paramsWithoutNode)))
) {
  localMatch = false;
}

[Zbatux]

Did anyone manage to find a workaround for this bug ? (Beside filtering the data itself before giving it to TreeTable Component)

[prabhat0192]

is there any work around available as i am also facing this issue.

[mtsmith]

I ended up forking the code and making my own custom build.

[melloware]

@mtsmith why not submit a PR? Wouldn't that be easier than maintaining your own custom build?

[toddsmith-adsk]

@mtsmith why not submit a PR? Wouldn't that be easier than maintaining your own custom build?

I need the fix asap so I can get other features working.

[iemi111]

Would any of the people with a solution be willing to create a PR? If not what is happening with this issue? It's been 5 months since this was raised and it's a pretty significant feature.

[Mrudula-Nemani]

I am also facing the same issue. The method is not getting called.

[melloware]

@iemi111 @Mrudula-Nemani if no open source community member has submitted a PR you would have to look to PrimeReact PRO support or financially sponsor the one time fix https://primereact.org/support/

[toddsmith-adsk]

Sorry I don't have time for a PR but here is the fix