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"),
        makeNumericColumnPlanFact("Часы", "durationHours"),
        makeNumericColumnPlanFact("Комментарий", "comment")
    ];

    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?.toFixed(0) ?? '-',
            depthFact: el.fact?.wellDepth?.toFixed(0) ?? '-',
            durationHoursPlan: el.plan?.durationHours?.toFixed(2) ?? '-',
            durationHoursFact: el.fact?.durationHours?.toFixed(2) ?? '-',
            commentPlan: el.plan?.comment ?? '-',
            commentFact: el.fact?.comment ?? '-'
        }
    })

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