Ver no GitHub

Opções de Coluna do Bootstrap Table

A API de opções de coluna do Bootstrap Table.

Nesta página

As opções de coluna são definidas em jQuery.fn.bootstrapTable.columnDefaults.

Nota: Os nomes das opções abaixo (por exemplo, align, checkbox, class) são nomes de propriedades exatos a serem usados ao definir colunas no array columns.

Por exemplo:

$('#table').bootstrapTable({
  columns: [
    {
      field: 'id',
      title: 'ID',
      align: 'center'
    }
  ]
})

align

  • Atributo: data-align

  • Tipo: String

  • Detalhe:

    Indica como alinhar os dados da coluna. 'left' (esquerda), 'right' (direita), 'center' (centro) podem ser usados.

  • Padrão: undefined

  • Exemplo: Alinhando Colunas

cardVisible

  • Atributo: data-card-visible

  • Tipo: Boolean

  • Detalhe:

    Defina false para ocultar o item da coluna no estado de visualização de cartão.

  • Padrão: true

  • Exemplo: Card Visible

cellStyle

  • Atributo: data-cell-style

  • Tipo: Function

  • Detalhe:

    A função formatadora de estilo de célula, recebe quatro parâmetros:

    • value: o valor do campo.
    • row: os dados do registro da linha.
    • index: o índice da linha.
    • field: o campo da linha.

    Suporta classes ou css.

  • Padrão: undefined

  • Exemplo: Estilo de Célula

checkbox

  • Atributo: data-checkbox

  • Tipo: Boolean

  • Detalhe:

    Defina true para mostrar uma caixa de seleção. A coluna da caixa de seleção tem largura fixa.

    Se um valor for fornecido, a caixa de seleção será automaticamente marcada. Também é possível marcar/desmarcar a caixa de seleção usando um formatador (retorne true para marcar, retorne false para desmarcar).

  • Padrão: false

  • Exemplo: Checkbox de Coluna

checkboxEnabled

class

  • Atributo: class | data-class

  • Tipo: String

  • Detalhe:

    O nome da classe da coluna.

  • Padrão: undefined

  • Exemplo: Classe de Coluna

clickToSelect

  • Atributo: data-click-to-select

  • Tipo: Boolean

  • Detalhe:

    Defina true para selecionar a caixa de seleção ou rádio ao clicar nas linhas.

  • Padrão: true

  • Exemplo: Clique para Selecionar

colspan

  • Atributo: colspan | data-colspan

  • Tipo: Number

  • Detalhe:

    Indica quantas colunas uma célula deve ocupar.

  • Padrão: undefined

  • Exemplo: Rowspan Colspan

detailFormatter

  • Atributo: data-detail-formatter

  • Tipo: Function

  • Detalhe:

    Formate sua visualização de detalhes quando detailView e detailViewByClick estiverem definidos como true. Retorne uma String e ela será anexada à célula de visualização de detalhes, opcionalmente renderize o elemento diretamente usando o terceiro parâmetro, que é um elemento jQuery da célula de destino.

    O fallback é o detail-formatter da tabela.

  • Padrão: function(index, row, $element) { return '' }

  • Exemplo: Formatador de Detalhes

escape

  • Atributo: data-escape

  • Tipo: Boolean

  • Detalhe:

    Escapa uma string para inserção em HTML, substituindo os caracteres &, <, >, ", ` e '.

  • Padrão: undefined

  • Exemplo: Escape de Coluna

events

  • Atributo: data-events

  • Tipo: Object

  • Detalhe:

    O ouvinte de eventos da célula, quando você usa a função formatadora, recebe quatro parâmetros:

    • event: o evento.
    • value: o valor do campo.
    • row: os dados do registro da linha.
    • index: o índice da linha.

    Código de exemplo:

    <th .. data-events="operateEvent">
var operateEvents = {
  'click .like': function (e, value, row, index) {}
}

  • Padrão: undefined

  • Exemplo: Eventos de Coluna

falign

  • Atributo: data-falign

  • Tipo: String

  • Detalhe:

    Indica como alinhar o rodapé da tabela. 'left' (esquerda), 'right' (direita), 'center' (centro) podem ser usados.

  • Padrão: undefined

  • Exemplo: Alinhando Rodapé

field

  • Atributo: data-field

  • Tipo: String

  • Detalhe:

    O nome do campo da coluna. Este campo deve ser único, caso contrário, podem ocorrer problemas desconhecidos.

  • Padrão: undefined

  • Exemplo: Campo de Coluna

footerFormatter

  • Atributo: data-footer-formatter

  • Tipo: Function

  • Detalhe:

    O contexto (this) é o Objeto da coluna.

    A função recebe dois parâmetros:

    • data: Array de todas as linhas de dados.
    • value: Se os dados do rodapé estiverem definidos, o valor da coluna do rodapé.

    O tipo de dados de retorno esperado é jQuery, String ou HTMLElement. Outros tipos serão forçados ao tipo String.

    Se você buscar dados de um servidor e definir o valor do rodapé a partir da resposta do servidor, use a Opção footerField.

  • Padrão: undefined

  • Exemplo: Formatador de Rodapé

footerStyle

  • Atributo: data-footer-style

  • Tipo: Function

  • Detalhe:

    A função formatadora de estilo de rodapé, recebe um parâmetro:

    • column: o objeto da coluna.

    Suporta classes ou css. Exemplo de uso:

    function footerStyle(column) {
  return {
    css: { 'font-weight': 'normal' },
    classes: 'my-class'
  }
}

  • Padrão: {}

  • Exemplo: Estilo de Rodapé

formatter

  • Atributo: data-formatter

  • Tipo: Function

  • Detalhe:

    O contexto (this) é o Objeto da coluna.

    A função formatadora de célula, recebe quatro parâmetros:

    • value: o valor do campo.
    • row: os dados do registro da linha.
    • index: o índice da linha.
    • field: o campo da linha.

    O tipo de dados de retorno esperado é jQuery, String ou HTMLElement. Outros tipos serão forçados ao tipo String.

  • Padrão: undefined

  • Exemplo: Formatador de Coluna

halign

  • Atributo: data-halign

  • Tipo: String

  • Detalhe:

    Indica como alinhar o cabeçalho da tabela. 'left' (esquerda), 'right' (direita), 'center' (centro) podem ser usados.

  • Padrão: undefined

  • Exemplo: Alinhando Colunas

order

  • Atributo: data-order

  • Tipo: String

  • Detalhe:

    A ordem de classificação padrão, só pode ser 'asc' (crescente) ou 'desc' (decrescente).

  • Padrão: 'asc'

  • Exemplo: Ordem de Nome de Classificação

radio

  • Atributo: data-radio

  • Tipo: Boolean

  • Detalhe:

    Defina true para mostrar um rádio. A coluna do rádio tem largura fixa.

    Se um valor for fornecido, a caixa de seleção será automaticamente marcada. Também é possível marcar/desmarcar o rádio usando um formatador (retorne true para marcar, retorne false para desmarcar).

  • Padrão: false

  • Exemplo: Rádio de Coluna

rowspan

  • Atributo: rowspan | data-rowspan

  • Tipo: Number

  • Detalhe:

    Indica quantas linhas uma célula deve ocupar.

  • Padrão: undefined

  • Exemplo: Rowspan Colspan

searchable

  • Atributo: data-searchable

  • Tipo: Boolean

  • Detalhe:

    Defina true para buscar dados desta coluna.

  • Padrão: true

  • Exemplo: Coluna Buscável

searchFormatter

  • Atributo: data-search-formatter

  • Tipo: Boolean

  • Detalhe:

    Defina true para buscar usando dados formatados.

  • Padrão: true

  • Exemplo: Formatador de Busca

searchHighlightFormatter

showSelectTitle

  • Atributo: data-show-select-title

  • Tipo: Boolean

  • Detalhe:

    Defina true para mostrar o título da coluna com opção ‘radio’ ou ‘singleSelect’ ‘checkbox’.

  • Padrão: false

  • Exemplo: Mostrar Título de Seleção

sortable

  • Atributo: data-sortable

  • Tipo: Boolean

  • Detalhe:

    Defina true para permitir que a coluna seja classificada.

  • Padrão: false

  • Exemplo: Coluna Classificável

sorter

  • Atributo: data-sorter

  • Tipo: Function

  • Detalhe:

    A função de classificação de campo personalizada que é usada para fazer classificação local, recebe quatro parâmetros:

    • fieldA: o primeiro valor do campo.
    • fieldB: o segundo valor do campo.
    • rowA: a primeira linha.
    • rowB: a segunda linha.

    Valores de retorno esperados: -1, 0, 1.

  • Padrão: undefined

  • Exemplo: Classificador de Coluna

sortName

  • Atributo: data-sort-name

  • Tipo: String

  • Detalhe:

    Fornece um sort-name personalizável, não o sort-name padrão no cabeçalho, nem o nome do campo da coluna. Por exemplo, uma coluna pode exibir o valor do fieldName ‘html’ como <b><span style="color:red">abc</span></b>, mas um fieldName para classificar é ‘content’ com o valor de 'abc'.

  • Padrão: undefined

  • Exemplo: Ordem de Nome de Classificação

switchable

  • Atributo: data-switchable

  • Tipo: Boolean

  • Detalhe:

    Defina false para desabilitar a alternância do item das colunas.

  • Padrão: true

  • Exemplo: Coluna Alternável

switchableLabel

  • Atributo: data-switchable-label

  • Tipo: String

  • Detalhe:

    O rótulo da coluna alternável no dropdown. Se não especificado, usa o título da coluna.

  • Padrão: undefined

  • Exemplo: Coluna Alternável

title

  • Atributo: data-title

  • Tipo: String

  • Detalhe:

    O texto do título da coluna.

  • Padrão: undefined

  • Exemplo: Título de Coluna

titleTooltip

  • Atributo: data-title-tooltip

  • Tipo: String

  • Detalhe:

    O texto do tooltip do título da coluna. O valor desta opção também será aplicado ao atributo HTML title.

  • Padrão: undefined

  • Exemplo: Tooltip de Título

valign

  • Atributo: data-valign

  • Tipo: String

  • Detalhe:

    Indica como alinhar os dados da célula. 'top' (superior), 'middle' (meio), 'bottom' (inferior) podem ser usados.

  • Padrão: undefined

  • Exemplo: Alinhando Colunas

visible

  • Atributo: data-visible

  • Tipo: Boolean

  • Detalhe:

    Defina false para ocultar o item das colunas.

  • Padrão: true

  • Exemplo: Coluna Visível

width

  • Atributo: data-width

  • Tipo: Number

  • Detalhe:

    A largura da coluna. Se não definida, a largura se expandirá automaticamente para se ajustar ao seu conteúdo. No entanto, se a tabela for responsiva e dimensionada muito pequena, esta 'width' pode ser ignorada (use min/max-width via classe ou similar). A unidade padrão usada é ‘px’. Use widthUnit para alterá-la!

  • Padrão: undefined

  • Exemplo: Largura de Coluna

widthUnit

  • Atributo: data-width-unit

  • Tipo: String

  • Detalhe:

    Define a unidade que é usada para a opção width.

  • Padrão: px

  • Exemplo: Unidade de Largura