Question

我想在react-table中单击一行时呈现组件。我知道我可以使用子组件来实现这一点但不允许单击整行。我希望子组件在用户单击该行的任何位置时进行渲染。从他们的github页面我明白我想编辑getTdProps但我真的无法实现它。此外，子组件是表单，在保存该表单时，我想更新该行以反映用户所做的更改并关闭表单。任何帮助表示赞赏。

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

我遇到了同样的问题，我希望整个行都是可点击的expander，因为React Table会调用它。我所做的只是更改扩展器的尺寸以匹配整行，并在行前面设置z-index。这种方法的一个警告是，行上的任何可点击元素现在都将被全宽按钮覆盖。我的案例只显示了行中的元素，因此这种方法很有效。

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

要删除展开器图标，您只需执行以下操作：

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

Answer 2

我发现最好在反应表中添加一个类名：

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

然后修改样式，以使列对齐

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

然后按照Sven的建议修改这些样式：

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

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

在react-table中渲染一行组件（https://github.com/react-tools/react-table）

2 个答案: