Vues
Les vues décrivent la manière dont une table est présentée aux utilisateurs. Une vue peut masquer ou réorganiser des champs, filtrer, trier et regrouper des enregistrements, ainsi que définir une configuration propre à son type pour un rendu sous forme de grille, de kanban, de calendrier, de diagramme de Gantt ou de galerie.
Instantané d’une vue
| Propriété | Type | Description |
|---|---|---|
| id | string | Identifiant de la vue. |
| tableId | string | Identifiant de la table à laquelle appartient la vue. |
| name | string | Nom de la vue. |
| type | BaseViewType | grid, kanban, calendar, gantt, gallery, pivot. |
| fieldOrder? | string[] | Ordre des champs dans cette vue. |
| fieldSettings? | Record\<string, IViewFieldSetting\> | Visibilité, largeur et paramètres de carte propres à chaque champ. |
| filter? | `IFilterConfig | null` |
| sort? | ISortConfig[] | Règles de tri. |
| group? | IGroupConfig[] | Règles de regroupement. |
| config | ViewSpecificConfig | Configuration propre au type de vue. |
Types de vues
| Type | Cas d’usage |
|---|---|
grid | Modification de tables comme dans une feuille de calcul. |
kanban | Cartes regroupées selon un champ de sélection, de personne, de groupe, de texte ou de date. |
calendar | Enregistrements positionnés selon des champs de date. |
gantt | Planification chronologique à l’aide de champs de date de début et de fin. |
gallery | Disposition en cartes pour les enregistrements visuels ou riches en contenu. |
pivot | Agrégations et graphiques via le plugin de tableau de bord. |
Créer une vue
TypeScript
const view = table.createView('Kanban', univerAPI.Enum.BaseViewType.Kanban)Configurer le filtrage et le tri
TypeScript
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 },])Visibilité et largeur des champs
TypeScript
view.setFieldVisible('internalNotes', false)view.setFieldWidth('title', 280)Que pensez-vous de ce guide ?