my-app/src/Tbxx.js

import * as React from 'react';

import {TabulatorFull as Tabulator} from "tabulator-tables"; //import Tabulator library
import './Tabulator.css';
export default function Tbxx({data}) {
    const myRef = React.useRef();
    const myTable = React.useRef(null);



    React.useEffect(() => {
      myTable.current = new Tabulator(myRef.current, {
           index: "key",
           height: 600,
         data: data, //link data to table
         reactiveData: false, //enable data reactivity
         dataTreeStartExpanded:true,
         dataTree: true,
         selectableRows:1, //make rows selectable
         editTriggerEvent:"dblclick", //trigger edit on double click
         dataTreeStartExpanded:function(row, level){
             //console.log(row);
             //console.log(level);
             return true; //expand rows where the "driver" data field is true;
         },
         columns: [ //Define Table Columns 序号", "名称", "取费基数", "计算基础","费率", "金额", "类别
                      {title:"名称", field:"名称", width:150, headerSort:false, formatter:"textarea"}, //hide this column first
                      {title:"金额", field:"金额", width:150, headerSort:false, formatter:"money", },
                      {title:"暂估价", field:"暂估价", width:100, headerSort:false,  formatter:"money"},
                      {title:"安全文明施工费", field:"安全文明施工费", width:150, headerSort:false,  formatter:"money"},
                      {title:"规费", field:"规费", width:150, headerSort:false,  formatter:"money"},
                    
              ]
       }); 
       
       myTable.current.on("cellDblClick", function(e, cell){
           //e - the click event object
           //cell - cell component
           console.log(cell);
       });
  
       //myTable.current.on("rowSelected", handleSelect);
       
  
       
  
  
      
     
    }, [data]);
    return (
      <div ref={myRef}> 
      </div>



    );
}