Comments (12)
okay, this is already possible!
Should we update the README, to tell about this awesome possibility?
from mui-datatables.
Since I needed to solve this quite quickly, I've created a quick fix here: https://github.com/jungrafael/mui-datatables/tree/text-search-on-components
This could be of help for fixing this issue :)
from mui-datatables.
Hey @gregnb, this use case would in fact not be supported. This function I implemented just extracts the text inside nested elements, by navigating through its children. So you would need to use this function this way:
getElementText(
<div>
<div>this is the text to print</div>
</div>
);
This is exactly my use case for it on this library, since it's being used on an array of arrays of React Elements.
Would this be already enough for this library? I think rendering the component to extract its text would perform pretty badly.
I would gladly also implement this for sorting and write some tests. :)
from mui-datatables.
Hah, I never tested it for that purpose. Well that is interesting! Let me look into more test cases to make sure that this works like you would intend it to before putting it in the README
from mui-datatables.
Hello @gregnb, I've just found a drawback with this approach: we're unable to search items which are a JSX component, since it calls toString() on the component and this returns [object Object].
Should I reopen this issue to change the way the search/filtering is made?
from mui-datatables.
Would you want to add some unit tests and send me this as a PR? Nice work @jungrafael
from mui-datatables.
Hey @jungrafael so I took your function out and imported it into another project just to test. Take for example the following component
class Test extends React.Component {
render() {
return (
<div>
<div>this is the text to print</div>
</div>
);
}
}
All I'm going to see for a return from your function is:
[object HTMLDivElement]
To be honest I'm not sure how you're going to extract or return the text of a component without rendering it first
from mui-datatables.
@jungrafael Yep you're right that's why I just wanted to clarify. It would just be a big waste of time to render.
Yeah, I would gladly accept the PR but we need unit tests :)
from mui-datatables.
Hey @jungrafael did you happen to get those tests done?
from mui-datatables.
Hey @gregnb, I really haven't had much time lately. I plan on doing this next week, finishing up the implementation and creating the tests.
from mui-datatables.
@jungrafael no worries man. I say we hold off for now if the PR sent in performs well when I get some time to test it we should use that since it'll extract any text
from mui-datatables.
hey @jungrafael so a PR that @tgBryanBailes had worked on is finally merged in. You can render React components or custom strings in cells using a property called customRender
. An example of how todo this can be found at here
from mui-datatables.
Related Issues (20)
- An option to modify delete icon?
- Pagination Rows per Page resetting itself after clicking on custom button in column HOT 6
- Column Drag not working HOT 3
- in customHeadRender only 1 column needs to sort and not remaining elements HOT 1
- Link on github front page is malicious HOT 1
- Not wroking
- muidatatable scroll bar reset
- Not able to hide expander icon from specific rows
- Why are all the examples broken? HOT 1
- Print only appeared content rows with tableBodyMaxHeight applied
- Twitching while dragging columns
- Bad typing on MUIDataTableOptions renderExpandableRow - rowData
- Responsivenes Stacked not working
- setCellProps and setCellHeaderProps not working in mobile
- Customizing the contents of a chip label
- Cant search data with children having array of objects
- how to filter an date column by month
- States are not updating in customBodyRender
- [discuss] I need filter in table theader
- SearchBox vanished on pressing Escape even with `searchAlwaysOpen: true`
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui-datatables.