{"_id":"@alicd/cone-table-area","_rev":"19-d64ac4d3cccd54e87c2ce8ec2fb108d2","name":"@alicd/cone-table-area","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@alicd/cone-table-area","version":"0.1.0","keywords":["Cone","react","component"],"author":{"name":"Cone - Cainiao Inc,Alibaba group."},"license":"MIT","_id":"@alicd/cone-table-area@0.1.0","maintainers":[{"name":"jimmyxuster","email":"yanzhe.xyz@alibaba-inc.com"},{"name":"gepik","email":"xiekaif@163.com"},{"name":"here21","email":"deletetmr@gmail.com"},{"name":"soulcm","email":"403229009@qq.com"},{"name":"qijian1990","email":"775710651@qq.com"},{"name":"later_7","email":"tony7leek@gmail.com"}],"homepage":"https://unpkg.com/@alicd/cone-table-area@0.1.0/build/index.html","dist":{"shasum":"4a195fed80003e441a81dbeb98243306fa1fe735","tarball":"https://registry.npmjs.org/@alicd/cone-table-area/-/cone-table-area-0.1.0.tgz","fileCount":54,"integrity":"sha512-T02T3ni7kV7ULNHBqxomCTzy6mdlfqcy4iwOrSxNnDzpGjjGI2v3aois5r7jVjMyfBHYMCvEsq3Gi++PClvPkg==","signatures":[{"sig":"MEUCIFbqwdCrw24fB2bp3UHwG9Q5b3unNhJpFbbKzZBVA9/8AiEA/6rkIZ2HpHoweR0aH1z5pzh808R/bQkqz2+urq7dLPQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21217167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe15uNCRA9TVsSAnZWagAA1Y4QAKSrbwGdvdU7FCeEQNOy\nYGFLUraz4VqNFRB0NEVVKDiKWYMdzOfQZaPzaP+UUXcSVrSsH8bXgTFkAk9j\nlRWhkr2/nYgJ9tA9DgF1VLGE75ygIp5ruIKdGE0FvdtgfMYx3Qmc6byh508k\nj2qhsARyWdseLSIzQzT6KbewzlDdmviun9rqODtYjkA9MybuYeKnlvo1rpd3\nIjieXRuRz2wuRrmWWn14EAz0wyywWvJpSnh7/qEI0znV8/jMGZ9iqlPq+sao\nz1plRC3+OaRwPSbXAk7+MlON9Y9mvyZJBWSX9qzxnVHGSO624NU4Eb4L2xF1\nYu3pIr4J1eD7tCzvePJqqfc8RVUKRbKOxmPvrxE2CJYseDN1IQ2Ncj1GQeNQ\nMZ5aKn33erRRePSRKR30adixzrDTvboWL8QWs0RUHHO/2ppkRVj7Dbfbe+qg\nYhLG+FXhizaVLzNX+MBnHqAJ6zQdltLe7y8BOEeso22bf+/4qYoTiDoN7x+7\nUIV4yTvnUs+vuro8ydnNmnjsuU+Q+R6ludO3+Y7PZ4+csW0WGSWEiDZd5flC\nbGeEntTaeNJrxiJgr/txaA7uSbvMh+85RP/RWv1/aTHytMP02YE4/K2DYgPF\nqtWWfX9jGnOs2mXn2ORmLEPx7/YswF0asWjZItg9Ma0kbn329Y/uPFNMc5qm\nABdB\r\n=N60A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","scripts":{"lint":"npm run eslint & npm run stylelint","test":"build-scripts test","build":"build-scripts build","major":"npm version major -m 'Update Version Major by NPM' && git push --tag","minor":"npm version minor -m 'Update Version Minor by NPM' && git push --tag","patch":"npm version patch -m 'Update Version Patch by NPM' && git push --tag","start":"build-scripts start --port 8802","eslint":"eslint ./src","vision":"vdev start --vision","release":"sh scripts/release.sh","lint-fix":"npm run eslint-fix & npm run stylelint-fix","stylelint":"stylelint \"src/**/*.{css,less,scss}\"","eslint-fix":"eslint --fix ./src","prepublish":"npm run build","stylelint-fix":"stylelint \"src/**/*.{css,less,scss}\" --fix"},"_npmUser":{"name":"gepik","email":"xiekaif@163.com"},"stylePath":"lib/style.js","_npmVersion":"6.4.1","description":"[组件开发文档](https://yuque.antfin-inc.com/cone/chuqrf/ic0qoe)","directories":{},"_nodeVersion":"10.15.0","dependencies":{"@alifd/next":"^1.x","@ali/vu-uuid-property":"^1.2.1","@ali/vu-style-property":"^3.1.0-beta.0","@ali/visualengine-utils":"^4.5.1"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.23.2","react":"^16.3.0","eslint":"^6.6.0","fibers":"^4.0.2","moment":"^2.22.1","@ali/vdev":"~5.12.2","react-dom":"^16.3.0","stylelint":"^10.1.0","file-loader":"^4.2.0","babel-eslint":"~10.0.1","svg2react-loader":"^1.0.4","eslint-config-ali":"^8.0.2","@alib/build-scripts":"^0.1.3","build-plugin-fusion":"^0.1.0","eslint-plugin-react":"^7.16.0","eslint-plugin-import":"^2.18.2","build-plugin-component":"^0.2.5","eslint-plugin-react-hooks":"^2.2.0","stylelint-config-standard":"^18.3.0"},"peerDependencies":{"react":"^16.x","moment":"^2.22.1","@ali/visualengine":"^4.1.3","@ali/visualengine-utils":"^4.5.1"},"_npmOperationalInternal":{"tmp":"tmp/cone-table-area_0.1.0_1591188364890_0.14281747703282033","host":"s3://npm-registry-packages"}}},"time":{"created":"2020-06-03T12:46:04.652Z","modified":"2024-07-15T07:14:01.114Z","0.1.0":"2020-06-03T12:46:05.203Z"},"author":{"name":"Cone - Cainiao Inc,Alibaba group."},"license":"MIT","homepage":"https://unpkg.com/@alicd/cone-table-area@0.1.0/build/index.html","keywords":["Cone","react","component"],"description":"[组件开发文档](https://yuque.antfin-inc.com/cone/chuqrf/ic0qoe)","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":"# @alicd/cone-table-area\n\n[组件开发文档](https://yuque.antfin-inc.com/cone/chuqrf/ic0qoe)\n\n---\n* name: 表格区\n* tag_name: TableArea\n* terminal: pc\n* category: table\n* scene: common\n\n---\n符合 Rookie 设计标准的表格展示区域场景组件，常用于搜索页等。\n\n### 规则\n\n- `TableArea` 组件根据 Rookie 设计标准，囊括表格、分页、工具栏等能力，可直接与 `Form` 等组件结合成为标准的查询列表页。\n\n## API\n\n### TableArea\n\n| 属性 | 说明 | 类型 | 默认值 |\n| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| className | 自定义 class | String | - |\n| style | 自定义内联样式 | Object | - |\n| dataSource | 表格区域展示的数据源，需要包含表格中的数据数组和总数据条数两部分内容。该属性数据所需的格式见 formatter 属性 | Object | - |\n| formatter | 从 dataSource 属性中提取表格中当前显示的数据和总数据条目的函数 | (dataSource: any, paging: object) => { \"dataSource\": any[]; \"total\": number; } | 默认分别取 dataSource.data.resultList 和 dataSource.data.total，如果 dataSource 是一个数组，默认 formatter 将认为所有数据都位于该数组中，并按照当前 paging 中的 pageSize 和页码，在前端进行分页显示。 |\n| paging | 表格区域的分页状态，current 为当前页码，pageSize 为每页显示的记录条数，props 可定制 Pagination 组件的属性 | { \"current\": number; \"pageSize\": number; \"props\": object; } | - |\n| defaultPaging | 表格区域默认的分页状态 | { \"current\": number; \"pageSize\": number; \"props\": object; } | { \"current\": 1, \"pageSize\": 10 } |\n| onPagingChange | 用户进行换页或切换每页显示内容条数时调用的回调 | (paging: object) => void | - |\n| hasMinorPaging | 是否显示表格右上方的辅助分页组件 | Boolean | true |\n| hasBottomPaging | 是否显示表格底部的分页组件 | Boolean | true |\n| stickyHeader | 表头是否固顶 | Boolean | - |\n| stickyToolbar | 工具栏是否固顶。当 stickyHeader 为 true 时，该属性默认生效 | Boolean | - |\n| offsetTop | 距离窗口顶部达到指定偏移量后触发 | Number | 0 |\n| affixProps | affix组件的的属性 |\n| stickyPagination | 底部分页器是否固底 |\n| offsetBottom | 距离窗口底部偏移量 | Number | 0 |\n| hasStats | 是否显示左上角的条目数数据，不设置则只在设置 rowSelection 时显示 | Boolean | - |\n| pageSizeList | 每页显示记录数量选择器可选值 | Number | [5, 10, 20] |\n| pageShowCount | 页码显示的数量，更多的使用...代替 | Number | 5 |\n| onRowClick | 点击表格每一行触发的事件
**签名**:
Function(record: Object, index: Number, e: Event) => void
**参数**:
_record_: {Object} 该行所对应的数据
_index_: {Number} 该行所对应的序列
_e_: {Event} DOM事件对象 | Function | () => { } |\n| onRowMouseEnter | 悬浮在表格每一行的时候触发的事件
**签名**:
Function(record: Object, index: Number, e: Event) => void
**参数**:
_record_: {Object} 该行所对应的数据
_index_: {Number} 该行所对应的序列
_e_: {Event} DOM事件对象 | Function | () => { } |\n| onRowMouseLeave | 离开表格每一行的时候触发的事件
**签名**:
Function(record: Object, index: Number, e: Event) => void
**参数**:
_record_: {Object} 该行所对应的数据
_index_: {Number} 该行所对应的序列
_e_: {Event} DOM事件对象 | Function | () => { } |\n| onSort | 点击列排序触发的事件
**签名**:
Function(dataIndex: String, order: String) => void
**参数**:
_dataIndex_: {String} 指定的排序的字段
_order_: {String} 排序对应的顺序, 有`desc`和`asc`两种 | Function | () => { } |\n| onFilter | 点击过滤确认按钮触发的事件
**签名**:
Function(filterParams: Object) => void
**参数**:
_filterParams_: {Object} 过滤的字段信息 | Function | () => { } |\n| onResizeChange | 重设列尺寸的时候触发的事件
**签名**:
Function(dataIndex: String, value: Number) => void
**参数**:
_dataIndex_: {String} 指定重设的字段
_value_: {Number} 列宽变动的数值 | Function | () => { } |\n| getRowProps | 设置每一行的属性，如果返回值和其他针对行操作的属性冲突则无效。
**签名**:
Function(record: Object, index: Number) => Object
**参数**:
_record_: {Object} 该行所对应的数据
_index_: {Number} 该行所对应的序列
**返回值**:
{Object} 需要设置的行属性
| Function | () => { } |\n| getCellProps | 设置单元格的属性，通过该属性可以进行合并单元格
**签名**:
Function(rowIndex: Number, colIndex: Number, dataIndex: String, record: Object) => Object
**参数**:
_rowIndex_: {Number} 该行所对应的序列
_colIndex_: {Number} 该列所对应的序列
_dataIndex_: {String} 该列所对应的字段名称
_record_: {Object} 该行对应的记录
**返回值**:
{Object} 返回td元素的所支持的属性对象
| Function | () => { } |\n| hasBorder | 表格是否具有边框 | Boolean | true |\n| hasHeader | 表格是否具有头部 | Boolean | true |\n| isZebra | 表格是否是斑马线 | Boolean | false |\n| loading | 表格是否在加载中 | Boolean | false |\n| loadingComponent | 自定义 Loading 组件
**签名**:
Function() => void | Function | - |\n| filterParams | 当前过滤的的keys,使用此属性可以控制表格的头部的过滤选项中哪个菜单被选中,格式为 {dataIndex: {selectedKeys:\\[]}}
示例:
假设要控制dataIndex为id的列的过滤菜单中key为one的菜单项选中
`` | Object | - |\n| sort | 当前排序的字段,使用此属性可以控制表格的字段的排序,格式为{dataIndex: 'asc'} | Object | - |\n| emptyContent | 设置数据为空的时候的表格内容展现 | ReactNode | - |\n| primaryKey | dataSource当中数据的主键，如果给定的数据源中的属性不包含该主键，会造成选择状态全部选中 | String | 'id' |\n| expandedRowRender | 额外渲染行的渲染函数
**签名**:
Function(record: Object, index: Number) => Element
**参数**:
_record_: {Object} 该行所对应的数据
_index_: {Number} 该行所对应的序列
**返回值**:
{Element} 渲染内容
| Function | - |\n| expandedRowIndent | 额外渲染行的缩进 | Array | - |\n| openRowKeys | 默认情况下展开的渲染行或者Tree, 传入此属性为受控状态 | Array | - |\n| hasExpandedRowCtrl | 是否显示点击展开额外渲染行的+号按钮 | Boolean | - |\n| getExpandedColProps | 设置额外渲染行的属性
**签名**:
Function() => void | Function | - |\n| onRowOpen | 在额外渲染行或者Tree展开或者收起的时候触发的事件
**签名**:
Function(openRowKeys: Array, currentRowKey: String, expanded: Boolean, currentRecord: Object) => void
**参数**:
_openRowKeys_: {Array} 展开的渲染行的key
_currentRowKey_: {String} 当前点击的渲染行的key
_expanded_: {Boolean} 当前点击是展开还是收起
_currentRecord_: {Object} 当前点击额外渲染行的记录 | Function | - |\n| onExpandedRowClick | 点击额外渲染行触发的事件
**签名**:
Function(record: Object, index: Number, e: Event) => void
**参数**:
_record_: {Object} 该行所对应的数据
_index_: {Number} 该行所对应的序列
_e_: {Event} DOM事件对象 | Function | - |\n| fixedHeader | 表头是否固定，该属性配合maxBodyHeight使用，当内容区域的高度超过maxBodyHeight的时候，在内容区域会出现滚动条 | Boolean | - |\n| maxBodyHeight | 最大内容区域的高度,在`fixedHeader`为`true`的时候,超过这个高度会出现滚动条 | Number | - |\n| rowSelection | 是否启用选择模式
**属性**:
_getProps_: {Function} `Function(record, index)=>Object` 获取selection的默认属性
_onChange_: {Function} `Function(selectedRowKeys:Array, records:Array)` 选择改变的时候触发的事件，**注意:** 其中records只会包含当前dataSource的数据，很可能会小于selectedRowKeys的长度。
_onSelect_: {Function} `Function(selected:Boolean, record:Object, records:Array)` 用户手动选择/取消选择某行的回调
_onSelectAll_: {Function} `Function(selected:Boolean, records:Array)` 用户手动选择/取消选择所有行的回调
_selectedRowKeys_: {Array} 设置了此属性,将rowSelection变为受控状态,接收值为该行数据的primaryKey的值
_mode_: {String} 选择selection的模式, 可选值为`single`, `multiple`，默认为`multiple` | Object | - |\n| indent | 在tree模式下的缩进尺寸， 仅在isTree为true时候有效 | Number | - |\n| isTree | 开启Table的tree模式, 接收的数据格式中包含children则渲染成tree table | Boolean | - |\n| useVirtual | 是否开启虚拟滚动 | Boolean | - |\n| rowHeight | 设置行高 | Number/Function | - |\n| onBodyScroll | 在内容区域滚动的时候触发的函数
**签名**:
Function() => void | Function | - |\n| fixedScrollbar | 设为 true 时，则当表格在页面内可见，且具有横向滚动条时，保证表格的横向滚动条始终在用户可视范围内。由于 TableArea 组件默认为自适应宽度（字段内内容过多时会折行或利用 wrap 属性显示省略号），使用时请确定 TableArea 组件自身的宽度受到有效的限制。 | Boolean | false |\n| actionsIsAlign | 顶部 toolbar、底部分页器是否和表格边框对齐 | Boolean | false |\n| hasPageSizeSelector | 顶部工具栏右上角每页显示记录数量选择器类型
**可选值:**
false, 'filter', 'dropdown' | Enum | dropdown |\n| useAutomaticLayout | 是否以自适应布局方式渲染表格 | boolean | false |\n\n### TableArea.Column\n\n| 参数 | 说明 | 类型 | 默认值 |\n| -------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------- | ---------------- |\n| className | 自定义 class | String | - |\n| style | 自定义内联样式 | Object | - |\n| dataIndex | 指定列对应的字段，支持`a.b`形式的快速取值 | String | - |\n| cell | 行渲染的逻辑
Function(value, index, record) => Element | ReactElement/ReactNode/Function | (value) => value |\n| title | 表头显示的内容 | ReactElement/ReactNode/Function | - |\n| settingTitle | 使用全局配置组件 SearchPageSetting 时的表格名称，当 title 部位 String 类型时，必须填写该属性 | String | - |\n| sortable | 是否支持排序 | Boolean | - |\n| width | 列宽，注意在锁列的情况下一定需要配置宽度 | Number/String | - |\n| align | 单元格的对齐方式
**可选值**:
'left', 'center', 'right' | Enum | - |\n| filters | 生成标题过滤的菜单, 格式为`[{label:'xxx', value:'xxx'}]` | Array<Object> | - |\n| filterMode | 过滤的模式是单选还是多选
**可选值**:
'single', 'multiple' | Enum | 'multiple' |\n| lock | 是否支持锁列,可选值为`left`,`right`, `true` | Boolean/String | - |\n| resizable | 是否支持列宽拖拽调整宽度，与 width 配合使用, 当该值设为true，table的布局方式会修改为fixed，需要设置width初始值. 自适应布局下不起作用 | Boolean | false |\n| wrap | 单元格内容超出列宽时是否自动换行，设为 false 则在一行内展示，并使用省略号代替未显示的部分, 自适应布局时默认不换行 | Boolean | true |\n| titleTooltip | 该列表头的提示信息 | String | - |\n| contentTooltip | 鼠标悬浮在本列单元格上，是否弹出全部信息的弹层。 | boolean | false |\n| maxWidth | 自适应布局情况下, 列的最大宽度 | number | - |\n| minWidth | 自适应布局情况下, 列的最小宽度 | number | - |\n\n### TableArea.ColumnGroup\n\n| 参数 | 说明 | 类型 | 默认值 |\n| ----- | -------------- | ------------------------------- | -------------- |\n| title | 表头显示的内容 | ReactElement/ReactNode/Function | 'column-group' |\n\n### TableArea.GroupHeader\n\n| 参数 | 说明 | 类型 | 默认值 |\n| -------------------- | ---------------------------------- | ------------------------------- | -------- |\n| cell | 行渲染的逻辑 | ReactElement/ReactNode/Function | () => '' |\n| hasChildrenSelection | 是否在Children上面渲染selection | Boolean | false |\n| hasSelection | 是否在GroupHeader上面渲染selection | Boolean | true |\n\n### TableArea.GroupFooter\n\n| 参数 | 说明 | 类型 | 默认值 |\n| ---- | ------------ | ------------------------------- | -------- |\n| cell | 行渲染的逻辑 | ReactElement/ReactNode/Function | () => '' |\n\n### TableArea.Toolbar\n\n表格操作工具栏，根据设计标准，该工具栏将出现在表格区域的右上角，可放置添加、设置等操作。\n\n该组件目前无属性配置项，通过在组件中嵌入其他子组件来配置工具栏内容。\n\n### TableArea.ToolbarBatch\n\n表格批量操作工具栏，根据设计标准，该工具栏将出现在表格区域的左上角（靠近选择数据的勾选框和已选项数数据），用来放置对已选择的多条数据的批量操作（如批量删除、批量导出等）。\n\n该组件目前无属性配置项，通过在组件中嵌入其他子组件来配置工具栏内容。\ns you need to modify it.*","readmeFilename":"README.md"}