priorics-table

v4.0.2

Published

a day ago

Este componente de tabela foi projetado para ser flexível e personalizável, permitindo edição de valores, formatação específica (como moeda ou datas), e suporte a pesquisa e seleção de linhas. A tabela é implementada com base em um provedor de contexto, g

Downloads

220

0High
0Medium
0Low

priori

Tabela Editável

Exemplo de Uso

import { Table, Head, Body, SearchBar, TableProvider } from 'priorics-table';

const columns = [
  { key: 'nmusuario', title: 'Nome', width: '50%', editable: true },
  { key: 'endereco', title: 'Endereço', width: '40%', editable: true },
  { key: 'idade', title: 'Idade', width: '10%' },
  { key: 'aniversario', title: 'Aniversário', width: '10%', date: true },
  { key: 'salario', title: 'Salário', width: '10%', money: true },
];

const values = [
  {
    data: [
      { key: 'cdpessoa', value: 1 },
      { key: 'nmusuario', value: 'Rafael Santos' },
      { key: 'endereco', value: 'Rua 1401, 100' },
      { key: 'idade', value: 23 },
      { key: 'aniversario', value: '2001-02-04' },
      { key: 'salario', value: 2400 },
    ],
  },
];

export default function EditableTable() {
  return (
    <TableProvider columns={columns} initialData={values} canSelect selectKey='cdpessoa'>
      <SearchBar filterKey='value' />
      <Table className='rounded-b-xl' scrollY>
        <Head columns={columns} />
        <Body columns={columns} />
      </Table>
    </TableProvider>
  );
}

Componentes e Props

TableProvider

Descrição: Provê contexto para gerenciar estado da tabela.
Props:
| Prop | Descrição | Tipo | Obrigatório | | :---------: | :-----------------------------------------------------: | :-----: | :---------: | | columns | Dados que formam as colunas da tabela | Array | true | | initialData | Dados iniciais da tabela | Array | true | | canSelect | Define se as linhas podem ser selecionáveis | Boolean | false | | selectKey | Define a chave que será selecionada nas linhas (Ex: ID) | String | false | | minPerPage | Mínimo de itens por página, 20 por padrão | number | false |

Table

Descrição: Componente principal que encapsula a tabela.
Props:

SearchBar

Descrição: Barra de pesquisa integrada.
Props:

Head

Descrição: Define o cabeçalho da tabela.
Props:

Body

Descrição: Renderiza as linhas e células da tabela.
Props:

Configuração das Colunas

Exemplo de Coluna com Personalized

{
    key: 'nmusuario',
    title: 'Nome',
    personalized: true,
    component: CustomInput,
    props: { placeholder: 'Digite um nome' },
}

Estrutura dos Valores da Tabela

[
    {
        data: [
           { key: String, value: any, className: String, tDataClassName: String} ,
        ],
        tRowClassName: String;
    }
]

Dados Importantes

Linhas Selecionadas

Descrição: Array com os valores selecionados referentes a selectKey
Exemplo:

import { useTableContext } from 'priorics-table';

const { selected } = useTableContext();
console.log(selected);

//Output: [1, 2, 3, 4, 5];

Valores Editados

Descrição: Array com os valores editados na Tabela
Exemplo:

import { useTableContext } from 'priorics-table';

const { editedData } = useTableContext();
console.log(editedData);

/* 
Output: 

[
    {
        cdpessoa: 1,
        nmusuario: 'Rafael Silva',
        endereco: 'Rua 1401, 100',
        idade: 23,
        aniversario: '2001-02-04',
        salario: 2400,
    }
];
*/

Limpar Dados

Para limpar dados, o TableContext disponibiliza os sets para realizar as ações quando o Dev quiser, por exemplo logo após atualizar os dados, limpar o array editedData

import { useTableContext } from 'priorics-table';

const { setEditedData, setSelected, setData, page, setPage } = useTableContext();

setEditedData([]); //Zera o array de dados editados
setSelected([]); //Zera o array de linhas selecionadas
setPage(2); //Define a página atual do scroll infinito
console.log(page) //Acessa o número da página atual

const newData = [...];
setData(newData); //Define os dados da tabela com novos