Блог

Я использую react-table (7.5.0) для отображения некоторых таблиц в приложении.

Я запутал и вытянул свой код, поэтому могут отсутствовать скобки или неправильный синтаксис.

На простом уровне у меня есть одна строка, два столбца. Каждый столбец имеет действительно длинное описание, которое сокращается, а затем имеет кнопку «Показать еще» для переключения новой строки с полным описанием.

Мое определение столбца выглядит следующим образом:

 {
id: "column1",
Header: "column1",
accessor: "column1",
Cell: (props) =>
    <div>
      <p>{props.value}</p>

      <a
        {...props.row.getToggleRowExpandedProps({})}
      >
        Show More
      </a>
    </div>
},
{
  id: "column2",
  Header: "column2",
  accessor: "column2",
  Cell: (props) =>
    <div>
      <p>{props.value}</p>

      <a
        {...props.row.getToggleRowExpandedProps({})}
      >
        Show More
      </a>
    </div>
}
  

Мой компонент react-table и его подкомпонент следующие:

 {page.map((row, i) => {
prepareRow(row);
return (
  <>
    <tr
      {...row.getRowProps()}
      
    >
      {row.cells.map((cell) => {
        return (
          <td
            data-label={cell.column.Header}
           
            {...cell.getCellProps()}
          >
            <p
              
            >
              {cell.render("Cell")}
            </p>
          </td>
        );
      })}
    </tr>
    {row.isExpanded ? (
      <tr
        
      >
        <td
          
          colSpan={12}
        >
          {renderRowSubComponent({ row })}
        </td>
      </tr>
    ) : null}
  </>
);
})}
  

Подкомпонент

   const renderRowSubComponent = React.useCallback(
({ row }) => (
  <div
    dangerouslySetInnerHTML={{ __html: row.values.column1}}
  ></div>
),
[]
);
  

Как вы можете видеть, в подкомпоненте я беру данные ‘row.values.column1’ в развернутой строке и показываю это.

Возникает проблема, при которой при нажатии на второй столбец все равно будет отображаться полное описание первого столбца.

Есть ли у меня способ получить доступ / идентификатор столбца в подкомпоненте в зависимости от того, какая ячейка нажата (т.е. getToggleRowExpandedProps), чтобы затем отобразить полное описание этой соответствующей ячейки.

Спасибо