一个全新的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 ,里面有一些组件的设计会与现在的方案会有雷同,这也是我所苦恼的

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

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

相关推荐
Crystal328几秒前
原生 Vue + UniApp 的小程序或 App 项目里如何判断用户是否为首次下载应用
前端·vue.js
时间的情敌19 分钟前
基于 Vue3 及TypeScript 项目后的总结
前端·vue.js·typescript
纯爱掌门人39 分钟前
鸿蒙端云一体化云存储实战:手把手教你玩转文件上传下载
前端·harmonyos
非凡ghost41 分钟前
图吧工具箱-电脑硬件圈的“瑞士军刀”
前端·javascript·后端
非凡ghost42 分钟前
Xrecode3(多功能音频转换工具)
前端·javascript·后端
橙某人44 分钟前
飞书多维表格插件:进一步封装,提升开发效率!🚀
前端·javascript
他们叫我秃子1 小时前
从 0 到 1,我用小程序 + 云开发打造了一个“记忆瓶子”,记录那些重要的日子!
前端·微信小程序·小程序·云开发
非凡ghost1 小时前
Subtitle Edit(字幕编辑软件) 中文绿色版
前端·javascript·后端
扎瓦斯柯瑞迫1 小时前
cursor: 10分钟魔改环境、优雅获取Token
前端·javascript·后端
王六岁1 小时前
🐍 前端开发 0 基础学 Python 入门指南:条件语句篇
前端·python