[data grid] Implement Custom Filters about mui-x HOT 10 OPEN

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:

1. This is possible with the controlled filter model.
2. There is a demo on how to do that in the docs:
3. Use a custom operator or wrap a built-in operator
4. 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

1. 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.
2. 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.
3. 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

1. 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.
2. 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.
3. I'm not fully understanding the custom filters to know how to achieve this.

1. 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],
  );

2. 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.
3. 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.