Filter Icon about mui-datatables

[SiriLivtar]

hi @gregnb.
First of all, thank you very much for the component. I am trying to change the search icon. I am trying to load my own SVG.
Is there any functionality to do this?

regards
luis

[gregnb]

There's no option as of today to change the icons. That would be a feature request. Let me look into that.

Second issue, removing some items in the last filter. Can you show me a screenshot of what you're talking about ?

[krishnaUIDev]

Please see the screenshot. I want to remove salary from the filter. But I need that salary on the table. Not in the filters. Is there any chance???

[gregnb]

Ok I think this is a great idea. It goes along with some other changes users have requested. Currently I'm on vacation so I will not be able to get to this rigjt away but I will look to add this feature for more customization.

[gregnb]

So I have some initial work done that will allow for customization of columns. It'll also address #3 when it's complete. As it stands now you'll be able to define which columns you want filtering for or not. But, as far as the icon replacement here's what I'm proposing: You'll be able to swap in custom icons but they must be React Components that return SVG much like how material-ui-icons works currently

[gregnb]

@krishnaUIDev In version 1.0.8 I've added the ability to customize columns. You can turn the filter on/off per column basis

[krishnaUIDev]

Thanks @gregnb. And if you have time can you look at removing columns from filters.

[gregnb]

@krishnaUIDev yea that's what I just posted lol. You can remove them now in version 1.0.8. Take a look at the new examples folder

[krishnaUIDev]

When click on Filter Icon or view column icon its getting error @gregnb

[gregnb]

@krishnaUIDev looks like a warning. I think the current PR fixes it when we merge it in. But nothing is broken, correct ?

[krishnaUIDev]

Ya Nothing is broken and can you try to add functions to the rows (onClick events). Is there any chance to add onclick events to that rows? ?

[gregnb]

Ok, but I want to learn more about why. What's the use case first to binding an onClick event to the rows? Are you tracking something? Just curious

[krishnaUIDev]

I am trying to create a data table site. At that place, i need to click handlers for rows to show that row data.

[gregnb]

@krishnaUIDev Ok, I will try to work on expanding more options into this package. I'm still on vacation so nothing will get done right away so bare with me. If it makes sense after I look into it some more I'll put it on the feature board. Some people have also asked for ability for selectable rows which sounds close to what you're asking for

[gregnb]

Selectable rows have been added in the latest version. It has two event callbacks that should help with this ticket.

[krishnaUIDev]

Is there any new features??

[gregnb]

Yes, in the latest version there are selectable rows and two callbacks you can read the README for more information

[krishnaUIDev]

Thanks. And is there any chance to change font icons??

[gregnb]

Nevermind that, I wrote about the wrong section this is related to toolbar. Let me think about this some more

[gregnb]

So I'm trying to find a good reason to do this but I'm struggling. The only icons I would allow are ones to be loaded from material-ui-icons package. Take for example print, if you search https://material.io/icons/ there are only two available. Were you going to try to load in your own SVG's?

[Ciip1996]

Did any of you guys have any luck by changing the icons svg? @SiriLivtar @gregnb

hi @gregnb.
First of all, thank you very much for the component. I am trying to change the search icon. I am trying to load my own SVG.
Is there any functionality to do this?

regards
luis

[entozoon]

Is it still true that you can't conveniently change the filter button content / style? (You can now at least change the icon via components={{ icons: { FilterIcon: ...

If it's helpful at all, I've managed to add text with some brutal CSS along the lines of

[data-testid^="Filters"]::after {
  content: "Filters"
}

And you could even hide the SVG and replace it with a background-image.