qingdan/front/src/Tbxx.js

import * as React from 'react';
import Box from "@mui/material/Box";
import {RichTreeView } from "@mui/x-tree-view/RichTreeView";
import { Grid } from '@mui/material';
import Tab from "@mui/material/Tab";
import TabContext from "@mui/lab/TabContext";
import TabList from "@mui/lab/TabList";
import TabPanel from "@mui/lab/TabPanel";
import Stack from "@mui/material/Stack";
//registerPlugin(NestedRows);
import Service from './Service';
import EditableSelect from './EditableSelect';
import EditableSelectGC from './EditableSelectGC';
import Editable from './Editable';
import Button from '@mui/material/Button';

import {copy} from './utils';
import {TabulatorFull as Tabulator} from "tabulator-tables"; //import Tabulator library
import "tabulator-tables/dist/css/tabulator.min.css"; //import Tabulator stylesheet
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:100, headerSort:false, formatter:"money", },
                      {title:"暂估价", field:"暂估价", width:100, headerSort:false,  formatter:"money"},
                      {title:"安全文明施工费", field:"安全文明施工费", width:150, headerSort:false,  formatter:"money"},
                      {title:"规费", field:"规费", width:100, 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>



    );
}