渲染 react-table 中一行的组件 oclick (https://github.com/react-tools/react-table)

Posted 2023-02-22

【中文标题】渲染 react-table 中一行的组件 oclick (https://github.com/react-tools/react-table)

【英文标题】：Render a component oclick of a row in react-table (https://github.com/react-tools/react-table)

【发布时间】：2018-08-04 08:22:30

【问题描述】：

我想在反应表中单击一行时呈现一个组件。我知道我可以使用子组件来实现这一点，但这不允许点击整行。我希望子组件在用户单击该行的任意位置时呈现。从他们的 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>
            ); 
        
    

【参考方案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;

【参考方案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;