datagrid - 如何向 Blazorise DataGrid 添加粘性标题？

Question

最近，我请求在我的一个 Blazor 服务器项目中将 Sticky Header 功能添加到 DataGrid。我正在使用 Blazorise，没有看到任何现有的粘性标题功能，并且在网上找到了有限的信息，所以我想我会记录我的解决方案。

Answer 1

我将以这个解决方案是为 chrome 构建的，并且可能需要针对不同的浏览器进行调整这一事实作为我的回答的开头。

首先，我在我的 site.css 文件中添加了一个sticky-header 类：

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 10;
}

    .sticky-header::before {
        content: '';
        width: 100%;
        height: 1px;
        position: absolute;
        top: -1px;
        left: 0;
        background-color: #fcfcfc;
        z-index: -1;
    }

    .sticky-header + .sticky-header::after {
        content: '';
        width: 1px;
        height: 100%;
        position: absolute;
        top: 0;
        left: -1px;
        background-color: #fcfcfc;
        z-index: -1;
    }

关于 css 的一些注意事项。top设置为 0 以将标题设置到屏幕顶部，z-index只需将其设置为比周围元素更高的索引，以便它将保持在其他元素的前面。

此外，我注意到它position: sticky摆脱了我的边界，因此我使用::before和::after伪类来帮助充当内部边界，但是这部分代码不一定是粘性标题工作所必需的。

一旦你有了上面的 css，你就会想把它添加到你的 DataGrid 中。对于您在 DataGridColumns 部分中定义的每个 DataGridColumn，您需要添加以下代码：

<DataGrid>
   <DataGridColumns>
      <DataGridColumn HeaderCellClass="sticky-header" TItem="TEntity" Field="@nameof(TEntity.SomeProperty)" Caption="Some Caption" />
   </DataGridColumns>
</DataGrid>