# ez-grid-view ## Properties | Property | Attribute | Description | Type | Default | | -------------------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ------------------------------- | | `autoFocus` | `auto-focus` | Define se a grid será focada ao ser carregada. | `boolean` | `true` | | `columnsConfig` | -- | Configuração de exibição da grade. | `ColumnConfig[]` | `undefined` | | `compact` | `compact` | Define se a grade deve ser exibida em modo compacto | `boolean` | `false` | | `enableRowTableStriped` | `enable-row-table-striped` | Ativa modo de linhas com cores alternadas. | `boolean` | `true` | | `metadata` | -- | Metadados que definem a estrutura da grade. | `UnitMetadata` | `undefined` | | `multipleSelection` | `multiple-selection` | Habilita a seleção de várias linhas. | `boolean` | `false` | | `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` | | `pageSize` | `page-size` | Quantidade de registros por página. | `number` | `150` | | `paginationCounterMode` | `pagination-counter-mode` | Define a forma como a paginação irá se comportar. | `"auto" \| "hidden" \| "show"` | `'auto'` | | `recordDateFormat` | `record-date-format` | Formato dos campos data dos registros. | `RECORD_DATE_FORMAT.DD_MM_YYYY \| RECORD_DATE_FORMAT.ISO` | `RECORD_DATE_FORMAT.DD_MM_YYYY` | | `records` | -- | Registros a serem exibidos na grade. | `Record[]` | `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` | | `useSearchColumn` | `use-search-column` | Define se a grade deve exibir um buscador de coluna com uso do Ctrl+F | `boolean` | `true` | ## Methods ### `addColumnMenuItem(label: string, name: string, action: Function, icon: HTMLElement | string) => Promise` Adiciona item de menu nas colunas. #### 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` --- ### `filterColumns(search: string) => Promise>` Usa um argumento para filtrar as colunas por label #### Returns Type: `Promise` --- ### `getDataUnit() => Promise` Obtém o DataUnit da grade. #### 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` --- ### `refresh() => Promise` Recarrega os registros da grade. #### Returns Type: `Promise` --- ### `removeCustomValueFormatter(columnName: string) => Promise` Remove o formatador de valores de uma coluna da grid. #### Returns Type: `Promise` --- ### `setFocus() => Promise` Atribui o foco para a grade. #### Returns Type: `Promise` ## Dependencies ### Depends on - [ez-grid](../ez-grid) ### Graph ```mermaid graph TD; ez-grid-view --> ez-grid 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 style ez-grid-view fill:#f9f,stroke:#333,stroke-width:4px ``` ----------------------------------------------