wca-designsystem 0.0.7 → 0.0.9

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.7",
+  "version": "0.0.9",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/atomos/InputDeArquivo/InputDeArquivo.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import InputDeArquivo from '.';
+
+const meta: Meta<typeof InputDeArquivo> = {
+  component: InputDeArquivo,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof InputDeArquivo>;
+
+export const Primary: Story = {
+  args: {
+    labelAbaixo: 'exemplo',
+  },
+};

package/src/components/atomos/InputDeArquivo/InputDeArquivo.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from '../../../test/render';
+import InputDeArquivo from './index';
+
+describe('InputDeArquivo rendering', () => {
+  it('renders without crashing', () => {
+    const { getByTestId } = render(<InputDeArquivo labelAbaixo="exemplo" />);
+
+    const inputDeArquivo = getByTestId('label-abaixo');
+    expect(inputDeArquivo).toBeDefined();
+  });
+});

package/src/components/atomos/InputDeArquivo/index.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import * as S from './styles';
+import { FileInput, FileInputProps } from '@mantine/core';
+import download from '../../../assets/imagens/icons/Download.svg';
+import Icone from '../Icone';
+import { theme } from '../../../styles/theme';
+
+interface InputDeArquivoProps extends FileInputProps {
+  labelAbaixo?: string;
+}
+const InputDeArquivo = ({ labelAbaixo, ...props }: InputDeArquivoProps) => {
+  return (
+    <S.InputDeArquivoWrapper>
+      <FileInput
+        {...props}
+        leftSection={
+          <S.InputDeArquivoSelecionar>
+            <Icone
+              svg={download}
+              fill={theme.colors.redSti}
+              width={16}
+              height={16}
+            />
+            <label>Escolher arquivo</label>
+          </S.InputDeArquivoSelecionar>
+        }
+        placeholder="Nenhum arquivo escolhido"
+        leftSectionPointerEvents="none"
+      />
+      {labelAbaixo?.length! > 0 && (
+        <label className="label-abaixo" data-testid={'label-abaixo'}>
+          {labelAbaixo}
+        </label>
+      )}
+    </S.InputDeArquivoWrapper>
+  );
+};
+
+export default InputDeArquivo;

package/src/components/atomos/InputDeArquivo/styles.ts

@@ -0,0 +1,43 @@
+import styled, { css } from 'styled-components';
+
+export const InputDeArquivoWrapper = styled.div`
+  ${({ theme }) => css`
+    .mantine-InputPlaceholder-placeholder {
+      padding-left: 105px;
+      color: ${theme.colors.gray['700']};
+    }
+
+    button {
+      div {
+        padding-left: 105px;
+        color: ${theme.colors.gray['700']};
+        font-weight: 500;
+      }
+    }
+
+    .label-abaixo {
+      color: ${theme.colors.gray['700']};
+      font-size: ${theme.sizes.xSmall};
+      font-family: 'Ubunto Mono', monospace;
+    }
+  `}
+`;
+
+export const InputDeArquivoSelecionar = styled.div`
+  ${({ theme }) => css`
+    min-width: 132px;
+    position: absolute;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    padding: 8px;
+    background-color: ${theme.colors.gray['500']};
+
+    label {
+      color: ${theme.colors.redSti};
+      font-size: ${theme.sizes.small};
+    }
+  `}
+`;

package/src/components/atomos/InputDeTexto/index.tsx

@@ -8,14 +8,22 @@ import { theme } from '../../../styles/theme';
 
 export interface InputDeTextoProps extends TextInputProps {
   tipo: 'table' | 'round' | 'login' | 'password';
+  labelAbaixo?: string;
 }
 
-const InputDeTexto = ({ tipo, ...props }: InputDeTextoProps) => {
+const InputDeTexto = ({ tipo, labelAbaixo, ...props }: InputDeTextoProps) => {
   /* Renderiza conforme o tipo que você escolher */
   const renderInputTexto: any = useCallback(
     (tipo: 'table' | 'round' | 'login' | 'password') => {
       const selectsTipos = {
-        round: <S.InputDeTextoRound {...props} data-testid="round" />,
+        round: (
+          <S.InputDeTextoRoundWrapper>
+            <S.InputDeTextoRound radius={8} {...props} data-testid="round" />
+            {labelAbaixo?.length! > 0 && (
+              <label className="label-abaixo">{labelAbaixo}</label>
+            )}
+          </S.InputDeTextoRoundWrapper>
+        ),
         table: <S.InputDeTextoTabela {...props} data-testid="table" />,
         login: (
           <S.InputDeTextoLogin
@@ -71,7 +79,7 @@ const InputDeTexto = ({ tipo, ...props }: InputDeTextoProps) => {
       };
       return selectsTipos[tipo];
     },
-    [tipo, props]
+    [tipo, labelAbaixo, props]
   );
 
   return <>{renderInputTexto(tipo)}</>;

package/src/components/atomos/InputDeTexto/styles.ts

@@ -1,15 +1,26 @@
-import { PasswordInput, TextInput } from "@mantine/core";
-import styled, { css } from "styled-components";
+import { PasswordInput, TextInput } from '@mantine/core';
+import styled, { css } from 'styled-components';
+
+export const InputDeTextoRoundWrapper = styled.div`
+  ${({ theme }) => css`
+    .label-abaixo {
+      color: ${theme.colors.gray['700']};
+      font-size: ${theme.sizes.xSmall};
+      font-family: 'Ubunto Mono', monospace;
+    }
+  `}
+`;
 
 export const InputDeTextoRound = styled(TextInput)`
   ${() => css`
     font-weight: 400;
+    border-radius: 8px;
   `}
 `;
 
 export const RightSelect = styled.div`
   ${({ theme }) => css`
-    background-color: ${theme.colors.gray["500"]};
+    background-color: ${theme.colors.gray['500']};
     position: absolute;
     top: 0;
     bottom: 0;
@@ -65,7 +76,7 @@ export const InputDeTextoLogin = styled(TextInput)`
       padding-left: 45px;
 
       &::placeholder {
-        color: ${theme.colors.gray["500"]};
+        color: ${theme.colors.gray['500']};
       }
     }
   `}
@@ -90,7 +101,7 @@ export const InputDePassword = styled(PasswordInput)`
       padding-left: 45px;
 
       &::placeholder {
-        color: ${theme.colors.gray["500"]};
+        color: ${theme.colors.gray['500']};
       }
     }
   `}

package/src/components/atomos/Select/index.tsx

@@ -8,23 +8,34 @@ import { theme } from '../../../styles/theme';
 
 export interface SelectCustomizadoProps extends SelectProps {
   tipo: 'table' | 'round';
+  labelAbaixo?: string;
 }
 
-const SelectCustomizado = ({ tipo, ...props }: SelectCustomizadoProps) => {
+const SelectCustomizado = ({
+  tipo,
+  labelAbaixo,
+  ...props
+}: SelectCustomizadoProps) => {
   /* Renderiza conforme o tipo que você escolher */
   const renderSelect = useCallback(
     (tipo: 'table' | 'round') => {
       const selectsTipos = {
         round: (
-          <S.SelectRound
-            {...props}
-            data-testid="round"
-            rightSection={
-              <S.RightSelect>
-                <Icone svg={arrowDown} fill={theme.colors.gray['700']} />
-              </S.RightSelect>
-            }
-          />
+          <S.SelectRoundWrapper>
+            <S.SelectRound
+              {...props}
+              data-testid="round"
+              radius={8}
+              rightSection={
+                <S.RightSelect>
+                  <Icone svg={arrowDown} fill={theme.colors.gray['700']} />
+                </S.RightSelect>
+              }
+            />
+            {labelAbaixo?.length! > 0 && (
+              <label className="label-abaixo">{labelAbaixo}</label>
+            )}
+          </S.SelectRoundWrapper>
         ),
         table: (
           <S.SelectTabela

package/src/components/atomos/Select/styles.ts

@@ -1,9 +1,29 @@
 import { Select } from '@mantine/core';
 import styled, { css } from 'styled-components';
 
+export const SelectRoundWrapper = styled.div`
+  ${({ theme }) => css`
+    .label-abaixo {
+      color: ${theme.colors.gray['700']};
+      font-size: ${theme.sizes.xSmall};
+      font-family: 'Ubunto Mono', monospace;
+    }
+  `}
+`;
+
 export const SelectRound = styled(Select)`
   ${() => css`
     font-weight: 400;
+
+    &[data-expanded='true'] {
+      border: none; /* Remover a borda quando o select está expandido */
+      outline: none;
+    }
+
+    .mantine-Select-root {
+      border: none; /* Remover a borda em outros estados */
+      outline: none;
+    }
   `}
 `;
 
@@ -13,10 +33,12 @@ export const RightSelect = styled.div`
     position: absolute;
     top: 0;
     bottom: 0;
-    right: 0;
+    right: 0px;
     display: flex;
     align-items: center;
-    width: 20px;
+    justify-content: center;
+    width: 40px;
+    border-radius: 0 8px 8px 0;
   `}
 `;
 
@@ -26,7 +48,6 @@ export const SelectTabela = styled(Select)`
 
     input {
       min-height: 25px;
-      /* max-width: 200px; */
       height: 25px;
       box-shadow: 0px 2px 3px 0px ${theme.colors.blue};
       border: none;

package/src/components/molecules/Paginacao/index.tsx

@@ -7,6 +7,7 @@ import SelectCustomizado from '../../atomos/Select';
 import Botao from '../../atomos/Botao';
 
 export type PaginacaoProps<T extends PaginationProps> = {
+  tamanhoPaginacao?: number;
   tabelaPaginacao: {
     pageIndex: number;
     pageSize: number;
@@ -25,16 +26,22 @@ const Paginacao = ({
   data,
   handlePaginationChange,
   tabelaPaginacao,
+  tamanhoPaginacao,
 }: PaginacaoProps<any>) => {
   return (
     <S.PaginacaoWrapper>
       <div className="pagination-header">
         <p>
-          Exibindo {tabelaPaginacao.pageSize} de {data.length}
+          Exibindo{' '}
+          {tabelaPaginacao.pageSize > data.length
+            ? data.length
+            : tabelaPaginacao.pageSize}{' '}
+          de {data.length}
         </p>
         <div className="select-wrapper">
           <SelectCustomizado
             tipo="round"
+            disabled={data.length > tabelaPaginacao.pageIndex}
             onChange={(e) =>
               handlePaginationChange({
                 pageIndex: tabelaPaginacao.pageIndex,
@@ -46,12 +53,12 @@ const Paginacao = ({
           />
         </div>
       </div>
-      <div className="pagination">
+      <S.PaginationButtons>
         <Botao
           data-testid="Anterior"
           className="button-pagination"
           tipo="default"
-          disabled={tabelaPaginacao.pageIndex === 1}
+          disabled={tabelaPaginacao.pageIndex === 0}
           onClick={() => {
             handlePaginationChange({
               pageIndex: tabelaPaginacao.pageIndex - 1,
@@ -62,20 +69,23 @@ const Paginacao = ({
           Anterior
         </Botao>
         <S.PaginationMantine
-          value={tabelaPaginacao.pageIndex}
+          value={
+            tabelaPaginacao.pageIndex === 0 ? 1 : tabelaPaginacao.pageIndex + 1
+          }
           onChange={(e) => {
             handlePaginationChange({
-              pageIndex: e,
+              pageIndex: e === 1 ? 0 : e - 1,
               pageSize: tabelaPaginacao.pageSize,
             });
           }}
-          total={data.length / tabelaPaginacao.pageSize}
+          total={tamanhoPaginacao!}
           withControls={false}
           color={theme.colors.blue}
         />
         <Botao
           data-testid="Proximo"
           tipo={'default'}
+          disabled={tamanhoPaginacao === tabelaPaginacao.pageIndex + 1}
           onClick={() => {
             handlePaginationChange({
               pageIndex: tabelaPaginacao.pageIndex + 1,
@@ -86,7 +96,7 @@ const Paginacao = ({
         >
           Proximo
         </Botao>
-      </div>
+      </S.PaginationButtons>
     </S.PaginacaoWrapper>
   );
 };

package/src/components/molecules/Paginacao/styles.ts

@@ -1,5 +1,5 @@
-import { Pagination } from "@mantine/core";
-import styled, { css } from "styled-components";
+import { Pagination } from '@mantine/core';
+import styled, { css } from 'styled-components';
 
 export const PaginacaoWrapper = styled.div`
   ${({ theme }) => css`
@@ -17,26 +17,9 @@ export const PaginacaoWrapper = styled.div`
     }
 
     .select-wrapper {
-      width: 70px;
+      width: 85px;
       margin-left: 15px;
     }
-
-    .pagination {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-
-      .button-pagination {
-        height: 32px;
-        border: none;
-        color: ${theme.colors.blue};
-        background-color: ${theme.colors.white};
-        border-radius: 5px;
-        font-weight: 500;
-        font-size: ${theme.sizes.small};
-        padding: 0 15px;
-      }
-    }
   `}
 `;
 
@@ -45,13 +28,34 @@ export const PaginationMantine = styled(Pagination)`
     margin: 15px 0;
 
     button {
-      color: ${theme.colors.gray["700"]};
+      color: ${theme.colors.gray['700']};
       font-weight: 500;
       font-size: ${theme.sizes.meddium};
 
-      &[data-active="true"] {
+      &[data-active='true'] {
         color: ${theme.colors.white};
       }
     }
   `}
 `;
+
+export const PaginationButtons = styled.div`
+  ${({ theme }) => css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+
+    .button-pagination {
+      border: 1px solid red;
+      height: 32px;
+      border: none;
+      color: ${theme.colors.blue};
+      background-color: ${theme.colors.white};
+      border-radius: 5px;
+      font-weight: 500;
+      font-size: ${theme.sizes.small};
+      padding: 0 15px;
+    }
+  `}
+`;

package/src/components/organismos/Tabela/Tabela.stories.tsx

@@ -1,7 +1,12 @@
 import React from 'react';
 import Tabela, { TabelaProps } from './index';
 import { Meta } from '@storybook/react';
-import { TabelaStoryContainer } from './styles';
+import { TabelaAcoes, TabelaStoryContainer } from './styles';
+import IconeBotao from '../../atomos/IconeBotao';
+import Icone from '../../atomos/Icone';
+import { theme } from '../../../styles/theme';
+import editar from '../../../assets/imagens/icons/EditarPerfil.svg';
+import deletar from '../../../assets/imagens/icons/RemoveFIltro.svg';
 
 export default {
   title: 'Components/organismos/Tabela',
@@ -36,15 +41,122 @@ const columns: any = [
   },
 ];
 
+const data: any = [
+  {
+    nome: 'exemplo',
+    email: 'exemplo@gmail.com',
+    genero: 'masculino',
+    rua: 'Alameda Olga',
+    estado: 'SP',
+    cidade: 'São Paulo',
+  },
+  {
+    nome: 'exemplo',
+    email: 'exemplo@gmail.com',
+    genero: 'masculino',
+    rua: 'Alameda Olga',
+    estado: 'SP',
+    cidade: 'São Paulo',
+  },
+  {
+    nome: 'exemplo',
+    email: 'exemplo@gmail.com',
+    genero: 'masculino',
+    rua: 'Alameda Olga',
+    estado: 'SP',
+    cidade: 'São Paulo',
+  },
+  {
+    nome: 'exemplo',
+    email: 'exemplo@gmail.com',
+    genero: 'masculino',
+    rua: 'Alameda Olga',
+    estado: 'SP',
+    cidade: 'São Paulo',
+  },
+  {
+    nome: 'exemplo',
+    email: 'exemplo@gmail.com',
+    genero: 'masculino',
+    rua: 'Alameda Olga',
+    estado: 'SP',
+    cidade: 'São Paulo',
+  },
+  {
+    nome: 'exemplo',
+    email: 'exemplo@gmail.com',
+    genero: 'masculino',
+    rua: 'Alameda Olga',
+    estado: 'SP',
+    cidade: 'São Paulo',
+  },
+  {
+    nome: 'exemplo',
+    email: 'exemplo@gmail.com',
+    genero: 'masculino',
+    rua: 'Alameda Olga',
+    estado: 'SP',
+    cidade: 'São Paulo',
+  },
+  {
+    nome: 'exemplo',
+    email: 'exemplo@gmail.com',
+    genero: 'masculino',
+    rua: 'Alameda Olga',
+    estado: 'SP',
+    cidade: 'São Paulo',
+  },
+  {
+    nome: 'exemplo',
+    email: 'exemplo@gmail.com',
+    genero: 'masculino',
+    rua: 'Alameda Olga',
+    estado: 'SP',
+    cidade: 'São Paulo',
+  },
+  {
+    nome: 'exemplo',
+    email: 'exemplo@gmail.com',
+    genero: 'masculino',
+    rua: 'Alameda Olga',
+    estado: 'SP',
+    cidade: 'São Paulo',
+  },
+  {
+    nome: 'exemplo',
+    email: 'exemplo@gmail.com',
+    genero: 'masculino',
+    rua: 'Alameda Olga',
+    estado: 'SP',
+    cidade: 'São Paulo',
+  },
+];
+
 const props: TabelaProps<any> = {
-  chave: 'users',
+  data: data,
+  isLoading: false,
   columns: columns,
-  endpoint: '',
-  tituloTabela: 'Usuario',
   enableExpanding: false,
-  baseUrl: 'https://randomuser.me/api/',
   enableRowSelection: false,
   enableRowActions: false,
+  tamanhoPaginacao: 10,
+  handleAdicionar: () => console.log('adicionar'),
+  acoes: ({ row }) => (
+    <TabelaAcoes>
+      <IconeBotao
+        tipo="table"
+        onClick={() => console.log('edit', row.original)}
+      >
+        <Icone svg={editar} fill={theme.colors.blue} width={20} height={20} />
+      </IconeBotao>
+      <IconeBotao
+        tipo="table"
+        onClick={() => console.log('delete', row.original)}
+      >
+        <Icone svg={deletar} fill={theme.colors.blue} width={20} height={20} />
+      </IconeBotao>
+    </TabelaAcoes>
+  ),
 };
 
 const Template: any = (args: TabelaProps<any>) => (

package/src/components/organismos/Tabela/Tabela.test.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import Tabela from './index';
 import { render } from '../../../test/render';
 
-/* TODO Fazer teste de requisição */
 describe('Tabela', () => {
   const columns: any = [
     {
@@ -34,13 +33,12 @@ describe('Tabela', () => {
   it('Renderiza corretamente', () => {
     const { getByText } = render(
       <Tabela<any>
-        baseUrl="https://randomuser.me/api/"
+        isLoading={false}
+        data={[]}
         tituloTabela="Usuário"
-        chave="users"
         enableExpanding={false}
         enableRowSelection={false}
         columns={columns}
-        endpoint={'/usuarios'}
       />
     );
 
@@ -52,13 +50,12 @@ describe('Tabela', () => {
 
     const { getByText } = render(
       <Tabela<any>
+        data={[]}
+        isLoading={false}
         enableExpanding={false}
-        baseUrl="https://randomuser.me/api/"
         enableRowSelection={false}
         tituloTabela="Usuário"
-        chave="users"
         columns={columns}
-        endpoint={'/usuarios'}
       />
     );
     const botaoPlanilha = getByText('Baixar Planilha de Dados');

package/src/components/organismos/Tabela/index.tsx

@@ -8,20 +8,18 @@ import {
   MRT_ColumnFiltersState,
   MRT_SortingState,
   MRT_ColumnOrderState,
-  MRT_RowSelectionState
+  MRT_RowSelectionState,
+  MRT_Cell,
+  MRT_Row,
+  MRT_TableInstance
 } from "mantine-react-table";
 import * as S from "./styles";
 import { useCallback, useMemo, useState } from "react";
 import Paginacao from "../../molecules/Paginacao";
 import TabelaHeader, { SelectDataProps } from "../../molecules/TabelaHeader";
-import { getData } from "../../../hooks/tabelaHook";
+// import { getData } from "../../../hooks/tabelaHook";
 import { utils, writeFileXLSX } from "xlsx";
 import { Table } from "@mantine/core";
-import Icone from "../../atomos/Icone";
-import { theme } from "../../../styles/theme";
-import editar from "../../../assets/imagens/icons/EditarPerfil.svg";
-import deletar from "../../../assets/imagens/icons/RemoveFIltro.svg";
-import IconeBotao from "../../atomos/IconeBotao";
 import SkeletonTable from "./SkeletonTable";
 import HeaderTable from "./HeaderTable";
 import BodyTable from "./BodyTable";
@@ -29,42 +27,38 @@ import FooterTable from "./FooterTable";
 import { MRT_Localization_PT_BR } from "../../../utils/tableLocale";
 
 export interface TabelaProps<T extends MRT_RowData> {
+  data: Array<T>
   columns: MRT_ColumnDef<T>[];
+  isLoading: boolean;
   tituloTabela?: string;
-  endpoint: string;
-  baseUrl:string;
-  chave: string;
+  tamanhoPaginacao?:number;
   enableRowSelection: boolean;
+  handleAdicionar?: (() => void) | undefined;
   setRowSelection?: React.Dispatch<React.SetStateAction<MRT_RowSelectionState>>;
+  acoes?: ((props: {
+    cell: MRT_Cell<T, unknown>;
+    renderedRowIndex?: number;
+    row: MRT_Row<T>;
+    table: MRT_TableInstance<T>;
+}) => React.ReactNode) | undefined
   rowSelection?: MRT_RowSelectionState | undefined;
   enableExpanding: boolean;
   fixedPosition?: Array<string>;
   enableRowActions?: boolean;
   hasTotalFooter?: boolean;
 }
-export interface GetParams {
-  columnFilterFns: MRT_ColumnFilterFnsState;
-  columnFilters: MRT_ColumnFiltersState;
-  globalFilter: string;
-  sorting: MRT_SortingState;
-  order: string;
-  pagination: MRT_PaginationState;
-  chave: string;
-  endpoint: string;
-  baseUrl: string;
-  filtrosPor: string;
-  columnOrder: MRT_ColumnOrderState;
-}
 
 function Tabela<T extends MRT_RowData>({
+  data,
   columns,
+  isLoading,
   tituloTabela,
-  endpoint,
-  baseUrl,
+  tamanhoPaginacao,
   setRowSelection,
-  chave,
+  handleAdicionar,
   enableRowSelection,
   enableRowActions,
+  acoes,
   hasTotalFooter,
   enableExpanding,
   rowSelection = {},
@@ -93,7 +87,7 @@ function Tabela<T extends MRT_RowData>({
   const [sorting, setSorting] = useState<MRT_SortingState>([]);
 
   const [pagination, setPagination] = useState<MRT_PaginationState>({
-    pageIndex: 1,
+    pageIndex: 0,
     pageSize: 10
   });
   const [ordenarPor, setOrdenarPor] = useState<SelectDataProps>({
@@ -105,20 +99,7 @@ function Tabela<T extends MRT_RowData>({
   const [filtrosPor, setFiltrosPor] = useState(filtrosPelaTabela[0] ?? []);
   const [toogleBuscarColuna, setToogleBuscarColuna] = useState(false);
 
-  const { data, isLoading } = getData({
-    columnFilterFns,
-    columnFilters,
-    globalFilter,
-    sorting,
-    order: ordenarPor.value,
-    endpoint,
-    baseUrl: baseUrl,
-    chave,
-    filtrosPor: filtrosPor.value,
-    columnOrder,
-    pagination
-  });
-
+ 
   const calcStickPosition = useCallback(
     (index: number) => {
       if (enableExpanding) {
@@ -144,11 +125,10 @@ function Tabela<T extends MRT_RowData>({
     [columnFilters]
   );
 
-  const fetchData = data ?? [];
 
-  const table = useMantineReactTable({
-    columns: columns,
-    data: fetchData,
+  const table = useMantineReactTable({  
+    data: data,
+    columns: columns,    
     enableRowSelection: enableRowSelection,
     onRowSelectionChange: setRowSelection,
     getRowId: (row) => row.id,
@@ -215,7 +195,7 @@ function Tabela<T extends MRT_RowData>({
       fz: "xs"
     },
 
-    renderRowActions: ({ row }) => (
+    renderRowActions: acoes && acoes/* ({ row }) => (
       <S.TabelaAcoes>
         <IconeBotao
           tipo="table"
@@ -235,11 +215,11 @@ function Tabela<T extends MRT_RowData>({
           />
         </IconeBotao>
       </S.TabelaAcoes>
-    )
+    ) */
   });
 
   const exportarXlsx = useCallback(() => {
-    const ws = utils.json_to_sheet(fetchData);
+    const ws = utils.json_to_sheet(data);
     const wb = utils.book_new();
     utils.book_append_sheet(wb, ws, "Data");
     writeFileXLSX(wb, "SheetJSReactAoO.xlsx");
@@ -265,6 +245,7 @@ function Tabela<T extends MRT_RowData>({
       {/* Filtros e titulo */}
       <TabelaHeader<T>
         table={table}
+        handleAdicionar={handleAdicionar}
         toogleBuscarColuna={toogleBuscarColuna}
         setToogleBuscarColuna={setToogleBuscarColuna}
         setGlobalFilter={setGlobalFilter}
@@ -317,12 +298,16 @@ function Tabela<T extends MRT_RowData>({
 
       {/* Paginação */}
       <S.TabelaPaginationWrapper>
-        <Paginacao
-          data={data! ?? []}
-          handlePaginationChange={(prev) => setPagination(prev)}
-          setTabelaPaginacaoProps={setPagination}
-          tabelaPaginacao={pagination}
-        />
+        {data.length > 0 && (
+          <Paginacao
+          tamanhoPaginacao={tamanhoPaginacao}
+            data={data! ?? []}
+            handlePaginationChange={(prev) => setPagination(prev)}
+            setTabelaPaginacaoProps={setPagination}
+            tabelaPaginacao={pagination}
+
+          />
+        )}
       </S.TabelaPaginationWrapper>
     </S.TabelaWrapper>
   );

package/src/components/organismos/Tabela/styles.ts

@@ -106,7 +106,7 @@ export const TabelaBody = styled(Table.Tbody)`
       }
 
       &:hover {
-        opacity: 0.8;
+        opacity: 0.6;
       }
 
       &[data-active='true'] {
@@ -121,7 +121,7 @@ export const TabelaBody = styled(Table.Tbody)`
 
     .mantine-focus-auto {
       &:hover {
-        opacity: 0.8;
+        opacity: 0.6;
       }
     }
     .sticky {
@@ -180,7 +180,8 @@ export const TabelaPaginationWrapper = styled.div`
 `;
 
 export const TabelaStoryContainer = styled.div`
-  ${() => css`
+  ${({ theme }) => css`
+    background-color: ${theme.colors.gray['300']};
     .mrt-table-head-sort-button {
       margin-left: 5px;
       width: 15px;

package/src/hooks/users/index.tsx

@@ -5,28 +5,30 @@ export const useUser = ({ ...props }: GetParams) => {
   const handleGetUsuarios = async () => {
     try {
       const { data } = await axios.get(`${props.endpoint}`);
-      const dataFormatada = data.results.map((usuario: any, index: number) => {
-        return {
-          nome: usuario.name.first,
-          email: usuario.email,
-          genero: usuario.gender,
-          rua: usuario.location.street.name,
-          estado: usuario.location.state,
-          cidade: usuario.location.city,
-          idade: index,
-          id: index,
-          subRows: [
-            {
-              nome: 'exemplo',
-              email: 'exemplo',
-              genero: 'exemplo',
-              rua: 'exemplo',
-              estado: 'exemplo',
-              cidade: 'exemplo',
-            },
-          ],
-        };
-      });
+      const dataFormatada =
+        data?.results ??
+        [].map((usuario: any, index: number) => {
+          return {
+            nome: usuario.name.first,
+            email: usuario.email,
+            genero: usuario.gender,
+            rua: usuario.location.street.name,
+            estado: usuario.location.state,
+            cidade: usuario.location.city,
+            idade: index,
+            id: index,
+            subRows: [
+              {
+                nome: 'exemplo',
+                email: 'exemplo',
+                genero: 'exemplo',
+                rua: 'exemplo',
+                estado: 'exemplo',
+                cidade: 'exemplo',
+              },
+            ],
+          };
+        });
       return dataFormatada;
     } catch (error) {
       console.error(error);