自定义配置化table，实现同ant-design类似render效果

如何实现像ant-design一样，使用原生table就能实现在render中自定义展示数据呢。
我们来定义一个column
const columns = [
{
key: ‘name’,
title: ‘姓名’,
dataIndex: ‘name’,
render: (text) => (

{text}

)
},
{
key: ‘age’,
title: ‘年龄’,
dataIndex: ‘age’,
}
];
render 是一个callBack, 必然是在循环columns时回调render函数。

我的test code

     
        {columns.map(({ key, title}, index) => {
      return (
        
      );
    })}
        
        {tableData.map((row, colIndex) => {
    return (
      
        {columns.map((col, rowIndex) => {
          const {
            width,
            dataIndex,
            align = "center",
            render = (text) => text,
          } = col;
          const style = width ? { width: `${width}%` } : {};
          return (
            
          );
        })}
      
    );
  })}
      

        

          {title}
        

                {render(row[dataIndex], row)}