React查询无限卷轴与React表

Question

我正在使用React查询无限滚动获得页面数据数据。 这是我传入数据的图像：

我想用React Table V8在屏幕上显示此数据，但我做不到。

{shipments?.pages.map((group, i) => (
          <React.Fragment key={i}>
            <Table group={group} />
          </React.Fragment>
        ))}

Table.tsx

type TableProps = {
  group: {
    content: Shipment[];
    currentPageNumber: number;
    numberOfPages: number;
    totalElements: number;
  };
};
const table = createTable().setRowType<ShipmentRow>();

const defaultColumns = [
  table.createDataColumn("id", {
    header: () => <span>ID</span>,
    cell: ({ row }) => (
      <>
        {statusBadge(
          row.original?.deliveryAttempts,
          row.original?.id,
          row.original?.abbreviation,
          row.original?.totalDeciOct,
          row.original?.totalPartnerPrice,
          row.original?.rendezvousDeliveryDate
        )}
      </>
    ),
    footer: (props) => props.column.id,
  }),

  table.createDataColumn((row) => row.orderDate, {
    id: "orderDate",
    cell: (info) => (
      <S.Flex>
        <DateIcon />
        <S.Date>{info.getValue()}</S.Date>
      </S.Flex>
    ),
    header: () => <span>Sipariş Tarihi</span>,
    footer: (props) => props.column.id,
  }),
  table.createDataColumn("merchantName", {
    cell: (info) => <S.Flex>{info.getValue()}</S.Flex>,
    header: () => <span>Gönderici</span>,
    footer: (props) => props.column.id,
  }),
  table.createDataColumn((row) => row.senderTown, {
    id: "senderTown",
    cell: (info) => (
      <S.LocationContainer>
        <Location />
        <S.LocationText>{info.getValue()}</S.LocationText>
      </S.LocationContainer>
    ),
    header: () => <span>Alım Bölgesi</span>,
    footer: (props) => props.column.id,
  }),
  table.createDataColumn((row) => row.receiverTown, {
    id: "receiverTown",
    cell: (info) => (
      <S.LocationContainer>
        <Location />
        <S.LocationText>{info.getValue()}</S.LocationText>
      </S.LocationContainer>
    ),
    header: () => <span>Teslim Bölgesi</span>,
    footer: (props) => props.column.id,
  }),
  table.createDataColumn("receivingDriver", {
    cell: (info) => <>{StyledDriver(info.getValue() as keyof Driver)}</>,
    header: () => <span>Alım Sürücüsü</span>,

    footer: (props) => props.column.id,
  }),
  table.createDataColumn((row) => row.deliveryDriver, {
    id: "deliveryDriver",
    cell: (info) => <>{StyledDriver(info.getValue() as keyof Driver)}</>,
    header: () => <span>Teslim Sürücüsü</span>,
    footer: (props) => props.column.id,
  }),
  table.createDataColumn((row) => row.totalDeciOct, {
    id: "totalDeciOct",
    cell: (info) => (
      <>{info.getValue() ? <>{info.getValue()} Desi</> : <>-</>} </>
    ),
    header: () => <span>Octovan Desi</span>,
    footer: (props) => props.column.id,
  }),
  table.createDataColumn((row) => row.totalPartnerPrice, {
    id: "totalPartnerPrice",
    cell: (info) => (
      <>{info.getValue() ? <> ₺{info.getValue()?.toFixed(2)}</> : <>-</>} </>
    ),
    header: () => <span>Taşıma Tutarı</span>,
    footer: (props) => props.column.id,
  }),
  table.createDataColumn((row) => row.status, {
    id: "status",
    cell: ({ row }) => (
      <>
        {row.original &&
          shipmentState(
            shipmentStatus[
              row.original.status as unknown as keyof typeof shipmentStatus
            ]
          )}
      </>
    ),
    header: () => <span>Durum</span>,
    footer: (props) => props.column.id,
  }),
];

const Table = ({ group }: TableProps) => {
  const parsedShipments = useMemo(
    () =>
      (group.content &&
        group.content.map((shipment: Shipment) => ({
          id: shipment.id,
          orderDate: dayjs(shipment.createDate).format("DD MMMM"),
          merchantName: shipment.merchant
            ? shipment.merchant.name
            : shipment.senderAddress.name,
          senderTown: shipment.senderAddress.town,
          receiverTown: shipment.receiverAddress.town,
          receivingDriver: shipment.receivingDriver
            ? `${shipment.receivingDriver.name} ${shipment.receivingDriver.surname}`
            : "Atanmadı",
          deliveryDriver: shipment.deliveryDriver
            ? `${shipment.deliveryDriver.name} ${shipment.deliveryDriver.surname}`
            : "Atanmadı",
          totalDeciOct: shipment.totalDeciOct,
          totalPartnerPrice: shipment.totalPartnerPrice,
          abbreviation: shipment.merchant
            ? shipment.merchant.abbreviation
            : shipment.partnerCompany.abbreviation,
          deliveryAttempts: shipment.deliveryAttempts,
          rendezvousDeliveryDate: shipment.rendezvousDeliveryDate,
          status: shipment.status,
        }))) ??
      [],
    [group]
  );
  const [columns] = useState<typeof defaultColumns>(() => [...defaultColumns]);
  const instance = useTableInstance(table, {
    data: parsedShipments,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <S.Table>
      <S.HeadTbody>
        {instance.getHeaderGroups().map((headerGroup) => (
          <tr key={headerGroup.id}>
            {headerGroup.headers.map((header) => (
              <S.HeadTh key={header.id} colSpan={header.colSpan}>
                {header.isPlaceholder ? null : header.renderHeader()}
              </S.HeadTh>
            ))}
          </tr>
        ))}
      </S.HeadTbody>
      <S.DataTbody>
        {instance.getRowModel().rows.map((row) => (
          <S.StyledTr key={row.id}>
            {row.getVisibleCells().map((cell) => (
              <S.StyledTh key={cell.id}>{cell.renderCell()}</S.StyledTh>
            ))}
          </S.StyledTr>
        ))}
      </S.DataTbody>
    </S.Table>

我在屏幕上看到了每个页面的一个表组件，而我想要的只有1个表，如何制作无限数据？