How to use a custom globalFilterFunciton in datatable

[slothdude893]

I am using the "body" attribute in a column to make the cell's value into a different component that is not recognized by the filters. I am trying to create a custom global filter but have not been able to find any examples. This commit (https://github.com/jepsar/primefaces/co ... e0dc9791fd) says that global custom filter works the same way as a column custom filter but I can't get that to work either. Setting

Code: Select all

<Column header="Projects" filter={true} filterMatchMode="custom" body={this.convertAllProjectsToBetsAdmin} filterFunction={(...args) => true}/>

results in "Uncaught TypeError: filterConstraint is not a function at ProxyComponent.filterLocal (Datatable.js 996)" which is here:

Code: Select all

var filterConstraint = filterMatchMode === 'custom' ? col.props.filterFunction : _ObjectUtils.default.filterConstraints[filterMatchMode];

if (!filterConstraint(dataFieldValue, filterValue)) { <----- ERROR THROWN HERE

Does anyone have an idea what I'm doing wrong or could point me to an example for either custom column or global filter (global preferred)? I've looked at every blog and stackover post along with the showcases and docs on github. Just updated to primereact 3.1.2



EDIT: Ok I was able to get the filter by column working by setting the "field" attribute in the column. Still can't get the globalFilterFunction to trigger on global Filter change though

EDIT 2: Ok, apparently the globalFilterFunction isn't available yet in primereact, only primefaces. Does anyone know a way to manually call the custom filter function for each column from a global filter / input?

EDIT 3: Not as flexible as I would like but luckily i am trying to look for a value in an array so the 'contains' filterMatchMode works here. You want to define a ref on your table:

Code: Select all

<DataTable ref={el => {this.dt = el}} header={this.header}...
	<Column field="projects" header="Projects" filterMatchMode="custom" body={this.convertAllProjectsToBetsAdmin} sortable={false} style={{width: "125px"}} filterFunction={this.filterFunction}/>
	...
/>

and then the header looks like this:

Code: Select all

header =
		<div style={{'textAlign':'left'}}>            
			<FontAwesomeIcon icon="search" />
	       		 <input onInput={(e) => {
					   this.dt.filter('49', 'projects', 'custom''); //49 is just an example search but its 'value', 'column', 'filterMatchMode'
					   ... //could repeat for all columns if you want
				   }}
				   placeholder="Search"
				   size="50"
		    	/>
	    </div>; 

and then you can create your own custom filter function as defined in the docs:

Code: Select all

filterFunction(value, filter){
		console.log(value, filter);
		return false;
}

EDIT 4: corrected above code, its plenty flexible. Thought you had to use filterMatchModes like 'contains', 'in', etc.

EDIT 5: I couldn't really get multiple filters to work together, so if anyone knows a way to implement the global filter let me know please! For now I'm going back to filtering by column

[master117]

Have you thought about just adding an InputText and using it's content as a filter over x fields? You don't need the global filter to be in the Datatable itself.