Table-Render：基于 JSON Schema 的高性能 React 动态表格渲染器
简介
Table-Render 是一个基于 JSON Schema 的动态表格渲染器，支持通过配置化的方式快速生成复杂的表格界面。它提供了丰富的表格功能、灵活的列配置系统和强大的数据处理能力。
核心特性
- JSON Schema 驱动：基于标准的 JSON Schema 规范
- 虚拟滚动支持：内置虚拟滚动技术，轻松处理大数据量
- 丰富的列类型：内置多种列类型，支持自定义列渲染器
- 灵活的布局：支持固定列、表头固定、响应式设计
- 强大的数据处理：内置排序、筛选、分页等功能
- TypeScript 支持：完整的类型定义
安装
npm install table-render基本用法
简单示例
import TableRender from "table-render";const BasicExample = () => {// Define search schema for the search formconst searchSchema = {type: "object",properties: {name: {title: "姓名",type: "string",},status: {title: "状态",type: "string",enum: ["active", "disabled"],enumNames: ["活跃", "禁用"],},},};// Define table columnsconst columns = [{title: "姓名",dataIndex: "name",key: "name",},{title: "年龄",dataIndex: "age",key: "age",},{title: "邮箱",dataIndex: "email",key: "email",},{title: "状态",dataIndex: "status",key: "status",render: (status) => (<spanstyle={{color: status === "active" ? "green" : "red",padding: "2px 8px",borderRadius: "4px",backgroundColor: status === "active" ? "#f6ffed" : "#fff2f0",border: `1px solid ${status === "active" ? "#b7eb8f" : "#ffccc7"}`,}}>{status === "active" ? "活跃" : "禁用"}</span>),},{title: "操作",key: "actions",render: (_, record) => (<div><buttononClick={() => handleAction("edit", record)}style={{marginRight: 8,color: "#1890ff",border: "none",background: "none",cursor: "pointer",}}>编辑</button><buttononClick={() => handleAction("delete", record)}style={{color: "#ff4d4f",border: "none",background: "none",cursor: "pointer",}}>删除</button></div>),},];// Mock API function with search functionalityconst api = (params) => {console.log("API called with params:", params);// 完整的数据源const allData = [{id: "1",name: "张三",age: 28,email: "zhangsan@example.com",status: "active",},{id: "2",name: "李四",age: 32,email: "lisi@example.com",status: "disabled",},];// 根据查询参数过滤数据let filteredData = allData;if (params && Object.keys(params).length > 0) {filteredData = allData.filter((item) => {let match = true;// 按姓名过滤if (params.name && params.name.trim()) {match = match && item.name.includes(params.name.trim());}// 按状态过滤if (params.status) {match = match && item.status === params.status;}return match;});}return Promise.resolve({data: filteredData,total: filteredData.length,});};const handleAction = (action, record) => {console.log("Action:", action, "Record:", record);};return (<TableRendersearch={{ schema: searchSchema }}request={api}columns={columns}title="用户列表"pagination={{ pageSize: 10 }}/>);
};export default BasicExample;
API 参考
TableRender Props
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| table | object | – | 表格实例，通过 useTable() 创建 |
| schema | object | – | JSON Schema 配置对象 |
| dataSource | array | [] | 表格数据源 |
| onAction | function | – | 操作按钮点击回调函数 |
| pagination | object | false | 分页配置 |
| virtual | object | false | 虚拟滚动配置 |
| scroll | object | – | 滚动配置 |
| loading | boolean | false | 加载状态 |
| rowSelection | object | – | 行选择配置 |
| expandable | object | – | 展开行配置 |
useTable Hook
useTable Hook 提供了表格状态管理的方法：
| 方法名 | 参数 | 返回值 | 描述 |
|---|---|---|---|
| getSelectedRows | () | array | 获取选中的行 |
| setSelectedRows | (rows: array) | void | 设置选中的行 |
| clearSelection | () | void | 清空选中状态 |
| getTableData | () | array | 获取表格数据 |
| setTableData | (data: array) | void | 设置表格数据 |
| refresh | () | void | 刷新表格 |
| exportData | (format: string) | void | 导出数据 |
使用示例
const table = useTable();// 获取选中的行
const selectedRows = table.getSelectedRows();// 设置表格数据
table.setTableData(newData);// 清空选中状态
table.clearSelection();列类型配置
基础列类型
// 文本列
{title: "姓名",dataIndex: "name",type: "text",width: 120,ellipsis: true
}// 数字列
{title: "价格",dataIndex: "price",type: "number",width: 100,precision: 2,prefix: "¥"
}// 日期时间列
{title: "创建时间",dataIndex: "createTime",type: "datetime",width: 180,format: "YYYY-MM-DD HH:mm:ss"
}// 标签列
{title: "状态",dataIndex: "status",type: "tag",width: 100,options: [{ label: "进行中", value: "progress", color: "blue" },{ label: "已完成", value: "completed", color: "green" }]
}// 操作列
{title: "操作",key: "actions",type: "actions",width: 150,actions: [{ label: "编辑", type: "primary", action: "edit" },{ label: "删除", type: "danger", action: "delete" }]
}高级功能
表头固定和列固定
<TableRenderschema={schema}dataSource={dataSource}scroll={{ y: 400 }}sticky={{ offsetHeader: 64 }}
/>// 列固定
{title: "姓名",dataIndex: "name",fixed: "left" // 左侧固定
}
{title: "操作",key: "actions",fixed: "right" // 右侧固定
}行选择
<TableRenderschema={schema}dataSource={dataSource}rowSelection={{type: "checkbox",selectedRowKeys: selectedKeys,onChange: (selectedRowKeys, selectedRows) => {setSelectedKeys(selectedRowKeys);},}}
/>排序和筛选
// 排序
{title: "年龄",dataIndex: "age",sorter: true,defaultSortOrder: "ascend"
}// 筛选
{title: "状态",dataIndex: "status",filters: [{ text: "活跃", value: "active" },{ text: "禁用", value: "disabled" }],onFilter: (value, record) => record.status === value
}数据导出
const handleExport = (format) => {const selectedRows = table.getSelectedRows();const exportData = selectedRows.length > 0 ? selectedRows : dataSource;switch (format) {case "excel":table.exportToExcel(exportData, "用户数据.xlsx");break;case "csv":table.exportToCSV(exportData, "用户数据.csv");break;}
};性能优化
虚拟滚动
<TableRenderschema={schema}dataSource={largeDataSource}virtual={{enabled: true,height: 600,itemHeight: 54,buffer: 10,}}rowKey="id"
/>常见问题
Q: 如何处理大数据量渲染？
A: 使用虚拟滚动功能：
<TableRendervirtual={{enabled: true,height: 600,itemHeight: 54,}}dataSource={largeDataSource}
/>Q: 如何自定义列渲染？
A: 使用 render 函数：
{title: "自定义列",dataIndex: "custom",render: (value, record, index) => {return <CustomComponent value={value} record={record} />;}
}Q: 表格性能优化方法？
A:
- 使用虚拟滚动处理大数据
- 合理使用
React.memo优化组件渲染 - 使用
rowKey提供稳定的 key - 分页加载数据，避免一次性加载过多数据
总结
Table-Render 提供了强大而灵活的表格渲染能力：
- 配置化驱动：通过 JSON Schema 快速构建表格
- 高性能渲染：支持虚拟滚动，轻松处理大数据量
- 丰富的功能：排序、筛选、分页、导出等完整功能
- 灵活定制：支持自定义列、主题、样式等
通过合理使用这些特性，可以快速构建出功能完善、性能优异的数据表格组件。
Table-Render：基于 JSON Schema 的高性能 React 动态表格渲染器 - 高质量源码分享平台-免费下载各类网站源码与模板及前沿技术分享