# @3mo/data-grid 中文文档

规范地址：https://npmcn.com/package/%403mo/data-grid/

版本：0\.41\.0
npm 元数据更新时间：2026-10-29T20:11:14.584Z
中文译文更新时间：2026-11-06T08:43:34.429Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%403mo/data-grid
原文对照：https://npmcn.com/package/%403mo/data-grid/?lang=original
项目主页：https://3mo-esolutions.github.io/web-components/?path=/docs/data-data-grids-data-grid--overview
源码仓库：https://github.com/3mo-esolutions/web-components

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：608 kB，190 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：5 个
- peer 依赖：@3mo/tab x，@3mo/flex x，@3mo/grid x，@3mo/icon x，@3mo/line x，@3mo/menu \>=0\.11\.0，@a11d/lit \>=0\.14\.1，@3mo/theme \>=0\.4\.x，@3mo/anchor x，@3mo/heading x，@3mo/popover \>=0\.11\.0，@3mo/section x，@3mo/tooltip \>=0\.11\.0，@3mo/checkbox x，@3mo/scroller \>=0\.5\.0，@3mo/splitter x，@3mo/hierarchy x，@3mo/downloader x，@3mo/empty-state x，@3mo/icon-button x，@3mo/text-fields x，@3mo/context-menu \>=0\.7\.0，@3mo/localization x，@3mo/navigability x，@3mo/select-field x，@3mo/expandability x，@3mo/number-fields x，@3mo/selectability \>=0\.3\.0，@3mo/reorderability x，@3mo/resize-observer x，@3mo/slot-controller x，@3mo/date-time-fields x，@a11d/lit-application x，@3mo/circular-progress x，@3mo/pointer-controller \>=1\.6\.0，@3mo/instanceof-attribute-controller x
- 首次发布：2023-05-11T20:00:02.334Z
- 最新版本发布：2026-10-29T20:11:14.151Z
- 近 30 天下载量：3749（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：362（近 12 个月 76 个）

## 中文简介

用于数据网格的网页组件,有打入的列,排序,选择,页码,行细节和行内编辑等功能.

## 安装

```sh
npm install @3mo/data-grid
```

也可以使用：`pnpm add @3mo/data-grid`、`yarn add @3mo/data-grid`、`bun add @3mo/data-grid`

## README

# 数据网格

用于数据网格的网页组件,有打入的列,排序,选择,页码,行细节和行内编辑等功能.

[![npm](https://img.shields.io/npm/v/@3mo/data-grid?style=flat-square&color=0077c8)](https://www.npmjs.com/package/@3mo/data-grid) [![Documentation](https://img.shields.io/badge/docs-storybook-ff4785?style=flat-square&logo=storybook&logoColor=white)](https://3mo-esolutions.github.io/web-components/?path=/docs/data-data-grids-data-grid--overview)

一个表格以行的形式显示一系列对象,其中包含选择、排序、页码、细节、编辑和CSV导出.

网格高得跟行一样高, 并卷入其中 `height`页:1 `max-height` 或一定大小的容器份额.

## 安装

```sh
npm install @3mo/data-grid
```

```ts
import '@3mo/data-grid'
```

## 使用量

```html
<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>
```

## 实例

-   [约束列](https://3mo-esolutions.github.io/web-components/?path=/story/data-data-grids-data-grid--bound-columns) —— 说 `DataGridColumnBinder.for(Person).bind(keyPath)` 从密钥路径取出列的数据选择器,其标题来自 `@label` 及其描述来自 `@description`。 。 。 .
-   [粘贴列](https://3mo-esolutions.github.io/web-components/?path=/story/data-data-grids-data-grid--sticky-columns) —— 说 `sticky` 将一栏指向 `start`页:1 `end` 或改为 `both` ; 选择和菜单列也粘贴.
-   [自定义单元格样式](https://3mo-esolutions.github.io/web-components/?path=/story/data-data-grids-data-grid--custom-cell-style) —— 说 `contentStyle` 样式单元格按其值:以红色表示负平衡,以绿色表示正平衡.
-   [列菜单项目](https://3mo-esolutions.github.io/web-components/?path=/story/data-data-grids-data-grid--column-menu-items) ——您自己的一列元素在菜单标题下添加项目,单击有色地址一列的标题.
-   [和数](https://3mo-esolutions.github.io/web-components/?path=/story/data-data-grids-data-grid--sums) —— 说 `sumHeading` 在页脚中总计一个数字列,在所选行上,同时有 `sum` 插槽需要自己的总数.
-   [选择](https://3mo-esolutions.github.io/web-components/?path=/story/data-data-grids-data-grid--selection) —— 说 `isDataSelectable` 决定选择哪行, 这里只选择成人 .
-   [细节](https://3mo-esolutions.github.io/web-components/?path=/story/data-data-grids-data-grid--details) —— 说 `getRowDetailsTemplate` 使一行打开 `hasDataDetail` 决定哪行有细节 这里只有成年人.
-   [子数据网格](https://3mo-esolutions.github.io/web-components/?path=/story/data-data-grids-data-grid--sub-data-grid) ——细节可以持有任何模板,如行子的网格.
-   [子行](https://3mo-esolutions.github.io/web-components/?path=/story/data-data-grids-data-grid--sub-rows) —— 说 `subDataGridDataSelector` 命名一行孩子的密钥路径,这些路径在同一列下作为子行打开,按级别排列.
-   [编辑](https://3mo-esolutions.github.io/web-components/?path=/story/data-data-grids-data-grid--editing) – 这里每个可编辑的单元格同时编辑,以及 `nonEditable` 需要一个使年龄超过30只读的前提.
-   [排序](https://3mo-esolutions.github.io/web-components/?path=/story/data-data-grids-data-grid--sorting) —— 说 `sorting` 设置以名称开头的顺序,然后按年龄排列; 标题类型箭头按其列排列,并单击 Shift+ 将其添加到顺序中.
-   [重排顺序](https://3mo-esolutions.github.io/web-components/?path=/story/data-data-grids-data-grid--reordering) —— 说 `reorderability` 在拖行后加一个抓住, 每一滴火 `reorder`,动作面板记录.
-   [过滤器](https://3mo-esolutions.github.io/web-components/?path=/story/data-data-grids-data-grid--filters) - 《公约》的要素 `filter` 以工具栏的过滤按钮打开槽;它们继续行走,同时合上并用其他方式将自己包入行中.
-   [初级行动](https://3mo-esolutions.github.io/web-components/?path=/story/data-data-grids-data-grid--primary-action) - 电话 `primary-action` 将一个元素放在工具栏的末尾,放在其图标按钮后.
-   [用分块按钮进行主动作](https://3mo-esolutions.github.io/web-components/?path=/story/data-data-grids-data-grid--primary-action-with-split-button) ——复合动作也适合插槽,例如分拆按钮有较多选项.
-   [背景菜单](https://3mo-esolutions.github.io/web-components/?path=/story/data-data-grids-data-grid--context-menu) —— 说 `getRowContextMenuTemplate` 给每行一个菜单,以右键打开,或按其qq键打开; `primaryContextMenuItemOnDoubleClick` 运行双击时的粗体项目.
-   [虚拟化](https://3mo-esolutions.github.io/web-components/?path=/story/data-data-grids-data-grid--virtualization) ——一页上千行:通过它们滚动,全部选择或导出.
-   [虚拟子行](https://3mo-esolutions.github.io/web-components/?path=/story/data-data-grids-data-grid--virtualized-sub-rows) ——25行开为每行40个子行,像一个产品页,每个变体都通过扩展 `detailsOpen`;滚动通过,并观看滚动条保持静止.
-   [限制高度](https://3mo-esolutions.github.io/web-components/?path=/story/data-data-grids-data-grid--constrained-height) A级 `height`页:1 `max-height` 或一定大小的弹性或网格容器的一部分,给网格一个高度,它把它的行卷入其中.
-   [导出](https://3mo-esolutions.github.io/web-components/?path=/story/data-data-grids-data-grid--export) —— 说 `exportable` 在页脚上添加一个按钮,将行作为CSV,子行包含.
-   [空状态](https://3mo-esolutions.github.io/web-components/?path=/story/data-data-grids-data-grid--empty-state) ——没有数据,网格显示为空状态,其中 `error-no-content` 位置替换 .
-   [在一张纸牌中](https://3mo-esolutions.github.io/web-components/?path=/story/data-data-grids-data-grid--in-a-card) - 在一个 `mo-card`,网格横跨卡片标题下的全部宽度.
-   [自定义数据网格](https://3mo-esolutions.github.io/web-components/?path=/story/data-data-grids-data-grid--custom-data-grid) —箭头键在单元格之间移动,空格选择,输入或双击编辑和 Ctrl+ C 副本; 单击时的标题类型, 拖动时移动并按其边缘调整大小 .

## 无障碍

A 类 `grid`,或一个 `treegrid` 带有子行,并 `aria-multiselectable` 数倍。 标题是 `row` 联 合 国 `columnheader`s, (中文(简体) ), 其中,列排序 首先说 `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。 在每个更新上启动以执行渲染任务 . |

### `mo-data-grid-footer`

#### 属性

| 名称 | 属性 | 类型 | 默认 |
| --- | --- | --- | --- |
| `dataGrid` | `dataGrid` | `DataGrid<TData, any>` |  |
| `page` | `page` | `number` | `1` |

### `mo-data-grid-header`

#### 属性

| 名称 | 属性 | 类型 | 默认 |
| --- | --- | --- | --- |
| `dataGrid` | `dataGrid` | `DataGrid<TData, any>` |  |
| `overlayOpen` | `overlayOpen` | `boolean` | `false` |

### `mo-data-grid-header-separator`

手柄调整列的大小,在拖动时绘制指针所在的行.

#### 属性

| 名称 | 属性 | 类型 | 默认 |
| --- | --- | --- | --- |
| `column` | `column` | `DataGridColumn<unknown, any>` |  |

### `mo-data-grid-primary-context-menu-item`

#### 属性

| 名称 | 属性 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- | --- |
| `open` | `open` | `boolean` | `false` | 子菜单是否打开 . |
| `disabled` | `disabled` | `boolean` | `false` | 列表项是否禁用 |
| `icon` | `icon` | `MaterialIcon | undefined` |  | 在列表项中显示的图标 |
| `preventClickOnSpace` | `preventClickOnSpace` | `boolean` | `false` | 列表项目是否应防止点击空间 |

#### 槽数

| 名称 | 说明 |
| --- | --- |
| `submenu` | 子经所取之品. |
| (默认) | 内容默认槽 |

#### 中央支助部分

| 名称 | 说明 |
| --- | --- |
| `icon` | 内容前的图标. |

### `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` | 点击行的按钮时随行数据一同发送 |

### `mo-data-grid-column-icon-button`

每行有一个图标按钮的列,在行被编辑时仍可点击.

#### 属性

| 名称 | 属性 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- | --- |
| `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` | 关闭预览的动作, 在内容旁边显示 . |

### `mo-data-grid-image-preview-button`

#### 属性

| 名称 | 属性 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- | --- |
| `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` |  |  | 列的编辑内容模板. |

### `mo-data-grid-footer-sum`

#### 属性

| 名称 | 属性 | 类型 | 默认 |
| --- | --- | --- | --- |
| `heading` | `heading` | `string` | `""` |

#### 槽数

| 名称 | 说明 |
| --- | --- |
| (默认) | 总价值 |

### `mo-data-grid-default-row`

#### 属性

| 名称 | 属性 | 类型 | 默认 |
| --- | --- | --- | --- |
| `dataRecord` | `dataRecord` | `DataRecord<TData>` |  |

#### 活动

| 名称 | 细节 |
| --- | --- |
| `contextmenu` |  |

## 链接

-   [文档](https://3mo-esolutions.github.io/web-components/?path=/docs/data-data-grids-data-grid--overview)
-   [更改日志](https://3mo-esolutions.github.io/web-components/?path=/docs/data-data-grids-data-grid--overview)
-   [来源](https://github.com/3mo-esolutions/web-components/tree/main/packages/DataGrid)

## 许可证

麻省理工学院 3MO GmbH

## 常见问题

### @3mo/data-grid 是什么？

用于数据网格的网页组件,有打入的列,排序,选择,页码,行细节和行内编辑等功能\.

### 如何安装 @3mo/data-grid？

在项目目录运行 npm install @3mo/data-grid，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@3mo/tab（x）、@3mo/flex（x）、@3mo/grid（x）、@3mo/icon（x）、@3mo/line（x）、@3mo/menu（\>=0\.11\.0）、@a11d/lit（\>=0\.14\.1）、@3mo/theme（\>=0\.4\.x）、@3mo/anchor（x）、@3mo/heading（x）、@3mo/popover（\>=0\.11\.0）、@3mo/section（x）、@3mo/tooltip（\>=0\.11\.0）、@3mo/checkbox（x）、@3mo/scroller（\>=0\.5\.0）、@3mo/splitter（x）、@3mo/hierarchy（x）、@3mo/downloader（x）、@3mo/empty-state（x）、@3mo/icon-button（x）、@3mo/text-fields（x）、@3mo/context-menu（\>=0\.7\.0）、@3mo/localization（x）、@3mo/navigability（x）、@3mo/select-field（x）、@3mo/expandability（x）、@3mo/number-fields（x）、@3mo/selectability（\>=0\.3\.0）、@3mo/reorderability（x）、@3mo/resize-observer（x）、@3mo/slot-controller（x）、@3mo/date-time-fields（x）、@a11d/lit-application（x）、@3mo/circular-progress（x）、@3mo/pointer-controller（\>=1\.6\.0）、@3mo/instanceof-attribute-controller（x）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @3mo/data-grid 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @3mo/data-grid 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @3mo/data-grid 可以商用吗？

@3mo/data-grid 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @3mo/data-grid 的下载量有多少？

根据 npm 官方下载统计，@3mo/data-grid 在 2026/10/05 – 2026/11/03 这 30 天内被下载 3,749 次，日均约 125 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @3mo/data-grid 还在维护吗？

最新版本 0\.41\.0 发布于 2026/10/30（7 天前）；至今共发布 362 个版本，其中过去 12 个月发布了 76 个；首次发布于 2023/05/12。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。