asb_cloud_front/src/pages/Cluster/WellOperationsTable.jsx

import { Table } from "antd";
import { 
    makeTextColumn,
    makeNumericColumnPlanFact
 } from "../../components/Table"

export default function WellOperationsTable({wellOperations}) {

    const columns = [
        makeTextColumn("Конструкция секции","sectionType"),
        makeTextColumn("Операция","operationName"),
        makeNumericColumnPlanFact(
            "Глубина забоя", 
            "depth",
            null,
            null,
            (number) => (!Number.isNaN(number) && number !== undefined) 
                        ? number.toFixed(2) 
                        : '-'
        ),
        makeNumericColumnPlanFact(
            "Часы", 
            "durationHours",
            null,
            null,
            (number) => (!Number.isNaN(number) && number !== undefined) 
                        ? number.toFixed(2) 
                        : '-'
        ),
        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.id}
        />
    )
}