wca-designsystem 0.0.49 → 0.0.51

package/package.json

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

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

@@ -9,11 +9,13 @@ import { theme } from '../../../styles/theme';
 export interface SelectCustomizadoProps extends SelectProps {
   tipo: 'table' | 'round';
   labelAbaixo?: string;
+  color?: string;
 }
 
 const SelectCustomizado = ({
   tipo,
   labelAbaixo,
+  color,
   ...props
 }: SelectCustomizadoProps) => {
   /* Renderiza conforme o tipo que você escolher */
@@ -40,16 +42,12 @@ const SelectCustomizado = ({
         table: (
           <S.SelectTabela
             {...props}
+            color={color}
             data-testid="table"
             height={'25px'}
             mih={'25px'}
             rightSection={
-              <Icone
-                svg={arrowDown}
-                width={20}
-                height={20}
-                fill={theme.colors.blue}
-              />
+              <Icone svg={arrowDown} width={20} height={20} fill={color} />
             }
           />
         ),

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

@@ -43,20 +43,20 @@ export const RightSelect = styled.div`
 `;
 
 export const SelectTabela = styled(Select)`
-  ${({ theme }) => css`
+  ${({ color }) => css`
     border-radius: 5px;
 
     input {
       min-height: 25px;
       height: 25px;
-      box-shadow: 0px 2px 3px 0px ${theme.colors.blue};
+      box-shadow: 0px 2px 3px 0px ${color};
       border: none;
-      color: ${theme.colors.blue};
+      color: ${color};
       background-color: transparent;
       font-weight: bold;
 
       &::placeholder {
-        color: ${theme.colors.blue};
+        color: ${color};
       }
     }
   `}

package/src/components/molecules/Graficos/Area/Area.stories.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import AreaChart, { AreaWrapperProps, DataInfoProps } from './index';
+import { Meta } from '@storybook/react/*';
+
+import '@mantine/charts/styles.css';
+
+export default {
+  title: 'Components/moleculas/Graficos/Area',
+  component: AreaChart,
+} as Meta;
+
+const data = [
+  { date: 1, Apples: 110 },
+  { date: 2, Apples: 600 },
+  { date: 3, Apples: 800 },
+  { date: 4, Apples: 500 },
+  { date: 5, Apples: 1000 },
+  { date: 6, Apples: 400 },
+  { date: 7, Apples: 1200 },
+  { date: 8, Apples: 800 },
+  { date: 9, Apples: 950 },
+  { date: 10, Apples: 700 },
+  { date: 11, Apples: 850 },
+  { date: 12, Apples: 550 },
+  { date: 13, Apples: 900 },
+  { date: 14, Apples: 750 },
+  { date: 15, Apples: 600 },
+  { date: 16, Apples: 1100 },
+  { date: 17, Apples: 500 },
+  { date: 18, Apples: 100 },
+  { date: 19, Apples: 0 },
+  { date: 20, Apples: 850 },
+  { date: 21, Apples: 700 },
+  { date: 22, Apples: 650 },
+  { date: 23, Apples: 0 },
+  { date: 24, Apples: 800 },
+  { date: 25, Apples: 1200 },
+  { date: 26, Apples: 1050 },
+  { date: 27, Apples: 500 },
+  { date: 28, Apples: 950 },
+  { date: 29, Apples: 700 },
+  { date: 30, Apples: 800 },
+];
+
+const dataInfo: Array<DataInfoProps> = [
+  {
+    id: 'info-1',
+    dataLabel: 'Total Data (01)',
+    dataValores: '89,529',
+    color: '#1151b1',
+  },
+  {
+    id: 'info-2',
+    dataLabel: 'Data (02)',
+    dataValores: '83,529',
+    color: '#1151b1',
+  },
+  {
+    id: 'info-3',
+    dataLabel: 'Data (03)',
+    dataValores: '5,000',
+    color: '#1151b1',
+  },
+];
+
+const series = [{ name: 'Apples', color: '#ACC0DE' }];
+
+const props: AreaWrapperProps = {
+  data: data,
+  series: series,
+  dataKey: 'date',
+  bg: '#EEE',
+  w: undefined,
+  h: undefined,
+  withLegend: false,
+  datainfo: dataInfo,
+  titulo: 'Título',
+  subtitulo: 'Texto explicativo curto',
+  containerinfo: true,
+};
+
+const Template: any = (args: AreaWrapperProps) => (
+  <>
+    <AreaChart {...args} />
+  </>
+);
+
+export const AreaStory = Template.bind({
+  ...props,
+});
+
+AreaStory.args = {
+  ...props,
+};

package/src/components/molecules/Graficos/Area/Area.test.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { render } from '../../../../test/render';
+import AreaWrapper from './index';
+
+const mockData = [
+  { name: 'Janeiro', value: 50 },
+  { name: 'Fevereiro', value: 80 },
+  { name: 'Março', value: 40 },
+];
+
+const mockSeries = [{ name: 'Série 1', color: '#ACC0DE' }];
+
+describe('Componente AreaChart', () => {
+  test('Renderiza com informações de título e subtítulo', () => {
+    const { getByText } = render(
+      <AreaWrapper
+        titulo="Título Teste"
+        subtitulo="Subtítulo Teste"
+        containerinfo={true}
+        data={mockData}
+        series={mockSeries}
+        dataKey="value"
+      />
+    );
+
+    expect(getByText('Título Teste')).toBeDefined();
+    expect(getByText('Subtítulo Teste')).toBeDefined();
+  });
+
+  test('Renderiza os elementos de DataInfo corretamente', () => {
+    const mockDataInfo = [
+      { id: '1', dataValores: '10%', dataLabel: 'Janeiro', color: '#FF0000' },
+      { id: '2', dataValores: '20%', dataLabel: 'Fevereiro', color: '#00FF00' },
+    ];
+
+    const { getByText, container } = render(
+      <AreaWrapper
+        datainfo={mockDataInfo}
+        containerinfo={true}
+        data={mockData}
+        series={mockSeries}
+        dataKey="value"
+      />
+    );
+
+    mockDataInfo.forEach(({ dataValores, dataLabel, color }) => {
+      expect(getByText(dataValores)).toBeDefined();
+      expect(getByText(dataLabel)).toBeDefined();
+
+      const colorBox = container.querySelector(
+        `[style="background-color: ${color};"]`
+      );
+      expect(colorBox).toBeDefined();
+    });
+  });
+
+  test('Renderiza o gráfico corretamente com dados fornecidos', () => {
+    const { container } = render(
+      <AreaWrapper
+        data={mockData}
+        series={mockSeries}
+        dataKey="value"
+        containerinfo={false}
+      />
+    );
+
+    // Verifica se o gráfico foi montado na DOM
+    const chartElement = container.querySelector('svg');
+    expect(chartElement).toBeDefined();
+  });
+
+  test('Lida com ausência de dados', () => {
+    const { container } = render(
+      <AreaWrapper
+        data={[]}
+        series={mockSeries}
+        dataKey="value"
+        containerinfo={false}
+      />
+    );
+
+    // Verifica se o gráfico não exibe informações
+    const chartElement = container.querySelector('svg');
+    expect(chartElement).toBeDefined(); // Gráfico deve existir
+    expect(container.textContent).not.toContain('%'); // Não deve exibir valores
+  });
+
+  test('Renderiza corretamente com containerinfo false', () => {
+    const { container, queryByText } = render(
+      <AreaWrapper
+        containerinfo={false}
+        data={mockData}
+        series={mockSeries}
+        dataKey="value"
+      />
+    );
+
+    // Verifica que informações do container não foram renderizadas
+    expect(queryByText('Título Teste')).toBeNull();
+    expect(container.querySelector('.data-valores')).toBeNull();
+  });
+});

package/src/components/molecules/Graficos/Area/index.tsx

@@ -0,0 +1,76 @@
+import { AreaChart, AreaChartProps } from '@mantine/charts';
+import {
+  Titulo,
+  SubTitulo,
+  DataInfo,
+  ContainerInfo,
+  ContainerGrafico,
+} from './styles';
+import React from 'react';
+import { Flex } from '@mantine/core';
+
+export interface DataInfoProps {
+  id: string;
+  dataValores: string;
+  dataLabel: string;
+  color?: string;
+}
+
+export interface AreaWrapperProps extends AreaChartProps {
+  titulo?: string;
+  corTitulo?: string;
+  subtitulo?: string;
+  datainfo?: Array<DataInfoProps>;
+  containerinfo: boolean;
+}
+
+const AreaWrapper = ({
+  data,
+  series,
+  dataKey,
+  h,
+  w,
+  withLegend,
+  bg,
+  titulo,
+  subtitulo,
+  datainfo,
+  containerinfo,
+  corTitulo,
+}: AreaWrapperProps) => {
+  return (
+    <ContainerGrafico bg={bg} width={w}>
+      {containerinfo && (
+        <ContainerInfo>
+          <Titulo color={corTitulo ?? '#316FCD'}>{titulo}</Titulo>
+          <SubTitulo>{subtitulo}</SubTitulo>
+          <Flex>
+            {datainfo?.map(({ id, color, dataLabel, dataValores }) => (
+              <DataInfo key={id} color={color}>
+                <div className="data-valores">{dataValores}</div>
+                <p className="data-texto">{dataLabel}</p>
+              </DataInfo>
+            ))}
+          </Flex>
+        </ContainerInfo>
+      )}
+      <AreaChart
+        fillOpacity={0.9}
+        bg={bg}
+        w={w}
+        h={h ?? 300}
+        data={data}
+        series={series}
+        dataKey={dataKey}
+        withLegend={withLegend}
+        gridAxis="none"
+        curveType="linear"
+        withDots={false}
+        withGradient={false}
+        tooltipAnimationDuration={200}
+      />
+    </ContainerGrafico>
+  );
+};
+
+export default AreaWrapper;

package/src/components/molecules/Graficos/Area/styles.ts

@@ -0,0 +1,53 @@
+import { DefaultMantineColor, StyleProp } from '@mantine/core';
+import styled, { css } from 'styled-components';
+
+export const Titulo = styled.h2`
+  color: ${({ color }) => color};
+  margin-bottom: 5px;
+`;
+
+export const SubTitulo = styled.p`
+  color: #a8a7aa;
+  margin: 0;
+  margin-bottom: 20px;
+`;
+
+export const DataInfo = styled.div`
+  ${({ color }) => css`
+    display: flex;
+    flex-direction: column;
+    width: 33.3%;
+    margin-bottom: 20px;
+
+    .data-valores {
+      font-weight: bold;
+      font-size: 24px;
+      color: ${color};
+    }
+
+    .data-texto {
+      color: #a8a7aa;
+      margin: 0;
+    }
+  `}
+`;
+
+interface ContainerInfoProps {
+  bg?: StyleProp<DefaultMantineColor>;
+  width?: StyleProp<React.CSSProperties['width']>;
+}
+
+export const ContainerInfo = styled.div`
+  padding-left: 20px;
+`;
+
+export const ContainerGrafico = styled.div<ContainerInfoProps>`
+  ${({ bg, width }: ContainerInfoProps) => css`
+    background-color: ${bg ?? '#FFF'};
+    max-width: ${width
+      ? typeof width === 'string'
+        ? width
+        : `${width}px`
+      : '100%'};
+  `}
+`;

package/src/components/molecules/Graficos/Barras/Barras.stories.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import BarChart from './index';
+import { Meta } from '@storybook/react/*';
+import { BarChartProps, ChartReferenceLineProps } from '@mantine/charts';
+
+import '@mantine/charts/styles.css';
+
+export default {
+  title: 'Components/moleculas/Graficos/Barras',
+  component: BarChart,
+} as Meta;
+
+const data = [
+  {
+    day: 'Monday',
+    Smartphones: 1200,
+    Laptops: 900,
+    Tablets: 200,
+    Cellphone: 700,
+    Tv: 280,
+  },
+  {
+    day: 'Tuesday',
+    Smartphones: 1900,
+    Laptops: [1000, 1200],
+    Tablets: 400,
+    Cellphone: 700,
+    Tv: 280,
+  },
+  {
+    day: 'Wednesday',
+    Smartphones: 400,
+    Laptops: 1000,
+    Tablets: 200,
+    Cellphone: 500,
+    Tv: 580,
+  },
+  {
+    day: 'Thursday',
+    Smartphones: 1000,
+    Laptops: 200,
+    Tablets: 800,
+    Cellphone: 200,
+    Tv: 480,
+  },
+  {
+    day: 'Friday',
+    Smartphones: 800,
+    Laptops: 1400,
+    Tablets: 1200,
+    Cellphone: 300,
+    Tv: 380,
+  },
+];
+
+const data_alt = [
+  { cargo: 'Previsão', info: 1250, color: '#007CFA' },
+  { cargo: 'Regional 1', info: [1000, 1420], color: '#ED0E09' },
+  { cargo: 'Regional 2', info: [800, 1100], color: '#FFDE00' },
+  { cargo: 'Regional 3', info: [900, 1200], color: '#35BC00' },
+  { cargo: 'Meta', info: 1250, color: '#7030A0' },
+];
+
+const series = [
+  { name: 'Smartphones', color: '#0D47A1' },
+  { name: 'Laptops', color: '#1E88E5' },
+  { name: 'Tablets', color: '#42A5F5' },
+  { name: 'Cellphone', color: '#81D4FA' },
+  { name: 'Tv', color: '#97eaf5' },
+];
+
+const series_alt = [{ name: 'info', color: '#000' }];
+
+const referenceLines: ChartReferenceLineProps[] = [
+  {
+    y: 1335,
+    color: 'red',
+    label: 'Meta',
+    labelPosition: 'insideTopRight',
+  },
+];
+
+const props: BarChartProps = {
+  data: data_alt,
+  series: series_alt,
+  dataKey: 'cargo',
+  h: 280,
+  referenceLines: referenceLines,
+  withLegend: true,
+};
+
+const Template: any = (args: BarChartProps) => (
+  <>
+    <BarChart {...args} />
+  </>
+);
+
+export const BarraStory = Template.bind({
+  ...props,
+});
+
+BarraStory.args = {
+  ...props,
+};

package/src/components/molecules/Graficos/Barras/Barras.test.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { render } from '../../../../test/render';
+import BarWrapper from './index';
+
+const mockData = [
+  { name: 'Janeiro', value: 50 },
+  { name: 'Fevereiro', value: 80 },
+  { name: 'Março', value: 40 },
+];
+
+const mockSeries = [{ name: 'Série 1', color: '#ACC0DE', dataKey: 'value' }];
+
+describe('Componente BarWrapper', () => {
+  test('Renderiza com dados e séries fornecidos', () => {
+    const { container } = render(
+      <BarWrapper
+        data={mockData}
+        series={mockSeries}
+        dataKey="value"
+        withLegend={false}
+        h={400}
+      />
+    );
+
+    // Verifica se o gráfico foi montado na DOM
+    const elementoGrafico = container.querySelector('svg');
+    expect(elementoGrafico).toBeDefined();
+  });
+
+  test('Renderiza legenda quando withLegend é true', () => {
+    const { container } = render(
+      <BarWrapper
+        data={mockData}
+        series={mockSeries}
+        dataKey="value"
+        withLegend={true}
+        h={400}
+      />
+    );
+
+    const elementoLegenda = container.querySelector('.mantine-legend');
+    expect(elementoLegenda).toBeDefined();
+  });
+
+  test('Lida corretamente com dados vazios', () => {
+    const { container } = render(
+      <BarWrapper
+        data={[]}
+        series={mockSeries}
+        dataKey="value"
+        withLegend={false}
+        h={400}
+      />
+    );
+
+    // Gráfico deve existir, mas sem barras
+    const elementoGrafico = container.querySelector('svg');
+    expect(elementoGrafico).toBeDefined();
+    expect(container.textContent).not.toContain('%'); // Sem valores renderizados
+  });
+
+  test('Aplica linhas de referência corretamente', () => {
+    const mockReferenceLines = [{ y: 60, label: 'Média', color: 'red' }];
+
+    const { container } = render(
+      <BarWrapper
+        data={mockData}
+        series={mockSeries}
+        dataKey="value"
+        referenceLines={mockReferenceLines}
+        withLegend={false}
+        h={400}
+      />
+    );
+
+    const elementoLinhaReferencia = container.querySelector(
+      '[style*="stroke: red"]'
+    );
+    expect(elementoLinhaReferencia).toBeDefined();
+  });
+
+  test('Ajusta altura com base na propriedade h', () => {
+    const alturaCustomizada = 500;
+    const { container } = render(
+      <BarWrapper
+        data={mockData}
+        series={mockSeries}
+        dataKey="value"
+        withLegend={false}
+        h={alturaCustomizada}
+      />
+    );
+
+    const elementoGrafico = container.querySelector('svg');
+    expect(elementoGrafico?.getAttribute('height')).toEqual(
+      alturaCustomizada.toString()
+    );
+  });
+});

package/src/components/molecules/Graficos/Barras/index.tsx

@@ -0,0 +1,28 @@
+import { BarChart, BarChartProps } from '@mantine/charts';
+import React from 'react';
+
+const BarWrapper = ({
+  data,
+  series,
+  dataKey,
+  referenceLines,
+  h,
+  withLegend,
+  type,
+}: BarChartProps) => {
+  return (
+    <BarChart
+      data={data}
+      series={series}
+      referenceLines={referenceLines}
+      dataKey={dataKey}
+      withLegend={withLegend}
+      type={type}
+      tooltipAnimationDuration={200}
+      gridAxis="xy"
+      h={h}
+    />
+  );
+};
+
+export default BarWrapper;

package/src/components/molecules/Graficos/Linhas/Linhas.stories.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import LinesChart from './index';
+import { Meta } from '@storybook/react/*';
+import { LineChartProps } from '@mantine/charts';
+
+import '@mantine/charts/styles.css';
+
+export default {
+  title: 'Components/moleculas/Graficos/Linhas',
+  component: LinesChart,
+} as Meta;
+
+const data = [
+  {
+    hour: '12:00',
+    Apples: 110,
+  },
+  {
+    hour: '13:00',
+    Apples: 60,
+  },
+  {
+    hour: '14:00',
+    Apples: 80,
+  },
+  {
+    hour: '15:00',
+    Apples: 75,
+  },
+  {
+    hour: '16:00',
+    Apples: 65,
+  },
+  {
+    hour: '17:00',
+    Apples: 40,
+  },
+];
+
+const series = [{ name: 'Apples', color: 'indigo' }];
+
+const props: LineChartProps = {
+  data: data,
+  series: series,
+  dataKey: 'hour',
+  h: 280,
+  withLegend: true,
+  color: 'red',
+};
+
+const Template: any = (args: LineChartProps) => (
+  <>
+    <LinesChart {...args} />
+  </>
+);
+
+export const LinesStory = Template.bind({
+  ...props,
+});
+
+LinesStory.args = {
+  ...props,
+};

package/src/components/molecules/Graficos/Linhas/Linhas.test.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { render } from '../../../../test/render';
+import LinesWrapper from './index';
+
+const mockData = [
+  { name: 'Janeiro', value: 50 },
+  { name: 'Fevereiro', value: 80 },
+  { name: 'Março', value: 40 },
+];
+
+const mockSeries = [{ name: 'Série 1', color: '#ACC0DE', dataKey: 'value' }];
+
+describe('Componente LinesWrapper', () => {
+  test('Renderiza com dados e séries fornecidos', () => {
+    const { container } = render(
+      <LinesWrapper
+        data={mockData}
+        series={mockSeries}
+        dataKey="value"
+        withLegend={false}
+        h={400}
+        color="#ACC0DE"
+      />
+    );
+
+    const chartElement = container.querySelector('svg');
+    expect(chartElement).toBeDefined();
+  });
+
+  test('Renderiza legenda quando withLegend é true', () => {
+    const { container } = render(
+      <LinesWrapper
+        data={mockData}
+        series={mockSeries}
+        dataKey="value"
+        withLegend={true}
+        h={400}
+        color="#ACC0DE"
+      />
+    );
+
+    const legendElement = container.querySelector('.mantine-legend');
+    expect(legendElement).toBeDefined();
+  });
+
+  test('Lida com ausência de dados de forma adequada', () => {
+    const { container } = render(
+      <LinesWrapper
+        data={[]}
+        series={mockSeries}
+        dataKey="value"
+        withLegend={false}
+        h={400}
+        color="#ACC0DE"
+      />
+    );
+
+    const chartElement = container.querySelector('svg');
+    expect(chartElement).toBeDefined();
+    expect(container.textContent).not.toContain('%'); // Sem valores renderizados
+  });
+
+  test('Aplica altura personalizada com base na propriedade h', () => {
+    const customHeight = 500;
+    const { container } = render(
+      <LinesWrapper
+        data={mockData}
+        series={mockSeries}
+        dataKey="value"
+        withLegend={false}
+        h={customHeight}
+        color="#ACC0DE"
+      />
+    );
+
+    const chartElement = container.querySelector('svg');
+    expect(chartElement?.getAttribute('height')).toEqual(
+      customHeight.toString()
+    );
+  });
+
+  test('Aplica corretamente as propriedades de cor nos pontos e pontos ativos', () => {
+    const customColor = '#FF5733';
+
+    const { container } = render(
+      <LinesWrapper
+        data={mockData}
+        series={mockSeries}
+        dataKey="value"
+        withLegend={false}
+        h={400}
+        color={customColor}
+      />
+    );
+
+    const dots = container.querySelectorAll('[r="2.5"][fill="#FF5733"]');
+    expect(dots.length).toBeGreaterThan(0); // Certifica que os pontos possuem a cor customizada
+  });
+});

package/src/components/molecules/Graficos/Linhas/index.tsx

@@ -0,0 +1,29 @@
+import { LineChart, LineChartProps } from '@mantine/charts';
+import React from 'react';
+
+const LinesWrapper = ({
+  data,
+  series,
+  dataKey,
+  withLegend,
+  h,
+  color,
+}: LineChartProps) => {
+  return (
+    <>
+      <LineChart
+        h={h ?? 300}
+        data={data}
+        series={series}
+        dataKey={dataKey}
+        withLegend={withLegend}
+        dotProps={{ r: 2.5, strokeWidth: 0, fill: color }}
+        activeDotProps={{ r: 2.5, strokeWidth: 0, fill: color }}
+        gridAxis="xy"
+        curveType="linear"
+      />
+    </>
+  );
+};
+
+export default LinesWrapper;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import * as S from './styles';
 import InputDeTexto from '../../atomos/InputDeTexto';
 import SelectCustomizado from '../../atomos/Select';
@@ -7,11 +7,15 @@ import IconeBotao from '../../atomos/IconeBotao';
 import Botao from '../../atomos/Botao';
 import pesquisar from '../../../assets/imagens/icons/Busca.svg';
 import ordernar from '../../../assets/imagens/icons/Ordernar.svg';
-import { SelectDataProps } from '../../organismos/Tabela';
+import { Column, SelectDataProps } from '../../organismos/Tabela';
 import filtrar from '../../../assets/imagens/icons/Filtrar.svg';
+import colunas from '../../../assets/imagens/icons/Colunas.svg';
 import plus from '../../../assets/imagens/icons/Mais.svg';
+import { Menu, Switch } from '@mantine/core';
 
-export type TabelaHeaderProps = {
+export type TabelaHeaderProps<
+  T extends { id: string | number; children: Array<T> }
+> = {
   globalFilter: string;
   setGlobalFilter: React.Dispatch<React.SetStateAction<string>>;
   setToogleFiltros: React.Dispatch<React.SetStateAction<boolean>>;
@@ -23,20 +27,33 @@ export type TabelaHeaderProps = {
   handleAdicionar?: () => void;
   ordenarPor?: SelectDataProps;
   hasFiltersButtons?: boolean;
+  columns: Column<T>[];
+  setFormatedColumns: React.Dispatch<React.SetStateAction<Column<T>[]>>;
 };
-const TabelaHeader = ({
+const TabelaHeader = <T extends { id: string | number; children: Array<T> }>({
   globalFilter,
   setGlobalFilter,
   setToogleFiltros,
   toogleFiltros,
   color,
   hasAdd,
+  columns,
   hasFiltersButtons,
   handleAdicionar,
   ordenarPor,
   setOrdenarPor,
+  setFormatedColumns,
   hasOrder,
-}: TabelaHeaderProps) => {
+}: TabelaHeaderProps<T>) => {
+  const onChangeCheckedColumn = useCallback((column: string) => {
+    const columnsFormated = columns.map(columnFiltered => {
+      if (columnFiltered.key === column) {
+        columnFiltered.active = !columnFiltered.active;
+      }
+      return columnFiltered;
+    });
+    setFormatedColumns(columnsFormated);
+  }, []);
   return (
     <S.HeaderTableContent>
       <InputDeTexto
@@ -47,6 +64,31 @@ const TabelaHeader = ({
         placeholder="Pesquisar na tabela"
         rightSection={<Icone svg={pesquisar} fill={color} />}
       />
+      <S.ToogleMenuColunas
+        color={color}
+        shadow="md"
+        width={150}
+        closeOnClickOutside={false}
+      >
+        <Menu.Target>
+          <button type="button" title="Toogle Colunas">
+            <Icone svg={colunas} fill={color} />
+          </button>
+        </Menu.Target>
+        <Menu.Dropdown>
+          {columns?.map(column => (
+            <Menu.Item key={String(column.key)}>
+              <S.MenuDropDown>
+                <Switch
+                  checked={column.active}
+                  onChange={() => onChangeCheckedColumn(String(column.key))}
+                />
+                {column.header}
+              </S.MenuDropDown>
+            </Menu.Item>
+          ))}
+        </Menu.Dropdown>
+      </S.ToogleMenuColunas>
       {hasOrder && (
         <SelectCustomizado
           tipo="table"
@@ -57,6 +99,7 @@ const TabelaHeader = ({
           onChange={(_value, option) => setOrdenarPor!(option)}
           value={ordenarPor ? ordenarPor.value : null}
           placeholder={`Ordenar por ${ordenarPor}`}
+          color={color}
           maw={200}
           comboboxProps={{
             position: 'bottom',

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

@@ -1,5 +1,10 @@
+import { Menu } from '@mantine/core';
 import styled, { css } from 'styled-components';
 
+type MenuColunaProps = {
+  color?: string;
+};
+
 export const HeaderTableContent = styled.div`
   ${({ theme }) => css`
     display: flex;
@@ -14,3 +19,45 @@ export const HeaderTableContent = styled.div`
 export const ToogleButton = styled.div`
   ${() => css``}
 `;
+
+export const ToogleMenuColunas = styled(Menu)<MenuColunaProps>`
+  ${({ theme, color }) => css`
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    background-color: ${theme.colors.gray['300']};
+    box-shadow: -1px 0px 0px 0px ${color};
+    border-right: none;
+    border-top: none;
+    border-bottom: none;
+    cursor: pointer;
+
+    &:hover {
+      background-color: ${theme.colors.white};
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      border-left: 2px solid rgba(203, 203, 203, 1);
+      box-shadow: none;
+
+      &:hover {
+        background-color: ${theme.colors.gray['300']};
+      }
+    }
+
+    .checkebox {
+      border: 1px solid red;
+    }
+  `}
+`;
+
+export const MenuDropDown = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  gap: 5px;
+`;

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

@@ -70,6 +70,7 @@ describe('Paginação', () => {
         setFiltrosPor={() => console.log('aqui')}
         setGlobalFilter={() => console.log('aqui')}
         setPagination={() => console.log('aqui')}
+        globalFilter={''}
       />
     );
 

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

@@ -187,7 +187,11 @@ function BodyTable<T extends { id: string | number; children: Array<T> }>(
     ];
   }
   return (
-    <S.TabelaBody color={color} style={{ left: hasSelect ? '52px' : '17px' }}>
+    <S.TabelaBody
+      color={color}
+      hasselect={hasSelect ? 'true' : 'false'}
+      // style={{ left: hasSelect ? '52px' : '17px' }}
+    >
       {data.flatMap(item =>
         renderRows(
           item,

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

@@ -82,7 +82,7 @@ const HeaderTabela = <T,>({
         {hasExpand && <></>}
         {hasSelect && <></>}
         {columns.map((header, index) => {
-          if (header.key === 'expand')
+          if (header.key === 'expand' || header.key === 'select')
             return <th key={index} className="expand"></th>;
           if (header.key !== 'acoes') {
             return (
@@ -116,7 +116,7 @@ const HeaderTabela = <T,>({
                             value: 'ativo',
                           });
                           setGlobalFilter(String(e.currentTarget.checked));
-                          setPagination({ pageIndex: 0, pageSize: 10 });
+                          setPagination({ pageIndex: 1, pageSize: 10 });
                         }}
                       />
                     ) : (
@@ -128,7 +128,7 @@ const HeaderTabela = <T,>({
                         tipo="table"
                         placeholder={`Pesquisar por: ${header.header}`}
                         onChange={e => {
-                          setPagination({ pageIndex: 0, pageSize: 10 });
+                          setPagination({ pageIndex: 1, pageSize: 10 });
                           setFiltrosPor({
                             label: header.header,
                             value:

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

@@ -14,6 +14,7 @@ export type Column<T> = {
   render?: (value: T) => React.ReactNode;
   cell?: (row: T) => React.ReactNode;
   expand?: (item: T) => React.ReactNode;
+  active: boolean;
 };
 
 export type SelectDataProps = {
@@ -94,9 +95,24 @@ const Tabela = <T extends { id: string | number; children: Array<T> }>({
 }: CustomTableProps<T>) => {
   const [toogleFiltros, setToogleFiltros] = useState(false);
 
+  const [formatedColumns, setFormatedColumns] = useState(
+    columns.map(column => {
+      return {
+        ...column,
+        active: true,
+      };
+    })
+  );
+
+  const columnsToShow = formatedColumns.filter(
+    column => column.active === true
+  );
+
   return (
     <S.TableWrapper>
       <TabelaHeader
+        setFormatedColumns={setFormatedColumns}
+        columns={formatedColumns}
         handleAdicionar={handleAdicionar}
         globalFilter={globalFilter}
         setGlobalFilter={setGlobalFilter}
@@ -125,12 +141,12 @@ const Tabela = <T extends { id: string | number; children: Array<T> }>({
               setSimples={setSimples}
               color={color}
               hasSelect={hasSelect}
-              columns={columns}
+              columns={columnsToShow}
               fixedPosition={fixedPosition!}
             />
           )}
           {isLoading ? (
-            <SkeletonTable columns={columns} data={data} />
+            <SkeletonTable columns={columnsToShow} data={data} />
           ) : (
             <>
               {data?.length === 0 ? (
@@ -145,7 +161,7 @@ const Tabela = <T extends { id: string | number; children: Array<T> }>({
                   setRowSelection={setRowSelection}
                   acoesChildren={acoesChildren}
                   data={data}
-                  columns={columns}
+                  columns={columnsToShow}
                 />
               )}
             </>

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

@@ -1,19 +1,19 @@
-import styled, { css } from 'styled-components'
-import { Pagination } from '@mantine/core'
+import styled, { css } from 'styled-components';
+import { Pagination } from '@mantine/core';
 
 type ColorsProp = {
-  color?: string
-  headerSelection?: Array<String>
-  hasselect?: string
-  tdMinWidth?: string
-}
+  color?: string;
+  headerSelection?: Array<String>;
+  hasselect?: string;
+  tdMinWidth?: string;
+};
 
 export const TableWrapper = styled.div`
   ${() => css`
     max-width: 1500px;
     overflow-x: hidden;
   `}
-`
+`;
 
 export const TableContainer = styled.div`
   overflow-x: auto;
@@ -21,7 +21,7 @@ export const TableContainer = styled.div`
   font-family: 'Open Sans', sans-serif;
   max-width: 1500px;
   width: 100%;
-`
+`;
 
 export const StyledTable = styled.table`
   ${({ theme }) => css`
@@ -52,7 +52,7 @@ export const StyledTable = styled.table`
       padding: 0;
     }
   `}
-`
+`;
 
 export const TabelaHeader = styled.thead<ColorsProp>`
   ${({ theme, color }) => css`
@@ -90,7 +90,7 @@ export const TabelaHeader = styled.thead<ColorsProp>`
       min-width: 50px;
     }
   `}
-`
+`;
 
 export const TabelaBody = styled.tbody<ColorsProp>`
   ${({ theme, color, hasselect }) => css`
@@ -98,13 +98,15 @@ export const TabelaBody = styled.tbody<ColorsProp>`
     width: 100%;
 
     .select {
-      position: fixed;
       background-color: ${color};
+      position: absolute;
+      left: 17px;
     }
 
     .expand {
+      position: absolute;
       width: 50px;
-      left: ${hasselect === 'true' ? '52px' : '17px'};
+      left: ${hasselect === 'true' ? '53px' : '17px'};
       background-color: ${color};
       display: flex;
       align-items: center;
@@ -142,12 +144,12 @@ export const TabelaBody = styled.tbody<ColorsProp>`
     }
 
     .sticky {
-      background-color:;
+      background-color: ;
       color: ${theme.colors.white};
       font-weight: bold;
     }
   `}
-`
+`;
 
 export const TabelaSemDados = styled.div<ColorsProp>`
   ${({ color, theme }) => css`
@@ -165,7 +167,7 @@ export const TabelaSemDados = styled.div<ColorsProp>`
       color: ${color};
     }
   `}
-`
+`;
 
 export const PaginacaoWrapper = styled.div<ColorsProp>`
   ${({ theme, color }) => css`
@@ -187,7 +189,7 @@ export const PaginacaoWrapper = styled.div<ColorsProp>`
       margin-left: 15px;
     }
   `}
-`
+`;
 
 export const PaginationMantine = styled(Pagination)`
   ${({ theme }) => css`
@@ -203,7 +205,7 @@ export const PaginationMantine = styled(Pagination)`
       }
     }
   `}
-`
+`;
 
 export const PaginationButtons = styled.div<ColorsProp>`
   ${({ theme, color }) => css`
@@ -223,4 +225,4 @@ export const PaginationButtons = styled.div<ColorsProp>`
       padding: 0 15px;
     }
   `}
-`
+`;