qingdan/front/src/Gfsj.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 Gfsj({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:80, headerSort:false,}, //never hide this column
                      {title:"名称", field:"名称", width:150, headerSort:false, formatter:"textarea"}, //hide this column first
                      {title:"取费基数", field:"取费基数", width:100 , headerSort:false, formatter:"money"},
                      {title:"计算基础", field:"计算基础", width:350, headerSort:false, formatter: "textarea"},
                      {title:"费率", field:"费率", width:100, headerSort:true, sorter:"number", formatter:"textarea", },
                      {title:"金额", field:"金额", width:100, headerSort:true, sorter:"number", formatter:"money", },
                      {title:"类别", field:"类别", width:100, headerSort:true, sorter:"number", formatter:"textarea"},
                    
              ]
       }); 
       
       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>



    );
}