一个全新的react表格组件方案

为了让大家理解该表格的优势在哪里，我以以下几段代码演示：

less 复制代码

//数据区域
const defaultTableData = [        ['姓名', '年龄', '职位', '入职日期'],
        ['张三', '28', '前端开发工程师', '2022-05-15'],
        ['李四', '32', '产品经理', '2021-08-23'],
        ['王五', '45', '技术总监', '2019-11-10'],
        ['赵六', '35', 'UI设计师', '2023-01-05']
    ];

    
    //jsx区域
<Table>
    <TableBody Item={defaultTableData} />
</Table>

表格架构采用的二维数组遍历渲染，在一定程度缓解了表格的性能问题，而且书写方便，而且由于支持jsx，你可以使用react生态下的许多的解决方案，他或许有点像ant的表格模式，不过下面的例子会打消你的疑虑

我们再来看下一个： `

javascript 复制代码

//数据区域
    const stripedTableData = [
        ['图片', '图片内容'],
        [
            <div key="vercel">
                <img src="/vercel.svg" alt="table" className='w-14 h-14 bg-black ' />
            </div>
            ,
            'vercel'
            ,
        ],
        [
            <div key="next">
                <img src="/next.svg" alt="table" />
            </div>
            ,
            'next.js'
            ,
        ],
        [
            <div key-"file">
                <img src="/file.svg" alt="table" className='w-14 h-14 ' />
            </div>
            ,
            'flie'
            ,
        ],

    ];



//jsx区域
<Table className="rounded-lg overflow-hidden">
    <TableBody
        Item={stripedTableData}
        className="bg-card"
    />
</Table>

你可以使用任何的方式绘制表格的内容，可以自由切换表格的内容，他可以是像ant的数据流模式，也可以是高自由度的jsx模式，支持表格的高度的自定义，每一个表格都可以有自己的风格，而且你可以在原数据流和jsx自由切换，你可以在表格里面写入你的任何想法，甚至一个世界，不过我建议你如果打算写入jsx，最好使用（）作为区分。

该表格组件使用react的tsx+tailwind开发

该表格组件已经开发完成啦，发布在了haob-design，这个是我开发的一个简单组件库,地址在www.myguanxidevotion.shop ，里面有一些组件的设计会与现在的方案会有雷同，这也是我所苦恼的

由于水平有限，目前我的水平可能不足以开发出庞大而复杂的表格系统，但表格的架构已经设计好了。至于预设的话，是可以慢慢添加进去的，实现可能就是时间问题了，也希望大家可以提出更好的改进意见

如果有不足的地方或者设计的问题，请大家多多指出，谢谢！