1.0.6 • Published 1 year ago

sweet-table-react v1.0.6

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

Sweet Table React

Sweet Table React, é uma tabela par renderizar dados dinâmicos, com duas opçoes de filtro e paginação. Estilizavel

Ajustes e melhorias

O projeto ainda está em desenvolvimento e as próximas atualizações serão voltadas nas seguintes tarefas:

  • Paginação
  • Filtro Dropdown
  • Renderizar componentes
  • Paginação como chamadas API
  • Opçoes de estilização
  • Integração com bibliotecas de UI

💻 Pré-requisitos

Antes de começar, verifique se você atendeu aos seguintes requisitos:

  • Você instalou a versão 18+ de React e React DOM
  • Node Instalado
  • Você leu este guia de instalação e uso

🚀 Instalando sweet-table-react

Para instalar o sweet-table-react, siga estas etapas:

npm install sweet-table-react

☕ Usando sweet-table-react

Para usar sweet-table-react, siga estas etapas:

Certifique-se que os dados estão em uma array de objetos, como abaixo:

const data = [
    {
      "id": "636fd4528d5030434c93e7db",
      "picture": "https://picsum.photos/200/300",
      "age": 26,
      "name": "Mavis Rocha",
      "gender": "female",
      "company": "HOTCAKES",
      "email": "mavisrocha@hotcakes.com",
      "phone": "+1 (918) 585-3587",
      "address": "750 Laurel Avenue, Glidden, Maine, 6794",
      "tags": [
        "anim",
        "labore",
        "aliqua",
        "laboris",
        "veniam",
        "in",
        "sunt"
      ],
      "friends": [
        {
          "id": 0,
          "name": "Tracie Sweeney"
        },
        {
          "id": 1,
          "name": "Jennings Miller"
        },
        {
          "id": 2,
          "name": "Amber Becker"
        }
      ]
    },
    ...
]

A estrutura dos dados nesse array é livre, pois vamos montar as colunas conforme o exemplo abaixo:

const columns = Object.keys(data[0])
  .filter((arg) => arg !== "id" && arg !== "gender") // Filtrar os dados para exibir
  .map((arg, index) => {
    const column = {
      id: index,
      title: arg,
      width: 100, // Largura da coluna
    };
    // Selecione o que renderizar por coluna
    if (arg === "picture") {
      column["width"] = 200;
      column["element"] = <Image item={data.find((item) => item[arg])} />; // defina se haverá imagem no item
    }
    if (arg === "age") column["width"] = 40;
    if (arg === "email") column["width"] = 150;
    if (arg === "phone") column["width"] = 150;
    if (arg === "address") column["width"] = 220;
    // Exiba comontents nas colunas
    if (arg === "tags") {
      column["width"] = 20;
      column["element"] = (
        <Button
          item={data.find((item) => item[arg])} // Passar o item por props para o elemento
        />
      );
    }
    if (arg === "friends") column["width"] = 20;

    return column;
  });

Entendendo a estrutura

Para montar as colunas, obtenha os valores das chaves de cada um dos objetos do array de dados

const columns = Object.keys(data[0]); // data[0] expecifica o primeiro objeto do array

Filtre os dados que deseja ou não exibir

.filter((arg) => arg !== "id" && arg !== "gender") // Filtrar os dados para exibir

Mapeie a estrutura e defina as colunas

.map((arg, index) => {
      const column = {
        id: index,
        title: arg,
        width: 100, // Largura da coluna
      };
      return column
}

Defina largura da coluna conforme necessário

if (arg === "age") column["width"] = 40;

Renderize um componente na coluna

import Image from "../Image.jsx";
//...
if (arg === "picture") {
  column["width"] = 200;
  column["element"] = <Image item={data.find((item) => item[arg])} />; // Renderize um componente jsx
}
//... or
if (arg === "picture") {
  column["width"] = 200;
  column["element"] = <img src={data.find((item) => item[arg]).src} />; // Renderize um componente html
}

Para usar o item atual no componente use

<Image
    item={data.find((item) => item[arg])} // Passe a linha em questão como props
 />
 //or
<img
    src={data.find((item) => item[arg]).src}  // Use as propriedades conforme necessário
/>

Montando o Componente

<SweetTable
  rows={data}
  columns={columns}
  columnKey="title"
  rowKey="id"
  perPage={perPage} // Linhas por pagina
  rowsSize={data.length} // Quantidade de linhas
  fetchPerPage={false} // Exibir os dados do lado servidor = true
  setPerPage={setPerPage}
  listItemsPerPage={[7, 14, 21, 28]} // define a lista de items por pagina
  filters={[
    {
      id: 1,
      label: "maior de idade",
      property: "age",
      operator: ">",
      filter: 18,
    },
    {
      id: 2,
      label: "Menor de idade",
      property: "age",
      operator: "<",
      filter: 18,
    },
    {
      id: 3,
      label: "Começa com A",
      property: "name",
      operator: "startsWith",
      filter: "A",
    },
    {
      id: 4,
      label: "Termina com O",
      property: "name",
      operator: "endsWith",
      filter: "O",
    },
    {
      id: 5,
      label: "Maior e Igual a 38",
      property: "age",
      operator: ">=",
      filter: 38,
    },
    {
      id: 6,
      label: "Menor e igual a 42",
      property: "age",
      operator: "<=",
      filter: 42,
    },
    {
      id: 7,
      label: "Primeiro Nome é igual a Julianne",
      property: "name",
      operator: "startsWith",
      filter: "Julianne",
    },
    {
      id: 8,
      label: "Tem 29 anos",
      property: "age",
      operator: "===",
      filter: 29,
    },
    {
      id: 10,
      label: "Tem 31 anos",
      property: "age",
      operator: "==",
      filter: "31",
    },
    {
      id: 11,
      label: "Company TERRASYS",
      property: "company",
      operator: "===",
      filter: "TERRASYS",
    },
    {
      id: 12,
      label: "Companhia não é  TERRASYS",
      property: "company",
      operator: "!==",
      filter: "TERRASYS",
    },
    {
      id: 13,
      label: "Email é de musix",
      property: "email",
      operator: "includes",
      filter: "musix",
    },
    {
      id: 14,
      label: "Idade maior que 18 e menor que 42",
      property: "age",
      logicalOparator: {
        logical: "&&",
        operator1: ">",
        filter1: 18,
        operator2: "<",
        filter2: 42,
      },
    },
    {
      id: 15,
      label: "Começa com C ou tem ba",
      property: "name",
      logicalOparator: {
        logical: "||",
        operator1: "startsWith",
        filter1: "C",
        operator2: "includes",
        filter2: "ba",
      },
    },
  ]}
  propertyFilter="name"
/>

Vamos entender essas props todas

  • É onde passamos o array de dados para o componente
rows = { data };
  • As colunas que montamos acima
columns = { columns };
  • O nome da prorpiedade que você escolheu para as colunas, o padrão é title
   columnKey="title"

   //Definido ao montar as colunas
    .map((arg, index) => {
    const column = {
      id: index,
      title: arg,// Esta propriedade
      width: 100,
    }; //...
  • O identificador de cada linha
rowKey = "id";
  • Defina a quantidade de linhas exibir por página
perPage = { perPage }; // Linhas por pagina
  • Função para alterar a quantidade de items por pagina
setPerPage = { setPerPage };

** Exemplo de uso

import { useState } from "react";
const [perPage, setPerPage] = useState(5);
  • Quantidade total dos items do array
rowsSize={data.length} // Quantidade de linhas
  • Define um array com as opçoes de itens por página
listItemsPerPage={[7, 14, 21, 28]} // define a lista de items por pagina

Filtros

filters={[
          {id:1,label:'maior de idade', property:'age',operator:'>',filter:18},
          {id:2,label:'Menor de idade', property:'age',operator:'<',filter:18},
          {id:3,label:'Começa com A', property:'name',operator:'startsWith',filter:'A'},
          {id:4,label:'Termina com O', property:'name',operator:'endsWith',filter:'O'},
          {id:5,label:'Maior e Igual a 38', property:'age',operator:'>=',filter:38},
          {id:6,label:'Menor e igual a 42', property:'age',operator:'<=',filter:42},
          {id:7,label:'Primeiro Nome é igual a Julianne', property:'name',operator:'startsWith',filter:"Julianne"},
          {id:8,label:'Tem 29 anos', property:'age',operator:'===',filter:29},
          {id:10,label:'Tem 31 anos', property:'age',operator:'==',filter:"31"},
          {id:11,label:'Company TERRASYS', property:'company',operator:'===',filter:"TERRASYS"},
          {id:12,label:'Companhia não é  TERRASYS', property:'company',operator:'!==',filter:"TERRASYS"},
          {id:13,label:'Email é de musix', property:'email',operator:'includes',filter:"musix"},
          {id:14,label:'Idade maior que 18 e menor que 42', property:'age',logicalOparator:{
            logical:'&&',
            operator1:'>',
            filter1:18,
            operator2:'<',
            filter2:42
          }},

Deve ser um array de objetos com essa estrutura acima. Certifique-se dos seguintes pontos

  • Cada filtro possua um id expecifico
  • Tenha um label para exibição
  • Passar a propriedade para ser filtrada em property
  • Expecificar o filtro em filter
  • Operadores:
  • Operadores lógicos logicalOparator
  • Você pode usar operadores lógicos com a seguinte extrutura
logicalOparator:{
            logical:'&&',
            operator1:'>',
            filter1:18,
            operator2:'<',
            filter2:42
          }

Existem apenas dois operadores lógicos &&(E) e ||(OU).

Usando sweet-table-react com next.js

  • Crie um componente e importe o SweetTable normalmente
// components/Table.jsx

import SweetTable from "sweet-table-react";
//...
<SweetTable
//...
/>;

** Crie o state dessa forma

import {useState,useEffect} from 'react'
//...
  const [perPage, setPerPage] = useState(); // Linhas por pagina
  useEffect(() => setPerPage(5),[])
//...
  • Chame esse componente na página de exibição com dynamic
// pages/index.jsx

   import dynamic from 'next/dynamic';
   const Table = dynamic(
         () => import('../components/Table'),
        { ssr: false }
    );
   //...
   <Table
    //...
   />

Estitlize

Estilize como quiser:

📫 Contribuindo para sweet-table-react

Para contribuir com sweet-table-react, siga estas etapas:

  1. Bifurque este repositório.
  2. Crie um branch: git checkout -b <nome_branch>.
  3. Faça suas alterações e confirme-as: git commit -m '<mensagem_commit>'
  4. Envie para o branch original: git push origin <nome_do_projeto> / <local>
  5. Crie a solicitação de pull.

Como alternativa, consulte a documentação do GitHub em como criar uma solicitação pull.

🤝 Colaboradores

Este projeto é apenas meu, por enquanto:

⬆ Voltar ao topo

@infinitebrahmanuniverse/nolb-swe@everything-registry/sub-chunk-2862
1.0.6

1 year ago

1.0.4

1 year ago

1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago