Render a component oclick of a row in react-table (https://github.com/react-tools/react-table)

Question

I want to render a component when a row is clicked in a react-table. I know i can use a subcomponent to achieve this but that doesn't allow click on the entire row. I want the subcomponent to render when the user clicks anywhere on that row. From their github page i understand that i want to edit getTdProps but am not really able to achieve it. Also the subcomponent is form and on the save of that form i want to update that row to reflect the changes made by the user and close the form. Any help is appreciated.

import React, {Component} from 'react';
import AdomainRow from './AdomainRow'
import ReactTable from "react-table"
import AdomainForm from './AdomainForm'
import 'react-table/react-table.css'

export default class AdomianTable extends Component {

    render() {

            const data = [{
                adomain: "Reebok1.com",
                name: "Reebok",
                iabCategories: ["IAB1", "IAB2", "IAB5"],
                status: "PENDING",
                rejectionType: "Offensive Content",
                rejectionComment: "The content is offensive",
                isGeneric: false,
                modifiedBy: "Sourav.Prem"
            },
            {
                adomain: "Reebok2.com",
                name: "Reebok",
                iabCategories: ["IAB1", "IAB2", "IAB5"],
                status: "PENDING",
                rejectionType: "Offensive Content",
                rejectionComment: "The content is offensive",
                isGeneric: false,
                modifiedBy: "Sourav.Prem"
            },
            {
                adomain: "Reebok3.com",
                name: "Reebok",
                iabCategories: ["IAB1", "IAB2", "IAB5"],
                status: "PENDING",
                rejectionType: "Offensive Content",
                rejectionComment: "The content is offensive",
                isGeneric: false,
                modifiedBy: "Sourav.Prem"
            }];

            //FOR REACT TABLE TO WORK
            const columns = [{
                Header : 'Adomian',
                accessor : 'adomain'
                }, {
                Header : 'Name',
                accessor : 'name'
                }, {
                Header : 'IABCategories',
                accessor : 'iabCategories',
                Cell : row => <div>{row.value.join(", ")}</div>
                }, {
                Header : 'Status',
                accessor : 'status'
            }];

            return (
                <div>
                    <ReactTable

                    getTdProps={(state, rowInfo, column, instance) => {
                        return {
                            onClick: (e, handleOriginal) => {
                                <AdomainForm row={rowInfo} ></AdomainForm>
                                console.log('A Td Element was clicked!')
                                console.log('it produced this event:', e)
                                console.log('It was in this column:', column)
                                console.log('It was in this row:', rowInfo)
                                console.log('It was in this table instance:', instance)

                                // IMPORTANT! React-Table uses onClick internally to trigger
                                // events like expanding SubComponents and pivots.
                                // By default a custom 'onClick' handler will override this functionality.
                                // If you want to fire the original onClick handler, call the
                                // 'handleOriginal' function.
                                if (handleOriginal) {
                                    handleOriginal()
                                }
                            }
                        }
                    }}
                    data={data.adomains}
                    columns={columns}
                    defaultPageSize={10}
                    className="footable table table-stripped toggle-arrow-tiny tablet breakpoint footable-loaded"
                    SubComponent =  { row =>{
                        return (
                            <AdomainForm row={row} ></AdomainForm>
                        );
                    }}
                    />
                </div>
            ); 
        }
    }
}

Answer 1

I found it was better to add a classname to the react table:

    <AdvancedExpandReactTable
      columns={[
        {
          Header: InventoryHeadings.PRODUCT_NAME,
          accessor: 'productName',
        },
      ]}
      className="-striped -highlight available-inventory" // custom classname added here
      SubComponent={({ row, nestingPath, toggleRowSubComponent }) => (
        <div className={classes.tableInner}>
         {/* sub component goes here... */}
        </div>
      )}
    />

Then modify the styles so that the columns line up

.available-inventory .-header,
.available-inventory .-filters {
  margin-left: -40px;
}

And then modify these styles as Sven suggested:

.rt-tbody .rt-expandable {
  cursor: pointer;
  position: absolute;
  width: 100% !important;
  max-width: none !important;
}

.rt-expander:after{
  display: none;
}

Answer 2

I ran into the same issue where I wanted the entire row to be a clickable expander as React Table calls it. What I did was simply change the dimensions of the expander to match the entire row and set a z-index ahead of the row. A caveat of this approach is that any clickable elements you have on the row itself will now be covered by a full width button. My case had display only elements in the row so this approach worked.

.rt-expandable {
  position: absolute;
  width: 100%;
  max-width: none;
  height: 63px;
  z-index: 1;
}

To remove the expander icon you can simply do this:

.rt-expander:after {
  display: none;
}