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

Question

我正在使用 Fluent UI DetailsList。我的 table 如下所示：

我需要在每一列（文本或 drop-down）下方进行过滤，如下所示：

请告诉我这是否可行？或者也许是一种显示自定义 header 的方法（使用 html）？

Answer 1

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

如果您可以通过单击 header 列来显示选项（与在标题下方直接显示下拉菜单相比），那么可以使用 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 指示器，表明他们 can/should 单击 header，并调用 contextMenu 方法（请注意，我使用的是 onColumnContextMenu 和 onColumnClick，所以他们左键或右键单击 header:

并不重要

{
    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 处理程序以在用户单击该项目时实际执行某些操作），但我将使用 column 来确定这些项目实际上应该是什么并将过滤器绘制到项目中 collection 这样用户就可以 select 一个来过滤。

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 object 上的 target，它告诉 ContextualMenu 将自己锁定在何处（在本例中，列 header 您单击以实例化菜单。

Answer 2

没有上下文菜单的每列的详细列表过滤器 -

https://codesandbox.io/s/rajesh-patil74-jzuiy?file=/src/DetailsList.CustomColumns.Example.tsx

例如 - 在与每一列关联的文本字段中提供过滤器将在颜色列上应用过滤器。

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

Fluent UI DetailsList - Is there a way to add filters to each column

reactjs

office-fabric