Set filter for duplicated columns

Question

In my project, I have an AG Grid with mapped columns. This means that the same field from a JSON object is displayed twice, once with the raw data and once with the mapped data for user convenience.

const colDef = [
  { field: "make", colId: "make", headerName: "Make (Code)" },
  { field: "make", colId: "make", headerName: "Make", valueFormatter: (params) => {...} 
];

I want to allow the users to filter all columns. My problem is that AG Grid automatically suffixes the column IDs inside the filter model. For example, the column make becomes make_1 on the second occurrence. This breaks my Server-Side Row Model logic, and I don't have control over the server logic.

I've prepared an example here: https://codesandbox.io/p/sandbox/w3krwm

After hours of research, I can't find an easy solution. What can be done here? Both columns need to be represented as make inside the filter model. Overriding each other is fine.

Answer 1

Update based on comment:

So you are using Server Side Row Model (SSRM), then you must have implemented the getRows function right? So when refreshing the data based on the filters, intercept the request object and change the column id in the filtermodel.

Ex:

getRows: (params) => {
    const oldFilterModel = params.request.filterModel;
    const newFilterModel = {};

    // Changes the key 'make_1' to 'make'
    delete Object.assign(newFilterModel, oldFilterModel, { ["make"]: oldFilterModel["make_1"] })["make_1"];

    // Override the filterModel in the request sent to the server
    params.request.filterModel = newFilterModel;

    // Make the request to get the data
    const response = server.getData(params.request);
}

---

Original Answer:

Not 100% sure how you are handling the server side logic. But if your goal is to filter both the columns based on the same data, then you can use filterValueGetter and provide a custom function to supply the data for filtering.

So both your Make (Code) and Make columns can be filtered using the make.label.

Example:

filterValueGetter: (params) => {
    let make = makes.filter((make) => make.value === params.data.make);
    return make.length ? make[0].label : "";
}

Full Column Defs:

const colDefs = [
  {
    field: "make",
    colId: "make",
    headerName: "Make (Code)",
    filter: "agTextColumnFilter",
    filterParams: {
      values: makes.map((make) => make.value),
      buttons: ["reset"],
    },
    filterValueGetter: (params) => {
      let make = makes.filter((make) => make.value === params.data.make);
      return make.length ? make[0].label : "";
    },
  },
  {
    field: "make",
    colId: "make",
    headerName: "Make",
    filter: "agTextColumnFilter",
    filterParams: {
      values: makes.map((make) => make.label),
      buttons: ["reset"],
    },
    valueFormatter: (params) => {
      const make = makes.find((make) => make.value === params.value);

      return make ? make.label : params.value;
    },
    filterValueGetter: (params) => {
      let make = makes.filter((make) => make.value === params.data.make);
      return make.length ? make[0].label : "";
    },
  }
];

Check the working example here.