Material UI Datagrid/XGrid中renderHeader添加筛选组件时阻止默认XHR请求并保留排序功能的技术问询

Absolutely! You can absolutely prevent the default XHR request triggered by your custom filter component in the header while keeping the built-in sorting functionality intact. Here's a practical, step-by-step approach to make this work:

1. Inject your filter component via renderHeader #

First, use the renderHeader prop to add your custom filter (like a dropdown) directly into the column header. Wrap the header text and filter in a container to keep the layout organized.

2. Block event propagation for filter interactions #

The core trick here is stopping events from your filter component from bubbling up to the XGrid's header click handlers. This way, interacting with the filter won't trigger unintended sorting or default XHR requests, but clicking the rest of the header (for sorting) still works as expected.

3. Handle filter logic manually #

Since you're blocking the default request, you'll need to manually update the filter model or trigger your own data fetch when the filter value changes.

Here's a complete code example to illustrate this:

import { useGridApiRef, XGrid } from '@mui/x-grid';

// Sample data
const rows = [
  { id: 1, product: 'Laptop', category: 'Electronics' },
  { id: 2, product: 'T-Shirt', category: 'Clothing' },
  { id: 3, product: 'Phone', category: 'Electronics' },
];

const columns = [
  {
    field: 'product',
    headerName: 'Product',
    width: 200,
  },
  {
    field: 'category',
    headerName: 'Category',
    width: 200,
    renderHeader: (params) => (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        {/* Header text - clicking this still triggers sorting */}
        <span>{params.colDef.headerName}</span>
        {/* Custom filter dropdown */}
        <select
          style={{ padding: '2px 4px', fontSize: '0.875rem' }}
          onClick={(e) => {
            // Stop click from triggering header sort
            e.stopPropagation();
          }}
          onChange={(e) => {
            // Block default XGrid actions and prevent event bubbling
            e.stopPropagation();
            e.preventDefault();

            // Update filter model manually
            const filterValue = e.target.value;
            params.api.setFilterModel({
              items: filterValue
                ? [
                    {
                      columnField: 'category',
                      operatorValue: 'equals',
                      value: filterValue,
                    },
                  ]
                : [],
            });
          }}
        >
          <option value="">All Categories</option>
          <option value="Electronics">Electronics</option>
          <option value="Clothing">Clothing</option>
        </select>
      </div>
    ),
  },
];

export default function FilterHeaderWithSortGrid() {
  const apiRef = useGridApiRef();

  return (
    <div style={{ height: 400, width: '100%' }}>
      <XGrid
        rows={rows}
        columns={columns}
        apiRef={apiRef}
        enableSorting // Keep sorting enabled
        // Optional: Disable default column filter UI if you don't need it
        disableColumnFilter
      />
    </div>
  );
}

For server-side data scenarios #

If you're fetching data from a server, take full control of request timing using the onFilterModelChange prop. This lets you skip XGrid's default XHR and trigger your own request only when needed:

<XGrid
  // ... other props
  onFilterModelChange={(newModel) => {
    // Skip default XGrid request handling
    // Trigger your custom API call here
    fetch(`/your-api-endpoint?filter=${JSON.stringify(newModel)}`)
      .then((res) => res.json())
      .then((data) => {
        apiRef.current.setRows(data.rows);
        apiRef.current.setRowCount(data.totalRows);
      });
  }}
  // Disable built-in server-side filter handling
  disableServerSideFilter
/>

Why this works #

• e.stopPropagation() on the filter's click/change events prevents XGrid's header handlers from picking up those interactions (so no accidental sorting or default requests).
• Manually updating the filter model with setFilterModel lets you control exactly when and how the filter is applied, without relying on XGrid's automatic request logic.
• The rest of the header (the text part) still responds to clicks for sorting, since those events aren't blocked.

内容的提问来源于stack exchange，提问作者Z. Bird