Flet: DataTable

Outro controle de Layout

Controle DataTable

DataTable é um controle usado para dispor dados em forma tabular. Ele é composto de um cabeçalho definido na propriedade columns que recebe uma lista de flet.DataColumn(), em geral contendo um controle de texto. Ele também pode conter ícones ou uma linha (Row) com ícones e texto. As colunas podem ser definidas como texto ou numéricas e exibir botão de seleção e ordenamento. As linhas de dados são constituídas de flet.DataRow(), por sua vez preenchidas com flet.DataCell()

Um exemplo curto de DataTable é mostrado abaixo.

import flet as ft

def main(page: ft.Page):

    def tit(texto):
        return ft.DataColumn(ft.Text(texto))

    def cel(texto):
        return ft.DataCell(ft.Text(texto))

    cabecalho=[tit("Título 1"), tit("Título 2"), tit("Título 3")]

    linha1=ft.DataRow(cells=[cel("A-1,1"),  cel("A-1,2"), cel("A-1,3")])
    linha2=ft.DataRow(cells=[cel("A-2,1"),  cel("A-2,2"), cel("A-2,3")])
    linha3=ft.DataRow(cells=[cel("A-3,1"),  cel("A-3,2"), cel("A-3,3")])

    linhas = [linha1, linha2, linha3]
    tabela=ft.DataTable(columns=cabecalho, rows=linhas)
    page.add(tabela)

ft.app(target=main)
Figura 1: Representação do código de DataTable e com seus controles internos.

Propriedades de DataTable

Algumas das propriedades e eventos listados aqui são mais associados a ações provocadas por toques em telas sensíveis ao toque (touch screen), embora muitas vezes possam ser executadas também com cliques de mouse. Exemplos são os eventos:

  • on_tap: recebimento de um toque,
  • on_long_press: recebimento de um toque longo,
  • on_tap_cancel: cancelamento do evento de toque, e
  • on_tap_down: arrastamento para baixo.
Propriedade Descrição
bgcolor cor de fundo da tabela
border definição da borda da tabela. O valor deve ser uma instância da classe flet.Border.
Veja a propriedade Container.border para mais informações.
border_radius raio dos cantos da borda.

Veja a propriedade Container.border para mais informações.

checkbox_horizontal_margin margin horizontal em torno das caixas de checagem (checkbox) se exibidas.
column_spacing margin horizontal entre o conteúdo de cada coluna.
columns lista de controle DataColumn descrevendo as colunas da tabela.
data_row_color cor de fundo das linhas de dados.

A cor de fundo pode ser ajustada para depender do estado do MaterialState, ou seja, com o estado da linha de selecionada, pressionada, percorrida pelo cursor, em foco, desabilitada ou não. [selected, pressed, hovered, focused, disabled or enabled].

A cor é renderizada como uma sobreposição à linha. Para garantir boa visibilidade é recomendado usar uma cor de fundo transparente.

Veja a propriedade Checkbox.fill_color para mais informações.

data_row_min_height altura mínima de cada linha (exceto a linha com o cabeçalho).
data_row_max_height altura máxima de cada linha (exceto a linha com o cabeçalho).
data_text_style estilo de texto para as linhas de dados. O valor deve ser uma instância da classe flet.TextStyle.
divider_thickness espessura do divisor (divider) entre as linhas da tabela. Esse valor deve ser ≥ 0, sendo o default 1.0
.
gradient gradiente de cor aplicado ao fundo da tabela.
Veja a propriedade Container.gradient para mais informações.
heading_row_color cor de fundo para a linha de cabeçalho.

A cor de fundo pode ser ajustada para depender do estado do MaterialState, ou seja, com o estado da linha de selecionada, pressionada, percorrida pelo cursor, em foco, desabilitada ou não. [selected, pressed, hovered, focused, disabled or enabled].

A cor é renderizada como uma sobreposição à linha. Para garantir boa visibilidade é recomendado usar uma cor de fundo transparente.

Veja a propriedade Checkbox.fill_color para mais informações.

heading_row_height altura da linha de cabeçalho.
heading_text_style estilo de texto para a linha de cabeçalho. O valor deve ser uma instância da classe flet.TextStyle.
horizontal_lines ajusta cor e largura das linhas horizontais separando as linhas de dados. O valor deve ser uma instância da classe flet.BorderSide.
horizontal_margin margem horizontal entre as bordas da tabela e o conteúdo da primeira e última célula de cada linha. Também é a margem entre
uma caixa de checagem (checkbox) (quando exibida) e o conteúdo da primeira coluna de dados.
rows uma lista de controles DataRow que definem as linhas da tabela.
show_bottom_border booleano, se a borda de fundo da tabela é exibida. Por default essa borda não é visível para que se aplique uma decoração sobre a borda geral da tabela.
show_checkbox_column booleano, se o controle deve conter caixas checkboxes para linhas selecionáveis.

Quando False nenhuma checkbox será apresentada. Quando True uma checkbox será apresentada no início de cada linha selecionável. Caso nenhuma linha seja marcada com DataRow.on_select_changed nenhuma checkbox será visível.

sort_ascending booleano, se a coluna indicada em sort_column_index (caso exista) será ordenada em ordem crescente. Caso contrário, se sort_ascending=False a ordem será descendente.
sort_column_index indica a chave primária de ordenação das linhas. Se especificada a colunas marcada será usada para a ordenação. O número deve indicar a coluna, em numeração iniciando em 0. Quando especificada a coluna mostrará um indicador de que o ordenamento é possível. Quando sort_column_index=None nenhum ordenamento será realizado.
vertical_lines cor e largura das linhas verticais entre colunas. O valor deve ser uma instância de classe flet.BorderSide.

Evento de DataTable

on_select_all dispara quando o usuário seleciona (ou desseleciona) todas as linhas usando o checkbox no cabeçalho.

Se on_select_all=None o evento de linhas DataRow.on_select_changed é disparado quando cada linha é selecionada. Para selecionar se uma linha é selecionável ou não use DataRow.on_select_changed. Esse evento só é relevante de existe alguma linha selecionável.

DataColumn

Objeto de configuração das colunas de uma DataTable. Todas as colunas a serem exibidas na tabela devem ter uma coluna de configuração.

Propriedades de DataColumn

label Conteúdo apresentado no cabeçalho. Em geral um controle de texto mas pode ser um ícone (tipicamente com size=18), ou uma coluna com ícone e texto.
numeric booleano, se essa coluna exibe valores numéricos. Colunas com valores numéricos são alinhadas à direita.
tooltip uma dica (tooltip) para a coluna. Pode conter uma descrição maior que o título ou mesmo título completo quando esse for abreviado na redução da largura da janela.

Evento de DataColumn

on_sort disparado quando o usuário requisita o ordenamento da tabela usando essa coluna. Se não for especificada uma função para esse evento a coluna será considerada não ordenável.

DataRow

Objeto de configuração das linhas e células de uma DataTable. Deve exitir uma linha de confighuração para cada linha da tabela. Os dados contidos na linhas são inseridos por meio de objetos flet.DataCells, reunidos em listas atribuidas à propriedade flet.DataRow(cells).

Propriedades de DataRow

cells recebe os dados a serem exibidos por meio de uma lista de controles DataCell. Devem existir células para todas as colunas (o número de células e colunas devem serem iguais).
color a cor da linha. Por default essa cor é transparente quando a linha não está selecionada, e recebem uma coloração acinzentada transparente quando selecioandas.

O cor exibida como resultado final depende do estado do MaterialState se a linha está selecionada, pressionada, percorrida pelo cursor, em foco, desabilitada ou não. [selected, pressed, hovered, focused, disabled or enabled].

A cor é renderizada como uma sobreposição à linha. Para garantir boa visibilidade é recomendado usar uma cor de fundo transparente.

Veja a propriedade Checkbox.fill_color para mais informações.

selected booleano, define se a linha está selecionda.

Se on_select_changed é não nula para alguma linha da tabela uma caixa checkbox é exibida no início de cada linha. Caso selected=True em uma linha sua checkbox aparecerá ticada e a linha destacada. Caso contrário a checkbox (se estiver presente) não será marcada.

Eventos de DataRow

on_long_press disparado quando a linha recebe um clique ou pressionamento longo.

Se uma célula DataCell na linha contém a definição de ação para os eventosDataCell.on_tap, DataCell.on_double_tap, DataCell.on_long_press, DataCell.on_tap_cancel ou DataCell.on_tap_down então essa definição sobrescreverá (terá prioridade sobre) o evento da linha se a ação for feita sobre a célula.

on_select_changed disparado quando o usuário seleciona ou desseleciona uma linha selecionável.

A linha é selecionável se essa propriedade não for nula. O estado da linha atual fica marcado na propriedade selected.

Se qualquer uma das linhas é selecionável o cabeçalho apresentará um checkbox que pode ser marcado para selecionar todas as linhas selecionáveis. Esse checkbox aparece marcado se todas as linhas estiverem selecionadas. Linhas subsequentes recebem um checkbox para sua seleção individual.

Se uma linha tem o evento on_select_changed=Null ela terá um checkbox desabilitado e será ignorada na determinação do estado de “todos os checkbox marcados”.

Se uma das células DataCell da linha tem o evento DataCell.on_tap definido, então essa definição sobrescreverá, naquela célula, os eventos definidos para a linha em geral.

DataCell

O objeto DataCell contém os dados para cada entrada em uma tabela DataTable. Uma lista de objetos
DataCell deve ser fornecida para cada linha, contendo o exato número de células que o de colunas.

Propriedades de DataCell

content o conteúdo com dados a serem apresentados em cada célula. Em geral contém um controle de texto um Dropdown.

Se não existem dados nessa propriedade o controle de texto será preenchido com um texto substituto (placeholder) e deve ser marcada a propriedade placeholder=True.

Esse controle só admite um filho. Para incluir layouts mais complexos é necessário inserir um widget tal como Row, Column ou Stack, que têm a propriedade controls que podem abrigar múltiplos filhos.

placeholder booleano, se o conteúdo é um texto substituto (placeholder).

Se placeholder=True o estilo default de texto para a célula é alterado para o estilo ajustado para placeholders.

show_edit_icon booleano, se o ícone de edição deve ser mostrado no final da célula. Essa propriedade não torna a célula editável. Esse comportamento deve ser definido no evento DataCell.on_tap.

Eventos de DataCell

on_double_tap disparado no duplo toque da célula.
on_long_press disparado no toque prolongado da célula.
on_tap disparado no toque da célula.
on_tap_cancel disparado se o usuário cancela um toque.
on_tap_down disparado se a célula é puxada para baixo.
Nota † válido para todos os eventos de DataCell Se não-nulo, o duplo toque da célula dispara esse evento. Se nulo o toque apenas seleciona a linha. Esse comportamento se extende a on_tap, on_long_press, on_tap_cancel e on_tap_down, caso DataRow.on_select_changed tenha sido definido.

Exemplo de uso de DataTable, DataRow e DataCell

Um exemplo um pouco mais elaborado de DataTable aparece no código abaixo.

import flet as ft

def main(page: ft.Page):
    page.bgcolor="#BAD1EA"

    def formatar_tabela(t):
        t.bgcolor="#0E64C5"
        t.border=ft.border.all(3, "#304864")
        t.border_radius=5
        t.data_row_color="#6697CE"
        t.show_checkbox_column=True
        t.divider_thickness=2
        t.column_spacing=100
        t.sort_column_index=2
        t.sort_ascending=True
        t.heading_row_color="#1565C2"
        t.heading_row_height=60
        t.show_checkbox_column=True
        t.show_bottom_border=True

    def montar_tabela(matriz):
        cor=["#759DCB", "#DABD90"]
        colunas=[]
        for col in matriz[0]:
            colunas.append(ft.DataColumn(ft.Text(col)))

        linhas=[]
        i=0
        for linha in matriz[1:]:
            i+=1
            celulas=[]
            for celula in linha:
                celulas.append(
                    ft.DataCell(
                        ft.Text(celula, color="#000000"),
                        show_edit_icon=(i%2==0)
                    )
                )
            linhas.append(ft.DataRow(cells=celulas, color=cor[i%2]))
            tabela=ft.DataTable(columns=colunas, rows=linhas)
            formatar_tabela(tabela)
        return tabela

    matriz = [
        ["Nome",      "Sobrenome",  "Idade", "Profissão", "Nacionalidade"],
        ["Cristovão", "Colombo",    "43",    "Navegador", "Itália"],
        ["Joaquim",   "José",       "31",    "Militar",   "Brasil"],
        ["Maria",     "Joaquina",   "23",    "Realeza",   "Portugal"],
        ["Albert",    "Einstein",   "57",    "Físico",    "Alemanha"],
        ["Charles",   "Chaplin",    "73",    "Ator",      "França"]
    ]

    tabela = montar_tabela(matriz)

    page.add(ft.Text("Famosos na História", size=20,color="BLACK"), tabela)

ft.app(target=main)

O código mostra um exemplo de transformação de formato de dados obtidos inicialmente como uma matriz formada por uma lista de listas. A primeira linha é usada para capturar os títulos de cada coluna, as demais são os dados exibidos no corpo da tabela. A vantagem desse método está em que a tabela pode ter um número arbitrário de colunas e de linhas.

Figura 2: Representação do código executado do exemplo de DataTable.
† Nota: A transformação de dados entre formatos diferentes de exposição é uma das funções básicas em TI atualmente. Exemplos são dados obtidos em paginas da WEB (em formato HTML), em textos PDF, em planilhas, em arquivos csv, que devem ser separados e usados em código, geralmente expostos em formato diferente daquele original.

A função montar_tabela(matriz) (que recebe matriz, uma lista de listas) percorre as linhas e colunas montando o objeto DataTable. Antes de retornar o objeto tabela montado ele a submete à formatar_tabela(t). Lembramos que objetos são passados por referência no Python, por default. Isso significa que a variável t recebida como parâmetro da função é apenas apenas uma referência para o mesmo objeto indicado pela variável tabela e as transformações feitas nas propriedades dentro da função são efetivas no objeto retornado por montar_tabela(matriz).

Leave a Reply

Your email address will not be published. Required fields are marked *