Data Table

Um componente renderizando dados em um display tabular. Construído sobre [reapresentar] (https://react-table.js.org/).

Opções

• data | (array|object) (required): Um objeto de dados ou array a ser visualizado. Se for um objeto, as chaves correspondem aos valores das colunas, enquanto uma matriz esperará uma matriz de objetos com um campo nomeado correspondente a cada coluna. Default: none.
• dataInfo | object: objeto com "info" string array descrevendo o conjunto de dados, o "nome" do conjunto de dados, um "objeto" de "variáveis" com chaves correspondentes a nomes de variáveis e valores para descrições de variáveis, um "showOnStartup" booleano controlando a exibição do modal de informações na inicialização. Default: { 'info': [], 'name': '', 'variables': null, 'showOnStartup': false }.
• deletable | boolean: controla se as colunas para as quais não existem info têm um botão que, quando clicado, chama a função onColumnDelete' callback. Default: false`.
• undeletableVars | array<string>: matriz de nomes variáveis de colunas que não podem ser apagadas. Default: [].
• filterable | boolean: controla se as colunas são filtráveis. Default: true.
• editable | array: matriz de nomes para colunas que devem ser editáveis. Default: [].
• getTrProps | function: função callback executada para cada linha para personalizar seu estilo (estado da tabela passada, informações da linha, coluna, e a instância da tabela). Default: none.
• onColumnDrag | function: função invocada quando uma coluna foi arrastada para uma posição diferente. Default: onColumnDrag() {}.
• onColumnDelete | function: função invocada com o nome de uma coluna quando o respectivo botão de exclusão de uma coluna é clicado. Default: onColumnDelete() {}.
• onColumnNameChange | function: função invocada quando uma coluna foi renomeada (chamada com o antigo nome como primeiro e o novo nome como segundo argumento). Default: onColumnNameChange() {}.
• onClickRemove | function: função que especifica uma ação a ser tomada para linhas removidas dos dados (padrão para uma função vazia). Default: onClickRemove() {}.
• onEdit | function: função invocada com o conjunto de dados atualizados depois que o valor de uma célula foi alterado pelo usuário (só se aplica quando a tabela é "editável"). Default: onEdit() {}.
• onTutorialCompletion | function: função invocada quando o usuário tiver completado o tutorial da tabela de dados. Default: onTutorialCompletion() {}.
• filters | array: conjunto de filtros. Default: [].
• onFilteredChange | function: função invocada com os filtros atuais depois que os dados foram filtrados pelo usuário. Default: onFilteredChange() {}.
• showRemove | boolean: indica se devem ser exibidas caixas de seleção para as linhas a serem removidas. Default: false.
• showIdColumn | boolean: controla se deve mostrar uma coluna de identificação. Default: true.
• disableDownload | boolean: se ocultar o botão para baixar os dados como um arquivo CSV ou JSON. Default: false.
• className | string: nome da classe. Default: ''.
• style | object: Um objeto que permite um estilo css personalizado. Padrão para um objeto vazio. Default: {}.

Exemplos

Editor ao vivo

<DataTable showRemove onClickRemove={( data ) => { console.log(data); }} data={{ firstName: [ 'Hans', 'Lotti', 'Fritz' ], lastName: [ 'Bauer', 'Müller', 'Schultz' ], age: [ 37, 55, 62 ] }} style={{ width: 600 }} />

<DataTable
    showRemove
    onClickRemove={( data ) => { console.log(data); }}
    data={{ 
        firstName: [ 'Hans', 'Lotti', 'Fritz' ], 
        lastName: [ 'Bauer', 'Müller', 'Schultz' ],
        age: [ 37, 55, 62 ]
    }}
    style={{ width: 600 }}
/>

Resultado

ReferenceError: Provider is not defined