Grid

Componente grid para apresentação de dados tabulares com suporte a filtragem e ordenação, totalmente configurável e customizável. Suporta lista de itens ou carregamento por requisição ao servidor via ajax, ações por item ou coleção de itens, internacionalização e localização de nomes das colunas e temas utilizando materialize.

Propriedades do Grid

Antes de navegar entre as propriedades, é bom saber que as seguintes props são obrigatórias:

Dados

columns Object obrigatório

Objeto de configurações das colunas da tabela, onde a chave mapeia um campo do dataRows, e o valor são as props do componente TableHeader.

columns: {
    title: {
      name:  'title',
      label: 'Título',
      format: 'text',
      sortable: true,
      sortDirection: 'asc',
      sortFieldName: 'name',
      onSort: function (sortData) {
        return true;
      }
    }
}

countParam String

Nome do parâmetro do objeto de dados recebido na resposta do servidor que contém a quantidade total de itens.

default: 'count'

data Object

Objeto contendo a lista de dados para inicializar a tabela e a quantidade total de itens. Caso eagerLoad seja true, os dados são requisitados ao servidor e data é ignorado.

data: {
  count: 10,
  dataRows: [
    { name: 'Jonh Doe', age: '21', ...},
    { name; 'Elliot Andersen', age: '22', ...}
  ]
}
count Number

Número total de itens no servidor, utilizado para referência de paginação.

dataRows Array

Lista de dados da tabela. Veja dataRowsParam para mapear o nome do parâmetro recebido do servidor.

default: []
default: 0

dataRowIdField String

Nome da propriedade na lista de dados que contém os ids dos mesmos.

default: 'id'

dataRowsParam String

Nome do parâmetro do objeto de dados recebido na resposta do servidor que contém as linhas da tabela.

default: 'data'

eagerLoad Boolean

Caso true, o componente requisita os dados ao servidor no momento da inicialização. Caso contrário, inicializa com os valores provenientes de data.

default: false

selectedRowIdsParam String

Nome do parâmetro para envio dos ids das linhas selecionadas.

default: 'rowIds'

url String obrigatório

Endereço URL que serve os dados para a tabela.

Filtro

filter Object

Objeto de configuração do filtro da tabela. Veja a documentação de GridFilter para a definição completa dos props de filter.

default: {}
filter: {
  resource: 'q',
  inputs: {
    name:  { label: 'Nome'  },
    price: { label: 'Preço' },
    ...
  },
}

rowSelectableFilter Function

Função para filtrar linhas habilitadas a serem selecionadas.

default: null
function rowSelectableFilter(rowData) {
  // selecionar somente linhas pares
  return rowData.id % 2 == 0;
}

Funções

onClickRow Function

Função callback executado ao clicar em uma linha da tabela.

default: null
function onClickRow(event, rowData) {
  // lógica executada ao clicar em uma linha.
}

onFilterSubmit Function

Função que será chamada sempre que o filtro for submetido.

default: function(event, postData) { }

onLoadError Function

Função callback executado em caso de erro no carregamento dos dados.

default: null
function onLoadError(xhr, status, error) {
  // logica em caso de erro.
}

onLoadSuccess Function

Função callback executado ao carregar dados com sucesso.

default: null
function onLoadSuccess() {
  // lógica ao carregar dados.
}

onSelectAllRows Function

Função que será chamada quando todas coluna for selecionada.

default: function(event) { }

onSelectDataRow Function

Função que será chamada quando uma coluna for selecionada.

default: function(event, selectedRowIds) { }

onRemoveSelection Function

Função que será chamada quando uma coluna for desselecionada.

default: function(event) { }

I18n

emptyMessage String

Chave do recurso a ser utilizado quando não tiver nenhum dado na tabela.

default: 'table.emptyResult'

resource String

Nome de recursos i18n e l10n. Quando adicionado, busca o valor do recurso indicado.

default: null
Exemplo
resource: 'product'

// No arquivo de recursos
Realize.i18n.registerLocale({
  resources: {
    defaults: {
      fields: {
        price: 'Valor', // Esse recurso será ignorado.
        created_at: 'Criado em',
        active: 'Ativo'
      }
    },
    product: {
      fields: {
        name: 'Nome',
        price: 'Preço', // Será utilizado este recurso.
        manufacturer_name: 'Fabricante',
        barcode: 'Código de Barras',
        group_name: 'Grupo',
        subgroup_name: 'Subgrupo'
      }
    }
  }
}, 'pt-BR');

Ordenação

sortConfigs Object

Objeto de configuração da ordenação das colunas das tabelas. Quando esse objeto de configurações é atribuido, sobrescreve-se as configurações globais.

default: {}
sortConfigs: {
  param: 's',
  valueFormat: '%{field} %{direction}'
}
param String

Nome do parâmetro hash de ordenação acessado no backend.

default: 's'
valueFormat String

Formato da string de ordenação enviada como parâmetro de ordenação ao servidor. Pode-se utilizar as variáveis %{field} e %{direction} para substituir o id do campo e a direção atual do campo, respectivamente.

default: '%{field} %{direction}'
directionParam String

Nome do parâmetro na query string que define qual será a direção da ordenação.

default: 's_dir'

sortData Object

Objeto de definição de ordenação padrão da tabela.

sortData: {
  field: 'name',
  direction: 'asc'
}
default: {}

Paginação

pagination Boolean

Caso false, desabilita a paginação dos dados.

default: true

paginationConfigs Object

Objeto de configuração da barra de paginação. Quando esse objeto de configurações é atribuido, sobrescreve-se as configurações globais.

default: {}
paginationConfigs: {
  param: 'p',
  perPage: 10,
  window: 4
}
param String

Nome do parâmetro de paginação acessado pelo servidor.

default: 'p'

paginationOnTop Boolean

Caso false, desabilita a barra de paginação no topo.

default: true

perPageOptions Array

É utilizado para montar o select de opções da quantidade de itens exibidos por página (altera o valor do perPage).

default: [
    { name: '10', value: 10 },
    { name: '20', value: 20 },
    { name: '50', value: 50 }
]

Tabela

actionButtons Object

Objeto de definição dos botões de ações de linha e da tabela. Veja GridActionsMixin.

clearThemeTable Boolean

Caso true, desabilita tema utilizado na tabela.

default: false

customTableHeader String

String com fragmento html para inserir cabeçalho customizado.

default: null

forceShowSelectAllButton Boolean

Caso true e rowSelectableFilter esteja definido, força a apresentação da ação de selecionar todos os itens.

default: false

isLoading Boolean

Caso false, informa que o componente ainda está sendo carregado.

default: false

selectable String

Espera os seguintes valores: multiple, none ou one.
Caso none, desabilita a seleção de linhas na tabela.

default: 'multiple'

tableClassName String

Classe css do elemento da tabela.

default: undefined

tableRowCssClass Function

Função para configuração da classe css da linha.

default: null
function (rowData) {
  // estilizar linhas pares e ímpares
  return rowData.id % 2 == 0 ? 'par' : 'impar';
}