基于react的移动端可折叠table组件

view in codesandbox

yarn add @yrobot/react-mobile-table 引入组件并使用

import MobileTable from '@yrobot/react-mobile-table'; import '@yrobot/react-mobile-table/lib/index.css'; const data = [ ['ID', 'Name', 'Age', 'Address'], // title line ['1', 'John Brown', 32, 'New York No. 1 Lake Park, New York No. 1 Lake Park'], ['2', 'Jim Green', 42, 'London No. 2 Lake Park, London No. 2 Lake Park'], ['3', 'Joe Black', 32, 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park'], ['4', 'Joe Green jsdkk sdkksdqww', 36, 'Sidney NOOOOOO'], ]; <MobileTable data={data} // 数据源:[[]] columnMinWidth={60} // 每一列的最小宽度, 假设屏宽为375, 默认值60: Int // table内部点击事件回调 onClick={(param) => { const { column, //第几列，从0开始 line, // 第几行，从0开始，包含header行 collapse, // 当前列是否折叠,boolean event, } = param; console.log(param); }} />; 版本更新 log v1.2.0 [feature] 支持 onClick 事件，获取点击行列和展开状态 v1.1.4 [fix bug] 修复使用 CRA 安装 mobile-table 时会安装两个版本 react v1.1.3 [fix bug] 适配仓库兼容 react 版本 15（使用 memoize-one 缓存计算结果） 组件库添加 terser 压缩 js 代码 demo 添加分页效果 v1.1.2 [fix bug] 添加 line-height，修复特殊字体中英文行高不一致的情况