React Table - Toggle Row Expanded on Two Different Columns

Question

I'm using react-table (7.5.0) to render some tables within an application.

I've obfuscated and leaned out my code so missing bracket's or incorrect syntax may exist.

On a simple level, I have a single row, two columns. Each column has a really long description which is shorten and then has a "Show More" button to toggle a new row with the full description.

My column definition is as follows:

{
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>
}

My react-table component and it's Subcomponent are as follows:

{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}
  </>
);
})}

Sub Component

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

As you can see, in the sub component I am grabbing the 'row.values.column1' data in the expanded row and showing that.

This posses an issue where clicking on the second column will still show column one's full description.

Is there a way for me to grab the access/ID of the column in the sub-component depending on which cell is clicked (i.e getToggleRowExpandedProps) to then show the full description of that respective cell.

Thanks

React Table - Toggle Row Expanded on Two Different Columns

0 Answers0