# ant-virtual-table

> [English](./README-en_EN.md) | 简体中文

Latest version **0.1.11** (published 2020-08-09) · ISC license · 0 weekly downloads

## Install

```sh
npm install ant-virtual-table
pnpm add ant-virtual-table
yarn add ant-virtual-table
bun add ant-virtual-table
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.11 |
| Published | 2020-08-09 |
| First published | 2019-06-14 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 22.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | tqcheng |
| Maintainers | tqcheng |
| Keywords | virtual-table, ant, ant-table, virtualied, 虚拟渲染, 虚拟表格, antd, virtual |

## Links

- npm: https://www.npmjs.com/package/ant-virtual-table
- Repository: https://github.com/ctq123/ant-virtual-table
- Homepage: https://github.com/ctq123/ant-virtual-table#readme
- Issues: https://github.com/ctq123/ant-virtual-table/issues
- npm.io page: https://npm.io/package/ant-virtual-table

## Dependencies (8)

- [antd](https://npm.io/package/antd.md) ^3.26.2
- [jest](https://npm.io/package/jest.md) ^21.2.1
- [react](https://npm.io/package/react.md) ^16.12.0
- [sinon](https://npm.io/package/sinon.md) ^7.3.2
- [enzyme](https://npm.io/package/enzyme.md) ^3.1.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.12.0
- [lodash.throttle](https://npm.io/package/lodash.throttle.md) ^4.1.1
- [enzyme-adapter-react-16](https://npm.io/package/enzyme-adapter-react-16.md) ^1.0.2

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 0.1.11 (latest) — 2020-08-09
- 0.1.10 — 2020-04-26
- 0.1.9 — 2019-12-11
- 0.1.8 — 2019-12-11
- 0.1.7 — 2019-12-11
- 0.1.6 — 2019-12-11
- 0.1.5 — 2019-12-11
- 0.1.4 — 2019-07-06
- 0.1.3 — 2019-07-02
- 0.1.2 — 2019-07-02
- 0.1.1 — 2019-07-01
- 0.1.0 — 2019-06-27
- 0.0.2 — 2019-06-23
- 0.0.1 — 2019-06-14

## README

# ant-virtual-table

[English](./README-en_EN.md) | 简体中文

这是一个ant的虚拟表格，用于解决大数据渲染时页面卡顿的问题，本组件是对ant.desigin中Table组件进行一层封装，属性完全与原组件Table保持一致 [AntDesign Table](https://ant.design/components/table-cn/)，可以让你像使用普通table一样使用虚拟table。例子中处理渲染1000万条数据，页面也非常流畅。[在线demo](https://codesandbox.io/s/antdxunibiao-demo-rj5qc?file=/index.js)

## 设计说明
考虑到兼容性问题，内部通过监听Table的滚动事件判断滑动行的位置，没有采用H5新特性IntersectionObserver。因此兼容性问题是比较好的。另外组件引入loash的throttle处理抖动问题，目前没有采用raf

## React ant-virtual-table
[![Build Status](https://travis-ci.org/ctq123/ant-virtual-table.svg?branch=master&foo=bar)](https://travis-ci.org/ctq123/ant-virtual-table)
[![NPM version](https://img.shields.io/badge/npm-v5.7.1-green.svg?style=flat)](https://www.npmjs.com/package/ant-virtual-table)

# install
npm install ant-virtual-table --save-dev
# Usage

## 例子 
![image](https://github.com/ctq123/ant-virtual-table/blob/master/example1.gif)
```
import React, { Component, Fragment } from 'react'
import { VirtualTable } from 'ant-virtual-table'
import 'antd/dist/antd.css'

const columns = [
  {
    title: '序号',
    dataIndex: 'id',
    width: 100
  },
  {
    title: '姓名',
    dataIndex: 'name',
    width: 150
  },
  {
    title: '年龄',
    dataIndex: 'age',
    width: 100
  },
  {
    title: '性别',
    dataIndex: 'sex',
    width: 100,
    render: (text) => {
      return text === 'male' ? '男' : '女'
    }
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address'
  }
]

function generateData () {
  const res = []
  const names = ['Tom', 'Marry', 'Jack', 'Lorry', 'Tanken', 'Salla']
  const sexs = ['male', 'female']
  for (let i = 0; i < 10000000; i++) {
    let obj = {
      id: i,
      name: names[i % names.length] + i,
      sex: sexs[i % sexs.length],
      age: 15 + Math.round(10 * Math.random()),
      address: '浙江省杭州市西湖区华星时代广场2号楼'
    }
    res.push(obj)
  }
  return res
}

const dataSource = generateData()

class App extends Component {
  render () {
    return (
      <Fragment>
        <VirtualTable
          columns={columns}
          dataSource={dataSource}
          rowKey='id'
          pagination={{ pageSize: 40 }}
          scroll={{ y: 400 }}
          bordered
        />
      </Fragment>
    )
  }
}
```

# Prop Types

为降低迁移成本，属性与antd的Table完全保持一致，暂时没有自身独特的属性
<!-- 属性 | 描述 | 类型 | 默认值 | 是否必填
---|---|---|---|--
dataSource | 数据源 | array |  | 否 -->

# 注意
**目前暂不支持内嵌tree等复杂的表单结构，任何复杂的表单结构都不建议使用，后续跟进当中...**

---
_Source: https://npm.io/package/ant-virtual-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._