Git Product home page Git Product logo

react-mobile-table's Introduction

@yrobot/react-mobile-table

特性

  1. 适配 kbone,可在小程序端使用
  2. table 宽度基于 MobileTable 外层元素宽度 100%
  3. 自动计算每一列合适的默认宽度(a 保证完全展示 title)
  4. 点击存在压缩的列会展开对应列的所有数据(保证此列所有数据都完整展开)
  5. 展开列后可以左右滑动 table 查看
  6. 点击展开列可以恢复收缩状态

利用 codesandbox 查看

view in codesandbox

查看 demo

使用

  1. 安装@yrobot/react-mobile-table
yarn add @yrobot/react-mobile-table
  1. 引入组件并使用
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]

  1. 支持 onClick 事件,获取点击行列和展开状态

v1.1.4 [fix bug]

  1. 修复使用 CRA 安装 mobile-table 时会安装两个版本 react

v1.1.3 [fix bug]

  1. 适配仓库兼容 react 版本 15(使用 memoize-one 缓存计算结果)
  2. 组件库添加 terser 压缩 js 代码
  3. demo 添加分页效果

v1.1.2 [fix bug]

  1. 添加 line-height,修复特殊字体中英文行高不一致的情况

react-mobile-table's People

Contributors

dependabot[bot] avatar yrobot avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

react-mobile-table's Issues

可以增加分页功能吗

作为展示的表格在数据多一点的时候就会有分页的需求,如果可以参考antd react 分页可以设定每页多少功能会更完善

如何修改可以进行单元格合并

因项目需求,想进行单元格合并,想请问一下,您可以支持单元格合并嘛,如果不可以的话,那我怎么做才能呢,在您的基础上去增加逻辑嘛

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.