🐛[BUG] If table column header is nested, showListItemOption is not working

[restareaByWeezy]

提问前先看看：

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

🐛 bug 描述

if table has nested header , hiding nesting columns won't work

📷 复现步骤

🏞 期望结果

💻 复现代码

columns looks like this and if there are no nested header, works propably

export const usePurchaseItemTableColumns = ({
  getSellerEntity,
  getUserEntity,
  refresh,
  setParams,
  coinEntities,
}: {
  getSellerEntity: (id: string) => Commerce.ISeller;
  getUserEntity: (id: string) => Moim.IUser;
  coinEntities: Record<string, Community.ICoin>;
  setParams: ((params: Record<string, any>) => void) | undefined;
  refresh: () => void;
}): React.ComponentProps<typeof Table<Commerce.IPurchaseItem>>["columns"] => {
  const intl = useIntlShort();
  const currentGroup = useGroupStore((state) => state.currentGroup);
  const hubSeller = useSellerStore((state) => state.hubSeller);
  const isPickUpActivated = hubSeller.config?.pickUpEnabled;

  return [
    {
      title: "table_column_title_order_number",
      children: [
        {
          title: "table_column_title_payment_id",
          render: (_, data) => {
            if (!data?.paymentId) return "-";
            return <MoimAdminLink href={new AdminURL.PaymentShow({ id: data.paymentId }).toString()}>{data?.paymentId}</MoimAdminLink>;
          },
          width: ColumnWidths.md,
        },
        {
          title: "table_column_title_purchase_id",
          render: (_, data) => {
            if (!data?.purchaseId) return "-";
            return <MoimAdminLink href={new AdminURL.PurchaseShow({ id: data.purchaseId }).toString()}>{data?.purchaseId}</MoimAdminLink>;
          },
          width: ColumnWidths.md,
        },
        {
          title: "table_column_title_purchase_item_id",
          dataIndex: "id",
          width: ColumnWidths.md,
        },
      ],
    },
    {
      title: "table_column_title_purchase_date",
      dataIndex: "createdAt",
      valueType: "dateTime",
      width: 150,
    },
    {
      title: "table_column_title_paid_date",
      children: [
        {
          title: "table_column_title_paid_date",
          dataIndex: "paidAt",
          valueType: "dateTime",
          width: ColumnWidths.lg,
        },
        {
          title: "table_column_title_after_paid",
          render: (_, data) =>
            data.paidAt ? `D+${Math.ceil((new Date().setHours(0, 0, 0, 0) - new Date(data.paidAt).setHours(0, 0, 0, 0)) / (1000 * 60 * 60 * 24))}` : "-",
          width: ColumnWidths.sm,
        },
      ],
    },
    {
      title: "table_column_title_preparing_date",
      children: [
        {
          title: "table_column_title_in_transit_date",
          dataIndex: "shippedAt",
          valueType: "dateTime",
          width: ColumnWidths.lg,
        },
        {
          title: "table_column_title_after_in_transit",
          render: (_, data) =>
            data.shippedAt ? `D+${Math.ceil((new Date().setHours(0, 0, 0, 0) - new Date(data.shippedAt).setHours(0, 0, 0, 0)) / (1000 * 60 * 60 * 24))}` : "-",
          width: ColumnWidths.sm,
        },
      ],
    },
    ...(isPickUpActivated
      ? [
          {
            title: "table_column_title_visit_date",
            render: (_: React.ReactNode, data: Commerce.IPurchaseItem) => {
              return formatDateTime(data.pickUpTime);
            },
            width: ColumnWidths.lg,
          },
        ]
      : []),
    {
      title: "table_column_title_delivery_date",
      children: [
        {
          title: "table_column_title_payment_times",
          render: (_, entity) =>
            entity.purchase?.isGuestCheckout || !entity?.purchase?.userId ? (
              "-"
            ) : (
              <Link href={`/moim/commerce/orders/payments/list?userIds[]=${entity.purchase.userId}`}>
                <a
                  onClick={() => {
                    setParams?.({
                      userIds: [entity.purchase.userId],
                    });
                  }}
                >
                  {entity.paidOrder ?? entity.purchase.payment?.order ?? "-"}
                </a>
              </Link>
            ),
          width: ColumnWidths.lg,
        },
        ...(hubSeller?.config?.guestCheckoutEnabled
          ? [
              {
                title: "table_column_title_buyer_type",
                render: (_: React.ReactNode, data: Commerce.IPurchaseItem) =>
                  data?.purchase?.isGuestCheckout ? intl("buyer_type_guest") : intl("buyer_type_member"),
                width: ColumnWidths.lg,
              },
            ]
          : []),
        {
          title: "table_column_title_username",
          render: (_, data) =>
            data?.purchase?.isGuestCheckout || !data?.purchase?.userId ? (
              data?.purchase?.buyerName ?? "-"
            ) : (
              <Link href={`/moim/members/${data?.purchase?.userId}`}>
                <a>{getUserEntity(data.userId)?.name ?? data?.purchase.username}</a>
              </Link>
            ),
          width: ColumnWidths.lg,
        },
        ...(currentGroup.config.enableWeb3
          ? [
              {
                title: "table_column_title_user_main_wallet_address",
                render: (_: React.ReactNode, entity: Commerce.IPurchaseItem) => getUserEntity(entity.userId)?.metamask,
                width: ColumnWidths.xxl,
              },
            ]
          : []),
        {
          title: "table_column_title_buyer_name",
          render: (_, data) => data?.purchase?.buyerName ?? "-",
          width: ColumnWidths.lg,
        },
        {
          title: "table_column_title_phone_number",
          render: (_, data) => `${data?.purchase?.buyerPhoneInfo?.countryCode ?? ""} ${data?.purchase?.buyerPhoneInfo?.nationalNumber ?? ""}`,
          width: ColumnWidths.lg,
        },
        {
          title: "table_column_title_email",
          render: (_, data) => data?.purchase?.buyerEmail ?? "-",
          width: ColumnWidths.lg,
        },
      ],
    },
    {
      title: "table_column_title_recipient",
      render: (_, data) => data?.purchase?.recipientName ?? "-",
      width: ColumnWidths.lg,
    },
    {
      title: "table_column_title_product_info",
      children: [
        {
          title: "table_column_title_product_name",
          dataIndex: "productName",
          width: ColumnWidths.xxl,
        },
        {
          title: "table_column_title_sku",
          render: (_, data) => data?.snap?.sku ?? "-",
          width: ColumnWidths.lg,
        },
        {
          title: "table_column_title_seller_name",
          render: (_, data) => getSellerEntity(data.sellerId)?.name,
          width: ColumnWidths.lg,
        },
        ...(hubSeller.config?.brandEnabled
          ? [
              {
                title: "table_column_title_brand",
                render: (_: ReactNode, data: Commerce.IPurchaseItem) => data?.snap?.brand?.name ?? "-",
                width: ColumnWidths.lg,
              },
            ]
          : []),
        {
          title: "table_column_title_shipping_option",
          render: (_, data) => {
            const deliveryPolicy = data.deliveryGroup?.policy;

            if (deliveryPolicy) {
              return (
                <div>
                  <span>{deliveryPolicy.name ?? deliveryPolicy.id}</span>
                  {deliveryPolicy.description && <span>{deliveryPolicy.description}</span>}
                </div>
              );
            }
            return "-";
          },
          width: ColumnWidths.xxl,
        },
      ],
    },
    {
      title: "table_column_title_order_info",
      children: [
        ...(hubSeller?.config?.backOrderEnabled
          ? [
              {
                title: "table_column_title_with_backorder",
                render: (_: React.ReactNode, entity: Commerce.IPurchaseItem) => (entity?.isBackOrder ? "O" : "X"),
                width: ColumnWidths.lg,
              },
            ]
          : []),
        {
          title: "table_column_title_product_quantity",
          dataIndex: "productCount",
          width: ColumnWidths.xs,
        },
        {
          title: "table_column_title_product_purchase_price",
          render: (_, data) => (
            <PriceWithAdditionalFees
              currency={data?.purchase?.currency ?? getSellerEntity(data?.purchase?.sellerId)?.currency ?? DEFAULT_CURRENCY}
              price={data.price * data.quantity}
              additionalFees={data.additionalFees?.map((fee) => ({ ...fee, amount: fee.amount * data.quantity }))}
              coinEntities={coinEntities}
            />
          ),
          width: ColumnWidths.md,
        },
        {
          title: "table_column_title_purchase_status",
          width: ColumnWidths.lg,
          render: (_, data) => {
            return getPurchaseStatusDisplay(data.displayingStatus, intl, {
              forItem: true,
              shippingRequired: data.deliveryType !== "noDelivery",
            });
          },
        },
        {
          title: "table_column_title_delivery_id",
          render: (_, data) => {
            if (data.deliveryType === "noDelivery") return null;
            return <TrackingNumberColumn data={data} refresh={refresh} />;
          },
          width: ColumnWidths.xxl,
        },
        ...(hubSeller?.customStatusDefinition
          ? [
              {
                title: "table_column_title_custom_status",
                render: (_: React.ReactNode, data: Commerce.IPurchaseItem) => {
                  const customStatus = data.customStatus;
                  if (!customStatus || !hubSeller?.customStatusDefinition) {
                    return <span>-</span>;
                  }
                  return <span>{hubSeller.customStatusDefinition[customStatus]?.[browserLocale()] ?? "-"}</span>;
                },
                width: ColumnWidths.xxl,
              },
            ]
          : []),
        {
          title: "table_column_title_seller_updates",
          render: (_, data) => {
            if (!data.customButtons?.length) {
              return "-";
            }

            const link = data.customButtons[data.customButtons.length - 1]?.link;

            try {
              new URL(link);

              return (
                <a href={link} target="_blank">
                  {link}
                </a>
              );
            } catch {
              if (link?.startsWith("/")) {
                return (
                  <a href={`${currentGroup.domain}${link}`} target="_blank">
                    {link}
                  </a>
                );
              }

              return "-";
            }
          },
          width: ColumnWidths.xxl,
        },
      ],
    },
  ];
};

© 版本信息

• ProComponents 版本: [5.15.3]
• 开发环境 [mac OS]

🚑 其他信息