React table - 动态组 header

Question

这是我的数据

  const data = [
    {
      date: "2021-01-01",
      options: [
        { isFirst: "y", name: "john" },
        { isFirst: "n", name: "Sam" }
      ]
    },
    {
      date: "2021-11-01",
      options: [
        { isFirst: "n", name: "TY" },
        { isFirst: "n", name: "joe" }
      ]
    }
  ];

我目前的UI：

这就是我想要的 - 组 header 应该是日期

怎么做？

App.js

import "./styles.css";
import React, { useMemo } from "react";

import MyTable from "./MyTable";

export default function App() {
  const data = [
    {
      date: "2021-01-01",
      options: [
        { isFirst: "y", name: "john" },
        { isFirst: "n", name: "Sam" }
      ]
    },
    {
      date: "2021-11-01",
      options: [
        { isFirst: "n", name: "TY" },
        { isFirst: "n", name: "joe" }
      ]
    }
  ];
  const columns = useMemo(
    () => [
      {
        Header: "Name",
        columns: [
          {
            Header: "Name",
            accessor: "name"
          },
          {
            Header: "First One",
            accessor: "isFirst"
          }
        ]
      }
    ],
    []
  );
  return (
    <div className="App">
      {data.map((d) => {
        return <MyTable data={d.options} columns={columns} />;
      })}
    </div>
  );
}

MyTable.js

import React 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 DataTable(props) {
  const { data, columns } = props;
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = useTable({
    columns,
    data
  });

  return (
    <Styles>
      <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 row.cells.map((cell) => {
                    return (
                      <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                    );
                  });
                })}
              </tr>
            );
          })}
        </tbody>
      </table>
    </Styles>
  );
}

export default DataTable;

Codesandbox:
https://codesandbox.io/s/xenodochial-tamas-ns9ub

Answer 1

您可以像这样将日期值传递给 MyTable 组件：

 {data.map((d) => {
    return <MyTable date={d.date} data={d.options} columns={columns} />;
 })}

并且在 MyTable 中，您可以通过检查每个 header 的 Header 和 depth 属性来找到您的目标 header，如下代码所示：

<thead>
      {headerGroups.map((headerGroup) => (
        <tr {...headerGroup.getHeaderGroupProps()}>
          {headerGroup.headers.map((column) => {
            return (
              <th {...column.getHeaderProps()}>
                {column.Header === "Name" && column.depth === 0
                  ? props.date
                  : column.render("Header")}
              </th>
            );
          })}
        </tr>
      ))}
</thead>

我已经实现了一个示例 Here on condeSandbox。

React table - 动态组 header

React table - dynamic group header

javascript

reactjs

react-table