React-таблица - Пользовательский серверный фильтр - - PullRequest
Новая
       89

React-таблица - Пользовательский серверный фильтр -

0 голосов
/ 04 мая 2020

Мне нужно добавить фильтры к столбцам с помощью React-таблицы. Мне нужен фильтр на стороне сервера, и, как оказалось, довольно сложно понять, как работает реагирующая таблица. В основном мне нужно добавить в столбцы фильтр в зависимости от того, как я хочу его фильтровать. Но фильтры под заголовком не отображаются. Пока у меня есть это:

Столбцы: не то, чтобы столбец "пользователь" имел фильтр. В этом случае я хотел бы отфильтровать только столбец пользователей с простым вводом 

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;
...