Modos de Visualização

Visão Geral

Cada coleção pode ser exibida em quatro modos de visualização:

• Lista — Visualização de lista simples e limpa (o padrão clássico do CMS)
• Tabela — Grade estilo planilha com edição inline, ordenação, filtragem
• Cartões — Grade de cartões para conteúdo visual (imagens, pré-visualizações)
• Kanban — Quadro de arrastar e soltar agrupado por uma propriedade enum

Configuração

import { defineCollection } from "@rebasepro/admin-types";
const productsCollection = defineCollection({
    slug: "products",
    properties: { /* … */ },
    name: "Products",
    table: "products",
    // ...
    admin: {
        defaultViewMode: "table",            // Default view
        enabledViews: ["list", "table", "kanban"],    // Available views
        kanban: {
            columnProperty: "status",        // Enum property for columns
            orderProperty: "sort_order"      // Property for drag-and-drop ordering
        }
    }
});

Visualização em Lista

A visualização em lista é o modo de visualização padrão clássico e limpo do CMS, mostrando entidades em um formato de lista direta, sem a densidade de uma planilha.

Visualização em Tabela

A visualização padrão é uma planilha virtualizada de alto desempenho com:

• Edição inline — Clique em qualquer célula para editar no local
• Redimensionamento de colunas — Arraste os cabeçalhos das colunas
• Reordenação de colunas — Arraste para reorganizar
• Ordenação — Clique nos cabeçalhos das colunas
• Pesquisa de texto — Pesquisa de texto completo em campos de string
• Filtragem — Filtros por coluna
• Seleção múltipla — Selecione entidades para ações em massa

Altura da Linha

Controle a altura da linha com defaultSize:

Tamanho	Pixels	Melhor para
"xs"	40	Tabelas de dados densos
"s"	54	Padrão
"m"	80	Com miniaturas de imagem
"l"	120	Cartões com pré-visualizações
"xl"	260	Pré-visualizações de conteúdo rico

Visualização Kanban

Configure um quadro Kanban especificando qual propriedade enum usar como colunas:

import { defineCollection } from "@rebasepro/admin-types";
const tasksCollection = defineCollection({
    slug: "tasks",
    name: "Tasks",
    table: "tasks",
    properties: {
        title: { type: "string", name: "Title" },
        status: {
            type: "string",
            name: "Status",
            enum: [
                { id: "backlog", label: "Backlog", color: "gray" },
                { id: "in_progress", label: "In Progress", color: "blue" },
                { id: "review", label: "Review", color: "orange" },
                { id: "done", label: "Done", color: "green" }
            ]
        },
        sort_order: { type: "number", name: "Sort Order" }
    },
    admin: {
        defaultViewMode: "kanban",
        kanban: {
            columnProperty: "status",
            orderProperty: "sort_order"
        }
    }
});

Arrastar e soltar entre colunas atualiza automaticamente o campo enum e a ordem de classificação.

Visualização em Cartões

Os cartões exibem entidades como cartões visuais — úteis para conteúdo com muitas imagens:

import { defineCollection } from "@rebasepro/admin-types";
const articlesCollection = defineCollection({
    slug: "articles",
    name: "Articles",
    table: "articles",
    properties: {
        title: { type: "string", name: "Title" },
        cover: {
            type: "string",
            name: "Cover Image",
            storage: { storagePath: "covers", acceptedFiles: ["image/*"] }
        }
    },
    admin: {
        defaultViewMode: "cards"
    }
});

Próximos Passos

• Visualizações de Entidade — Abas personalizadas em formulários de entidade
• Ações de Entidade — Ações de entidade personalizadas

---