Reacttable-如何合并特定列和單元格值的表格

這是我創建的 2 個表。

這是它的資料

  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"

現在我想將這兩個表合并在一起。
一張桌子就像

如果我單擊紅色框中的行，它應該列印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;

uj5u.com熱心網友回復：

您可以將您的資料合并到一個物件中并呈現一個表格。也不是onClick在元素上使用，您可以通過在元素上tr使用來處理您的要求，并在 onClick 的回呼中決定應該將哪些資料發送到方法，如下所示：onClicktdrowOnClicktd

 {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>
      );
    })}

我在代碼沙箱上實作了一個示例，您可以查看它。

標籤：

上一篇：即使身份驗證成功，也無法寫入firebase實時資料庫

下一篇：隨機選擇要在React中顯示的影像