@alicd/crui-table NPM

category: Components type: UI Views component: Base chinese: 表格

english: CNTable

表格组件，基于 next 的 Table 组件，封装若干业务需要的功能。

规则

关于 primaryKey 属性的说明

原则上表格组件中显示的每一条数据需要一个唯一标识的 key（类似数据库中的 Primary Key），见 primaryKey 属性，默认为每条数据的 id 字段，如果数据中没有该要求，需要对应更改 primaryKey 属性。primaryKey 用于表格组件内部状态的维护，及在 rowSelection，expandedRow，openRowKeys 等功能中标识每一条数据等。简单的数据展示一般无需 primaryKey，但是若涉及到更加复杂的功能则需要配置。

API

CNTable

成员	说明	类型	默认值
prefix	样式类名的品牌前缀	`string`	`"next-"`
className	自定义类名	`string`	N/A
style	自定义内联样式	`object`	N/A
dataSource	表格展示的数据源	`any[]`	`[ ]`
rowSelection	是否启用选择模式属性:getProps: `(record: object) => object` 获取selection的默认属性（支持禁用、隐藏选择框）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`
onRowClick	点击表格每一行触发的事件参数:record: `object` 该行所对应的数据index: `number` 该行所对应的序列e: `Event` DOM事件对象	`(record: object, index: number, e: Event) => void`	默认不执行任何操作
onRowMouseEnter	悬浮在表格每一行的时候触发的事件参数:record: `object` 该行所对应的数据index: `number` 该行所对应的序列e: `Event` DOM事件对象	`(record: object, index: number, e: Event) => void`	默认不执行任何操作
onRowMouseLeave	离开表格每一行的时候触发的事件参数:record: `object` 该行所对应的数据index: `number` 该行所对应的序列e: `Event` DOM事件对象	`(record: object, index: number, e: Event) => void`	默认不执行任何操作
onSort	点击列排序触发的事件参数:dataIndex: `string` 指定的排序的字段order: `string` 排序对应的顺序, 有 `"desc"` 和 `"asc"` 两种	`(dataIndex: string, order: string) => void`	默认不执行任何操作
onFilter	点击过滤确认按钮触发的事件参数:filterParams: `object` 过滤的字段信息	`(filterParams: object) => void`	默认不执行任何操作
getRowClassName	设置每一行的样式名称参数:record: `object` 该行所对应的数据index: `number` 该行所对应的序列返回值: `string` 需要设置的样式名称	`(record: object, index: number) => string`	默认为空
getRowProps	设置每一行的属性，如果返回值和其他针对行操作的属性冲突则无效。参数:record: `object` 该行所对应的数据index: `number` 该行所对应的序列返回值: `object` 需要设置的行属性	`(record: object, index: number) => object`	默认为空
getCellProps	设置单元格的属性，通过该属性可以进行合并单元格参数:rowIndex: `number` 该列所对应的序列colIndex: `number` 该行所对应的序列record: `object` 该行对应的记录返回值: `object` 返回td元素的所支持的属性对象	`(rowIndex: number, colIndex: number, record: object) => object`	默认为空
fixedHeader	表头是否固定，该属性配合 `maxBodyHeight` 使用，当内容区域的高度超过 `maxBodyHeight` 的时候，在内容区域会出现滚动条	`boolean`	`false`
maxBodyHeight	最大内容区域的高度,在 `fixedHeader` 为 `true` 的时候,超过这个高度会出现滚动条	`number`	`200`
hasBorder	表格是否具有边框	`boolean`	`true`
hasHeader	表格是否具有头部	`boolean`	`true`
isZebra	表格是否是斑马线	`boolean`	`false`
isLoading	表格是否在加载中	`boolean`	`false`
primaryKey	`dataSource` 中数据的主键，如果给定的数据源中的属性不包含该主键，会造成选择状态全部选中	`string`	`id`
filterParams	当前过滤的的keys,使用此属性可以控制表格的头部的过滤选项中哪个菜单被选中,格式为 `{dataIndex: {selectedKeys:[]}}`示例: 假设要控制dataIndex为id的列的过滤菜单中key为one的菜单项选中`<Table filterParams={{id: {selectedKeys: ['one']}}}/>`	`object`	N/A
sort	当前排序的字段,使用此属性可以控制表格的字段的排序,格式为 `{ dataIndex: "asc" }`	`object`	N/A
expandedRowRender	额外渲染行的渲染逻辑函数参数:record: `object` 该行所对应的数据index: `number` 该行所对应的序列返回值: `Element` 该行的内容	`(record: object, index: number) => Element`	N/A
expandedRowKeys	默认情况下展开的额外渲染行, 传入此属性为受控状态	`string[]`	N/A
onExpandedChange	在额外渲染行展开或者收齐的时候触发的事件参数:expandedRowKeys: `string[]` 展开的渲染行的keycurrentRowKey: `string` 当前点击的渲染行的keyexpanded: `boolean` 当前点击是展开还是收起currentRecord: `object` 当前点击额外渲染行的记录	`(expandedRowKeys: string[], currentRowKey: string, expanded: boolean, currentRecord: object) => void`	默认不执行任何操作
expandedRowIndent	额外渲染行的缩进	`number[]`	`[1, 0]`
hasExpandedRowCtrl	是否显示点击展开额外渲染行的+号按钮	`boolean`	`true`
lockExpandedRowCtrl	是否对额外渲染行的+号按钮启用锁列（如果有其他列设置了锁列，该锁列自动启用）	`boolean`	`false`
onExpandedRowClick	点击额外渲染行触发的事件参数:record: `object` 该行所对应的数据index: `number` 该行所对应的序列e: `Event` DOM事件对象	`(record: object, index: number, e: Event) => void`	默认不执行任何操作
getExpandedColProps	设置额外渲染行的属性	`() => void`	默认为空
isTree	开启Table的tree模式, 接收的数据格式中包含children则渲染成 Tree Table	`boolean`	`false`
openRowKeys	默认情况下展开的树形表格，传入了此属性代表tree的展开为受控操作	`any[]`	N/A
onRowOpen	点击 tree 展开或者关闭的时候触发的事件参数:openRowKeys: `string[]` tree 模式下展开的keycurrentRowKey: `string` 当前点击行的keyopened: `boolean` 当前点击是展开还是收起currentRecord: `object` 当前点击行的记录	`(openRowKeys: string[], currentRowKey: string, currentRecord: object) => void`	默认不执行任何操作
indentSize	在tree模式下的缩进尺寸，仅在isTree为true时候有效	`number`	`12`
treeArrowIndent	设置在 Tree 模式下，树箭头所在的列	`number`	`0`
defaultExpandAll	当启用树状表格模式（`isTree`）时，是否默认展开所有节点（并展开所有可能的新增节点）。仅在 `isTree` 为 `true` 且展开不受控（不设置 `openRowKeys`）时有效。	`boolean`	`false`
optimization	是否开启性能优化，开启了性能优化后，会自动加入 `shouldComponentUpdate`	`boolean`	`false`
locale	自定义国际化文案对象属性:empty: `string` 没有数据时的提示文案ok: `string` 过滤器中确认按钮文案reset: `string` 过滤器中重置按钮文案	`object`	`{"empty": "没有数据", "ok": "确认", "reset": "重置""}`
language	自定义国际化语言可选值:`"en-us"`, `"zh-cn"`, `"zh-tw"`	`string`	N/A
fixedScrollbar	设为 `true` 时，则当表格在页面内可见，且具有横向滚动条时，保证表格的横向滚动条始终在用户可视范围内。由于 `CNTable` 组件默认为自适应宽度（字段内内容过多时会折行或利用 `wrap` 属性显示省略号），使用时请确定 `CNTable` 组件自身的宽度受到有效的限制。	`boolean`	`false`
getRowHighlighted	设置某一行是否被高亮，如果对某一行的数据返回 `true`，该行将被显示为高亮状态。被高亮的行将会采用特殊的样式，被高亮的行只有样式的区别，不影响页面逻辑。	`(record: object, index: number) => boolean`	默认返回 `false`
useAutomaticLayout	自适应布局，列宽是否自适应单元格内容长度。启用该属性后表格将采用完全不同的布局算法。	`boolean`	`false`

CNTable.Column

成员	说明	类型	默认值
dataIndex	指定列在 `dataSource` 每一项中对应的字段，支持 `a.b` 形式的快速取值	`string`	N/A
cell	该列单元格内容渲染的逻辑。其中参数 `record` 为该行所对应的 `dataSource` 中的项，`index` 为当前行的索引（在 `dataSource` 中是第几项），`value` 为 `dataSource[index][dataIndex]` 的值，相当于不写 `cell` 时，单元格将会渲染的内容。	`Element` 或 `(value: any, index: number, record: any) => Element`	默认返回 `value`，即 `dataIndex` 指定的值
title	该列表头显示的内容	`Element` 或 `() => Element`	`"column"`
sortable	是否支持排序	`boolean`	`false`
width	在锁列的情况下需要配置的宽度	`number`	N/A
align	单元格中内容的对齐方式。可选值:`"left"`, `"center"`, `"right"`	`"left"` 或 `"center"` 或 `"right"`	N/A
filters	生成标题过滤的菜单, 格式为 `[{ label: "xxx", value:"xxx" }]`	`object[]`	N/A
filterMode	过滤的模式是单选还是多选可选值:`"single"`, `"multiple"`	`"single"` 或 `"multiple"`	`"multiple"`
lock	是否支持锁列，可选值为 `"left"`,`"right"`, `true`	`true` 或 `"left"` 或 `"right"`	N/A
wrap	单元格内容超出列宽时是否自动换行，设为 `false` 则在一行内展示，并使用省略号代替未显示的部分	`string`	`true`
titleTooltip	该列表头的提示信息	`string`	N/A
contentTooltip	鼠标悬浮在本列单元格上，是否弹出全部信息的弹层。为 `"overflow-only"` 时，只在内容较长被省略号省略（`wrap={false}`）时才显示。	`boolean` 或 `"overflow-only"`	`false`
copy	鼠标悬浮在本列单元格上，是否弹出复制弹层	`boolean`	`false`
onBeforeCopy	执行复制操作时获取复制内容的逻辑，返回值将被复制到剪贴板，参数的意义同 `cell` 相同。	`(value: any, index: number, record: any) => string`	默认返回 `value` 参数
onCopy	复制操作完成后的回调，第一个 `value` 参数是实际复制到剪贴板中的字符串值，其他参数的意义同 `cell` 属性相同。	`(value: string, index: number, record: any) => void`	`false`
clickToSelectRow	点击该列中的单元格后是否选中该行，启用后可使得用户的选择操作更加方便	`boolean`	`false`
onClick	该列中单元格的点击回调函数，参数的意义同 `cell` 属性相同。	`(value: any, index: number, record: any) => void`	N/A
minWidth	（仅在自适应布局下有效）该列的最小列宽，仅支持以 px 为单位的绝对长度	`number`	N/A
greedy	（仅在自适应布局下有效）在不 `wrap` 的情况下是否尽量撑开列宽，设置为 `true` 则该列会拉伸以使单元格内所有文字能在单行内显示，列宽最大值为 `maxWidth`，内容超出则折行	`boolean`	`false`
maxWidth	（仅在自适应布局下有效）该列的最大列宽，仅支持以 px 为单位的绝对长度	`number`	N/A
autoMinWidth	（仅在自适应布局下有效）为 `true` 时，根据 `title` 自适应最小宽度，此时 `minWidth` 属性无效	`boolean`	`false`

CNTable.ColumnGroup

成员	说明	类型	默认值
title	表头显示的内容	`Element` 或 `() => Element`	`"column-group"`

bowser debounce classnames prop-types @alicd/next-dom @alicd/next-util copy-to-clipboard

@infinitebrahmanuniverse/nolb-_alicd @everything-registry/sub-chunk-43 @alicd/crui @zalastax/nolb-_alicd

0.0.78

6 years ago