跳到内容
+

数据表格 - 行固定

固定行以使其始终可见。

固定(或冻结、锁定或浮动)行是指用户垂直滚动数据表格时始终可见的行。

您可以通过 pinnedRows 属性传递固定行数据,将行固定在数据表格的顶部或底部

const pinnedRows: GridPinnedRowsProp = {
  top: [{ id: 0, brand: 'Nike' }],
  bottom: [
    { id: 1, brand: 'Adidas' },
    { id: 2, brand: 'Puma' },
  ],
};

<DataGridPro pinnedRows={pinnedRows} />;

固定行的数据格式与 rows 属性的数据格式相同(请参阅数据供给)。

固定行数据也应满足行标识符要求。

Enter 开始编辑

控制固定行

您可以通过更改 pinnedRows 来控制哪些行被固定。

在下面的演示中,我们使用 actions 列类型添加按钮,以将行固定在顶部或底部,并动态更改 pinnedRows 属性。

与其他功能一起使用

固定行不受排序和筛选的影响。

分页也不会影响固定行 - 无论页码或页面大小,它们都保持固定。

API