javascript - 如何为反应表中的每一列添加搜索按钮以进行列过滤？

Question

我正在反应表中工作。我需要为每列添加搜索按钮以进行列过滤。当用户在任何列中输入关键字并单击相应的列搜索按钮时，它应该执行 API 调用并将值显示到表中。示例 UI 和代码如下所示。如果想法不清楚，请告诉我。

代码

const columns = tableColumns.map(({ key, header }) => ({
        Header: (
            <Tooltip arrow title={header} placement="top">
                <strong className={classes.head}>{header}</strong>
            </Tooltip>
        ),
        id: key,
        accessor: key,
        headValue: header,
        Cell: row => {
            const { key: rowValue } = row;
            return (
                <div
                    style={{
                        textAlign: 'center'
                    }}
                >
                    {rowValue && rowValue}
                </div>
            );
        },
        width: 160
    }));

 <DraggableTable
                            showPagination={false}
                            fixedCol={fixedCol}
                            filterable
                            // onFilteredChange={(filter, row) => columnFilter(filter, row)}
                            handleColumnChange={onColumnChange}
                            rows={tableData}
                            columns={columns}
                            style={{
                                height:
                                    tableData && tableData.length === 0
                                        ? 200
                                        : tableData && tableData.length <= 8
                                        ? tableData.length * 50 + 60
                                        : 400,
                                width:
                                    columns && columns.length === 0
                                        ? '60vw'
                                        : columns && columns.length <= 3
                                        ? columns.length * 180
                                        : columns && columns.length <= 6
                                        ? columns.length * 200
                                        : columns && (columns.length > 6 && columns.length) <= 9
                                        ? columns.length * 170
                                        : // ? 'auto'
                                          '80vw'
                                // ? columns.length * 170
                            }}
                            getTrProps={(state, rowInfo) => {
                                return {
                                    onClick: () => enableCellClick && onCellClick(rowInfo.original)
                                };
                            }} 
                            resizable
                        />

标签： javascriptreactjsreact-nativereact-hooksreact-table