reactjs - React-table - 自定义服务器端过滤器 -

Question

我需要使用 React-table 向列添加过滤器。我需要将过滤器放在服务器端，事实证明很难理解 react-table 的工作原理。我需要的基本上是在列中添加过滤器，具体取决于我要如何过滤但是标题下的过滤器没有被呈现。到目前为止，我有这个：

列：并非“用户”列有过滤器。在这种情况下，我想用一个简单的输入只过滤用户列

function ShirtColumnsTable() {

    return [
        {
            Header: 'Users',
            accessor: 'shirtUser.username',
            Filter: ({ filter, onChange }) => (
                <select
                    onChange={event => onChange(event.target.value)}
                    style={{ width: "100%" }}
                    value={filter ? filter.value : "all"}
                >
                    {this.state.yearFilter}
                </select>
            ),
            filterable: true
        },
        {
            Header: 'Team', accessor: 'team.name'
        },
        {
            Header: 'Likes', accessor: 'likes'
        },
        {
            Header: 'Created date', accessor: 'createdAt'
        }
    ]
}

这是我使用表格的组件：

function ShirtIndexComponent() {
    const [data, setData] = useState([])


    const [columns, setColumns] = useState(ShirtColumnsTable())

    const url = 'shirts'
    const apiFetch = new ApiFetch(url, { sorted: { createdAt: '-1' }, filtered: { title: '' }, pageSize: 10, pageNum: 1 })

    async function fetchApi() {
        const response = await apiFetch.get()
        setData(response.shirts)
    }

    useEffect(() => {
        fetchApi()
    }, []);

    return (
        <div>
            <ReactTableComponent
                columns={columns}
                data={data} />
        </div>
    )
}

export default ShirtIndexComponent;

还有桌子

import React, { useState } from 'react'
import { useTable, useFilters } from 'react-table'

function Table({ columns, data }) {
    console.log(columns)
    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
    } = useTable({
        columns,
        data,
    },
        useFilters, // useFilters!
    )

    return (
        <table {...getTableProps()}>
            <thead>
                {headerGroups.map(headerGroup => (
                    <tr {...headerGroup.getHeaderGroupProps()}>
                        {headerGroup.headers.map(column => (
                            <th {...column.getHeaderProps()}>{column.render('Header')}</th>
                        ))}
                    </tr>
                ))}
            </thead>
            <tbody {...getTableBodyProps()}>
                {rows.map((row, i) => {
                    prepareRow(row)
                    return (
                        <tr {...row.getRowProps()}>
                            {row.cells.map(cell => {
                                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                            })}
                        </tr>
                    )
                })}
            </tbody>
        </table>
    )
}

export default Table;

标签： reactjsreact-table