如何将单个Datagrid分为两区块展示在售和售罄商品且无需拆分数据集

核心思路是利用Datagrid原生的分组能力或者自定义行渲染逻辑，不需要拆分原商品列表，就能实现两个区块的视觉分割，同时共用同一个滚动容器。

具体实现步骤 #

• 第一步：给原商品数组添加临时分组标识，不需要拆分原数组
  你可以直接遍历原商品列表，给每一项加一个groupTag字段，按库存状态赋值为Available products或Sold out products：

  const processedProducts = originalProducts.map(product => ({
    ...product,
    groupTag: product.stock > 0 ? 'Available products' : 'Sold out products'
  }))
  

• 第二步：启用Datagrid的分组功能
  目前主流的Datagrid组件（MUI X DataGrid、AG Grid、Ant Design Table等）都支持按指定字段分组，你只需要指定分组字段为groupTag，同时设置默认展开所有分组，隐藏分组折叠控件即可，视觉上就是两个独立的标题区块，所有商品都在同一个Datagrid实例内，天然共用同一个滚动条。
• 如果你用的Datagrid没有原生分组能力，可以用自定义行渲染的降级方案：
  1. 先把原商品数组按库存状态排序，所有在售商品排在最前面，售罄商品排在后面
  2. 计算两个区块的起始行位置，在对应位置插入跨全列的自定义标题行，渲染对应的区块标题
  3. 整个列表还是同一个Datagrid的数据源，无需拆分

最简示例（以MUI X DataGrid为例） #

import { DataGrid } from '@mui/x-data-grid';

// 你的常规商品列定义
const columns = [
  { field: 'name', headerName: '商品名称', width: 220 },
  { field: 'price', headerName: '售价', width: 120 },
  { field: 'stock', headerName: '库存', width: 80 },
];

const ProductGrid = ({ productList }) => {
  const rows = productList.map(item => ({
    ...item,
    id: item.id, // Datagrid要求的唯一行标识
    group: item.stock > 0 ? 'Available products' : 'Sold out products'
  }));

  return (
    <div style={{ height: 700, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        groupingModel={{ groupKey: 'group' }}
        // 默认展开两个分组
        initialState={{ grouping: { expanded: ['Available products', 'Sold out products'] } }}
        // 隐藏分组操作控件，用户看不到折叠按钮
        disableGroupingPanel
        hideFooter
      />
    </div>
  );
};

方案优势 #

• 始终只有一个商品列表，后续数据更新、筛选、排序操作都不需要同步两个独立列表，维护成本低
• 滚动条是整个Datagrid共用的，不会出现两个区块独立滚动的体验问题
• 不需要额外写滚动联动的逻辑，避免了不同浏览器下滚动不同步的兼容问题

内容的提问来源于stack exchange，提问作者Antriksh kakkar