asb_cloud_front/src/pages/Measure/View.jsx

import { Empty } from 'antd';
import {Grid, GridItem} from '../../components/Grid'

export const View = ({columns, item}) => {
  if (!item || !columns?.length)
    return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>

  const colsCount = 3
  const viewItems = columns.map( (column, i) => {
    const row = Math.floor(i / colsCount) + 1
    const colb = i % colsCount
    return <>
      <GridItem 
        row={row} 
        col={colb*2 + 1}
        background='#00000005'        
        border='1px solid #FFFE'
        >
        {column.title}
        
      </GridItem>
      <GridItem 
        row={row} 
        col={colb*2 + 2}
        border='1px solid rgba(0, 0, 0, 0.05)'
        justifyContect='right'
        marginRight='16px'
        fontWeight='bold'
        textAlign='right'>
          {column.render ? column.render(item[column.dataIndex]) : item[column.dataIndex]}        
      </GridItem>
    </>
  })

  return <Grid>
    {viewItems}
  </Grid>
}