首页 > 解决方案 > React table - 添加过滤器按钮以过滤表行

问题描述

我需要添加一个过滤器按钮,该按钮将在下拉列表中包含所有列名。在列名中添加特定值后,应相应地更新表。

我不确定是否已经有任何 API 以及如何使用它。

<DropdownButton
   label="Filter">
</DropdownButton>

<div className="row">
     <Table structure={this.tableData} 
            dataSet={this.list} 
            sortBy={this.sortBy} 
            order={this.order} 
            hasSelectionColumn={this.hasSelectionColumn} 
            enableSelectAll={this.enableSelectAll}
            ref={(c) => { this.tableWrapper = c; }} height={500} >
     </Table>
</div>


tableData = [
        {
            id: 'name',
            label: 'Name'
        },
        {
            id: 'ip',
            label: 'Address'
        },
        {
            id: 'type',
            label: 'Type'
        },
        {
            id: 'family',
            label: 'Family'
        },
        {
            id: 'softwareversion',
            label: 'Version'
        }
    ];
    sortBy = 'name';
    order = 'asc';
    hasSelectionColumn = true;
    enableSelectAll = true;
    list = [];

像这样的东西:

我正在寻找这样的东西

标签: reactjsreact-nativereact-table

解决方案


推荐阅读