Vues
Affichez une table dans plusieurs vues sans dupliquer ses enregistrements. Les exemples utilisent une table existante : créez les champs de date et de regroupement nécessaires, puis remplacez les ID.
Une table, plusieurs vues
Changez le statut du cours Sheets, puis changez de vue. Chaque vue utilise les mêmes enregistrements.
Exemple de parcours · Septembre 2026
| Cours | Statut | Date |
|---|---|---|
| Sheets | Prévu | |
| Docs | En cours | |
| Slides | Terminé | |
| Bases | En cours |
Enregistrements partagés: 4 · Sheets: Prévu
Créer des vues
const grid = table.createView('All records', univerAPI.Enum.BaseViewType.Grid)const kanban = table.createView( 'By status', univerAPI.Enum.BaseViewType.Kanban, { view: { config: { groupFieldId: 'status' }, }, },)Activer une vue dans l’interface utilisateur
const baseUI = univerAPI.getBaseUI()await baseUI.activateTable(table.getId())await baseUI.activateView(kanban.getId())Configurer les règles d’une vue
kanban.setGroup([ { fieldId: 'status', direction: univerAPI.Enum.BaseSortDirection.ASC },])kanban.setFilter({ conjunction: univerAPI.Enum.BaseFilterConjunction.AND, conditions: [ { fieldId: 'archived', operator: univerAPI.Enum.BaseFilterOperator.IS, operand: false }, ],})Utilisez les paramètres de champ propres à chaque vue pour définir la visibilité, la largeur et l’affichage des cartes sans modifier le schéma de la table sous-jacente.
Dates du calendrier
Le calendrier exige une date de début ; le Gantt exige aussi une date de fin et gère jours ouvrés, progression et dépendances. Gallery utilise card pour le titre et les champs affichés. Les synthèses et graphiques Pivot nécessitent le plugin de tableau de bord.
const calendar = table.createView('Schedule', univerAPI.Enum.BaseViewType.Calendar, { view: { config: { startDateFieldId: 'startDate', endDateFieldId: 'endDate', mode: 'month' }, },})Tri et affichage des champs
Les filtres, le tri, le regroupement et l’affichage appartiennent à la vue courante et ne suppriment aucun enregistrement ni champ.
grid.setSort([{ fieldId: 'priority', direction: univerAPI.Enum.BaseSortDirection.DESC }])grid.setFieldVisible('internalNotes', false)grid.setFieldWidth('title', 280)Coloration conditionnelle
Mettez en évidence les enregistrements dont le score dépasse 80 :
const score = table.addField('Score', univerAPI.Enum.BaseFieldType.Number)grid.setConditionalColorRules([{ id: 'high-score', target: univerAPI.Enum.BaseConditionalColorTarget.ROW, fieldId: score.getId(), operator: univerAPI.Enum.BaseConditionalColorOperator.GREATER_THAN, operand: 80, color: '#dcfce7',}])Les règles suivent l’ordre de priorité du tableau. Passez [] pour les effacer. Les cibles cellule, ligne et colonne sont prises en charge ; la coloration des colonnes est inconditionnelle.
Que pensez-vous de ce guide ?