Comments (10)
Hey @lisaWriteJava ... where did you fork that demo from?
The version that is being used here is only v4
and the package has been deprecated. Check the npm repos page for it: npm.
You can do all of this with the filtering feature.
from mui-x.
The example cam from stack overflow but, when I look at the documentation and the sand box here the rating is hardcoded . I don't see how the filter can be generalized to be used on any column or if I have multiple columns reused. It also doesn't closed filter when the X is clicked it just clears.
I"m trying to create 2 new filters that I can apply to various columns in various grids
from mui-x.
I've alos created this: https://i34mnv--run.stackblitz.io and tried to implment the not contains that existed in the first sandbox but, it doesn't show and I don't see how I can get it to be generic to use the other string columns nor do I see how to make it be used in other columns. Please advise on what's wrong. It's not showing nor is it reusable.
from mui-x.
OK, so to go over your questions 1by1:
- This is possible with the controlled filter model.
- There is a demo on how to do that in the docs:
- Use a custom operator or wrap a built-in operator
- If you want to have a quick filter outside of the grid we have a demo on that as well: Quick filter outside of the grid
the rating is hardcoded
it's only hard coded in the initial state.
It also doesn't closed filter when the X is clicked it just clears.
The X is not meant to close the panel, but to remove filters, or clear the last one. This is expected behavior.
Side note: the linked stackblitz demo does not work.
from mui-x.
Sorry about that here is the stack biz with my attempt: https://stackblitz.com/edit/react-nqs1xg?file=Demo.js
- I've attempted to get the new filter to work with an additional column but it isn't workign. Not sure what I'm doing wrong.
- I've taken out the hard coding in my demo but I still don't see how I can use the 1 filter (not contains ) in multiple columns or even reuse it for the multiple tables we have.
- I'm not fully understanding the custom filters to know how to achieve this.
from mui-x.
Sorry about that here is the stack biz with my attempt: https://stackblitz.com/edit/react-nqs1xg?file=Demo.js
- I've attempted to get the new filter to work with an additional column but it isn't working. Not sure what I'm doing wrong.
- I've taken out the hard coding in my demo but I still don't see how I can use the 1 filter (not contains) in multiple columns or even reuse it for the multiple tables we have.
- I'm not fully understanding the custom filters to know how to achieve this.
- you need to apply the filter to every column you want it to be used in. From this section:
const columns = React.useMemo(
() =>
data.columns.map((col) =>
col.field === 'rating'
? {
...col,
filterOperators: ratingOnlyOperators,
}
: col,
),
[data.columns],
);
- For that you need to handle the filter state outside of the grids and apply the new filter value on every change to the input. This might be a performance bottle neck, so be careful with how many grids you apply this to.
- Everything you need to know is described here
from mui-x.
from mui-x.
this will show the not contains
filter in the panel:
export default function CustomRatingOperator() {
const { data } = useDemoData({
dataSet: 'Employee',
visibleFields: VISIBLE_FIELDS,
rowLength: 100,
});
const columns = React.useMemo(
() =>
data.columns.map((col) => {
if (col.field === 'rating') {
return {
...col,
filterOperators: ratingOnlyOperators,
};
}
if (col.field === 'name') {
return {
...col,
filterOperators: stringOperator,
};
}
return col;
}),
[data.columns],
);
return (
<div style={{ height: 400, width: '100%' }}>
<DataGrid
{...data}
columns={columns}
localeText={{
filterOperatorNoContain: 'not contains',
}}
/>
</div>
);
}
your error was with the useMemo
you passed 3 arguments to it, so it got never initialised correctly.
One piece of advice:
I've noticed that sometimes the code you share in your issue reports can be a bit hard to follow. Here's a quick tip that might be super helpful: Following best practices for React and general coding principles, like using linters and maintaining a clean code structure, can often help catch issues early on in the development process. This means you might be able to solve some problems yourself before even posting an issue!
By following these tips, you'll be making it easier for both yourself and the community to diagnose problems and find solutions quickly. Plus, you'll gain valuable coding skills that will benefit you in the long run!
from mui-x.
Related Issues (20)
- can not change "Reset" button text HOT 2
- [data grid] `onRowsScrollEnd` triggered instantly when using a bottom pinned row HOT 3
- [data grid] `footerRowCount` slot does not override HOT 2
- [charts] Add an option to put bar label on top of the bar HOT 3
- [data grid] Customise Input Variant of Filter InputComponent HOT 8
- [data grid] Tests fail with: "IntersectionObserver is not defined" after upgrading to x-data-grid v7.3.2 HOT 4
- [data grid] add a prop that disables header filters without hiding them HOT 3
- [data grid] filter not returning correct results HOT 2
- [charts] Document how to use animated images in charts' overlay HOT 3
- [data grid] Print export fails when footer is set to hidden HOT 1
- [data grid] Positions of filter icon changes when hovering over header cell HOT 1
- [data grid] Unexpected cell text selection highlighting area in v7 in Chromium Browsers HOT 3
- [pickers] Correctly type `PickersShortcut` item props
- [data grid] Keyboard Accessible Column Re-ordering and Width HOT 1
- [data grid] AutoHeight combined with scrollable body HOT 2
- [data grid] When using Datagrid's aggregation is it possible to somehow use group row's value instead of the aggregated one? HOT 9
- [data grid] Uneven/Distorted Columns When Exporting MUI DataGrid to Excel HOT 6
- [data grid] Production site with Expired Key watermark HOT 7
- <DataGrid initialState={{ density: 'compact', }} /> HOT 1
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-x.