# Vistas

- Human documentation: [https://docs.univer.ai/es-ES/guides/bases/model/views](https://docs.univer.ai/es-ES/guides/bases/model/views)

- Agent Markdown: [https://docs.univer.ai/es-ES/guides/bases/model/views.md](https://docs.univer.ai/es-ES/guides/bases/model/views.md)

- Requested language: `es-ES`

- Content language: `es-ES`

- Documentation version: `1.2.0`

- Source: [bases/model/views.es-ES.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/bases/model/views.es-ES.mdx)

---

Las vistas describen cómo se proyecta una tabla para los usuarios. Una vista puede ocultar o reordenar campos, filtrar registros, ordenar registros, agrupar registros y definir configuraciones específicas de tipo para representación de cuadrícula, kanban, calendario, Gantt o galería.

## Ver instantánea

| Propiedad      | Tipo                                  | Descripción                                                |                                   |
| -------------- | ------------------------------------- | ---------------------------------------------------------- | --------------------------------- |
| id             | `string`                              | Id. de la vista.                                           |                                   |
| tableId        | `string`                              | Id. de la tabla propietaria.                               |                                   |
| name           | `string`                              | Nombre de la vista.                                        |                                   |
| type           | `BaseViewType`                        | `grid`, `kanban`, `calendar`, `gantt`, `gallery`, `pivot`. |                                   |
| fieldOrder?    | `string[]`                            | Orden de los campos en esta vista.                         |                                   |
| fieldSettings? | `Record\<string, IViewFieldSetting\>` | Configuración de visibilidad, ancho y tarjeta por campo.   |                                   |
| filter?        | \`IFilterConfig                       | null\`                                                     | Configuración de filtro de vista. |
| sort?          | `ISortConfig[]`                       | Reglas de clasificación.                                   |                                   |
| group?         | `IGroupConfig[]`                      | Reglas de grupo.                                           |                                   |
| config         | `ViewSpecificConfig`                  | Configuración de vista específica del tipo.                |                                   |

## Tipos de vista

| Tipo       | Usar case                                                                      |
| ---------- | ------------------------------------------------------------------------------ |
| `grid`     | Edición de tablas similar a una hoja de cálculo.                               |
| `kanban`   | Tarjetas agrupadas por un campo de selección, persona, grupo, texto o fecha.   |
| `calendar` | Registros ubicados por campos de fecha.                                        |
| `gantt`    | Planificación de línea de tiempo con campos de fecha de inicio y finalización. |
| `gallery`  | Diseño de tarjeta para registros visuales o con mucho contenido.               |
| `pivot`    | Resúmenes y gráficos mediante el plugin de paneles.                            |

## Crear una vista

```ts
const view = table.createView('Kanban', univerAPI.Enum.BaseViewType.Kanban)
```

## Configurar filtrado y clasificación

```ts
view.setFilter({
  conjunction: univerAPI.Enum.BaseFilterConjunction.AND,
  conditions: [
    {
      fieldId: 'status',
      operator: univerAPI.Enum.BaseFilterOperator.IS,
      operand: 'In progress',
    },
  ],
})

view.setSort([
  { fieldId: 'dueDate', direction: univerAPI.Enum.BaseSortDirection.ASC },
])
```

## Visibilidad y ancho de campo

```ts
view.setFieldVisible('internalNotes', false)
view.setFieldWidth('title', 280)
```

[Paneles y vistas dinámicas](https://docs.univer.ai/es-ES/guides/bases/features/dashboard.md)