使用map 解决cube.js 默认title 显示的问题

默认cube client sdk 提供了比较完整的处理展示，但是因为titile 比较长，或者就不是我们应该显示的，造成一些问题

参考解决方法

使用map 进行以下数据转换就可以了

  const columns = resultSet.tableColumns().map((item)=>{

    return {

      ...item,

      title:item.shortTitle,

      shortTitle:item.title

    }

  })

参考antd table 数据绑定

import React from 'react';

import { Table } from 'antd';

import { useCubeQuery } from '@cubejs-client/react';

import cubejs from '@cubejs-client/core';

import 'antd/dist/antd.css';

const cubejsApi = cubejs('<token>', {

  apiUrl: '<addd>',

});

 

 

function Demo() {

  const { resultSet, isLoading, error, progress } = useCubeQuery(

    {"measures": ["HrSeaApproveStatistics.count"],

     "timeDimensions": [],

      "order": { "HrSeaApproveStatistics.count": "desc" },

       "dimensions": ["HrSeaApproveStatistics.avg_order_id"]

    },{

      cubejsApi

    });

 

  if (isLoading) {

    return <div>{progress && progress.stage && progress.stage.stage || 'Loading...'}</div>;

  }

 

  if (error) {

    return <div>{error.toString()}</div>;

  }

 

  if (!resultSet) {

    return null;

  }

 

  function demoapp(item){

    return item["shortTitle"]

  }

 

  const dataSource = resultSet.tablePivot();

   // 通过map进行简单转换

  const columns = resultSet.tableColumns().map((item)=>{

    return {

      ...item,

      title:item.shortTitle,

      shortTitle:item.title

    }

  })

  console.log(columns)

return <div >

    <Table columns={columns} dataSource={dataSource} />;

    </div>

}

 

// Create Document Component

export default Demo;