asb_cloud_front/src/pages/Cluster/WellOperationsTable.jsx

import { Table } from 'antd';
import { 
    makeTextColumn,
    makeNumericColumnPlanFact
 } from '../../components/Table'
import { getPrecision } from './functions'

export default function WellOperationsTable({wellOperations}) {

    const columns = [
        makeTextColumn('Конструкция секции','sectionType'),
        makeTextColumn('Операция','operationName'),
        makeNumericColumnPlanFact('Глубина забоя', 'depth', null, null, getPrecision),
        makeNumericColumnPlanFact('Часы', 'durationHours', null, null, getPrecision),
        makeNumericColumnPlanFact('Комментарий', 'comment', null, null, (text) => text ?? '-')
    ];

    const operations = wellOperations?.map(el => {
        return {
            key: el.plan?.id ?? el.fact.id,
            sectionType: el.plan?.wellSectionTypeName ?? el.fact?.wellSectionTypeName,
            operationName: `${el.plan?.categoryName ?? el.fact?.categoryName ?? ''} ${' '}
                ${el.plan?.categoryInfo ?? el.fact?.categoryInfo ?? ''}`,
            depthPlan: el.plan?.wellDepth,
            depthFact: el.fact?.wellDepth,
            durationHoursPlan: el.plan?.durationHours,
            durationHoursFact: el.fact?.durationHours,
            commentPlan: el.plan?.comment ?? '-',
            commentFact: el.fact?.comment ?? '-'
        }
    })

    return(
        <Table
            columns={columns}
            dataSource={operations}
            size={'small'}
            bordered
            pagination={{ defaultPageSize: 10 }}
            rowKey={(record) => record.key}
        />
    )
}