asb_cloud_front/src/pages/Wells.jsx

import { useState, useEffect } from 'react'
import { WellService } from '../services/api'
import Loader from '../components/Loader'
import { Table } from 'antd' // TreeSelect 
import { useHistory } from 'react-router-dom'

const columns = [
  {
    title: 'Месторождение',
    dataIndex: 'deposit',
    key: 'deposit',
  },
  {
    title: 'Куст',
    dataIndex: 'cluster',
    key: 'cluster',
  },
  {
    title: 'Скважина',
    dataIndex: 'caption',
    key: 'caption',
  },  
  {
    title: 'Данные',
    dataIndex: 'lastData',
    key: 'lastData',
  },
];

const groupBy = (table, ...keys) => {
  let key = keys[0]

  let groups = table.reduce((rv, item) => {
    let keyValue = item[key]
    let group = rv.find(o=>o.title === keyValue)
    if(!group)
    {
      group = {
        title: keyValue, 
        value: keys.length === 1 ? item : `${key} ${keyValue} ${item['id']}`,
        selectable: keys.length === 1,
        children:[]}
      rv.push(group)
    }
    if(keys.length > 1)
      group.children.push(item);
    return rv;
  }, []);

  if(keys.length > 1){
    for(let group of groups){
      group.children = groupBy(group.children, ...keys.slice(1))
    }
  }

  return groups
};


export default function Wells(props){
  const [wells, setWells] = useState([])
  const [wellsTree, setWellsTree] = useState([]) // wellsTree,
  const [loader, setLoader] = useState(false)
  const history = useHistory()

  let updateWellsList = async () => {
    setLoader(true)
    try{
      let newWells = (await WellService.getWells()).map(w =>{return {key:w.id, ...w}})
      let wellsTree = groupBy(newWells, 'deposit', 'cluster', 'caption')
      console.log(wellsTree)
      setWells( newWells )
      setWellsTree(wellsTree)
    }
    catch(e){
      console.error(`${e.message}`);
    }
    setLoader(false)
  }

  useEffect(()=>{updateWellsList()}, [])

  const onChange = (value) =>{
    ;
  }

  return(<>
      <h2>Скважины</h2>
      <Table 
        dataSource={wells} 
        columns={columns}
        onRow={(record) => {
          return {
            onClick: event => {history.push(`well/${record.id}`)},
          };
        }}/>
        {/* <TreeSelect      
          style={{ width: '100%' }}
          placeholder="Please select"
          treeData={wellsTree}
          treeDefaultExpandAll
          onChange={onChange}
        /> */}
      {loader&&<Loader/>}
    </>)
}