On the material table library, I am trying to filter a field that is custom rendered. The official document does not have any example of custom column rendering plus filtering that column. I have tried to use the lookup function, but I am not successful.
Here is the official document: https://material-table.com/#/docs/features/filtering
Here is an implementation: https://codesandbox.io/s/material-table---create-dinamic-object-to-lookup-forked-9px53?file=/src/index.js
What would be my best option here?
I have found out that the field customFilterAndSearch can help me on this one. For the ones who arrived here, to solve the problem I have made a quick search on my array:
customFilterAndSearch: (term, rowData) => {
return rowData.lived.find((place) => {
return place?.name?.toLowerCase().includes(term.toLowerCase());
});
}
https://codesandbox.io/s/material-table---create-dinamic-object-to-lookup-forked-2ed1n?file=/src/index.js
let me know if you think I could improve this.
Related
I am currently working on the XGrid where I need to filter the rows based on the checkboxes selected on my page. I am trying to pass the items into the filterItems prop for creation of many filters, but seem to have no idea as to how to set the operator from being AND by default to OR.
I know that the filterItems takes in GridFilterModel but there is 0 docs regarding the structure of that object. I would appreciate someones help in finding that out.
I found out the answer. In order to change the filtering to Or, you need to
import { GridLinkOperator } from "#material-ui/x-grid";
in the filterModel object besides items include the following:
{
items:[],
linkOperator: GridLinkOperator.Or,
}
Need to render ACF repeater in react. I am able to display ACF text Fields but not repeater fields. Need to find out if anyone has an example of how to map through a repeater field.
Repeater field group Is called Skills.
Im also new in this stuff, but I will try to help you.
So, the first thing that you need is to download and install ACF to REST API plugin so you can use ACF with Wordpress API. I assume, that you already have it, because as you said before - you can display text fields.
Once you can send data through Wordpress API, you need to preview of JSON sent by Wordpress (in this case), so you can display necessary data. Mine is called React Developer Tools and I installed it as Chrome extension.
Link to Chrome store
It should look like this:
As you can see, my component is called Home.js, yours may be called differently. Chose component that is fetching all the data that you need.
Now, you just need to use your repeater. It would be much easier if you showed us your code. I don't really know what kind of data you are calling through api, so I guess these are pages.
{ pages[0].acf.technologie_lista.map ( (field, index) => (
<div key={index} className="single-field">
{ field.nazwa_technologii }
</div>
) ) }
Let's break it down.
1 - My project contains two pages. I have chosen the first one, because only this one has needed ACF fields. technologie_lista is acf field name.
2 - You need to use map function to list all posts. You need to assign key to each element.
nazwa_technologii is just a repeater sub field name.
And that's all. I might make some rookie mistakes, but it work's for me. I hope that i helped. Cheers!
I'm currently attempting to build an Airtable-esque filter component. I'm wondering if it is possible to use the useGlobalFilter hook to choose what columns to filter a table by programmatically. For example, Airtable implements table filtering using a component that lives outside of a given table's boundaries. Inside of this component, there is a dropdown menu to choose which column to apply a filterValue and a dropdown to choose the filterType for a given column. Based on react-table's documentation, it appears that useGlobalFilter is used to build filtering components that exist outside of the table. However, based on the documentation's code sandbox example, for filtering, it also appears that useGlobalFilter applies the filter value to all columns rather than to specific columns.
My question would be if it's possible to use useGlobalFilter's ability to create filtering UI outside of a table and have a way to select what columns to apply a filterValue & filterType, all from within the global filter?
If this is possible, would anyone be willing to provide tips or advice on the implementation? Please let me know if this task would be more suited for useFilter or another part of react-table's API.
I've provided a screenshot of Airtable's filter component as an example of what I'd like to build. Any feedback or advice would be much appreciated!
`const columns = React.useMemo(
() => [
{
Header: 'Group Name',
accessor: 'name',
// disableGlobalFilter: true
},
{
Header: 'Created',
accessor: 'sector',
disableGlobalFilter: true,
},
],
[]
)`
Add this in the column array inside the column where you want to disable global filter
I've been trying to figure out filtering of antd table all day. My design is to have a visible filter in the title:
enter image description here
I don't want the pop-up as in all the examples. So the question is, is it possible to just set filter properties?
I took the standard example and made just the Address filterable
https://codepen.io/jabberwo/pen/OJJyzLg?editors=0011
But when I remove the filterDropdown (where is the documentation on what the function input arguments are?!) and instead set the filterValue to text in state updated by the onChange of an input as in
https://codepen.io/jabberwo/pen/XWWmVKL?editors=0011
I get a really weird error on line 975 of antd/es/table/Table.js
Uncaught TypeError: values.some is not a function
at VM1051 vendors~main.3a264a9707764ceadc39.bundle.js:53640
at Array.filter (<anonymous>)
This is thrown because I have filteredValue and onFilter set. If I don't set one of them I don't get the error -- but I also don't get any filtering. From the doc this looks like what I'm supposed to do. Even a simple
onFilter: () => true
will throw so it's not the filtering code, but this mysterious values.some that is supposed to be defined.
thanks,
Jab
OMG 3-4 hours wasted not realizing filteredValue has to be an array of strings!
filteredValue: [this.state.alertFilter.toLowerCase()],
onFilter: (value, record) =>
record.alertName
.toString()
.toLowerCase()
.includes(this.state.alertFilter.toLowerCase()),
Yes, the doc does say that, it just didn't click, didn't see it or something to that effect.
Putting the answer up here for the next developer using google to find help...
Forgive the noob angular question:
I am attempting to aggregate product search terms using check boxes. When a user selects/deselects an check box, the values are returned and filter the product list...
My initial approach was to hard code the product categories and then run a ng-click function that iterated the categories and built the search string... i.e. (product=controllerAs syntax)
<input ng-click="product.changeSearch()" ng-model="product.criteria.form.liquid">
<input ng-click="product.changeSearch()" ng-model="product.criteria.form.solid">
Then on the controller side:
vm.changeSearch = function() {
_.map(vm.criteria.forms, function(criteria) {
if (criteria) {
criteriaCompiled.push(criteria);
}
console.log('criteria: ', criteriaCompiled);
});
The ideal output would be "mongo-ready" such that I can run a find.{ form: "Liquid, form: "Solid" } query.
I'm thinking this is the wrong strategy because I have about 20 elements to choose from and the array is proving difficult to map and return meaningful values, especially when looking at true/false checkbox values...
Any practical or theoretical advise is appreciated...