Table

Props

columns Object obrigatório

Objeto de configurações das colunas da tabela, onde a chave especifica o id do input 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;
    }
  }
}

dataRows Array

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

default: []

dataRowIdField String

Nome do atributo para o campo id da linha da tabela.

default: 'id'

count Number

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

default: 0

resource String

Nome do objeto de recursos i18n e l10n.

default: null

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

// Nas props do componente
resource: 'product',
columns: {
  name:  {...},
  price: {...},
  ...
}

sortConfigs Object

Objeto de configuração da ordenação das colunas das tabelas.

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}'

sortData Object

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

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

default: {}

actionButtons Object

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

selectable Boolean

Caso false, desabilita a seleção de linhas na tabela.

default: false

selectedRowIdsParam String

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

default: 'rowIds'

selectedRowIds Array

Lista de ids das linhas selecionadas.

default: []

allSelected Boolean

Estado para indicar se todas as linhas da tabela estão selecionadas.

default: false

allSelectedData Array

Important

Verificar a documentação desta prop.

emptyMessage String

Mensagem apresentada quando a tabela não possui linhas. Aceita uma chave i18n como valor.

default: 'table.emptyResult'

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';
}

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;
}

forceShowSelectAllButton Boolean

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

default: false

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.
}

rowHref String

URL utilizada para quando uma linha da tabela for clicada.

default: null

onSort Function

Função callback executado ao ordenar linhas da tabela.

default: function (sortData) {}

onSelect Function

Função callback executado ao selectionar linhas da tabela.

default: function (event, selectedRowIds) {}

onRemoveSelection Function

Função callback executado ao remover seleção de linhas.

default: function (event) {}

onSelectAll Function

Função callback executado ao selecionar todas as linhas.

default: function (event) {}