实现 React 表扩展行

Question

这是我第一次使用react-table库。在过去的几天里，我一直在努力如何使用 useExpanded 钩子

文档来实现扩展功能，并且所有可用的示例都不清楚，所以，这是我的代码，希望有人可以帮助我然后

const accountData = [
  {
    company: "621bb1bda49c57b938fb9b8c",
    country: "6228dac2ad9aef4e064906c3",
    accountName: "Oriana Hospital",
    accountType: "Hospital ",
    city: "Sharjah",
    area: "Al Khan",
    street: "Al Taawun",
    location: "https://goo.gl/maps/Jx6oTCbXyq9C8Mrt7",
    hasBranches: true,
    numberOfDoctors: null,
    accountNotes: [],
    numberOfBranches: 1,
    expand: false,
    branches: [
      {
        branchName: "Oriana Pulman ",
        branchType: "Hospital ",
        branchCity: "Sharjah",
        branchArea: "Sharjah",
        branchStreet: "Al Khan",
        branchLocation: "Al Taawun",
        _id: "622e2f05cc18e17eb608541a",
      },
    ],
    _id: "622e2f04cc18e17eb6085419",
  },
  {
    company: "621bb1bda49c57b938fb9b8c",
    country: "6228dac2ad9aef4e064906c3",
    accountName: "Ajman Speciality",
    accountType: "Hospital ",
    city: "Ajman",
    area: "Ajman",
    street: "Al Ittihad Road",
    location: "https://goo.gl/maps/9aizJaNxT7iMDVry6",
    hasBranches: false,
    numberOfDoctors: null,
    accountNotes: [],
    numberOfBranches: 0,
    expand: false,
    branches: [],
    _id: "622e2f05cc18e17eb608541b",
  },
  {
    company: "621bb1bda49c57b938fb9b8c",
    country: "6228dac2ad9aef4e064906c3",
    accountName: "Al Ittihad Medical Center",
    accountType: "Clinic",
    city: "Ajman",
    area: "Al Swan",
    street: "Ittihad ",
    location: "https://goo.gl/maps/ppLNbPB9CdGWqFpy6",
    hasBranches: false,
    numberOfDoctors: null,
    accountNotes: [],
    numberOfBranches: 0,
    expand: false,
    branches: [],
    _id: "622e2ff2a2c75bcb9aaf640e",
  },
  {
    company: "621bb1bda49c57b938fb9b8c",
    country: "6228dac2ad9aef4e064906c3",
    accountName: "Al Zaora Medical Center",
    accountType: "Clinic",
    city: "Ajman",
    area: "Al Swan",
    street: "Ittihad ",
    location: "https://goo.gl/maps/PZr5PqFf28rpdgYJ7",
    hasBranches: false,
    numberOfDoctors: null,
    accountNotes: [],
    numberOfBranches: 0,
    expand: false,
    branches: [],
    _id: "622e2ff2a2c75bcb9aaf640f",
  },
  {
    company: "621bb1bda49c57b938fb9b8c",
    country: "6228dac2ad9aef4e064906c3",
    accountName: "Amina Hospital",
    accountType: "Hospital ",
    city: "Ajman",
    area: "Al Swan",
    street: "Ittihad ",
    location: "https://goo.gl/maps/Bxn7tedGQxUZFNqa8",
    hasBranches: true,
    numberOfDoctors: null,
    accountNotes: [],
    numberOfBranches: 3,
    expand: false,
    branches: [
      {
        branchName: "Ibn Sina ",
        branchType: "Clinic",
        branchCity: "Ajman",
        branchArea: "Al Swan",
        branchStreet: "Ittihad",
        branchLocation: "https://goo.gl/maps/M3WemaX4ehbp6rSS6",
        _id: "622e2ff2a2c75bcb9aaf6411",
      },
      {
        branchName: "Amina Al Jurf",
        branchType: "Clinic",
        branchCity: "Ajman",
        branchArea: "Al Jurf",
        branchStreet: "Sheikh Khalifa",
        branchLocation: "https://goo.gl/maps/VGgU5TGSBvaUnGqm6",
        _id: "622e2ff2a2c75bcb9aaf6412",
      },
      {
        branchName: "Family Medical Center",
        branchType: "Clinic",
        branchCity: "Ajman",
        branchArea: "Ajman",
        branchStreet: "Industiral Ajman",
        branchLocation: "https://goo.gl/maps/wvqTbtuRakzaYTWg7",
        _id: "622e2ff2a2c75bcb9aaf6413",
      },
    ],
    _id: "622e2ff2a2c75bcb9aaf6410",
  },
  {
    company: "621bb1bda49c57b938fb9b8c",
    country: "6228dac2ad9aef4e064906c3",
    accountName: "Al Garhoud Private Hospital",
    accountType: "Hospital ",
    city: "Dubai",
    area: "Al Garhoud",
    street: "Reiyadh",
    location: "https://goo.gl/maps/LVpuJhMBT2MrobPT6",
    hasBranches: true,
    numberOfDoctors: null,
    accountNotes: [],
    numberOfBranches: 1,
    expand: false,
    branches: [
      {
        branchName: "Al Garhoud 2",
        branchType: "Hospital ",
        branchCity: "Dubai",
        branchArea: "Mirdif",
        branchStreet: "Sheikh Mohamed Bin Zayed",
        branchLocation: "https://goo.gl/maps/p2bKwpnBuLaH2yxS8",
        _id: "622e2ff2a2c75bcb9aaf6415",
      },
    ],
    _id: "622e2ff2a2c75bcb9aaf6414",
  },
  {
    company: "621bb1bda49c57b938fb9b8c",
    country: "6228dac2ad9aef4e064906c3",
    accountName: "Emirates Hospital",
    accountType: "Hospital ",
    city: "Dubai",
    area: "Jumeirah",
    street: "Al Wasl",
    location: "https://goo.gl/maps/gqHVMFvhpnGgDCiL8",
    hasBranches: true,
    numberOfDoctors: null,
    accountNotes: [],
    numberOfBranches: 2,
    expand: false,
    branches: [
      {
        branchName: "Emirates Marina",
        branchType: "Hospital ",
        branchCity: "Dubai",
        branchArea: "Marina",
        branchStreet: "Marina",
        branchLocation: "https://goo.gl/maps/p2bKwpnBuLaH2yxS8",
        _id: "622e2ff2a2c75bcb9aaf6417",
      },
      {
        branchName: "Emirates Clinic",
        branchType: "Clinic",
        branchCity: "RAK",
        branchArea: "RAK",
        branchStreet: "Khalid street ",
        branchLocation: "https://goo.gl/maps/NMN68z5VqB9AoUKS7",
        _id: "622e2ff2a2c75bcb9aaf6418",
      },
    ],
    _id: "622e2ff2a2c75bcb9aaf6416",
  },
  {
    company: "621bb1bda49c57b938fb9b8c",
    country: "6228dac2ad9aef4e064906c3",
    accountName: "Al Shams Medical Diagnsotice Center",
    accountType: "Group",
    city: "Sharjah",
    area: "Industrial area",
    street: "Shams",
    location: "https://g.page/alshamsmedicalgroup?share",
    hasBranches: true,
    numberOfDoctors: null,
    accountNotes: [],
    numberOfBranches: 2,
    expand: false,
    branches: [
      {
        branchName: "Al Shams Al Jadeed ",
        branchType: "Clinic",
        branchCity: "Sharjah",
        branchArea: "Industrial Sharjah",
        branchStreet: "Demuscus",
        branchLocation: "https://goo.gl/maps/ZbEn1or58nYKhvSK9",
        _id: "622e2ff2a2c75bcb9aaf641a",
      },
      {
        branchName: "Al Shams Clinic",
        branchType: "Clinic",
        branchCity: "Sharjah",
        branchArea: "Industrial 3",
        branchStreet: "unknown street",
        branchLocation: "https://goo.gl/maps/391Dz4B4EkxASjjm6",
        _id: "622e2ff2a2c75bcb9aaf641b",
      },
    ],
    _id: "622e2ff2a2c75bcb9aaf6419",
  },
  {
    company: "621bb1bda49c57b938fb9b8c",
    country: "6228dac2ad9aef4e064906c3",
    accountName: "Ibn Batuta DrugStore",
    accountType: "Drugstore",
    city: "Sharjah",
    area: "Al Nema",
    street: "Al Nema",
    location: "https://goo.gl/maps/6jka7BaGCguTXTza7",
    hasBranches: false,
    numberOfDoctors: null,
    accountNotes: [],
    numberOfBranches: 0,
    expand: false,
    branches: [],
    _id: "622e2ff2a2c75bcb9aaf641c",
  },
  {
    company: "621bb1bda49c57b938fb9b8c",
    country: "6228dac2ad9aef4e064906c3",
    accountName: "Tamimi Drug Store",
    accountType: "Drugstore",
    city: "Sharjah",
    area: "Industrial area",
    street: "Industrial ",
    location: "https://goo.gl/maps/ybWjXf2ZTBCsi5r68",
    hasBranches: false,
    numberOfDoctors: null,
    accountNotes: [],
    numberOfBranches: 0,
    expand: false,
    branches: [],
    _id: "622e2ff2a2c75bcb9aaf641d",
  },
  {
    company: "621bb1bda49c57b938fb9b8c",
    country: "6228dac2ad9aef4e064906c3",
    accountName: "Al Zaora Pharmacy",
    accountType: "Pharmacy",
    city: "Ajman",
    area: "Al Swan",
    street: "Ittihad ",
    location: "https://goo.gl/maps/PZr5PqFf28rpdgYJ7",
    hasBranches: false,
    numberOfDoctors: null,
    accountNotes: [],
    numberOfBranches: 0,
    expand: false,
    branches: [],
    _id: "622e2ff2a2c75bcb9aaf641e",
  },

];

export default accountData;

在表中如果帐户 hasBranches 为 true，我想显示扩展按钮以仅在单击时显示分支

，这是表代码

import {
  useTable,
  useGlobalFilter,
  useFilters,
  usePagination,
  useSortBy,
  useRowSelect,
  useExpanded,
} from "react-table";
import ColumnFilter from "./ColumnFilter";
import accountData from "./Data";
import { Columns } from "./Columns";
import { useMemo } from "react";
import "./table.css";
import GlobalFilter from "./GlobalFilter";
import { CheckBox } from "./CheckBos";

const PaginationTable = (props) => {
  const columns = useMemo(() => Columns, []);
  const data = useMemo(() => accountData, []);
  const defaultColumns = useMemo(() => {
    return {
      Filter: ColumnFilter,
    };
  }, []);

  const onClickRow = (e) => {
    const row = e.target;
    console.log(row);
  };

  const tableInstance = useTable(
    {
      columns,
      data,
      defaultColumns,
      expanded: {},
    },
    useFilters,
    useGlobalFilter,
    useSortBy,
    useExpanded,
    usePagination,
    useRowSelect,
    (hooks) => {
      hooks.visibleColumns.push((columns) => [
        // Let's make a column for selection
        {
          id: "selection",
          Header: ({ getToggleAllPageRowsSelectedProps }) => (
            <div>
              <CheckBox {...getToggleAllPageRowsSelectedProps()} />
            </div>
          ),
          Cell: ({ row }) => (
            <div>
              <CheckBox {...row.getToggleRowSelectedProps()} />
            </div>
          ),
        },
        {
          // Build our expander column
          id: "expander", // Make sure it has an ID
          Header: ({ getToggleAllRowsExpandedProps, isAllRowsExpanded }) => (
            <span {...getToggleAllRowsExpandedProps()}>
              {isAllRowsExpanded ? "
              

Answer 1

对于任何可能来这里的人，我终于在这个链接中找到了解决方案 https://www.freakyjolly。 com/react-table-tutorial/ 这也是我的代码

import accountData from "./Data";

export const modifiedData = accountData.map((d) => {
  return {
    accountName: d.accountName,
    accountType: d.accountType,
    city: d.city,
    area: d.area,
    street: d.street,
    location: d.location,
    numberOfBranches: d.numberOfBranches,
    subRows: !d.hasBranches
      ? null
      : d.branches.map((b) => {
          return {
            accountName: b.branchName,
            accountType: b.branchType,
            city: b.branchCity,
            area: b.branchArea,
            street: b.branchStreet,
            location: b.branchLocation,
            numberOfBranches: 0,
          };
        }),
  };
});