Column Dummy Tabel Ratio Source
unknown
javascript
a year ago
9.9 kB
8
Indexable
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 [] )
Editor is loading...
Leave a Comment