I would like to filter a numerical value using the contents of a different column on the client side.

For eg. if I have two columns

Expected Cost | Actual Cost
1000          | 500
500           | 700

I would like to filter the rows where Expected Cost < Actual Cost. Is there any way to do this on the client-side?

I would like to filter a numerical value using the contents of a different column on the client side.

For eg. if I have two columns

Expected Cost | Actual Cost
1000          | 500
500           | 700

I would like to filter the rows where Expected Cost < Actual Cost. Is there any way to do this on the client-side?

• ag-grid

1 Answer 1

If you're working on the client side (e.g., in JavaScript with HTML tables or a frontend framework), you can filter the rows dynamically using JS:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/12.0.2/ag-grid.js"></script>
            <table id="costTable" border="1">
                <thead>
                    <tr>
                        <th>Expected Cost</th>
                        <th>Actual Cost</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1000</td>
                        <td>500</td>
                    </tr>
                    <tr>
                        <td>500</td>
                        <td>700</td>
                    </tr>
                    <tr>
                        <td>300</td>
                        <td>400</td>
                    </tr>
                </tbody>
            </table>
        
            <button onclick="filterRows()">Filter mock button</button>
        
            <script>
            function filterRows() {
                const table = document.getElementById("costTable").getElementsByTagName("tbody")[0];
                const rows = table.getElementsByTagName("tr");
        
                for (let row of rows) {
                    const expectedCost = parseFloat(row.cells[0].innerText);
                    const actualCost = parseFloat(row.cells[1].innerText);
        
                    if (expectedCost >= actualCost) {
                        row.style.display = "none";  // Hide row if condition is not met
                    } else {
                        row.style.display = ""; // Show row if it meets the condition
                    }
                    // other logic if required
                }
            }
            </script>

In case of Angular, you can use gridApi directly in the component class:

   applyFilter() {
    this.gridApi.setFilterModel({
      actualCost: {
        filterType: 'custom',
        filter: this.customFilter
      }
    });
    this.gridApi.onFilterChanged();
  }



customFilter = (params: any) => {
    const expectedCost = params.node.data.expectedCost;
    const actualCost = params.node.data.actualCost;
    return expectedCost < actualCost;
  };