@aliretail/react-materials-components

--- title: Tablex-API order: 3 category: UI description: 表格解决方案 screenshot: https://gw.alicdn.com/imgextra/i2/O1CN01yW3hCD1M8CnqeKFlq_!!6000000001389-2-tps-90-90.png --- # API > API 规范：遵循《中后台物料规范》，仅 Table 的所有 props 可在 API 一级传入，其他组装组件的 props 皆以 '真实组件名+props' 的命名形式传入，例: paginationProps > 真实组件名规则为所有调用的组件名去除 AliretailTable 前缀后的名字，例如 AliretailTableActionBar 的 props 为 actionBarProps > 可通过组件直接传入 props 的方式来覆盖 Provider 传入的属性，不过此 props 无法在其他组件调用到 ## 额外实现 AliretailTable > 完全拓展 Table，可使用 Table 的所有 props | 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 | |----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------|--------|--------------|--------|-----------------------------------| | columns | 列配置 | 否 | columnItem[] | [] | | | stickyLock | 启用后使用 Table.StickyLock | 否 | boolean | false | | | resizable | 列宽拖拽功能 | 否 | boolean | false | 不可使用 fusion 的 onResizeChange | | 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 、 columnProps: {Function} Function()=>Object 选择列的props，例如锁列、对齐等，可使用Table.Column 的所有参数、titleProps: {Function} Function()=>Object 选择列表头的props，仅在 multiple 模式下生效、titleAddons: {Function} Function()=>Node 选择列表头添加的元素，在single multiple 下都生效、selectedTooltip: {boolean} 默认在rowSelection 存在出现用于展示已选择x项，设置为false不生效 | 否 | object | | | | AliretailTableSetting > 用于“自定义列”、“列排序”等功能，自定义参数名 settingProps | 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 | |-----------------|--------------------------|------|--------------------|--------|------| | setting | 当前设置值，用于受控模式 | 否 | array | | | | onSettingChange | 当设置改变时触发 | 否 | (newSetting) => {} | | | AliretailTableZebra > 用于切换表格是否为斑马线模式，暂无 API AliretailTableCompact > 用于切换表格是否为紧凑模式，暂无 API AliretailTableFullscreen > 用于切换当前 Table 是否全屏, 暂无 API types ``` type columnItem = { /** * 指定列对应的字段，支持a.b形式的快速取值 */ dataIndex?: string; /** * 行渲染的逻辑 */ cell?: (value: any, index: number, record: any) => void | React.ReactNode; /** * 表头显示的内容 */ title?: React.ReactNode; /** * 当设定 group，表明此为父子表头的父表头，值会作为父表头标题存在 */ group?: React.ReactNode; /** * 设定 group 后，children作为子表头的值存在 */ children?: columnItem[]; /** * 写到 header 单元格上的title属性 */ htmlTitle?: string; /** * 列宽，注意在锁列的情况下一定需要配置宽度 */ width?: number | string; /** * header cell 横跨的格数，设置为0表示不出现此 th */ colSpan?: number; /** * 单元格的对齐方式 */ align?: 'left' | 'center' | 'right'; /** * 单元格标题的对齐方式, 不配置默认读取align值 */ alignHeader?: 'left' | 'center' | 'right'; /** * 生成标题过滤的菜单, 格式为`[{label:'xxx', value:'xxx'}]` */ filters?: Array<any>; /** * 过滤的模式是单选还是多选 */ filterMode?: 'single' | 'multiple'; /** * 是否支持锁列,可选值为`left`,`right`, `true` */ lock?: boolean | string; /** * 是否支持排序 */ sortable?: boolean; /** * 预制的一些常见配置 */ type?: 'id' | 'money' | 'currency' | 'datetime' | 'date' | 'phone' | 'ou' | 'bankCard'; /** * 预置配置的特殊设置 */ formatConfig?: Record<string, any>; }; ``` 预制配置 > 使用请参考demo的"列情况枚举"，部分预置配置存在可设置的部分, 配置统一在 formatConfig 传入 money > 配合对应行数据里的 currency 字段来格式化金钱为形如 123,456.78 (CNY) 的形式，格式化使用的工具是 @alife/whale-util 里提供的 formatAmount(value, currency, config)。 | 参数名 | 说明 | 默认值 | |-----------------|--------------|--------| | currencyVisible | 是否显示币种 | true | date/datetime > type 为 date 或 datetime 会将传入的时间字段自动格式化，区别是默认的时间格式化方式，date 是 YYYY-MM-DD，datetime 是 YYYY-MM-DD HH:mm:ss，都可通过 format 属性来取代默认的格式化方式。 | 参数名 | 说明 | 默认值 | |--------|----------------|----------------------------------| | format | 时间格式化格式 | YYYY-MM-DD / YYYY-MM-DD HH:mm:ss |