# li-data-grid

<!-- Auto Generated Below -->

## Properties

| Property         | Attribute         | Description                                                            | Type                   | Default     |
| ---------------- | ----------------- | ---------------------------------------------------------------------- | ---------------------- | ----------- |
| `fields`         | `fields`          | 输入框配置数组 {\*}                                                    | `any`                  | `undefined` |
| `freezeHeader`   | `freeze-header`   | 可选属性 是否固定表格头部 {boolean}                                    | `boolean \| undefined` | `false`     |
| `heading`        | `heading`         | 可选属性 表头字符串 {string}                                           | `string \| undefined`  | `''`        |
| `height`         | `height`          | 可选属性 设定表格静态高度，默认是可以自动变大小 {string}               | `string \| undefined`  | `undefined` |
| `hideBorder`     | `hide-border`     | 可选属性 是否隐藏边框 {boolean}                                        | `boolean \| undefined` | `false`     |
| `hideHeader`     | `hide-header`     | 可选属性 是否吟唱表头 {boolean}                                        | `boolean \| undefined` | `false`     |
| `hideInfo`       | `hide-info`       | 可选属性 设定为true时，去除footer块：包括分页及选择状态 {boolean}      | `boolean \| undefined` | `false`     |
| `hideMenu`       | `hide-menu`       | 可选属性 是否隐藏设定菜单 {boolean}                                    | `boolean \| undefined` | `false`     |
| `numbered`       | `numbered`        | 可选属性 设定为true时，增加数字列 {boolean}                            | `boolean \| undefined` | `false`     |
| `pageSize`       | `page-size`       | 设定每页显示的行数 {number}                                            | `number`               | `Infinity`  |
| `rows`           | `rows`            | 输入数据数组 {any}                                                     | `any`                  | `undefined` |
| `selectable`     | `selectable`      | 可选属性 设定为true时，可以添加可选择列 {boolean}                      | `boolean \| undefined` | `false`     |
| `selection`      | --                | 只读 选择的行数据 - 从选择的行中产生出选择行的数据 {string[]}          | `string[]`             | `[]`        |
| `shadeAlternate` | `shade-alternate` | 可选属性 是否为间隔行添加阴影 {boolean}                                | `boolean \| undefined` | `true`      |
| `styles`         | `styles`          | 可选属性 注入的CSS样式 {any}                                           | `any`                  | `undefined` |
| `visible`        | `visible`         | 可选属性 设定为false时隐藏表格，用于嵌套表格切换时的重新渲染 {boolean} | `boolean \| undefined` | `true`      |

## Events

| Event     | Description                                                                                | Type                                     |
| --------- | ------------------------------------------------------------------------------------------ | ---------------------------------------- |
| `li-edit` | 可编辑单元格每次改变、更新原始的行数据时触发该事件 {EventEmitter<DataGridEditEventDetail>} | `CustomEvent<DataGridEditEventDetail>`   |
| `li-sort` | 每次原始的行数据排序，更新时触发 {EventEmitter<DataGridSortedEventDetail>}                 | `CustomEvent<DataGridSortedEventDetail>` |

## Dependencies

### Depends on

- [li-menu-flyout](../menu-flyout)
- [li-button](../button)
- [li-icon-service-settings](../icons/service-settings)
- [li-menu-flyout-list](../menu-flyout-list)
- [li-menu-flyout-item](../menu-flyout-item)
- [li-icon-action-sort](../icons/action-sort)
- [li-icon-navigation-collapse-up](../icons/navigation-collapse-up)
- [li-icon-navigation-collapse-down](../icons/navigation-collapse-down)
- [li-icon-action-hide-password](../icons/action-hide-password)
- [li-checkbox](../checkbox)
- [li-pagination](../pagination)
- [li-switch](../switch)
- [li-link](../link)
- [li-progress-bar](../progress-bar)
- [li-text-field](../text-field)
- [li-tag](../tag)

### Graph

```mermaid
graph TD;
  li-data-grid --> li-menu-flyout
  li-data-grid --> li-button
  li-data-grid --> li-icon-service-settings
  li-data-grid --> li-menu-flyout-list
  li-data-grid --> li-menu-flyout-item
  li-data-grid --> li-icon-action-sort
  li-data-grid --> li-icon-navigation-collapse-up
  li-data-grid --> li-icon-navigation-collapse-down
  li-data-grid --> li-icon-action-hide-password
  li-data-grid --> li-checkbox
  li-data-grid --> li-pagination
  li-data-grid --> li-switch
  li-data-grid --> li-link
  li-data-grid --> li-progress-bar
  li-data-grid --> li-text-field
  li-data-grid --> li-tag
  li-menu-flyout-item --> li-icon-action-success
  li-menu-flyout-item --> li-icon-navigation-right
  li-checkbox --> li-icon-action-indeterminate
  li-checkbox --> li-icon-action-success
  li-switch --> li-icon-action-success
  li-text-field --> li-helper-text
  li-helper-text --> li-icon-alert-information
  li-helper-text --> li-icon-alert-error
  li-helper-text --> li-icon-alert-success
  li-tag --> li-icon-action-close
  style li-data-grid fill:#f9f,stroke:#333,stroke-width:4px
```

---

_Built with ITSI_
