自定义配置化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

     <table border="1">
        <tr>
        {columns.map(({ key, title}, index) => {
      return (
        <th key={index}>
          {title}
        </th>
      );
    })}
        </tr>
        {tableData.map((row, colIndex) => {
    return (
      <tr key={colIndex}>
        {columns.map((col, rowIndex) => {
          const {
            width,
            dataIndex,
            align = "center",
            render = (text) => text,
          } = col;
          const style = width ? { width: `${width}%` } : {};
          return (
            <td align={align} key={dataIndex} style={style}>
                {render(row[dataIndex], row)}
            </td>
          );
        })}
      </tr>
    );
  })}
      </table>