# ez-grid ## Properties | Property | Attribute | Description | Type | Default | | ------------------------------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- | ------------ | | `autoFocus` | `auto-focus` | Define se a grid será focada ao ser carregada. | `boolean` | `true` | | `canEdit` | `can-edit` | Define se a edição está habilitada na grid. | `boolean` | `true` | | `columnfilterDataSource` | -- | Define um `IMultiSelectionListDataSource` responsável por alimentar o filtro de colunas. | `IMultiSelectionListDataSource` | `undefined` | | `compact` | `compact` | Define se a grade deve ser exibida em modo compacto | `boolean` | `false` | | `config` | -- | Configuração de exibição da grade. | `IGridConfig` | `undefined` | | `dataUnit` | -- | Unidade de dados. Responsável pelo controle de edição de registros e informações pertinentes aos campos. | `DataUnit` | `undefined` | | `enableContinuousInsert` | `enable-continuous-insert` | Ativa/desativa a inserção continua na grade Só funciona quando a prop enableGridInsert está ativa | `boolean` | `true` | | `enableGridInsert` | `enable-grid-insert` | Ativa inserção de registros no modo grade. | `boolean` | `false` | | `enableLockManagerLoadingComp` | `enable-lock-manager-loading-comp` | Define se o componente deve usar o LockManager para controle de carregamento da aplicação | `boolean` | `false` | | `enableLockManagerTaskbarClick` | `enable-lock-manager-taskbar-click` | Ativa inserção de registros no modo grade pela Taskbar. | `boolean` | `true` | | `enableRowTableStriped` | `enable-row-table-striped` | Ativa modo de linhas com cores alternadas. | `boolean` | `true` | | `mode` | `mode` | Define o modo de uso da grade | `"complete" \| "simple"` | `"complete"` | | `multipleSelection` | `multiple-selection` | Habilita a seleção de várias linhas. | `boolean` | `undefined` | | `outlineMode` | `outline-mode` | Altera visualmente as sombras e bordas do componente Quando false, aplica o padrão de sombras ao componente (Utilizar quando for o elemento principal do layout) Quando true, aplica o padrão de outline ao componente (Utilizar quando estiver contido em outro elemento como um painel ou pop-up) | `boolean` | `false` | | `paginationCounterMode` | `pagination-counter-mode` | Define se a grid será focada ao ser carregada. | `"auto" \| "hidden" \| "show"` | `'auto'` | | `recordsValidator` | -- | Define um validador responsável pela integridade dos registros. | `IRecordValidator` | `undefined` | | `selectionToastConfig` | -- | Configuração da seleção de grade no toast. | `ISelectionToastConfig` | `undefined` | | `serverUrl` | `server-url` | Endereço do servidor para obtenção dos dados. | `string` | `undefined` | | `statusResolver` | -- | Define um `IStatusResolver` responsável pelo estado da coluna de status. | `((data: object) => string) \| IStatusResolver` | `undefined` | | `suppressCheckboxColumn` | `suppress-checkbox-column` | Informa se a coluna de chechbox deve ser suprimida | `boolean` | `false` | | `suppressFilterColumn` | `suppress-filter-column` | Informa se a grade deve suprimir o filtro de coluna. | `boolean` | `false` | | `suppressHorizontalScroll` | `suppress-horizontal-scroll` | Define se a grade deve suprimir o scroll horizontal. | `boolean` | `false` | | `useEnterLikeTab` | `use-enter-like-tab` | Quando verdadeiro, o ENTER fará a navegação como se fosse a tecla TAB na grade. | `boolean` | `false` | | `useSearchColumn` | `use-search-column` | Define se a grade deve exibir um buscador de coluna com uso do Ctrl+F | `boolean` | `true` | ## Events | Event | Description | Type | | ----------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------ | | `componentReady` | Emitido quando o componente estiver completamente carregado. | `CustomEvent` | | `configChange` | Emitido quando acontece a alteração de configuração do grade. | `CustomEvent` | | `ezColumnFilterChanged` | Emitido quando acontece a alteração de filtro de colunas. | `CustomEvent` | | `ezColumnStateChange` | Emitido quando acontece a alteração de estado das colunas do grid: Ordenação, largura, etc. | `CustomEvent` | | `ezDoubleClick` | Emitido com o duplo clique de uma linha | `CustomEvent` | | `ezPageChangedChanged` | Emitido a página atual é alterada. | `CustomEvent` | | `ezSelectionChange` | Emitido quando acontece a alteração de seleção de linhas. | `CustomEvent` | ## Methods ### `addColumnMenuItem(label: string, name: string, action: Function, icon: HTMLElement | string) => Promise` Adiciona item de menu nas colunas. #### Returns Type: `Promise` --- ### `addCustomEditor(fieldName: string, customEditor: ICustomEditor, detailContext?: string) => Promise` Registra um editor customizado para campos da grade e formulário. #### Returns Type: `Promise` --- ### `addCustomValueFormatter(columnName: string, customFormatter: ICustomFormatter) => Promise` Registra um formatador de valores para uma coluna da grid. #### Returns Type: `Promise` --- ### `addGridCustomRender(fieldName: string, customRender: ICustomRender, detailContext?: string) => Promise` Registra um render customizado para colunas da grid. #### Returns Type: `Promise` --- ### `checkStopEditOutsideClick(event: MouseEvent) => Promise` #### Returns Type: `Promise` --- ### `filterColumns(search: string) => Promise>` Usa um argumento para filtrar as colunas po label #### Returns Type: `Promise` --- ### `getAppliedColumnFilters() => Promise>` Retorna os filtros aplicados. #### Returns Type: `Promise` --- ### `getColumns() => Promise>` Obtém a lista de definição de colunas. #### Returns Type: `Promise` --- ### `getColumnsState() => Promise>` Obtém o estado atual das colunas. #### Returns Type: `Promise` --- ### `getCustomValueFormatter(columnName: string) => Promise` Retorna o formatador customizado da coluna caso exista. #### Returns Type: `Promise` --- ### `getSelection() => Promise>` Obtém as linhas selecionadas. #### Returns Type: `Promise` --- ### `locateColumn(columnName: string) => Promise` Localiza determinada coluna tornando-a visível. #### Returns Type: `Promise` --- ### `quickFilter(term: string) => Promise` Aplica um filtro rápido. #### Returns Type: `Promise` --- ### `refreshColumnFilterDataSource() => Promise` #### Returns Type: `Promise` --- ### `refreshSelectedRows() => Promise` Atualiza linhas da grade. #### Returns Type: `Promise` --- ### `removeCustomValueFormatter(columnName: string) => Promise` Remove o formatador de valores de uma coluna da grid. #### Returns Type: `Promise` --- ### `setColumnsDef(cols: Array) => Promise` Aplica a definição de colunas. #### Returns Type: `Promise` --- ### `setColumnsState(state: Array) => Promise` Aplica o estado das colunas. #### Returns Type: `Promise` --- ### `setData(data: Array) => Promise` Insere os registros no ez-grid. #### Returns Type: `Promise` --- ### `setFocus() => Promise` Atribui o foco para a grade. #### Returns Type: `Promise` --- ### `stopEdit() => Promise` Para a edição da grade. #### Returns Type: `Promise` ## Dependencies ### Used by - [ez-grid-view](../ez-grid-view) ### Depends on - [ez-popover](../ez-popover) - [ez-icon](../ez-icon) - [ez-button](../ez-button) - [filter-column](subcomponents) - [ez-search](../ez-search) ### Graph ```mermaid graph TD; ez-grid --> ez-popover ez-grid --> ez-icon ez-grid --> ez-button ez-grid --> filter-column ez-grid --> ez-search ez-button --> ez-icon filter-column --> ez-popover-plus filter-column --> ez-button filter-column --> ez-multi-selection-list ez-popover-plus --> ez-popover-core ez-multi-selection-list --> ez-check ez-multi-selection-list --> ez-list ez-multi-selection-list --> ez-icon ez-multi-selection-list --> multi-selection-box-message ez-multi-selection-list --> ez-filter-input ez-multi-selection-list --> ez-search ez-list --> ez-check ez-filter-input --> ez-text-input ez-filter-input --> ez-icon ez-text-input --> ez-tooltip ez-text-input --> ez-icon ez-search --> ez-text-input ez-search --> ez-icon ez-search --> ez-popover-plus ez-search --> search-list search-list --> ez-card-item ez-grid-view --> ez-grid style ez-grid fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- ## CSS Variables | Variable | Description | |-|-| | --ez-grid\_\_header--background-color | Define a cor de fundo do header do componente. | | --ez-grid\_\_selection-counter--z-index | Define o z-index do componente selection counter. | | --ez-grid\_\_container--shadow | Define o sombreamento usado como borda. | | --ez-grid--min-height | Define altura mínima da grid | | --ez-grid\_\_container--shadow--outline | Define o outline usado como borda. | | --ez-grid\_\_header--shadow | Define a sombra do header. | | --ez-grid\_\_header--shadow--outline | Define o outline usado como borda do header. | | --ez-grid\_\_header--outline | Define o outline do header. | | --ez-grid\_\_header--border | Define a borda do header. |