Vistas
Muestre una tabla en varias vistas sin duplicar registros. Los ejemplos usan una table existente: cree los campos de fecha y agrupación necesarios y sustituya los ID.
Una tabla, varias vistas
Cambia el estado del curso Sheets y después la vista. Todas usan los mismos registros.
Plan de estudio de ejemplo · Septiembre de 2026
| Curso | Estado | Fecha |
|---|---|---|
| Sheets | Pendiente | |
| Docs | En curso | |
| Slides | Completado | |
| Bases | En curso |
Registros compartidos: 4 · Sheets: Pendiente
Crear vistas
const grid = table.createView('All records', univerAPI.Enum.BaseViewType.Grid)const kanban = table.createView( 'By status', univerAPI.Enum.BaseViewType.Kanban, { view: { config: { groupFieldId: 'status' }, }, },)Activar una vista en la interfaz de usuario
const baseUI = univerAPI.getBaseUI()await baseUI.activateTable(table.getId())await baseUI.activateView(kanban.getId())Configurar reglas de vista
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 }, ],})Utilizar configuraciones de campo a nivel de vista para visibilidad, anchos y visualización de tarjetas sin cambiar el esquema de la tabla subyacente.
Fechas del calendario
El calendario necesita una fecha de inicio; Gantt también necesita una fecha de fin y admite días laborables, progreso y dependencias. Gallery usa card para el título y los campos mostrados. Los resúmenes y gráficos Pivot requieren el plugin de paneles.
const calendar = table.createView('Schedule', univerAPI.Enum.BaseViewType.Calendar, { view: { config: { startDateFieldId: 'startDate', endDateFieldId: 'endDate', mode: 'month' }, },})Orden y presentación de campos
Los filtros, el orden, la agrupación y la presentación pertenecen a la vista actual y no eliminan registros ni campos originales.
grid.setSort([{ fieldId: 'priority', direction: univerAPI.Enum.BaseSortDirection.DESC }])grid.setFieldVisible('internalNotes', false)grid.setFieldWidth('title', 280)Colores condicionales
Destaque los registros con puntuaciones superiores a 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',}])Las reglas siguen la prioridad del array. Pase [] para borrarlas. Se admiten celdas, filas y columnas; el color de columna se aplica sin condición.
¿Cómo es esta guía?