virtualized-table v0.2.13

大数据量虚拟化表格组件

📦 安装

使用npm或yarn

npm install --save virtualized-table 
# or
yarn add virtualized-table 

使用CDN

<!-- 注意: 部署时，将 "development.umd.js" 替换为 "production.umd.min.js"-->
<script crossorigin src="https://unpkg.com/virtualized-table/dist/vtable.development.umd.js"></script>

🔨 使用

示例

    import {VTablePro} from "virtualized-table";
    const columns = [
      { title: '姓名', dataIndex: 'name' },
      { title: '年龄', dataIndex: 'age' },
      { title: '住址', dataIndex: 'address' },
    ];
    const dataSource = [
      { key: '1', name: '胡彦斌', age: 32, address: '西湖区湖底公园1号' },
      { key: '2', name: '胡彦祖', age: 42, address: '西湖区湖底公园1号' },
    ];
    <VTablePro
      columns={columns}
      dataSource={dataSource}
    />

简单示例

📖 API

VTable

onRow 用法

<Table
  onRow={(record, index) => {
    return {
      onClick: event => {}, // 点击行
      onDoubleClick: event => {},
      onContextMenu: event => {},
      onMouseEnter: event => {}, // 鼠标移入行
      onMouseLeave: event => {},
    };
  }}
/>

columns

render @return 合并行/列

render(value) {
  return {
    children: value,
    props: {
      colSpan: 1, // 列合并，设置为0时，不渲染(设置display:none)
      rowSpan: 1, // 行合并，设置为0时，不渲染(设置visibility:hidden)
    }
  }
}

表头分组：columnsn 可以内嵌children，以渲染分组表头。

rowSelection

Spin

VTable.utils

• VTable.utils.formatToCellsSpan(arr)

[
  {
    s: {c: 0, r: 2},
    e: {c: 1, r: 2},
  },
]

=>

{
  '0:2': {colSpan: 2, rowSpan: 1},
  '1:2': {colSpan: 0, rowSpan: 0},
}

📝 License

virtualized-table is available under the MIT License.