React table - 如何合并特定列和单元格值的 table

Question

这是我创建的 2 table。

这是它的数据

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

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

如果您点击该行，它会打印类似

的内容

  const rowOnClick = (row) => {
    let obj = row.values;
    console.log(`clicked ${obj.type} for Strike ${obj.strike}`);
  };

// log "clicked call for Strike 3000"

现在我想将这 2 个 table 合并在一起。
单曲 table 就像

如果我单击红色框中的行，它应该打印 clicked call for Strike xxx。
如果我单击绿色框中的行，它应该打印 clicked put for Strike xxx.

例如，如果我单击 strike 5000 红色框中的行，它会打印 clicked call for Strike 5000

我该怎么做？

Codesandbox
https://codesandbox.io/s/vigilant-easley-v6h8p?file=/src/App.js:0-2789
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
  });

  const rowOnClick = (row) => {
    let obj = row.values;
    console.log(`clicked ${obj.type} for Strike ${obj.strike}`);
  };

  // Render the UI for your table
  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()} onClick={() => {}}>
            {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()}
              onClick={() => {
                rowOnClick(row);
              }}
            >
              {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", volume: 50000, strike: 3000 },
    { id: 2, type: "call", volume: 30000, strike: 5000 },
    { id: 3, type: "call", volume: 20000, strike: 7000 }
  ];

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

  return (
    <Styles>
      <Table columns={columns} data={callData} />
      <Table columns={columns} data={putData} />
    </Styles>
  );
}

export default App;

Answer 1

您可以将数据合并到一个对象中并只渲染一个对象 table。此外，在 tr 元素上使用 onClick，您可以通过在 td 元素上使用 onClick 来处理您的要求，并决定应将哪些数据发送到 rowOnClick 方法，在 td 的 onClick.like 的回调中 this:

 {rows.map((row, i) => {
      prepareRow(row);
      return (
        <tr {...row.getRowProps()}>
          {row.cells.map((cell) => {
            ...
            return <td  {...cell.getCellProps()} 
            onClick={ column === 'strike' ? undefined : ()=> rowOnClick({...})}>
              {cell.render("Cell")}</td>;
          })}
        </tr>
      );
    })}

我实现了一个例子here on codesandbox你可以看看。

React table - 如何合并特定列和单元格值的 table

React table - how to merge tables for specific column and cell value

javascript

reactjs

react-table