反应表-过滤后的新订单

Question

我有一个用React table制作的表。我希望它在每次过滤后都有一个新的订单。到目前为止，我只实现了一个在渲染时创建的订单。

这是表组件：

import React, { useEffect } from "react";
import { Table as BTable } from "react-bootstrap";
import { useTable, useSortBy, useGlobalFilter } from "react-table";
function Table({ data, columns, variant, filter = "" }) {
const {
getTableProps,
headerGroups,
rows,
prepareRow,
state,
setGlobalFilter,
} = useTable(
{
columns,
data,
},
useGlobalFilter,
useSortBy
);
const { globalFilter } = state;
useEffect(() => {
setGlobalFilter(filter);
// eslint-disable-next-line
}, []);
return (
<>
<span>Search: </span>
<input
value={globalFilter}
onChange={(e) => setGlobalFilter(e.target.value)}
onMouseMove={(e) => setGlobalFilter(e.target.value)}
></input>
<hr></hr>
<BTable striped bordered hover variant={variant} {...getTableProps()}>
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th
width={column.width}
{...column.getHeaderProps(column.getSortByToggleProps())}
>
{column.render("Header")}
<span>
{column.isSorted
? column.isSortedDesc
? " 🔽"
: " 🔼"
: ""}
</span>
</th>
))}
</tr>
))}
</thead>
<tbody>
{rows.map((row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
return (
<td {...cell.getCellProps()}>{cell.render("Cell")}</td>
);
})}
</tr>
);
})}
</tbody>
</BTable>
</>
);
}
export default Table;

以及实施：

const columns = React.useMemo(
() => [
{
Header: "#",
Cell: (row) => {
return <div>{Number(row.row.id) + 1}</div>;
},
},
{
Header: "ID",
accessor: "id",
},
{
Header: "Added By",
accessor: "addedBy",
},
{ Header: "Date of creation", accessor: "dateOfCreation", width: "10%" },
{
Header: "Ordertaker",
accessor: "orderTaker",
width: "5%",
},
{
Header: "Customer",
accessor: "customer",
width: "20%",
},
{
Header: "Description",
accessor: "description",
disableSortBy: "true",
width: "30%",
},
{
Header: "Status",
accessor: "status",
disableSortBy: "true",
width: "10%",
},
],
);
return (
<Table
data={data} // data is fetched from firebase
columns={columns}
variant="dark"
/>
);

"列中每行的数字为1。我想要的是在"#"列，以1开头。有什么想法吗？

Answer 1

我在互联网上找到了解决方案。这是链接

Answer 2

map返回按插入顺序进行固有排序。你可以先试试sort。这是一个链接。

像这样的东西可能会起作用：

rows.sort((a, b) => a.# - b.#).map((row, i) => ...