Padrão de Ordenação de Colunas da Tabela

Sobre

Este padrão estabelece a sequência recomendada de colunas para tabelas de entidades no sistema. Uma organização padronizada das colunas reduz o tempo de busca, diminui erros, aumenta a previsibilidade e melhora a experiência de navegação dos usuários em listas e tabelas.

Contexto & Problema

Usuários enfrentam inconsistências e confusão quando a disposição das colunas varia entre listas semelhantes. Manter uma ordem fixa e intuitiva das colunas acelera a localização de informações, facilita o entendimento dos dados exibidos e ajuda na execução de ações relacionadas.

Quando Usar

Em qualquer tabela ou grade de entidades apresentando informações detalhadas para busca, filtragem ou gestão de dados
Especialmente valioso em listagens administrativas, dashboards e visões de gerenciamento

Componentes Utilizados

DataTable (Console Kit Blocks)

Exemplo Visual

Exemplo de ordenação padrão de colunas

Edge Applications

Sequência de Colunas

ID - Identificador único
Name - Nome da entidade
Description - Descrição (quando aplicável)
[Other Columns] - Colunas específicas da entidade
Last Editor - Último editor
Last Modified - Data da última modificação
Status - Estado atual
Actions - Ações disponíveis

Implementação

const getColumns = computed(() => {
  return [
    {
      field: 'id',
      header: 'ID',
      filterPath: 'id',
      sortField: 'id'
    },
    {
      field: 'name',
      header: 'Name',
      filterPath: 'name.text',
      type: 'component',
      component: (columnData) => {
        return columnBuilder({
          data: columnData,
          columnAppearance: 'text-with-tag'
        })
      }
    },
    {
      field: 'domains',
      header: 'Domains',
      filterPath: 'domains',
      disableSort: true,
      type: 'component',
      component: (columnData) => {
        return columnBuilder({
          data: columnData,
          columnAppearance: 'expand-column'
        })
      }
    },
    {
      field: 'workloadHostname',
      header: domainNameColumn.value, // "Workload Domain"
      filterPath: 'workloadHostname',
      disableSort: true,
      type: 'component',
      component: (columnData) => {
        return columnBuilder({
          data: columnData,
          columnAppearance: 'text-with-clipboard',
          dependencies: {
            copyContentService: Helpers.clipboardWrite
          }
        })
      }
    },
    {
      field: 'infrastructure',
      header: 'Infrastructure',
      filterPath: 'infrastructure',
      sortField: 'infrastructure'
    },
    {
      field: 'active',
      sortField: 'active',
      header: 'Status',
      filterPath: 'active',
      type: 'component',
      component: (columnData) =>
        columnBuilder({
          data: columnData,
          columnAppearance: 'tag'
        })
    },
    {
      field: 'lastModified',
      header: 'Last Modified',
      filterPath: 'lastModified',
      sortField: 'lastModified'
    },
    {
      field: 'lastEditor',
      header: 'Last Editor',
      filterPath: 'lastEditor',
      sortField: 'lastEditor'
    }
  ]
})

Boas Práticas

Anti-padrões

Acessibilidade

Assegure que a ordem de leitura assistida siga a mesma ordem visual das colunas
Utilize <th scope="col"> em cabeçalhos de tabela para leitores de tela
Garanta contraste adequado nos textos das colunas, principalmente para informações críticas