priorics-table
v4.0.20
Published
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
1,258
Readme
Tabela Editável
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, garantindo fácil manipulação de dados e estado.
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:
| Prop | Descrição | Tipo | Obrigatório |
| :-------------: | :---------------------------------------------------------------------------------: | :-----: | :---------: |
| className | Estilização da DIV que engloba a tag <table></table>
| String | false |
| scrollY | Define se terá scroll na vertical ou a tabela será infinita, por padrão é false
| Boolean | false |
| scrollX | Define se terá scroll na horizontal ou a tabela será limitada, por padrão é false
| Boolean | false |
| scrollMinHeight | Altura mínima para que o scroll na vertical apareça, por padrão é max-h-96
| String | false |
SearchBar
- Descrição: Barra de pesquisa integrada.
- Props:
| Prop | Descrição | Tipo | Obrigatório |
| :------------: | :------------------------------------------------------------------------------------------------------------------------: | :-------: | :---------: |
| className | Estilização da div
principal | String | false |
| inputClassName | Estilização do input
de pesquisa | String | false |
| iconClassName | Estilização do ícone do input de pesquisa | String | false |
| filterKey | Chave para o filtro, exemplo: value
, logo, o filtro funcionará para todo value
que for igual ao que o usuário escrever | String | false |
| placeholder | Placeholder do input, caso queira alterar, por padrão é 'Pesquisar...'
| String | false |
| icon | Ícone do input de pesquisa, caso queira alterar para se enquadrar na lib de ícones utilizada pelo projeto | Component | false |
| right | Componente que queira colocar à direita do input de pesquisa (Ex: Botão com Ação) | Component | false |
Head
- Descrição: Define o cabeçalho da tabela.
- Props:
| Prop | Descrição | Tipo | Obrigatório |
| :--------------------: | :--------------------------------------------------------------------------: | :----: | :---------: |
| tHeadClassName | Estilização da tag thead
| String | false |
| tRowClassName | Estilização da tag tr
| String | false |
| thClassName | Estilização da tag th
| String | false |
| tHeadCheckboxClassName | Estilização da tag th
que engloba a Checkbox de Selecionar todas as linhas | String | false |
| checkboxClassName | Estilização da Checkbox de Selecionar todas as linhas | String | false |
Body
- Descrição: Renderiza as linhas e células da tabela.
- Props:
| Prop | Descrição | Tipo | Obrigatório |
| :--------------------: | :------------------------------------------------------------------: | :----: | :---------: |
| tBodyClassName | Estilização da tag tbody
| String | false |
| tDataCheckboxClassName | Estilização da tag td
que engloba a Checkbox de Selecionar a Linha | String | false |
| checkboxClassName | Estilização da Checkbox de Selecionar a Linha | String | false |
Configuração das Colunas
| Prop | Descrição | Tipo | Obrigatório | | :----------: | :--------------------------------------------------------------------------------------------: | :--------------: | :---------: | | key | Chave da Coluna | String or Number | true | | title | Título da Coluna | String | false | | width | Largura da Coluna | String | false | | editable | Define se o dado será editável ou não | Boolean | true | | money | Define se o dado terá formatação para dinheiro | Boolean | false | | date | Define se o dado terá formatação para data | Boolean | false | | personalized | Define se o dado será renderizado em um componente personalizado | Boolean | false | | component | Define o componente personalizado | Component | false | | props | Passa props para o componente personalizado, por exemplo algum dado importante ou algo do tipo | Object | false | | functions | Passa funções para o componente personalizado | Array | false | | type | Tipo do input quando possível editar | String | false | | format | Formato da data | String | false |
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;
}
]
| Prop | Descrição | Tipo | Obrigatório |
| :------------: | :----------------------------------------------------------------------------------: | :--------------: | :---------: |
| data | Array com um ou mais objetos que contemplam os valores que serão mostrados na tabela | Array | true |
| key | Chave da Linha | String or Number | true |
| value | Valor da Linha | any | true |
| className | Estilização da tag input
da Linha quando editável | String | false |
| tDataClassName | Estilização da tag td
| String | false |
| tRowClassName | Estilização da tag tr
| String | false |
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,
}
];
*/
Setters
Para setar dados, o TableContext
disponibiliza alguns 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