数据网格
用于数据网格的网页组件,有打入的列,排序,选择,页码,行细节和行内编辑等功能.
一个表格以行的形式显示一系列对象,其中包含选择、排序、页码、细节、编辑和CSV导出.
网格高得跟行一样高, 并卷入其中 height页:1 max-height 或一定大小的容器份额.
安装
npm install @3mo/data-grid
import '@3mo/data-grid'
使用量
<mo-data-grid .data=${twentyPeople} editability='never'>
<mo-data-grid-column-image heading='Avatar' dataSelector='avatar' tooltipSelector='name'></mo-data-grid-column-image>
<mo-data-grid-column-text heading='Name' dataSelector='name'></mo-data-grid-column-text>
<mo-data-grid-column-number heading='Age' dataSelector='age'></mo-data-grid-column-number>
<mo-data-grid-column-text heading='Address' dataSelector='address'></mo-data-grid-column-text>
<mo-data-grid-column-date heading='Birth Date' dataSelector='birthDate'></mo-data-grid-column-date>
</mo-data-grid>
实例
- 约束列 —— 说
DataGridColumnBinder.for(Person).bind(keyPath) 从密钥路径取出列的数据选择器,其标题来自 @label 及其描述来自 @description。 。 。 .
- 粘贴列 —— 说
sticky 将一栏指向 start页:1 end 或改为 both ; 选择和菜单列也粘贴.
- 自定义单元格样式 —— 说
contentStyle 样式单元格按其值:以红色表示负平衡,以绿色表示正平衡.
- 列菜单项目 ——您自己的一列元素在菜单标题下添加项目,单击有色地址一列的标题.
- 和数 —— 说
sumHeading 在页脚中总计一个数字列,在所选行上,同时有 sum 插槽需要自己的总数.
- 选择 —— 说
isDataSelectable 决定选择哪行, 这里只选择成人 .
- 细节 —— 说
getRowDetailsTemplate 使一行打开 hasDataDetail 决定哪行有细节 这里只有成年人.
- 子数据网格 ——细节可以持有任何模板,如行子的网格.
- 子行 —— 说
subDataGridDataSelector 命名一行孩子的密钥路径,这些路径在同一列下作为子行打开,按级别排列.
- 编辑 – 这里每个可编辑的单元格同时编辑,以及
nonEditable 需要一个使年龄超过30只读的前提.
- 排序 —— 说
sorting 设置以名称开头的顺序,然后按年龄排列; 标题类型箭头按其列排列,并单击 Shift+ 将其添加到顺序中.
- 重排顺序 —— 说
reorderability 在拖行后加一个抓住, 每一滴火 reorder,动作面板记录.
- 过滤器 - 《公约》的要素
filter 以工具栏的过滤按钮打开槽;它们继续行走,同时合上并用其他方式将自己包入行中.
- 初级行动 - 电话
primary-action 将一个元素放在工具栏的末尾,放在其图标按钮后.
- 用分块按钮进行主动作 ——复合动作也适合插槽,例如分拆按钮有较多选项.
- 背景菜单 —— 说
getRowContextMenuTemplate 给每行一个菜单,以右键打开,或按其qq键打开; primaryContextMenuItemOnDoubleClick 运行双击时的粗体项目.
- 虚拟化 ——一页上千行:通过它们滚动,全部选择或导出.
- 虚拟子行 ——25行开为每行40个子行,像一个产品页,每个变体都通过扩展
detailsOpen;滚动通过,并观看滚动条保持静止.
- 限制高度 A级
height页:1 max-height 或一定大小的弹性或网格容器的一部分,给网格一个高度,它把它的行卷入其中.
- 导出 —— 说
exportable 在页脚上添加一个按钮,将行作为CSV,子行包含.
- 空状态 ——没有数据,网格显示为空状态,其中
error-no-content 位置替换 .
- 在一张纸牌中 - 在一个
mo-card,网格横跨卡片标题下的全部宽度.
- 自定义数据网格 —箭头键在单元格之间移动,空格选择,输入或双击编辑和 Ctrl+ C 副本; 单击时的标题类型, 拖动时移动并按其边缘调整大小 .
无障碍
A 类 grid,或一个 treegrid 带有子行,并 aria-multiselectable 数倍。 标题是 row 联 合 国 columnheaders, (中文(简体) ),
其中,列排序 首先说 aria-sort='ascending' 或者说 'descending' 和所有其他可分类的 'none'。行为
row编号与 aria-level, (中文(简体) ), aria-setsize 财务报告和审定财务报表 aria-posinset, (中文(简体) ), aria-selected 可选择行和 aria-expanded
单元格为 gridcell编号.
一个单元格是按制表符顺序排列的,并具有真正的焦点. 列头不是箭头导航的一部分;其按钮是
普通分页停止.
| 密钥 | 对 |
|---|
| 箭头 | 细胞朝那个方向走, 包裹在边缘. |
Home End | 排行中的第一个或最后一个单元格. |
Ctrl Home 编号 : End | 网格的第一个细胞,或者最后一个细胞. |
PageUp PageDown | 上下行一页. |
Enter | 编辑可编辑的单元格;否则单击该单元格,该单元格用 selectOnClick 并打开其细节 detailsOnClick。 。 。 . |
Enter Escape | 编辑时:结束并返回单元格; Enter 执行,文本区域除外. |
Ctrl 或者说 ⌘ C | 复制单元格的文本. |
与 selectOnClick,移动到单元格中选择其行,以及 Shift 扩展选择。 与ARIA不同的地方
练习:箭头相接, Space 不选择行,在树格中 ArrowRight 财务报告和审定财务报表 ArrowLeft 在单元格之间移动
而不是打开和关闭行.
API 密码
mo-data-grid
属性
| 名称 | 属性 | 类型 | 默认 | 说明 |
|---|
rows | | DataGridRow<TData, TDetailsElement>[] | | 已转换的行和子行按记录顺序排列. |
resolvedPagination | | { readonly strategy: DataGridPaginationStrategy; readonly size: DataGridPaginationSize; } | undefined | | 从属性、静态默认和倒置中解析有效的 pagination 配置 . |
data | data | TData[] | "new Array<TData>()" | 在 DataGrid 中显示的数据 。 它是一系列对象,每个对象代表一行. |
columns | columns | DataGridColumn<TData, any>[] | | DataGrid的列由它们的定义和修改组成. 指定它给出代码中的定义,哪个列元素会覆盖. |
headerHidden | headerHidden | boolean | false | 是否应该隐藏标题 . |
page | page | number | 1 | 当前页. |
pagination | pagination | DataGridPagination | undefined | | 各行的呼呼方式:一个策略, pages 或者说 scroll,和一个大小,一个数字或 auto,比如说. pages, (中文(简体) ), pages 50 或者说 50。 。 。 . auto 符合网格高度的行数,或 |
sorting | sorting | DataGridSorting<TData> | undefined | | 排序模式 。 它是一个对象 selector 财务报告和审定财务报表 strategy 属性. |
selectability | selectability | Selectability | undefined | | 选择模式 。 如果上下文菜单可用, 默认为“ 单一” , 否则为“ 未定义 ” . |
isDataSelectable | isDataSelectable | ((data: TData) => boolean) | undefined | | 是否可以选择某一行的数据 . |
selectedData | selectedData | TData[] | "new Array<TData>()" | 选中的数据 . |
selectOnClick | selectOnClick | boolean | false | 是否单击时选择行 . |
selectionBehaviorOnDataChange | selectionBehaviorOnDataChange | SelectabilityBehaviorOnItemsChange | "reset" | 当数据变化时选择的行为. |
reorderability | reorderability | boolean | undefined | | 是否可以将行拖入另一个顺序,这在没有进行排序和没有行有细节或子行的情况下有效. |
multipleDetails | multipleDetails | boolean | false | 能否同时打开多个细节. |
detailsOpen | detailsOpen | boolean | false | 打开行到来的细节,直到关闭。 用户可能仍会关闭它们. 需要"多细节". |
subDataGridDataSelector | subDataGridDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | 子数据网数据的关键路径. |
hasDataDetail | hasDataDetail | ((data: TData) => boolean) | undefined | | 数据是否有细节 . |
detailsOnClick | detailsOnClick | boolean | false | 是否点击打开细节 . |
primaryContextMenuItemOnDoubleClick | primaryContextMenuItemOnDoubleClick | boolean | false | 在行上双击或中击单击 mo-data-grid-primary-context-menu-item 上下文菜单. |
editability | editability | DataGridEditability | "never" | 可编辑模式 . |
getRowDetailsTemplate | getRowDetailsTemplate | ((data: TData) => HTMLTemplateResult) | undefined | | 函数返回给定行细节的模板. |
getRowContextMenuTemplate | getRowContextMenuTemplate | ((data: TData[]) => HTMLTemplateResult) | undefined | | 返回给定行上下文菜单模板的函数. |
filtersOpen | filtersOpen | boolean | false | 是否包含 filter 显示槽 。 工具栏的过滤按钮切换它 . |
hasAlternatingBackground | hasAlternatingBackground | boolean | | 各行是否应当有交替的背景 . |
cellFontSize | cellFontSize | number | "value" | 以雷姆为单位的单元格的字体大小,介于0.8到1.2之间. 默认为 DataGrid.cellRelativeFontSize页:1. |
rowHeight | rowHeight | number | "DataGrid.rowHeight.value" | 以像素表示的行高,在30到60之间. 默认为 DataGrid.rowHeight, 35. (中文(简体) ). |
exportable | exportable | boolean | false | DataGrid 是否可导出 。 这将显示页脚中的导出按钮 . |
活动
| 名称 | 细节 |
|---|
dataChange | TData[] |
selectionChange | TData[] |
pageChange | number |
paginationChange | DataGridPagination | undefined |
columnsChange | DataGridColumn<TData, any>[] |
sortingChange | DataGridRankedSortDefinition<TData>[] |
reorder | DataGridReorderChange<TData>[] |
rowDetailsOpen | DataGridRow<TData, TDetailsElement> |
rowDetailsClose | DataGridRow<TData, TDetailsElement> |
rowClick | DataGridRow<TData, TDetailsElement> |
rowDoubleClick | DataGridRow<TData, TDetailsElement> |
rowMiddleClick | DataGridRow<TData, TDetailsElement> |
cellEdit | DataGridCell<any, TData, TDetailsElement> |
槽数
| 名称 | 说明 |
|---|
column | 列元素,在被放入网格时会自行指定. 这是隐藏的. |
toolbar | DataGrid上方的横向条. |
toolbar-action | 工具栏中显示的动作图标按钮的插槽 . |
filter | 过滤 DataGrid 数据的元素 。 在被扩展后,如果工具栏的行全部被放入其所剩的空间,它们就会继续走,否则会被包裹成自己的行. 它通过工具栏中的图标按钮被切换. |
sum | 在 DataGrid 的页脚中显示金额的横向栏 。 计算出的数额也默认放在这里 . |
primary-action | 工具栏最末端的插槽会期望主动作元素(如"添加"按钮)被放入. 被分档的元素取代了槽的默认内容,但补充了它之外产生的主动作,例如实体DataGrid的创建按钮,通过"主动作Hidden"被压制取而代之. |
error-no-content | 在没有数据时显示错误消息的槽 . |
CSS 自定义属性
| 名称 | 说明 |
|---|
--mo-data-grid-footer-background | 脚印的背景. |
--mo-data-grid-cell-padding | 细胞的内衬垫. 默认为0.5雷姆. |
--mo-data-grid-column-sub-row-indentation | 子行中第一列缩进. 默认为 20px . |
mo-data-grid-cell
属性
| 名称 | 属性 | 类型 | 默认 |
|---|
value | value | TValue | |
column | column | DataGridColumn<TData, TValue> | |
row | row | DataGridRow<TData, TDetailsElement> | |
mo-data-grid-column-header
属性
| 名称 | 属性 | 类型 | 默认 | 说明 |
|---|
column | column | DataGridColumn<unknown, any> | | |
menuOpen | menuOpen | boolean | false | |
template | | HTMLTemplateResult | | 模板被制成CompareRoot。 在每个更新上启动以执行渲染任务 . |
属性
| 名称 | 属性 | 类型 | 默认 |
|---|
dataGrid | dataGrid | DataGrid<TData, any> | |
page | page | number | 1 |
属性
| 名称 | 属性 | 类型 | 默认 |
|---|
dataGrid | dataGrid | DataGrid<TData, any> | |
overlayOpen | overlayOpen | boolean | false |
手柄调整列的大小,在拖动时绘制指针所在的行.
属性
| 名称 | 属性 | 类型 | 默认 |
|---|
column | column | DataGridColumn<unknown, any> | |
属性
| 名称 | 属性 | 类型 | 默认 | 说明 |
|---|
open | open | boolean | false | 子菜单是否打开 . |
disabled | disabled | boolean | false | 列表项是否禁用 |
icon | icon | MaterialIcon | undefined | | 在列表项中显示的图标 |
preventClickOnSpace | preventClickOnSpace | boolean | false | 列表项目是否应防止点击空间 |
槽数
| 名称 | 说明 |
|---|
submenu | 子经所取之品. |
| (默认) | 内容默认槽 |
中央支助部分
mo-data-grid-column-boolean
显示布尔为点的一栏,颜色为真假相,无所取用为未定义相.
属性
| 名称 | 属性 | 类型 | 默认 | 说明 |
|---|
trueColor | trueColor | string | "var(--mo-color-green)" | 真值点的颜色 |
falseColor | falseColor | string | "var(--mo-color-red)" | 错误值的点颜色 |
dataGrid | dataGrid | DataGrid<TData, any> | undefined | | |
width | width | string | "max-content" | 列的宽度 |
hidden | hidden | boolean | false | 列是否隐藏 。 如果可以的话,用户可以在设置面板中显示该列. |
heading | heading | string | "" | 栏目标题 |
textAlign | textAlign | DataGridColumnAlignment | "center" | 列的文本对齐 |
description | description | string | undefined | | 专栏简介. 它将作为标题上的工具提示显示. |
dataSelector | dataSelector | object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never | | 列的数据选择器 |
sortDataSelector | sortDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | 列的数据选择器 |
nonSortable | nonSortable | boolean | false | 列是否可排序 |
nonEditable | nonEditable | boolean | Predicate<TData> | false | 列是否可编辑 |
sticky | sticky | DataGridColumnSticky | undefined | | 列的粘度位置, 要么“ 启动 ” , 要么“ 结束 ” , 要么“ 两者” |
contentStyle | contentStyle | DataGridColumnContentStyle<TData, TValue> | undefined | | 专栏的内容风格. 它可以是字符串,CSSResult,也可以是基于单元格值和数据返回的函数. |
| getContentTemplate | | | 栏目内容模板. |
| getEditContentTemplate | | | 列的编辑内容模板. |
mo-data-grid-column
属性
| 名称 | 属性 | 类型 | 默认 | 说明 |
|---|
dataGrid | dataGrid | DataGrid<TData, any> | undefined | | |
width | width | string | "max-content" | 列的宽度 |
hidden | hidden | boolean | false | 列是否隐藏 。 如果可以的话,用户可以在设置面板中显示该列. |
heading | heading | string | "" | 栏目标题 |
textAlign | textAlign | DataGridColumnAlignment | "start" | 列的文本对齐 |
description | description | string | undefined | | 专栏简介. 它将作为标题上的工具提示显示. |
dataSelector | dataSelector | object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never | | 列的数据选择器 |
sortDataSelector | sortDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | 列的数据选择器 |
nonSortable | nonSortable | boolean | false | 列是否可排序 |
nonEditable | nonEditable | boolean | Predicate<TData> | false | 列是否可编辑 |
sticky | sticky | DataGridColumnSticky | undefined | | 列的粘度位置, 要么“ 启动 ” , 要么“ 结束 ” , 要么“ 两者” |
contentStyle | contentStyle | DataGridColumnContentStyle<TData, TValue> | undefined | | 专栏的内容风格. 它可以是字符串,CSSResult,也可以是基于单元格值和数据返回的函数. |
| getContentTemplate | | | 栏目内容模板. |
| getEditContentTemplate | | | 列的编辑内容模板. |
mo-data-grid-column-deletion
属性
| 名称 | 属性 | 类型 | 默认 | 说明 |
|---|
prevent | prevent | boolean | false | 防止显示删除按钮 |
icon | icon | MaterialIcon | "delete" | 要显示的图标 。 默认删除 |
tooltip | tooltip | string | undefined | | 按钮的工具提示 |
disabled | disabled | ((data: TData) => boolean) | undefined | | 是否禁用行按钮 |
dataGrid | dataGrid | DataGrid<TData, any> | undefined | | |
width | width | string | "max-content" | 列的宽度 |
hidden | hidden | boolean | false | 列是否隐藏 。 如果可以的话,用户可以在设置面板中显示该列. |
heading | heading | string | "" | 栏目标题 |
textAlign | textAlign | DataGridColumnAlignment | "start" | 列的文本对齐 |
description | description | string | undefined | | 专栏简介. 它将作为标题上的工具提示显示. |
dataSelector | dataSelector | object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never | | 列的数据选择器 |
sortDataSelector | sortDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | 列的数据选择器 |
nonSortable | nonSortable | boolean | true | 列是否可排序 |
nonEditable | nonEditable | boolean | true | 列是否可编辑 |
sticky | sticky | DataGridColumnSticky | undefined | | 列的粘度位置, 要么“ 启动 ” , 要么“ 结束 ” , 要么“ 两者” |
contentStyle | contentStyle | DataGridColumnContentStyle<TData, TValue> | undefined | | 专栏的内容风格. 它可以是字符串,CSSResult,也可以是基于单元格值和数据返回的函数. |
getEditContentTemplate | getEditContentTemplate | (_: unknown, data?: TData | undefined) => HTMLTemplateResult | "getContentTemplate" | 列的编辑内容模板. |
| getContentTemplate | | | 栏目内容模板. |
活动
| 名称 | 细节 | 说明 |
|---|
delete | TData | |
iconClick | TData | 点击行的按钮时随行数据一同发送 |
每行有一个图标按钮的列,在行被编辑时仍可点击.
属性
| 名称 | 属性 | 类型 | 默认 | 说明 |
|---|
icon | icon | MaterialIcon | | 按钮的图标 |
tooltip | tooltip | string | undefined | | 按钮的工具提示 |
disabled | disabled | ((data: TData) => boolean) | undefined | | 是否禁用行按钮 |
dataGrid | dataGrid | DataGrid<TData, any> | undefined | | |
width | width | string | "max-content" | 列的宽度 |
hidden | hidden | boolean | false | 列是否隐藏 。 如果可以的话,用户可以在设置面板中显示该列. |
heading | heading | string | "" | 栏目标题 |
textAlign | textAlign | DataGridColumnAlignment | "start" | 列的文本对齐 |
description | description | string | undefined | | 专栏简介. 它将作为标题上的工具提示显示. |
dataSelector | dataSelector | object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never | | 列的数据选择器 |
sortDataSelector | sortDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | 列的数据选择器 |
nonSortable | nonSortable | boolean | true | 列是否可排序 |
nonEditable | nonEditable | boolean | Predicate<TData> | false | 列是否可编辑 |
sticky | sticky | DataGridColumnSticky | undefined | | 列的粘度位置, 要么“ 启动 ” , 要么“ 结束 ” , 要么“ 两者” |
contentStyle | contentStyle | DataGridColumnContentStyle<TData, TValue> | undefined | | 专栏的内容风格. 它可以是字符串,CSSResult,也可以是基于单元格值和数据返回的函数. |
getEditContentTemplate | getEditContentTemplate | (_: unknown, data?: TData | undefined) => HTMLTemplateResult | "getContentTemplate" | 列的编辑内容模板. |
| getContentTemplate | | | 栏目内容模板. |
活动
| 名称 | 细节 | 说明 |
|---|
iconClick | TData | 点击行的按钮时随行数据一同发送 |
mo-data-grid-column-image
属性
| 名称 | 属性 | 类型 | 默认 | 说明 |
|---|
tooltipSelector | tooltipSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | ((data: TData) => string | undefined) | undefined | | 要用作工具提示的列的数据选择器。 如果提供了一个函数,它将被调用为数据作为参数. |
dataGrid | dataGrid | DataGrid<TData, any> | undefined | | |
width | width | string | "max-content" | 列的宽度 |
hidden | hidden | boolean | false | 列是否隐藏 。 如果可以的话,用户可以在设置面板中显示该列. |
heading | heading | string | "" | 栏目标题 |
textAlign | textAlign | DataGridColumnAlignment | "start" | 列的文本对齐 |
description | description | string | undefined | | 专栏简介. 它将作为标题上的工具提示显示. |
dataSelector | dataSelector | object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never | | 列的数据选择器 |
sortDataSelector | sortDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | 列的数据选择器 |
nonSortable | nonSortable | boolean | true | 列是否可排序 |
nonEditable | nonEditable | boolean | true | 列是否可编辑 |
sticky | sticky | DataGridColumnSticky | undefined | | 列的粘度位置, 要么“ 启动 ” , 要么“ 结束 ” , 要么“ 两者” |
contentStyle | contentStyle | DataGridColumnContentStyle<TData, TValue> | undefined | | 专栏的内容风格. 它可以是字符串,CSSResult,也可以是基于单元格值和数据返回的函数. |
| getContentTemplate | | | 栏目内容模板. |
| getEditContentTemplate | | | 列的编辑内容模板. |
mo-data-grid-column-text
属性
| 名称 | 属性 | 类型 | 默认 | 说明 |
|---|
dataGrid | dataGrid | DataGrid<TData, any> | undefined | | |
width | width | string | "max-content" | 列的宽度 |
hidden | hidden | boolean | false | 列是否隐藏 。 如果可以的话,用户可以在设置面板中显示该列. |
heading | heading | string | "" | 栏目标题 |
textAlign | textAlign | DataGridColumnAlignment | "start" | 列的文本对齐 |
description | description | string | undefined | | 专栏简介. 它将作为标题上的工具提示显示. |
dataSelector | dataSelector | object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never | | 列的数据选择器 |
sortDataSelector | sortDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | 列的数据选择器 |
nonSortable | nonSortable | boolean | false | 列是否可排序 |
nonEditable | nonEditable | boolean | Predicate<TData> | false | 列是否可编辑 |
sticky | sticky | DataGridColumnSticky | undefined | | 列的粘度位置, 要么“ 启动 ” , 要么“ 结束 ” , 要么“ 两者” |
contentStyle | contentStyle | DataGridColumnContentStyle<TData, TValue> | undefined | | 专栏的内容风格. 它可以是字符串,CSSResult,也可以是基于单元格值和数据返回的函数. |
| getContentTemplate | | | 栏目内容模板. |
| getEditContentTemplate | | | 列的编辑内容模板. |
mo-data-grid-column-date
属性
| 名称 | 属性 | 类型 | 默认 | 说明 |
|---|
formatOptions | formatOptions | DateTimeFormatOptions | undefined | | 传递到 DateTime.prottotype.format () 的选项 |
precision | precision | FieldDateTimePrecision | "Day" | 日期/时间的精确性. |
pickerHidden | pickerHidden | boolean | false | 隐藏日期/ 时间拾取器 |
dataGrid | dataGrid | DataGrid<TData, any> | undefined | | |
width | width | string | "max-content" | 列的宽度 |
hidden | hidden | boolean | false | 列是否隐藏 。 如果可以的话,用户可以在设置面板中显示该列. |
heading | heading | string | "" | 栏目标题 |
textAlign | textAlign | DataGridColumnAlignment | "start" | 列的文本对齐 |
description | description | string | undefined | | 专栏简介. 它将作为标题上的工具提示显示. |
dataSelector | dataSelector | object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never | | 列的数据选择器 |
sortDataSelector | sortDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | 列的数据选择器 |
nonSortable | nonSortable | boolean | false | 列是否可排序 |
nonEditable | nonEditable | boolean | Predicate<TData> | false | 列是否可编辑 |
sticky | sticky | DataGridColumnSticky | undefined | | 列的粘度位置, 要么“ 启动 ” , 要么“ 结束 ” , 要么“ 两者” |
contentStyle | contentStyle | DataGridColumnContentStyle<TData, TValue> | undefined | | 专栏的内容风格. 它可以是字符串,CSSResult,也可以是基于单元格值和数据返回的函数. |
| getContentTemplate | | | 栏目内容模板. |
| getEditContentTemplate | | | 列的编辑内容模板. |
mo-data-grid-column-date-range
属性
| 名称 | 属性 | 类型 | 默认 | 说明 |
|---|
formatOptions | formatOptions | DateTimeFormatOptions | undefined | | 传递到 DateTime.prottotype.format () 的选项 |
precision | precision | FieldDateTimePrecision | "Day" | 日期/时间的精确性. |
pickerHidden | pickerHidden | boolean | false | 隐藏日期/ 时间拾取器 |
dataGrid | dataGrid | DataGrid<TData, any> | undefined | | |
width | width | string | "max-content" | 列的宽度 |
hidden | hidden | boolean | false | 列是否隐藏 。 如果可以的话,用户可以在设置面板中显示该列. |
heading | heading | string | "" | 栏目标题 |
textAlign | textAlign | DataGridColumnAlignment | "start" | 列的文本对齐 |
description | description | string | undefined | | 专栏简介. 它将作为标题上的工具提示显示. |
dataSelector | dataSelector | object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never | | 列的数据选择器 |
sortDataSelector | sortDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | 列的数据选择器 |
nonSortable | nonSortable | boolean | false | 列是否可排序 |
nonEditable | nonEditable | boolean | Predicate<TData> | false | 列是否可编辑 |
sticky | sticky | DataGridColumnSticky | undefined | | 列的粘度位置, 要么“ 启动 ” , 要么“ 结束 ” , 要么“ 两者” |
contentStyle | contentStyle | DataGridColumnContentStyle<TData, TValue> | undefined | | 专栏的内容风格. 它可以是字符串,CSSResult,也可以是基于单元格值和数据返回的函数. |
| getContentTemplate | | | 栏目内容模板. |
| getEditContentTemplate | | | 列的编辑内容模板. |
mo-data-grid-column-date-time
属性
| 名称 | 属性 | 类型 | 默认 | 说明 |
|---|
formatOptions | formatOptions | DateTimeFormatOptions | undefined | | 传递到 DateTime.prottotype.format () 的选项 |
precision | precision | FieldDateTimePrecision | "Minute" | 日期/时间的精确性. |
pickerHidden | pickerHidden | boolean | false | 隐藏日期/ 时间拾取器 |
dataGrid | dataGrid | DataGrid<TData, any> | undefined | | |
width | width | string | "max-content" | 列的宽度 |
hidden | hidden | boolean | false | 列是否隐藏 。 如果可以的话,用户可以在设置面板中显示该列. |
heading | heading | string | "" | 栏目标题 |
textAlign | textAlign | DataGridColumnAlignment | "start" | 列的文本对齐 |
description | description | string | undefined | | 专栏简介. 它将作为标题上的工具提示显示. |
dataSelector | dataSelector | object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never | | 列的数据选择器 |
sortDataSelector | sortDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | 列的数据选择器 |
nonSortable | nonSortable | boolean | false | 列是否可排序 |
nonEditable | nonEditable | boolean | Predicate<TData> | false | 列是否可编辑 |
sticky | sticky | DataGridColumnSticky | undefined | | 列的粘度位置, 要么“ 启动 ” , 要么“ 结束 ” , 要么“ 两者” |
contentStyle | contentStyle | DataGridColumnContentStyle<TData, TValue> | undefined | | 专栏的内容风格. 它可以是字符串,CSSResult,也可以是基于单元格值和数据返回的函数. |
| getContentTemplate | | | 栏目内容模板. |
| getEditContentTemplate | | | 列的编辑内容模板. |
mo-data-grid-column-date-time-range
属性
| 名称 | 属性 | 类型 | 默认 | 说明 |
|---|
formatOptions | formatOptions | DateTimeFormatOptions | undefined | | 传递到 DateTime.prottotype.format () 的选项 |
precision | precision | FieldDateTimePrecision | "Minute" | 日期/时间的精确性. |
pickerHidden | pickerHidden | boolean | false | 隐藏日期/ 时间拾取器 |
dataGrid | dataGrid | DataGrid<TData, any> | undefined | | |
width | width | string | "max-content" | 列的宽度 |
hidden | hidden | boolean | false | 列是否隐藏 。 如果可以的话,用户可以在设置面板中显示该列. |
heading | heading | string | "" | 栏目标题 |
textAlign | textAlign | DataGridColumnAlignment | "start" | 列的文本对齐 |
description | description | string | undefined | | 专栏简介. 它将作为标题上的工具提示显示. |
dataSelector | dataSelector | object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never | | 列的数据选择器 |
sortDataSelector | sortDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | 列的数据选择器 |
nonSortable | nonSortable | boolean | false | 列是否可排序 |
nonEditable | nonEditable | boolean | Predicate<TData> | false | 列是否可编辑 |
sticky | sticky | DataGridColumnSticky | undefined | | 列的粘度位置, 要么“ 启动 ” , 要么“ 结束 ” , 要么“ 两者” |
contentStyle | contentStyle | DataGridColumnContentStyle<TData, TValue> | undefined | | 专栏的内容风格. 它可以是字符串,CSSResult,也可以是基于单元格值和数据返回的函数. |
| getContentTemplate | | | 栏目内容模板. |
| getEditContentTemplate | | | 列的编辑内容模板. |
mo-data-grid-column-image-preview
每行有一个按钮的一列,在弹出式中预览行的图像 .
除非 getSource 解决它,例如从文件ID.
属性
| 名称 | 属性 | 类型 | 默认 | 说明 |
|---|
getSource | | (value: TValue) => DataGridImagePreviewSource | | 解析其图像源的值, 可能是同步的, 当其预览打开时. |
dataGrid | dataGrid | DataGrid<TData, any> | undefined | | |
width | width | string | "max-content" | 列的宽度 |
hidden | hidden | boolean | false | 列是否隐藏 。 如果可以的话,用户可以在设置面板中显示该列. |
heading | heading | string | "" | 栏目标题 |
textAlign | textAlign | DataGridColumnAlignment | "start" | 列的文本对齐 |
description | description | string | undefined | | 专栏简介. 它将作为标题上的工具提示显示. |
dataSelector | dataSelector | object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never | | 列的数据选择器 |
sortDataSelector | sortDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | 列的数据选择器 |
nonSortable | nonSortable | boolean | true | 列是否可排序 |
nonEditable | nonEditable | boolean | true | 列是否可编辑 |
sticky | sticky | DataGridColumnSticky | undefined | | 列的粘度位置, 要么“ 启动 ” , 要么“ 结束 ” , 要么“ 两者” |
contentStyle | contentStyle | DataGridColumnContentStyle<TData, TValue> | undefined | | 专栏的内容风格. 它可以是字符串,CSSResult,也可以是基于单元格值和数据返回的函数. |
| getContentTemplate | | | 栏目内容模板. |
| getEditContentTemplate | | | 列的编辑内容模板. |
mo-data-grid-image-preview
属性
| 名称 | 属性 | 类型 | 默认 | 说明 |
|---|
value | value | unknown | | 图像被预览的值, 解析到图像源 getSource。 。 。 . |
getSource | getSource | ((value: unknown) => DataGridImagePreviewSource) | undefined | | 确定图像源的值,即默认值本身. |
imageHidden | imageHidden | boolean | false | 是否只显示没有图像的已排定档期的内容 . |
槽数
| 名称 | 说明 |
|---|
| (默认) | 图像上显示的内容 . |
close | 关闭预览的动作, 在内容旁边显示 . |
属性
| 名称 | 属性 | 类型 | 默认 | 说明 |
|---|
value | value | unknown | | 图像预览值 . |
getSource | getSource | ((value: unknown) => DataGridImagePreviewSource) | undefined | | 决定图像源的值. |
槽数
mo-data-grid-column-currency
属性
| 名称 | 属性 | 类型 | 默认 | 说明 |
|---|
currency | currency | Currency | undefined | | 价值的货币. |
currencyDataSelector | currencyDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | 数值货币的关键路径 . |
formatOptions | formatOptions | NumberFormatOptions | undefined | | |
sumHeading | sumHeading | string | undefined | "undefined" | |
min | min | number | undefined | | |
minDataSelector | minDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | |
max | max | number | undefined | | |
maxDataSelector | maxDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | |
step | step | number | undefined | | |
stepDataSelector | stepDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | |
dataGrid | dataGrid | DataGrid<TData, any> | undefined | | |
width | width | string | "max-content" | 列的宽度 |
hidden | hidden | boolean | false | 列是否隐藏 。 如果可以的话,用户可以在设置面板中显示该列. |
heading | heading | string | "" | 栏目标题 |
textAlign | textAlign | DataGridColumnAlignment | "end" | 列的文本对齐 |
description | description | string | undefined | | 专栏简介. 它将作为标题上的工具提示显示. |
dataSelector | dataSelector | object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never | | 列的数据选择器 |
sortDataSelector | sortDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | 列的数据选择器 |
nonSortable | nonSortable | boolean | false | 列是否可排序 |
nonEditable | nonEditable | boolean | Predicate<TData> | false | 列是否可编辑 |
sticky | sticky | DataGridColumnSticky | undefined | | 列的粘度位置, 要么“ 启动 ” , 要么“ 结束 ” , 要么“ 两者” |
contentStyle | contentStyle | DataGridColumnContentStyle<TData, TValue> | undefined | | 专栏的内容风格. 它可以是字符串,CSSResult,也可以是基于单元格值和数据返回的函数. |
| getContentTemplate | | | 栏目内容模板. |
| getEditContentTemplate | | | 列的编辑内容模板. |
mo-data-grid-column-number
属性
| 名称 | 属性 | 类型 | 默认 | 说明 |
|---|
formatOptions | formatOptions | NumberFormatOptions | undefined | | |
sumHeading | sumHeading | string | undefined | "undefined" | |
min | min | number | undefined | | |
minDataSelector | minDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | |
max | max | number | undefined | | |
maxDataSelector | maxDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | |
step | step | number | undefined | | |
stepDataSelector | stepDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | |
dataGrid | dataGrid | DataGrid<TData, any> | undefined | | |
width | width | string | "max-content" | 列的宽度 |
hidden | hidden | boolean | false | 列是否隐藏 。 如果可以的话,用户可以在设置面板中显示该列. |
heading | heading | string | "" | 栏目标题 |
textAlign | textAlign | DataGridColumnAlignment | "end" | 列的文本对齐 |
description | description | string | undefined | | 专栏简介. 它将作为标题上的工具提示显示. |
dataSelector | dataSelector | object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never | | 列的数据选择器 |
sortDataSelector | sortDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | 列的数据选择器 |
nonSortable | nonSortable | boolean | false | 列是否可排序 |
nonEditable | nonEditable | boolean | Predicate<TData> | false | 列是否可编辑 |
sticky | sticky | DataGridColumnSticky | undefined | | 列的粘度位置, 要么“ 启动 ” , 要么“ 结束 ” , 要么“ 两者” |
contentStyle | contentStyle | DataGridColumnContentStyle<TData, TValue> | undefined | | 专栏的内容风格. 它可以是字符串,CSSResult,也可以是基于单元格值和数据返回的函数. |
| getContentTemplate | | | 栏目内容模板. |
| getEditContentTemplate | | | 列的编辑内容模板. |
mo-data-grid-column-percent
属性
| 名称 | 属性 | 类型 | 默认 | 说明 |
|---|
formatOptions | formatOptions | NumberFormatOptions | undefined | | |
sumHeading | sumHeading | string | undefined | "undefined" | |
min | min | number | undefined | | |
minDataSelector | minDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | |
max | max | number | undefined | | |
maxDataSelector | maxDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | |
step | step | number | undefined | | |
stepDataSelector | stepDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | |
dataGrid | dataGrid | DataGrid<TData, any> | undefined | | |
width | width | string | "max-content" | 列的宽度 |
hidden | hidden | boolean | false | 列是否隐藏 。 如果可以的话,用户可以在设置面板中显示该列. |
heading | heading | string | "" | 栏目标题 |
textAlign | textAlign | DataGridColumnAlignment | "end" | 列的文本对齐 |
description | description | string | undefined | | 专栏简介. 它将作为标题上的工具提示显示. |
dataSelector | dataSelector | object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never | | 列的数据选择器 |
sortDataSelector | sortDataSelector | (object extends Required<TData> ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | Extract<keyof TData, string> | SubKeyPathOf<...> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | undefined | | 列的数据选择器 |
nonSortable | nonSortable | boolean | false | 列是否可排序 |
nonEditable | nonEditable | boolean | Predicate<TData> | false | 列是否可编辑 |
sticky | sticky | DataGridColumnSticky | undefined | | 列的粘度位置, 要么“ 启动 ” , 要么“ 结束 ” , 要么“ 两者” |
contentStyle | contentStyle | DataGridColumnContentStyle<TData, TValue> | undefined | | 专栏的内容风格. 它可以是字符串,CSSResult,也可以是基于单元格值和数据返回的函数. |
| getContentTemplate | | | 栏目内容模板. |
| getEditContentTemplate | | | 列的编辑内容模板. |
属性
| 名称 | 属性 | 类型 | 默认 |
|---|
heading | heading | string | "" |
槽数
mo-data-grid-default-row
属性
| 名称 | 属性 | 类型 | 默认 |
|---|
dataRecord | dataRecord | DataRecord<TData> | |
活动
链接
许可证
麻省理工学院 3MO GmbH