# @beisen-platform/data-grid > ##此文档为表格参数说明文档 Latest version **1.1.20-rc.4** (published 2019-11-05) · ISC license · 0 weekly downloads ## Install ```sh npm install @beisen-platform/data-grid pnpm add @beisen-platform/data-grid yarn add @beisen-platform/data-grid bun add @beisen-platform/data-grid ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.1.20-rc.4 | | Published | 2019-11-05 | | First published | 2018-11-29 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 21 | | Unpacked size | 377.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | beisencorp | ## Links - npm: https://www.npmjs.com/package/@beisen-platform/data-grid - Repository: http://gitlab.beisencorp.com/ux-cnpm/ux-data-grid - npm.io page: https://npm.io/package/@beisen-platform/data-grid ## Dependencies (21) - [clone](https://npm.io/package/clone.md) ^1.0.2 - [hasown](https://npm.io/package/hasown.md) ^1.0.1 - [lodash](https://npm.io/package/lodash.md) ^4.15.0 - [region](https://npm.io/package/region.md) ^2.1.2 - [ustring](https://npm.io/package/ustring.md) ^1.4.1 - [css-utils](https://npm.io/package/css-utils.md) ^1.0.0 - [has-touch](https://npm.io/package/has-touch.md) ^1.0.1 - [drag-helper](https://npm.io/package/drag-helper.md) ^1.3.6 - [es6-promise](https://npm.io/package/es6-promise.md) ^4.1.0 - [react-class](https://npm.io/package/react-class.md) ^3.2.2 - [react-menus2](https://npm.io/package/react-menus2.md) ^3.0.0 - [region-align](https://npm.io/package/region-align.md) ^2.1.3 - [whatwg-fetch](https://npm.io/package/whatwg-fetch.md) ^2.0.3 - [object-assign](https://npm.io/package/object-assign.md) ^4.1.1 - [react-dom-factories](https://npm.io/package/react-dom-factories.md) ^1.0.2 - [react-simple-toolbar](https://npm.io/package/react-simple-toolbar.md) ^1.0.5 - [react-style-normalizer](https://npm.io/package/react-style-normalizer.md) ^1.2.8 - [@beisen-platform/tool-tip](https://npm.io/package/@beisen-platform/tool-tip.md) - [@beisen/create-react-class](https://npm.io/package/@beisen/create-react-class.md) 15.x.x - [@beisen-platform/common-func](https://npm.io/package/@beisen-platform/common-func.md) - [@beisen-platform/react-icons](https://npm.io/package/@beisen-platform/react-icons.md) ## Recent versions - 1.1.20-rc.4 (latest) — 2019-11-05 - 1.1.20-rc.3 — 2019-07-30 - 1.1.20-rc.2 — 2019-07-01 - 1.1.20-rc.1 — 2019-06-28 - 1.1.19-rc.4 — 2019-06-12 - 1.1.19-rc.3 — 2019-05-31 - 1.1.19-rc.1 — 2019-04-29 - 1.1.19 — 2019-04-28 - 1.1.18 — 2019-04-17 - 1.1.17 — 2019-04-17 - 1.1.16 — 2019-04-17 - 1.1.15 — 2019-04-17 - 1.1.14 — 2019-04-16 - 1.1.13 — 2019-04-15 - 1.1.12 — 2019-04-15 - … 33 more at https://npm.io/package/@beisen-platform/data-grid/versions ## README # data-grid ##此文档为表格参数说明文档 - dataSource={data} - columns={columns} - scrollTop={0} - sortInfo={SORT_INFO} - loadDefault={false} - customLoading={
loading
} - onSortChange={this.handleSortChange} - onColumnResize={this.onColumnResize} - onColumnOrderChange={this.handleColumnOrderChange} - emptyText={} - singleWordWidth={this.state.singleWordWidth} - outerWidth={this.state.outerWidth} - virtualRendering={false} //须保留 - style={{}} - outHeight={300} //详见readme中“2016.11.21更新日志” - rowType={"small"} //详见readme中“2016.11.21更新日志” - handleEdit={this.handleEdit} - treeModel={true} - paddingSize={5} #### 各个说明 - dataSource 数组 - 表格内部数据来源 - columns 数组 - 表格列说明 - scrollTop - 设置 表格内部滚动条scrollTop - loadDefault - 是否使用默认的loading - customLoading - 外部传入loading的形式 - onSortChange - 表格头可以排序时候的回调方法 - onColumnResize - 表格列进行宽度调整时候的回调方法 - handleColumnOrderChange - 列进行拖拽的时候的回调 - emptyText - 没有数据的时候展示内容 - singleWordWidth - 单个文字的宽度 用来计算表格内容和表头进行宽度调整时候默认是 6 - outerWidth - 外部容器的宽度 - virtualRendering - 以前的一个保留 表示使用虚拟的滚动条加载 现在应该没有什么用处了。 - style - 表示表格的样式 - outHeight - 表格的高度 - rowType - 表示行的类型 这个类型是可以枚举的类型 small medium big 默认是20 但是这个是必须传递的 - treeModel - 是否有树形展示 - paddingSize - 表格间距设置 ## [非talentUI项目使用该组件请点击](http://note.youdao.com/noteshare?id=1a2da361fbe6d19d9693d64d4b9d7fab) ##Features renders huge amounts of data resizable columns reorderable columns remote data support custom row/cell/column rendering multiple/single selection sorting filtering hideable columns ## 参数 ``` dataSource: Array/String/Function/Promise //数据列表要渲染的数据，本地数据需传入多个对象构成的数组，远程数据可传入URL或返回promise的函数 idProperty: String（必填）//是一个列名，用来标识每行数据的唯一性 columns: Array（必填） //data-grid的列名 memoryHash： "ceshi" //组件记忆拖动列宽时的自定义页面hash值 virtualRendering: Boolean //数据截断的参数，默认为true,为true时，进行数据截断，界限值为26，即传入10条时显示10条，传入40条时，显示26条 更多参数介绍请参考：https://github.com/zippyui/react-datagrid ``` ## Basic使用方法 1.安装npm组件包 ``` npm install @beisen/data-grid --save-dev ``` 2.引用组件 ``` import DataGrid from "@beisen/data-grid" ``` 3.传入参数 ``` const data = [ { id: 0, index: 1, firstName: 'John', city: 'London', email: 'jon@gmail.com', 'bgColor': '#f28d48'}, { id: 1, index: 2, firstName: 'John', city: 'London', email: 'jon@gmail.com','bgColor': '#40afd8' } ]; const columns = [ { name: 'index', title: '#', width: 50 }, { name: 'firstName' }, { name: 'lastName' }, { name: 'city' }, { name: 'email' } ] var App = React.createClass({ render: function(){ return