React-Table默认列组件覆盖：指定列改下拉框失败求助

Your issue comes from two key problems:

• The editableRowIndex state and updateData function weren't being passed to your custom TypeDropdown component
• The TypeDropdown was always rendering the select component instead of only when the row is in edit mode

Here's how to fix it:

Step 1: Pass Required Props to Cell Components #

In SubTable.tsx, modify the cell render to pass editableRowIndex and updateData to the Cell components:

// Inside the tbody's row.cells.map
<td
  className="whitespace-nowrap text-ellipsis overflow-hidden border-b border-r border-y p-1"
  {...cell.getCellProps()}
  key={idx}
>
  {cell.render("Cell", { editableRowIndex, updateData })}
</td>

Step 2: Fix TypeDropdown's Render Logic #

Update TypeDropdown.tsx to only show the select component when the row is in edit mode, matching the behavior of EditableCell:

import React, { useState, useEffect } from "react";
import { Select } from "@/client/components/Inputs";

const TypeDropdown = (props: any) => {
  const {
    value: initialValue,
    row: { index },
    column: { id },
    updateData,
    editableRowIndex,
  } = props;

  const [value, setValue] = useState(initialValue);

  const onChange = (e: any) => {
    setValue(e.target.value);
    updateData(index, id, e.target.value);
  };

  useEffect(() => {
    setValue(initialValue);
  }, [initialValue]);

  return index === editableRowIndex ? (
    <Select
      value={value}
      id="typex"
      option={[
        { id: 1, name: "TextField", code: "TextField" },
        { id: 2, name: "Combo", code: "Combo" },
      ]}
      showRed={true}
      onChange={onChange}
      required={true}
    />
  ) : (
    <p>{value}</p>
  );
};

export default TypeDropdown;

Step 3: Verify EditableCell Receives Correct Props #

Your existing EditableCell.tsx code should work as-is since it already checks for edit mode using index === editableRowIndex.

Optional: Clean Up Unused Table Options #

In SubTable.tsx, remove unused options from the useTable configuration (since we're passing props directly to cells):

const { getTableProps, getTableBodyProps, headerGroups, page, prepareRow } =
  useTable(
    {
      columns,
      data,
      defaultColumn: {
        Cell: EditableCell,
      },
      autoResetPage: !skipPageReset ?? false,
      initialState: {
        pageIndex: 0,
        hiddenColumns: hiddenColumns ?? [],
      },
      // Remove these unused lines:
      // updateData,
      // editableRowIndex,
      // setEditableRowIndex,
    },
    useGlobalFilter,
    useSortBy,
    usePagination,
    useFlexLayout ?? null
  );

Why This Works: #

• Passing editableRowIndex lets both cell components check if the current row is in edit mode
• TypeDropdown now only renders the select component when the row is double-clicked, matching your desired behavior
• updateData is correctly passed to update the table data when the select value changes

内容的提问来源于stack exchange，提问作者Heru Wijayanto