У меня есть таблица реакций, в которую я хочу добавить пользовательскую фильтрацию
Я пытаюсь достичь выпадающего селектора, который динамически заполняется всеми доступными вариантами
Я почти готов и у меня есть рабочее решение, но мне бы очень хотелось, чтобы мой customFilter многократно использовался для каждого из трех полей: имя, фамилия и возраст - в настоящее время он работает, но жестко задан для каждогоvalue
Итак, эта строка
.map(item => item.lastName)
должна быть чем-то вроде
.map(item => item.{accessor})
Это не работает, но идея в том, что я могу получить значение аксессора для каждогополей, и тогда это будет по-настоящему динамичным и многоразовым
const customFilter = ({ filter, onChange }) => {
return (
<select
onChange={event => onChange(event.target.value)}
style={{ width: "100%" }}
value={filter ? filter.value : "all"}
>
<option value="all">Show All</option>
{testData
.map(item => item.lastName)
.filter((item, i, s) => s.lastIndexOf(item) == i)
.map(function (value) {
log.debug('renderItem: ', value);
return (
<option key={value} value={value}>
{value}
</option>
);
})}
</select>
);
};
const testData = [
{ firstName: 'Aang', lastName: 'Smith', age: '19' },
{ firstName: 'Appa', lastName: 'Baker', age: '3' },
{ firstName: 'Asami', lastName: 'Smith', age: '19' },
{ firstName: 'Azula', lastName: 'Baker', age: '19' },
{ firstName: 'Bolin', lastName: 'Smith', age: '20' },
{ firstName: 'Jinora', lastName: 'Baker', age: '19' },
{ firstName: 'Katara', lastName: 'Smith', age: '8' },
{ firstName: 'Korra', lastName: 'Baker', age: '19' },
{ firstName: 'Lin Beifong', lastName: 'Smith', age: '19' },
{ firstName: 'Momo', lastName: 'Baker', age: '19' },
{ firstName: 'Mai', lastName: 'Smith', age: '8' },
{ firstName: 'Mako', lastName: 'Baker', age: '29' },
{ firstName: 'Naga', lastName: 'Smith', age: '19' },
{ firstName: 'Pabu', lastName: 'Baker', age: '19' },
{ firstName: 'Sokka', lastName: 'Smith', age: '39' },
{ firstName: 'Suki', lastName: 'Baker', age: '8' },
{ firstName: 'Tenzin', lastName: 'Smith', age: '19' },
{ firstName: 'Toph Beifong', lastName: 'Baker', age: '19' },
{ firstName: 'Ty Lee', lastName: 'Smith', age: '49' },
{ firstName: 'Uncle Iroh', lastName: 'Baker', age: '59' },
{ firstName: 'Varrick', lastName: 'Smith', age: '19' },
{ firstName: 'Zhu Li', lastName: 'Baker', age: '8' },
{ firstName: 'Zuko', lastName: 'Smith', age: '19' }
];
const columns = [
{
Header: "First Name",
accessor: "firstName",
filterMethod: (filter, row) =>
row[filter.id].startsWith(filter.value) &&
row[filter.id].endsWith(filter.value)
}, {
Header: "Last Name",
id: "lastName",
accessor: d => d.lastName,
filterMethod: (filter, row) => {
return row[filter.id] === filter.value;
},
Filter: ({ filter, onChange }) =>
customFilter({ filter, onChange })
}, {
Header: "Age",
accessor: "age",
filterMethod: (filter, row) => {
return row[filter.id] === filter.value;
},
Filter: ({ filter, onChange }) =>
customFilter({ filter, onChange })
}
]
return (
<div>
<ReactTable
data={testData}
filterable
defaultFilterMethod={(filter, row) =>
String(row[filter.id]) === filter.value}
columns={columns}
defaultPageSize={10}
className="-striped -highlight"
/>
<br />
</div>
);