rlj-react-table v0.2.83

大数据表格 by 虚拟滚动

脚手架

tsdx 官网

主要 npm 包

虚拟滚动官网

使用方法

组件安装

TODO

组件调用

import React from 'react';
import { Thing } from 'rlj-react-table/dist';
import 'rlj-react-table/dist/rlj-react-table.cjs.development.css';
import { Spin, Pagination, Tooltip } from 'antd';

export default function RljTable(props) {
  return <Thing {...props} antd={{ Spin, Pagination, Tooltip }} />;
}
export { Ellipsis } from 'rlj-react-table/dist';

组件使用了三个ant-design的方法，但是没有在组件内安装ant，需要外部传入，如上所示。记得暴露Ellipsis组件

正常使用

const columns = [
  {
    dataIndex: 'name',
    fixed: 'left',
    title: '姓名',
    width: 200,
  },
  {
    dataIndex: 'dept',
    title: '部门',
    children: [
      {
        dataIndex: 'dept1',
        title: '研发部门',
      },
      {
        dataIndex: 'dept2',
        title: '销售部门',
      },
    ],
  },
];

和ant-design表格的简单的使用方法类似，表头包含dataIndex，key，fixed，title，width， children，render等。

关于 render

render 函数需要返回一个string或者react节点，并且新的render函数会比ant-design的表格组件多个出参width，如下所示。

并且由于表格自带拖拽缩小列宽的功能，所以自定义的 render 最好用组件自带的 Ellipsis 组件承接一下，这样就会 hover 出气泡，如下所示。

当然，如果某个列是 fixed 或者resize 设为 false 的，也可以不用承接，因为 fixed 和 resize 为 false 的列在组件内是不允许拖拽的。

import ReactDom from 'react-dom';
import { Ellipsis, Thing } from 'rlj-react-table';

const columns = [
  {
    dataIndex: 'name',
    fixed: 'left',
    title: '姓名',
    width: 200,
    render: (text, record, rowIndex, width) => {
      return <Ellipsis text={text} width={width} />;
    },
  },
];
ReactDom.render(
  <Thing columns={columns} dataSource={[]} />,
  document.getElementById('root')
);

resize 和 fixed

组件支持多列固定，并且固定列是不允许拖拽调整宽度的，所以设置fixed为left或者right的列是没有拖拽功能的，如果某个列不是fixed列，但也想控制其不能拖拽，可以通过设置resize为false来实现，如下所示。

const columns = [
  {
    dataIndex: 'name',
    resize: false,
    title: '姓名',
    width: 200,
  },
];

paddingLeft 和 paddingRight

如上图中的姓名所示，我们有时候想让某个表头多空出点距离，以前更多的可能是将表头中的title字段设置成<div style={{paddingLeft: 24}}>姓名</div>，现在可以通过字段来设置了，只需要设置 paddingLeft 即可，如下所示

const columns = [
  {
    dataIndex: 'name',
    // title: <div style={{paddingLeft: 24}}>姓名</div>,
    title: '姓名',
    paddingLeft: 24,
    width: 200,
  },
];

因为超长省略+hover出提示框，是需要计算是否超长省略才能出提示框，如果title使用一个div来处理，将增加计算难度，所以最好使paddingLeft和paddingRight来承接一下。 如果是fixed或者resize为false的列，直接div也没有问题，因为不能拖拽调整宽度嘛。

还有一点：因为title没有提供类似render函数的方法，建议不要使用react，最佳实践是string

info

有时候我们希望数据的左边能显示一个小感叹号来做额外的信息提示。组件提供了一个字段info来实现，如下所示。

import { Tooltip } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { Ellipsis, Thing } from 'rlj-react-table';

const columns = [
  {
    dataIndex: 'type',
    title: '员工类型',
    width: 200,
    info: (text, record, rowIndex, width) => {
      return (
        <Tooltip title="info demo">
          <ExclamationCircleOutlined />
        </Tooltip>
      );
    },
  },
];
ReactDom.render(
  <Thing columns={columns} dataSource={[]} />,
  document.getElementById('root')
);

折叠

如上所示，表头的右边有一个可折叠的图示，点击可展开隐藏的字段。要实现上图的效果，需要给隐藏的字段设置hidden字段

组件支持二级表头，一级表格和二级表头的折叠有所区别，一级表头是折叠到前面一个未被折叠的字段，二级表头是折叠到同级的一级表头。

const columns = [
  {
    dataIndex: 'name',
    title: '姓名',
  },
  {
    dataIndex: 'dept',
    title: '部门',
    hidden: true,
  },
  {
    datIndex: 'workNo',
    title: '工号',
    hidden: true,
  },
  {
    dataIndex: 'tax',
    title: '个税',
    children: [
      {
        dataIndex: 'field1',
        title: '个税1',
      },
      {
        dataIndex: 'field2',
        title: '个税2',
        hidden: true,
      },
      {
        dataIndex: 'field3',
        title: '个税3',
        hidden: true,
      },
    ],
  },
];

上述代码，会让部门和工号折叠到姓名，工号这个字段的右边会显示一个折叠的图标。

而个税2和个税3，会折叠到个税这个字段，个税这个字段的右边会显示一个折叠图标，就算个税1也是折叠的，表格内还是会显示个税字段，状态是最小宽度。

回调函数 onChange

const onChange = (pagination, filters, sorter, extra) => {
  const { current, pageSize } = pagination;
  const { address, name } = filters;
  const { column, columnKey, field, order } = sorter;
  const { currentDataSource, action } = extra;
  // action => sort | paginate, 现在只有这两个返回值，filter的返回值没在用，业务内没有需要使用表格筛选的场景
};

<Thing columns={columns} dataSource={dataSource} onChange={onChange} />;

关于分页 Pagination

如果组件传入了ant-design的Pagination组件，并且传入了pagination字段，就可以使用分页器。

<Thing
  columns={columns}
  dataSource={dataSource}
  pagination={{
    current: 1,
    pageSize: 30,
    onChange: (current, pageSize) => {}
    onShowSizeChange: (current, pageSize) => {}
  }}
/>

关于 rowSelection 和 rowKey

如果要使用多选rowSelection，则必须使用rowKey，rowKey是用来锁定 id 值的，rowKey使用string和function都可以。

<Thing rowKey="takId" />
<Thing rowKey={(record)=>record["takId"]} />

并且在使用rowSelection字段的时候，需要传入两个值, 如下所示，缺一不可，因为组件内没有维护内部值，请外部维护好。

<Thing
  rowSelection={{
    selectedRowKeys,
    onChange,
  }}
/>

关于开发

组件开发使用了npm link。

在项目中，例如salary-web，使用npm link /Users/xxxx/xxxx/rlj-table。

在rlj-table组件中，npm link /Users/xxx/xxxx/salary-web/node_modules/react。

前者是让实际项目中出现一个开发中的包，后者是为了统一react版本，统一使用实际项目中的react版本，否则会报错，直接崩溃。

需要注意的是，link完后，记得删除rlj-table的dist文件，重新执行一个npm start，保证打包出来的资源使用了最新的关联

同时需要统一npm版本，npm会根据package-lock.json文件来确定npm版本，不同的版本可能导致npm link失败，所以在开发前可以删除项目中的package-lock.json文件，然后使用npm i来重新安装，不要使用cnpm，cnpm不会重新生成packeage-lock.json文件

但是新生成的 pageage-lock.json 文件不要提交到 git 中，我们只是临时删除一下

关于已知问题

• rowSelection 没有维护一个内部的值
• 当一个 columns 字段和 dataSource 传入后，会通过 dataSource 的数量来确定最大表格高度，从来可以确定是否有纵向滚动条。然后带着是否显示纵向滚动条、columns 字段和网页内最大可显示宽度值来计算每一列表头的宽度，从来可以知道是否有横向滚动条。当这一切都做完之后才会显示表格，如果此时表格显示完毕后，整个网页可能因此出现纵向滚动条，也就是 body 可以滚动了，那么之前获取的网页最大可显示宽度值就会缩小，组件就会再次重复一遍上述流程。然后感觉网页抖动了一下。加了个 loading，中和了一下抖动。