reactjs - Fluent UI DetailsList - 有没有办法向每一列添加过滤器

Question

我正在使用 Fluent UI DetailsList .我的表格如下所示:

我需要在每一列(文本或下拉列表)下方进行筛选，如下所示:

请告诉我这是否可行？或者可能是一种显示自定义 header 的方法(使用 html)？

Answer 1

这实际上比我想象的要容易......

如果您可以通过单击列标题来显示选项(与直接在标题下方的下拉列表相比)，那么这可以通过结合使用 ContextualMenu 组件和 DetailsList 来实现。我通过调整官方文档中的可变行高示例使其工作:https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist/variablerowheights .

在您的 DetailsList 下添加一个 ContextualMenu:

<DetailsList
    items={items}
    columns={columns}
/>
{this.state.contextualMenuProps && <ContextualMenu {...this.state.contextualMenuProps} />}

在您的列定义中，设置 hasDropdown 操作，以便用户获得一个 UI 指示器，表明他们可以/应该单击标题，并调用 contextMenu 方法(注意我使用的是 onColumnContextMenu 以及 onColumnClick 所以他们左击还是右击标题都没有关系:

{
    key: 'dept',
    name: 'Department',
    fieldName: 'dept',
    minWidth: 125,
    maxWidth: 200,
    onColumnContextMenu: (column, ev) => {
        this.onColumnContextMenu(column, ev);
    },
    onColumnClick: (ev, column) => {
        this.onColumnContextMenu(column, ev);
    },
    columnActionsMode: ColumnActionsMode.hasDropdown,
}

当 onColumnContextMenu 方法被调用时，我们需要构建将被 ContextualMenu 组件使用的上下文菜单属性。还要注意 dismissal 方法，它会清除状态以便隐藏菜单。

private onContextualMenuDismissed = (): void => {
    this.setState({
        contextualMenuProps: undefined,
    });
}

private onColumnContextMenu = (column: IColumn, ev: React.MouseEvent<HTMLElement>): void => {
    if (column.columnActionsMode !== ColumnActionsMode.disabled) {
        this.setState({
            contextualMenuProps: this.getContextualMenuProps(ev, column),
        });
    }
};

最后，在 getContextualMenuProps 中，您需要确定应该让用户单击的选项。在此示例中，我只是提供排序选项(您需要添加一个 onClick 处理程序以在用户单击该项目时实际执行某些操作)，但我将使用 列 以确定这些项目实际上应该是什么，并将过滤器绘制到项目集合中，以便用户可以选择一个进行过滤。

private getContextualMenuProps = (ev: React.MouseEvent<HTMLElement>, column: IColumn): IContextualMenuProps => {
    const items: IContextualMenuItem[] = [
        {
            key: 'aToZ',
            name: 'A to Z',
            iconProps: { iconName: 'SortUp' },
            canCheck: true,
            checked: column.isSorted && !column.isSortedDescending,
        },
        {
            key: 'zToA',
            name: 'Z to A',
            iconProps: { iconName: 'SortDown' },
            canCheck: true,
            checked: column.isSorted && column.isSortedDescending,
        }
    ];

    return {
        items: items,
        target: ev.currentTarget as HTMLElement,
        directionalHint: DirectionalHint.bottomLeftEdge,
        gapSpace: 10,
        isBeakVisible: true,
        onDismiss: this.onContextualMenuDismissed,
    }
}

注意 ContextualMenuProps 对象上的 target，它告诉 ContextualMenu 将自己锁定在何处(在本例中，列您单击以实例化菜单的 header 。