我正在尝试使用react-table 7.5来创建一个带有搜索栏和按行选择功能的表。我有搜索和选择行的代码,但是我不能让它们一起工作。
这是我的表组件:
const Table = (...) => {
const [data, setData] = useState(MOCK_DATA);
const columns = useMemo(() => COLUMNS, []);
const defaultColumn = React.useMemo(
() => ({
Filter: ColumnFilter,
}),
[]
);
// table props
let {
getTableProps,
getTableBodyProps,
headerGroups,
footerGroups,
rows,
prepareRow,
setGlobalFilter,
selectedFlatRows,
state: { selectedRowPaths },
} = useTable(
{
columns,
data,
},
useFilters,
(hooks) => {
hooks.visibleColumns.push((columns) => [
{
id: "selection",
Header: ({ getToggleAllRowsSelectedProps }) => (
<Checkbox {...getToggleAllRowsSelectedProps()} />
),
Cell: ({ row }) => <Checkbox {...row.getToggleRowSelectedProps()} />,
},
...columns,
]);
},
useRowSelect,
useGlobalFilter
);
const stateF = state;
const { globalFilter } = stateF;
const backButton = (e) => {
e.preventDefault();
setTable(true);
};
return (
<>
<div
className="Table"
}
>
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
{isFirstTable ? "next" : "submit"}
</button>
<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 => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
return (
<td {...cell.getCellProps()}>{cell.render("Cell")}</td>
);
})}
</tr>
);
})}
</tbody>
</table>
<pre>
<code>
{JSON.stringify(
{
selectedFlatRows: selectedFlatRows.map((row) => row.original),
},
null,
2
)}
</code>
</pre>
</div>
</>
);
};
这就是代码,主要问题是编译器说状态没有定义。第66行:18:'state'未定义为no-undef
我删除了一些与问题无关的多余行,如Table接收的参数。
这是我在这里的第一个问题,所以我希望我已经足够清楚了。谢谢!
1条答案
按热度按时间aiazj4mn1#
使用全局筛选器(前端筛选器),您可以使用selectedRowIdsreact-table内置变量轻松地仅管理它。
我已经在This link中实现了整个项目。
https://codesandbox.io/s/admiring-wood-8rxinu?file=/src/components/DataTable.js:2212-2226
我希望这对你有帮助