{"_id":"@alicd/crui-table","_rev":"24-a60b067c59e0e68f1312c34a3f59dcee","name":"@alicd/crui-table","dist-tags":{"latest":"0.0.78"},"versions":{"0.0.78":{"name":"@alicd/crui-table","version":"0.0.78","author":{"name":"@alicd/walle"},"_id":"@alicd/crui-table@0.0.78","maintainers":[{"name":"later_7","email":"tony7leek@gmail.com"}],"dist":{"shasum":"ef1411b3354d7781c37db23a1a53203f87a10b58","tarball":"https://registry.npmjs.org/@alicd/crui-table/-/crui-table-0.0.78.tgz","fileCount":70,"integrity":"sha512-mJ1u69cJBRQmEs9rXBLimKE/h0YVwsK98pUGoDlYJ0WlBpScH53OAmm03m+V4v2YApA7K895JG+PnffzrJnS9g==","signatures":[{"sig":"MEYCIQC+nQ+R5BVIO45EVuJWViYhq2mDBMT0X0lBNH4RuG2p6gIhALcdwjH9PugIRtlXhaIJCFs9K187R9G1BJegUwBROU/p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8596751,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdOXwdCRA9TVsSAnZWagAA+5YP/i1LeTpdO8uIDggR8M3M\nahn61Wazv1b4cylCnKRA1Pdm6k5i0aCREeXaynTrv04PHs2mtl82ZaLr8yvd\nKd12m0hmnCRpAWwVEevEyX2Q/uIbCz+b4spDQ+aEUOJPoOnaLnJXNxfhmktb\nY4MMDbOQF8y0DK2RE4UsUjSGu+TcFrsBSgZxv29IrQFOXTa+XFiH/6g7OnEO\n0zI2xp6/3b/dwy/zaXNnqS0ggOb+lBYeK2DnmJ5NUrhQFf8s60//3GXuqlo3\ndTGfqHstv3JC/7g1MBy51lO0cJhUGrlvFjLhkdnRsXcwXYnHWGxqdz7CmHPz\nRmGvW0cLjJuh8eXtlGpcekIjI0jmCxISXIKS2cGg+20thpPmKGK2hTSRyVgn\n/FLQNtbgON1++Z096WNOI1ppfkpX4rUzrB2qRESuQ7CPqpHtrBBCvyEkP6/B\nKihVA6xVM9T2BHZ+zF51D4U7hFMbktLol1llDRgoRM7S+AmwqnvxaANrdcFB\ndmPZoYMgIfp/kWcrz0EMx+n9RGAXlObHOBdbRl/kCAHrqSEwhe1TOBpqeB85\nHbdbltmTPvY0C2jp8rrI6C2k/x42GphtNcJsBHNHoDkoR8o4NXTIuVj00ITX\nSVt9KJ6Lf/NWphCXuOeYxsIEfJiWHXMLuVYUE05sG4/DamATg13otYF68UaB\nHFpG\r\n=hVUU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","gitHead":"6af7cb69d8d0e2b85cec5100c4c89342fdd3ad94","scripts":{"dev":"rm -rf ./site && NODE_ENV=development webpack --config webpack.config.babel.js --progress && webpack-dev-server","pub":"rm -rf ./lib && rm -rf ./dist ./build && mkdir build && babel src --copy-file --extensions .js,.jsx --out-dir lib && npm run prod && cp -r ./dist/ ./build/ && rm ./build/*.map","demo":"rm -rf ./site ./_data && NODE_ENV=demo webpack-dev-server --config webpack.config.babel.js --progress","prod":"NODE_ENV=production webpack --config webpack.config.babel.js --progress","build":"babel src -d lib & webpack --config webpack.config.babel.js --progress","clean":"rm -rf ./dist ./lib ./site","start":"npm run dev"},"_npmUser":{"name":"later_7","email":"tony7leek@gmail.com"},"repository":{"url":"git@gitlab.alibaba-inc.com:crui/table.git","type":"git"},"_npmVersion":"5.6.0","description":"--- category: Components type: UI Views component: Base chinese: 表格 english: CNTable ---","directories":{},"_nodeVersion":"9.8.0","dependencies":{"bowser":"^1.8.0","debounce":"^1.0.2","classnames":"^2.2.5","prop-types":"^15.6.0","@alicd/next-dom":"^0.2.18","@alicd/next-util":"^0.7.0","copy-to-clipboard":"^3.0.8"},"_hasShrinkwrap":false,"devDependencies":{"webpack":"^2.6.1","babel-cli":"^6.26.0","node-sass":"^4.5.3","babel-core":"^6.25.0","css-loader":"^0.28.4","@alicd/next":"0.x","file-loader":"^0.11.2","sass-loader":"^6.0.6","autoprefixer":"^7.1.1","babel-loader":"^7.1.1","style-loader":"^0.18.2","webpack-merge":"^4.1.0","md-meta-loader":"^0.0.4","babel-preset-react":"^6.24.1","webpack-dev-server":"^2.8.2","babel-plugin-import":"^1.4.0","babel-preset-es2015":"^6.24.1","html-webpack-plugin":"^2.29.0","@alicd/dpl-rookie1-0":"^2.0.3","babel-preset-stage-0":"^6.22.0","escape-string-regexp":"^1.0.5","@alicd/dpl-rookie-3-s":"2.1.0","jsonml-to-react-component":"^0.2.6","extract-text-webpack-plugin":"^2.1.0","babel-plugin-transform-runtime":"^6.23.0","babel-plugin-add-module-exports":"^0.2.1"},"peerDependencies":{"@alicd/next":"^0.x"},"_npmOperationalInternal":{"tmp":"tmp/crui-table_0.0.78_1564048412705_0.9444259217052775","host":"s3://npm-registry-packages"}}},"time":{"created":"2019-07-25T09:53:32.492Z","modified":"2024-07-15T07:14:24.760Z","0.0.78":"2019-07-25T09:53:32.882Z"},"author":{"name":"@alicd/walle"},"repository":{"url":"git@gitlab.alibaba-inc.com:crui/table.git","type":"git"},"description":"--- category: Components type: UI Views component: Base chinese: 表格 english: CNTable ---","maintainers":[{"email":"hahaiwin@163.com","name":"hahaiwin"},{"email":"1149518004@qq.com","name":"snowden_"},{"email":"1312065793@qq.com","name":"vincent.ljq"},{"email":"595620510@qq.com","name":"zhen.hz"},{"email":"251250076@qq.com","name":"cismous"},{"email":"juntao.wjt@alibaba-inc.com","name":"juntao.wjt"},{"email":"xiongqi.me@foxmail.com","name":"xiongqi"},{"email":"guoli.ygl@cainiao.com","name":"mingche_286130"},{"email":"joshuasui@163.com","name":"joshuasui"},{"email":"maopengcheng1994@gmail.com","name":"mmpc"},{"email":"littlehmy@163.com","name":"0little"},{"email":"yf871020@163.com","name":"yf871020"},{"email":"zyy7259@gmail.com","name":"zyy7259"},{"email":"tony7leek@gmail.com","name":"later_7"},{"email":"775710651@qq.com","name":"qijian1990"},{"email":"xiekaif@163.com","name":"gepik"},{"email":"yanzhe.xyz@alibaba-inc.com","name":"jimmyxuster"},{"email":"laijianqing@gmail.com","name":"helloljq"},{"email":"rentj1@163.com","name":"rentj1"},{"email":"zhangqing332@live.com","name":"js8zq332"},{"email":"527710279@qq.com","name":"xiaobc"}],"readme":"---\ncategory: Components\ntype: UI Views\ncomponent: Base\nchinese: 表格\nenglish: CNTable\n---\n\n表格组件，基于 next 的 Table 组件，封装若干业务需要的功能。\n\n### 规则\n\n### 关于 primaryKey 属性的说明\n\n原则上表格组件中显示的每一条数据需要一个唯一标识的 key（类似数据库中的 Primary Key），见 `primaryKey` 属性，默认为每条数据的 `id` 字段，如果数据中没有该要求，需要对应更改 `primaryKey` 属性。`primaryKey` 用于表格组件内部状态的维护，及在 `rowSelection`，`expandedRow`，`openRowKeys` 等功能中标识每一条数据等。简单的数据展示一般无需 `primaryKey`，但是若涉及到更加复杂的功能则需要配置。\n\n## API\n\n### CNTable\n\n| 成员 | 说明 | 类型 | 默认值 |\n|---|---|---|---|\n|prefix|样式类名的品牌前缀|`string`|`\"next-\"`|\n|className|自定义类名|`string`|N/A|\n|style|自定义内联样式|`object`|N/A|\n|dataSource|表格展示的数据源|`any[]`|`[ ]`|\n|rowSelection| 是否启用选择模式
**属性**:
_getProps_: `(record: object) => object` 获取selection的默认属性（支持[禁用](#tab-3)、[隐藏](#tab-4)选择框）
_onChange_: `(selectedRowKeys: string[], records: object[]) => void` 选择改变的时候触发的事件，**注意:** 其中 `records` 参数只会包含当前 `dataSource` 的数据，很可能会小于 `selectedRowKeys` 的长度。
_onSelect_: `(selected: boolean, record: object, records: object[]) => void` 用户手动选择/取消选择某行的回调
_onSelectAll_: `(selected: boolean, records: object) => void` 用户手动选择/取消选择所有行的回调
_selectedRowKeys_: `string[]` 设置了此属性,将 `rowSelection` 变为受控状态，接收值为该行数据的 `primaryKey` 的值
_mode_: `string` 选择selection的模式，可选值为 `\"single\"`, `\"multiple\"`，默认为 `\"multiple\"`
_lock_: `boolean` 是否对选框列启用锁列，默认为 `false`（如果有其他列设置了锁列，该锁列自动启用）|`object`|`null`|\n|onRowClick|点击表格每一行触发的事件
**参数**:
_record_: `object` 该行所对应的数据
_index_: `number` 该行所对应的序列
_e_: `Event` DOM事件对象|`(record: object, index: number, e: Event) => void`|默认不执行任何操作|\n|onRowMouseEnter|悬浮在表格每一行的时候触发的事件
**参数**:
_record_: `object` 该行所对应的数据
_index_: `number` 该行所对应的序列
_e_: `Event` DOM事件对象|`(record: object, index: number, e: Event) => void`|默认不执行任何操作|\n|onRowMouseLeave|离开表格每一行的时候触发的事件
**参数**:
_record_: `object` 该行所对应的数据
_index_: `number` 该行所对应的序列
_e_: `Event` DOM事件对象|`(record: object, index: number, e: Event) => void`|默认不执行任何操作|\n|onSort|点击列排序触发的事件
**参数**:
_dataIndex_: `string` 指定的排序的字段
_order_: `string` 排序对应的顺序, 有 `\"desc\"` 和 `\"asc\"` 两种|`(dataIndex: string, order: string) => void`|默认不执行任何操作|\n|onFilter| 点击过滤确认按钮触发的事件
**参数**:
_filterParams_: `object` 过滤的字段信息|`(filterParams: object) => void`|默认不执行任何操作|\n|getRowClassName|设置每一行的样式名称
**参数**:
_record_: `object` 该行所对应的数据
_index_: `number` 该行所对应的序列
**返回值**: `string` 需要设置的样式名称|`(record: object, index: number) => string`|默认为空|\n|getRowProps|设置每一行的属性，如果返回值和其他针对行操作的属性冲突则无效。
**参数**:
_record_: `object` 该行所对应的数据
_index_: `number` 该行所对应的序列
**返回值**: `object` 需要设置的行属性|`(record: object, index: number) => object`|默认为空|\n|getCellProps|设置单元格的属性，通过该属性可以进行合并单元格
**参数**:
_rowIndex_: `number` 该列所对应的序列
_colIndex_: `number` 该行所对应的序列
_record_: `object` 该行对应的记录
**返回值**: `object` 返回td元素的所支持的属性对象|`(rowIndex: number, colIndex: number, record: object) => object`|默认为空|\n|fixedHeader|表头是否固定，该属性配合 `maxBodyHeight` 使用，当内容区域的高度超过 `maxBodyHeight` 的时候，在内容区域会出现滚动条|`boolean`|`false`|\n|maxBodyHeight|最大内容区域的高度,在 `fixedHeader` 为 `true` 的时候,超过这个高度会出现滚动条|`number`|`200`|\n|hasBorder|表格是否具有边框|`boolean`|`true`|\n|hasHeader|表格是否具有头部|`boolean`|`true`|\n|isZebra|表格是否是斑马线|`boolean`|`false`|\n|isLoading|表格是否在加载中|`boolean`|`false`|\n|primaryKey|`dataSource` 中数据的主键，如果给定的数据源中的属性不包含该主键，会造成选择状态全部选中|`string`|`id`|\n|filterParams|当前过滤的的keys,使用此属性可以控制表格的头部的过滤选项中哪个菜单被选中,格式为 `{dataIndex: {selectedKeys:[]}}`
示例: 假设要控制dataIndex为id的列的过滤菜单中key为one的菜单项选中``|`object`|N/A|\n|sort|当前排序的字段,使用此属性可以控制表格的字段的排序,格式为 `{ dataIndex: \"asc\" }`|`object`|N/A|\n|expandedRowRender|额外渲染行的渲染逻辑函数
**参数**:
_record_: `object` 该行所对应的数据
_index_: `number` 该行所对应的序列
**返回值**: `Element` 该行的内容|`(record: object, index: number) => Element`|N/A|\n|expandedRowKeys|默认情况下展开的额外渲染行, 传入此属性为受控状态|`string[]`|N/A|\n|onExpandedChange| 在额外渲染行展开或者收齐的时候触发的事件
**参数**:
_expandedRowKeys_: `string[]` 展开的渲染行的key
_currentRowKey_: `string` 当前点击的渲染行的key
_expanded_: `boolean` 当前点击是展开还是收起
_currentRecord_: `object` 当前点击额外渲染行的记录|`(expandedRowKeys: string[], currentRowKey: string, expanded: boolean, currentRecord: object) => void`| 默认不执行任何操作|\n|expandedRowIndent|额外渲染行的缩进|`number[]`|`[1, 0]`|\n|hasExpandedRowCtrl|是否显示点击展开额外渲染行的+号按钮|`boolean`|`true`|\n|lockExpandedRowCtrl|是否对额外渲染行的+号按钮启用锁列（如果有其他列设置了锁列，该锁列自动启用）|`boolean`|`false`|\n|onExpandedRowClick|点击额外渲染行触发的事件
**参数**:
_record_: `object` 该行所对应的数据
_index_: `number` 该行所对应的序列
_e_: `Event` DOM事件对象|`(record: object, index: number, e: Event) => void`|默认不执行任何操作|\n|getExpandedColProps|设置额外渲染行的属性|`() => void`|默认为空|\n|isTree| 开启Table的tree模式, 接收的数据格式中包含children则渲染成 Tree Table|`boolean`|`false`|\n|openRowKeys|默认情况下展开的树形表格，传入了此属性代表tree的展开为受控操作|`any[]`|N/A|\n|onRowOpen|点击 tree 展开或者关闭的时候触发的事件
**参数**:
_openRowKeys_: `string[]` tree 模式下展开的key
_currentRowKey_: `string` 当前点击行的key
_opened_: `boolean` 当前点击是展开还是收起
_currentRecord_: `object` 当前点击行的记录|`(openRowKeys: string[], currentRowKey: string, currentRecord: object) => void`|默认不执行任何操作|\n|indentSize| 在tree模式下的缩进尺寸，仅在isTree为true时候有效|`number`|`12`|\n|treeArrowIndent| 设置在 Tree 模式下，树箭头所在的列 |`number`|`0`|\n|defaultExpandAll|当启用树状表格模式（`isTree`）时，是否默认展开所有节点（并展开所有可能的新增节点）。仅在 `isTree` 为 `true` 且展开不受控（不设置 `openRowKeys`）时有效。|`boolean`|`false`|\n|optimization| 是否开启性能优化，开启了性能优化后，会自动加入 `shouldComponentUpdate`|`boolean`|`false`|\n|locale|自定义国际化文案对象
**属性**:
_empty_: `string` 没有数据时的提示文案
_ok_: `string` 过滤器中确认按钮文案
_reset_: `string` 过滤器中重置按钮文案|`object`|`{\"empty\": \"没有数据\", \"ok\": \"确认\", \"reset\": \"重置\"\"}`|\n|language| 自定义国际化语言
**可选值**:`\"en-us\"`, `\"zh-cn\"`, `\"zh-tw\"`|`string`|N/A|\n|fixedScrollbar|设为 `true` 时，则当表格在页面内可见，且具有横向滚动条时，保证表格的横向滚动条始终在用户可视范围内。由于 `CNTable` 组件默认为自适应宽度（字段内内容过多时会折行或利用 `wrap` 属性显示省略号），使用时请确定 `CNTable` 组件**自身**的宽度受到有效的限制。|`boolean`|`false`|\n|getRowHighlighted|设置某一行是否被高亮，如果对某一行的数据返回 `true`，该行将被显示为高亮状态。被高亮的行将会采用特殊的样式，被高亮的行只有样式的区别，不影响页面逻辑。|`(record: object, index: number) => boolean`|默认返回 `false`|\n|useAutomaticLayout|自适应布局，列宽是否自适应单元格内容长度。启用该属性后表格将采用完全不同的布局算法。|`boolean`|`false`|\n\n### CNTable.Column\n\n| 成员 | 说明 | 类型 | 默认值 |\n|------|-----------------------------------|----------|--------|\n|dataIndex|指定列在 `dataSource` 每一项中对应的字段，支持 `a.b` 形式的快速取值|`string`|N/A|\n|cell|该列单元格内容渲染的逻辑。其中参数 `record` 为该行所对应的 `dataSource` 中的项，`index` 为当前行的索引（在 `dataSource` 中是第几项），`value` 为 `dataSource[index][dataIndex]` 的值，相当于不写 `cell` 时，单元格将会渲染的内容。|`Element` 或 `(value: any, index: number, record: any) => Element`|默认返回 `value`，即 `dataIndex` 指定的值|\n|title|该列表头显示的内容|`Element` 或 `() => Element`|`\"column\"`|\n|sortable|是否支持排序|`boolean`|`false`|\n|width|在锁列的情况下需要配置的宽度|`number`|N/A|\n|align|单元格中内容的对齐方式。**可选值**:`\"left\"`, `\"center\"`, `\"right\"` |`\"left\"` 或 `\"center\"` 或 `\"right\"`|N/A|\n|filters|生成标题过滤的菜单, 格式为 `[{ label: \"xxx\", value:\"xxx\" }]`|`object[]`|N/A|\n|filterMode| 过滤的模式是单选还是多选**可选值**:`\"single\"`, `\"multiple\"` |`\"single\"` 或 `\"multiple\"`|`\"multiple\"`|\n|lock|是否支持锁列，可选值为 `\"left\"`,`\"right\"`, `true`|`true` 或 `\"left\"` 或 `\"right\"`|N/A|\n|wrap|单元格内容超出列宽时是否自动换行，设为 `false` 则在一行内展示，并使用省略号代替未显示的部分|`string`|`true`|\n|titleTooltip|该列表头的提示信息|`string`|N/A|\n|contentTooltip|鼠标悬浮在本列单元格上，是否弹出全部信息的弹层。为 `\"overflow-only\"` 时，只在内容较长被省略号省略（`wrap={false}`）时才显示。|`boolean` 或 `\"overflow-only\"`|`false`|\n|copy|鼠标悬浮在本列单元格上，是否弹出复制弹层|`boolean`|`false`|\n|onBeforeCopy|执行复制操作时获取复制内容的逻辑，返回值将被复制到剪贴板，参数的意义同 `cell` 相同。|`(value: any, index: number, record: any) => string`|默认返回 `value` 参数|\n|onCopy|复制操作完成后的回调，第一个 `value` 参数是实际复制到剪贴板中的字符串值，其他参数的意义同 `cell` 属性相同。|`(value: string, index: number, record: any) => void` |`false`|\n|clickToSelectRow|点击该列中的单元格后是否选中该行，启用后可使得用户的选择操作更加方便|`boolean`|`false`|\n|onClick|该列中单元格的点击回调函数，参数的意义同 `cell` 属性相同。|`(value: any, index: number, record: any) => void`|N/A|\n|minWidth|（仅在自适应布局下有效）该列的最小列宽，仅支持以 px 为单位的绝对长度|`number`|N/A|\n|greedy|（仅在自适应布局下有效）在不 `wrap` 的情况下是否尽量撑开列宽，设置为 `true` 则该列会拉伸以使单元格内所有文字能在单行内显示，列宽最大值为 `maxWidth`，内容超出则折行|`boolean`|`false`|\n|maxWidth|（仅在自适应布局下有效）该列的最大列宽，仅支持以 px 为单位的绝对长度|`number`|N/A|\n|autoMinWidth|（仅在自适应布局下有效）为 `true` 时，根据 `title` 自适应最小宽度，此时 `minWidth` 属性无效|`boolean`|`false`|\n\n### CNTable.ColumnGroup\n\n| 成员 | 说明 | 类型 | 默认值 |\n|------|-----------------------------------|----------|--------|\n|title|表头显示的内容|`Element` 或 `() => Element`|`\"column-group\"`|\n","readmeFilename":"README.md"}