React table-如果特定列的值相同，如何合并两个表

Question

我有两个表，如下所示，数据如下

const callData = [
{ id: 1, type: "call", strike: 3000, volume: 50000 },
{ id: 2, type: "call", strike: 5000, volume: 30000 },
{ id: 3, type: "call", strike: 7000, volume: 20000 }
];
const putData = [
{ id: 1, type: "put", strike: 3000, volume: 50000 },
{ id: 2, type: "put", strike: 5000, volume: 10000 },
{ id: 3, type: "put", strike: 7000, volume: 7000 }
];

[！[在此输入图像描述][1]][1]

我想把这两个表组合在一起，并根据strike的值排列它们
例如，如果call和put对象的strike相同，则它们将像一样位于同一行

[！[在此输入图像描述][2]][2]

在react-table中可能吗？

App.js

import React, { useEffect } from "react";
import styled from "styled-components";
import { useTable } from "react-table";
const Styles = styled.div`
padding: 1rem;
table {
border-spacing: 0;
border: 1px solid black;
tr {
:last-child {
td {
border-bottom: 0;
}
}
}
th,
td {
margin: 0;
padding: 0.5rem;
border-bottom: 1px solid black;
border-right: 1px solid black;
:last-child {
border-right: 0;
}
}
}
`;
function Table({ columns, data }) {
// Use the state and functions returned from useTable to build your UI
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow
} = useTable({
columns,
data
});
// Render the UI for your table
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>
);
}
function App() {
const columns = React.useMemo(
() => [
{
Header: "Info",
columns: [
{
Header: "Type",
accessor: "type"
},
{
Header: "Volume",
accessor: "volume"
},
{
Header: "Strike",
accessor: "strike"
}
]
}
],
[]
);
// got below data from async request
const callData = [
{ id: 1, type: "call", strike: 3000, volume: 50000 },
{ id: 2, type: "call", strike: 5000, volume: 30000 },
{ id: 3, type: "call", strike: 7000, volume: 20000 }
];
const putData = [
{ id: 1, type: "put", strike: 3000, volume: 50000 },
{ id: 2, type: "put", strike: 5000, volume: 10000 },
{ id: 3, type: "put", strike: 7000, volume: 7000 }
];
return (
<Styles>
<Table columns={columns} data={callData} />
<Table columns={columns} data={putData} />
</Styles>
);
}
export default App;
Codesandbox<br>
https://codesandbox.io/s/intelligent-monad-syq5h?file=/src/App.js:0-2533
```
[1]: https://i.stack.imgur.com/e8IXl.png
[2]: https://i.stack.imgur.com/pqyKs.png

Answer 1

也许您可以在显示数据之前进行预处理？

您可以将所有记录放在一个相互的方式中，根据需要对它们进行排列(筛选和排序(，然后传递到一个相互表中。