Column Dummy Tabel Ratio Source

const columns = useMemo(
    () => [
      {
        accessorKey: 'type@Unit',
        header: () => (
          <div className="flex w-full items-center">
            <div className="w-[150px] px-1 text-left">Type@Unit</div>
            <div className="oborder-collapse w-full border border-[#F4F6F8] bg-white py-2 text-center">
              {formula.formulaName}
            </div>
          </div>
        ),
        enableSorting: false,
        columns: [
          // START LEFT SECTION
          // START LEFT ROW HEADER
          // mapping column (error id non-string)
          // newDataTable.map((meta, metaIdx) =>
          //   columnHelper.accessor(meta.date, {
          //     id: metaIdx,
          //     cell: (meta) => meta.getValue(),
          //     // footer: (props) => props.column.id,
          //   })
          // ),

          {
            accessorKey: 'type@Unit',
            header: () => (
              <div className="w-[150px] px-1 text-left">ID Metadata</div>
            ),
            columns: [
              {
                accessorKey: 'metadataSource',
                header: () => (
                  <div className="w-[150px] px-1 text-left">
                    Metadata Source
                  </div>
                ),
                columns: [
                  {
                    accessorKey: 'port',
                    header: () => (
                      <div className="w-[150px] px-1 text-left">Port</div>
                    ),
                    columns: [
                      {
                        accessorKey: 'variableName',
                        header: () => (
                          <div className="w-[150px] px-1 text-left">
                            Variable Name
                          </div>
                        ),
                        columns: [
                          {
                            accessorKey: 'date',
                            header: () => (
                              <div className="w-[150px] px-1 text-left">
                                Date
                              </div>
                            ),
                            cell: (info) => {
                              // console.log('info Date table', info)
                              return <i className="">{info.getValue()}</i>
                            },
                          },
                        ],
                      },
                    ],
                  },
                ],
              },
            ],
          },
          // END LEFT ROW HEADER

          // START COLUMN VARIABLE 1
          {
            accessorKey: 'idMetadata1',
            header: () => (
              <div className="oborder-collapse w-full border border-[#F4F6F8] bg-white p-2">
                250
                {/* {dataTableDynamic
                  ? `${dataTableDynamic[0].split('$')[1]}`
                  : null} */}
              </div>
            ),
            columns: [
              // data column metadata source
              {
                accessorKey: 'metadataSource1',
                header: () => (
                  <div className="oborder-collapse w-full border border-[#F4F6F8] bg-white p-2">
                    HP FLARE (SK75FQI125TOTALIZERA.OLDAV)
                  </div>
                ),
                columns: [
                  // data column port
                  {
                    accessorKey: 'port1',
                    header: () => (
                      <div className="oborder-collapse w-full border border-[#F4F6F8] bg-white p-2">
                        P1
                      </div>
                    ),
                    columns: [
                      // data column variable
                      {
                        accessorKey: 'variableName1',
                        header: () => (
                          <div className="oborder-collapse w-full border border-[#F4F6F8] bg-white p-2">
                            HP_FLARE_SK_75_FT_125
                          </div>
                        ),
                        columns: [
                          // data column variable
                          {
                            accessorKey: 'formulaName',
                            header: () => (
                              <div className="oborder-collapse w-full border border-[#F4F6F8] bg-white p-2">
                                GAS (MMscf)
                              </div>
                            ),
                            cell: (info) => {
                              return <i className="">{info.getValue()}</i>
                            },
                          },
                        ],
                      },
                    ],
                  },
                ],
              },
            ],
          },
          // END COLUMN VARIABLE 1

          // START COLUMN VARIABLE 2
          {
            accessorKey: 'idMetadata2',
            header: () => (
              <div className="oborder-collapse w-full border border-[#F4F6F8] bg-white p-2">
                251
                {/* {dataTableDynamic
                  ? `${dataTableDynamic[0].split('$')[1]}`
                  : null} */}
              </div>
            ),
            columns: [
              {
                accessorKey: 'metadataSource2',
                header: () => (
                  <div className="oborder-collapse w-full border border-[#F4F6F8] bg-white p-2">
                    LP FLARE (SK75FQI100TOTALIZERA.OLDAV)
                  </div>
                ),
                columns: [
                  {
                    accessorKey: 'port2',
                    header: () => (
                      <div className="oborder-collapse w-full border border-[#F4F6F8] bg-white p-2">
                        P1244
                      </div>
                    ),
                    columns: [
                      {
                        accessorKey: 'variableName2',
                        header: () => (
                          <div className="oborder-collapse w-full border border-[#F4F6F8] bg-white p-2">
                            LP_FLARE_SK_75_FT_100
                          </div>
                        ),
                        columns: [
                          {
                            accessorKey: 'productUom2',
                            header: () => (
                              <div className="oborder-collapse w-full border border-[#F4F6F8] bg-white p-2">
                                GAS (Mscf)
                              </div>
                            ),
                          },
                        ],
                      },
                    ],
                  },
                ],
              },
            ],
          },
          // END COLUMN VARIABLE 2
          // END LEFT SECTION

          // START COLUMN RIGHT (PERCENTAGE)
          {
            accessorKey: 'emptyspace',
            header: () => null,
            columns: [
              {
                accessorKey: 'emptyspace',
                header: () => null,
                columns: [
                  {
                    accessorKey: 'emptyspace',
                    header: () => null,
                    columns: [
                      {
                        accessorKey: 'variableRightName1',
                        header: () => (
                          <div className="oborder-collapse w-full border border-[#F4F6F8] bg-white p-2">
                            HP_FLARE_SK_75_FT_125
                          </div>
                        ),
                        columns: [
                          {
                            accessorKey: 'productUom2',
                            header: () => (
                              <div className="oborder-collapse w-full border border-[#F4F6F8] bg-white p-2">
                                GAS (%)
                              </div>
                            ),
                          },
                        ],
                      },
                    ],
                  },
                ],
              },
            ],
          },

          {
            accessorKey: 'emptyspace',
            header: () => null,
            columns: [
              {
                accessorKey: 'emptyspace',
                header: () => null,
                columns: [
                  {
                    accessorKey: 'emptyspace',
                    header: () => null,
                    columns: [
                      {
                        accessorKey: 'variableRightName2',
                        header: () => (
                          <div className="oborder-collapse w-full border border-[#F4F6F8] bg-white p-2">
                            LP_FLARE_SK_75_FT_100
                          </div>
                        ),
                        columns: [
                          {
                            accessorKey: 'productUom2',
                            header: () => (
                              <div className="oborder-collapse w-full border border-[#F4F6F8] bg-white p-2">
                                GAS (%)
                              </div>
                            ),
                          },
                        ],
                      },
                    ],
                  },
                ],
              },
            ],
          },
          // END COLUMN RIGHT (PERCENTAGE)
        ],
      },
    ],
    // eslint-disable-next-line react-hooks/exhaustive-deps
    []
  )