Table Filter Woow

Un componente de tabla personalizable y filtrable para aplicaciones React. Funciones personalizables con menu de opciones en cada celda.

Versión

v1.1.6

Content

Props

padding (opcional)

• Tipo: string
• Valor por defecto: "4px"
• Descripción: Espaciado interno del contenedor.

flexDirection (opcional)

• Tipo: "column" | "row"
• Valor por defecto: "row"
• Descripción: Dirección del flujo de los elementos hijos dentro del contenedor.

justifyContent (opcional)

• Tipo: "space-between" | "space-evenly" | "space-around" | "center" | "end" | "start" | "right" | "left"
• Valor por defecto: "center"
• Descripción: Alineación de los elementos hijos a lo largo del eje principal del contenedor.

alignItems (opcional)

• Tipo: "center" | "baseline" | "start" | "end" | "stretch"
• Valor por defecto: "center"
• Descripción: Alineación de los elementos hijos a lo largo del eje transversal del contenedor.

gap (opcional)

• Tipo: string
• Descripción: Espacio entre los elementos hijos dentro del contenedor.

backgroundColor (opcional)

• Tipo: string
• Descripción: Color de fondo del contenedor.

width (opcional)

• Tipo: string
• Valor por defecto: "100%"
• Descripción: Ancho del contenedor.

borderRadius (opcional)

• Tipo: string
• Descripción: Radio de borde del contenedor.

children

• Tipo: React.ReactNode
• Descripción: Elementos hijos que se renderizarán dentro del contenedor.

TableComponent

Props

array

• Tipo: Record<string, unknown>[]
• Descripción: Array de datos que se mostrarán en la tabla.

columns (opcional)

• Tipo: Col[]

• Descripción: Array de definiciones de columnas.

  • id (opcional): number - Identificador único para la columna.
  • name (opcional): string - Nombre de la columna.
  • backgroundColor (opcional): string - Color de fondo para la columna.
  • textColor (opcional): string - Color del texto para la columna.

  Ejemplo de uso:

rows (opcional)

• Tipo: Row[]

• Descripción: Array de definiciones de filas.

  • id (opcional): number - Identificador único para la fila.
  • field (opcional): string - Nombre del campo para la fila.
  • backgroundColor (opcional): string - Color de fondo para la fila.
  • biColor (opcional): boolean - Indica si la fila tiene colores alternos.
  • backgroundColor1 (opcional): string - Color de fondo para el primer conjunto de filas.
  • backgroundColor2 (opcional): string - Color de fondo para el segundo conjunto de filas.
  • functions (opcional):
  • Tipo: boolean
  • Descripción: Indica si la fila incluye acciones adicionales que se pueden realizar.

• actions (opcional):

  • Tipo: Action[]
  • Descripción: Lista de acciones que se pueden llevar a cabo en la fila, utilizada solo si functions es true.

  Propiedades de Action:

  • id (obligatorio):

    • Tipo: number
    • Descripción: Identificador único para la acción.

  • name (obligatorio):

    • Tipo: string
    • Descripción: Nombre descriptivo de la acción.

  • action (obligatorio):

    • Tipo: (id: number) => void

    • Descripción: Función que se ejecutará al activar la acción, recibiendo como parámetro el id del elemento correspondiente.

    • arg (opcional):

    • Tipo: string

    • textColor (opcional):

    • Tipo: string

    • Descripción: Color que se quiera asignar al nombre de la funcion en el modal

Ejemplo de uso de ROWS y COLUMS:

const columns = [
    {
      id: 2,
      name: "Nombre",
      backgroundColor: "red",
      textColor: "green",
    },
    {
      id: 3,
      name: "Direccion",
      backgroundColor: "green",
      textColor: "yellow",
    },
    {
      id: 4,
      name: "Telefono",
      backgroundColor: "green",
      textColor: "yellow",
    },
  ];

const rows = [
  {
    id: 2,
    field: "name",
  },
  {
    id: 3,
    field: "address",
    textColor: "green",
  },
  {
    id: 4,
    field: "phone",
    textColor: "green",
  },
  {
    id: 5,
    functions: true,
    actions: [
      {
        id: 1,
        name: "Eliminar",
        action: deleteFunction,
        textColor: "blue"
      },
      {
        id: 2,
        name: "Obtener ID",
        action: showAlert,
      },
    ],
  },
];

 const deleteCommerce = async (field) => {
    const isConfirm = confirm("Seguro que desea eliminar?");

    if (isConfirm) {

      const url = "http://my-endpoint:8888/commerces";

      try {
        const response = await fetch(`${url}/${field}`, {
          method: "DELETE",
          headers: {
            "Content-Type": "application/json",
          },
        });

        if (!response.ok) {

          throw new Error(`Error al eliminar: ${response.status}`);
        }
        const json = await response.json();
      } catch (error) {
        setLoading(false);
        console.error("Error al eliminar:", error);
      }
    }
  };

  const showAlert = () => {
    alert("Una funcion mas");
  };


### `placeholder` (opcional)

- **Tipo:** `string`
- **Descripción:** Texto de marcador de posición para el filtro de entrada.


### `borderRadiusThead` (opcional)

- **Tipo:** `string`
- **Descripción:** Radio de borde para el encabezado de la tabla.

### `borderRadiusTd` (opcional)

- **Tipo:** `string`
- **Descripción:** Radio de borde para las celdas de la tabla.

### `borderTbody` (opcional)

- **Tipo:** `boolean`
- **Valor por defecto:** `true`
- **Descripción:** Indica si el cuerpo de la tabla debe tener un borde.

### `inputStyle` (opcional)

- **Tipo:** `"primary" | "secondary" | "simple"`
- **Valor por defecto:** `"primary"`
- **Descripción:** Estilo del filtro de entrada.

### `borderRadiusInput` (opcional)

- **Tipo:** `string`
- **Descripción:** Radio de borde para el filtro de entrada.

### `colorTbody` (opcional)

- **Tipo:** `ColorTbody`
- **Descripción:** Objeto que contiene propiedades de color para el cuerpo de la tabla.
  - **`biColor`** (opcional): `boolean` - Indica si el cuerpo de la tabla tiene colores alternos en las filas.
  - **`backgroundColor1`** (opcional): `string` - Color de fondo para el primer conjunto de filas.
  - **`backgroundColor2`** (opcional): `string` - Color de fondo para el segundo conjunto de filas.
  - **`backgroundColor`** (opcional): `string` - Color de fondo para el cuerpo de la tabla.
  - **`textColor`** (opcional): `string` - Color del texto para el cuerpo de la tabla.

### `inputFilter` (opcional)

- **Tipo:** `boolean`
- **Valor por defecto:** `true`
- **Descripción:** Indica si se debe mostrar el filtro de entrada.

### `textFilterError` (opcional)

- **Tipo:** `string`
- **Valor por defecto:** `"No hay coincidencia"`
- **Descripción:** Texto que se muestra cuando no hay coincidencias en el filtro.

### `borderSpacing` (opcional)

- **Tipo:** `number`
- **Valor por defecto:** `0`
- **Descripción:** Espaciado entre los bordes de la tabla.

### `heightTable` (opcional)

- **Tipo:** `string`
- **Descripción:** Altura de la tabla.

### `filterBy` (opcional)

- **Tipo:** `string`
- **Descripción:** Nombre del campo por el cual filtrar la tabla.

### `gap` (opcional)

- **Tipo:** `string`
- **Descripción:** Espacio entre los elementos de la tabla.