Blife UI

¿Qué hace?

Convierte tus datos y definiciones de columnas en encabezados y filas listos para renderizar. Sin escribir <th> y <td> manualmente.

Importación

import { useTable } from "@blifedesarrollo/hooks";

Uso básico

Empleados de la Empresa

ID	Nombre	Email	Departamento	Salario
1	Juan Pérez	juan@email.com	Ingeniería	5000
2	María García	maria@email.com	Diseño	4500
3	Carlos López	carlos@email.com	Marketing	4200
4	Ana Rodríguez	ana@email.com	Ventas	4800

Cómo funciona

1. Define tus datos

const data = [
  { id: 1, nombre: "Juan", edad: 25 },
  { id: 2, nombre: "Ana", edad: 30 },
];

2. Define tus columnas

const columns = [
  {
    id: "nombre",
    header: "Nombre",
    accessorKey: "nombre", // ← Campo del objeto a mostrar
  },
  {
    id: "edad",
    header: "Edad",
    accessorKey: "edad",
  },
];

3. Usa el hook y renderiza

const { headers, rows } = useTable({ data, columns });
 
return (
  <Table>
    <TableHeader>
      <TableRow>
        {headers.map((header) => (
          <TableHead key={header.id}>{header.renderHeader()}</TableHead>
        ))}
      </TableRow>
    </TableHeader>
    <TableBody>
      {rows.map((row) => (
        <TableRow key={row.id}>
          {row.cells().map((cell) => (
            <TableCell key={cell.id}>{cell.renderCell()}</TableCell>
          ))}
        </TableRow>
      ))}
    </TableBody>
  </Table>
);

Conceptos clave

`accessorKey` - Para texto plano

Úsalo solo cuando quieres mostrar el valor directamente como texto:

{
  id: "nombre",
  header: "Nombre",
  accessorKey: "nombre", // ← Muestra el valor como texto plano
}

Importante: accessorKey sin cell solo muestra texto plano. Si necesitas formatear, usar componentes React o personalizar el renderizado, debes usar cell.

`cell` - Para personalizar el renderizado

Usa cell cuando necesitas:

Formatear valores (fechas, precios, etc.)
Usar componentes React (Badges, Botones, etc.)
Render condicional
Combinar múltiples campos

// Con accessorKey + cell → usa getValue()
{
  id: "precio",
  header: "Precio",
  accessorKey: "precio", // ← Extrae el valor
  cell: ({ getValue }) => {
    const precio = getValue(); // ← Obtiene el valor extraído
    return `$${precio.toFixed(2)}`; // ← Lo formateas
  },
}

// Sin accessorKey → usa row.data
{
  id: "acciones",
  header: "Acciones",
  // Sin accessorKey - no hay campo específico
  cell: ({ row }) => (
    <button onClick={() => edit(row.data.id)}>Editar</button>
  ),
}

Resumen:

Solo accessorKey → Muestra texto plano
accessorKey + cell → Personalizas el valor extraído
Solo cell → Accedes a row.data completo

Ejemplos comunes

Texto plano (solo accessorKey)

{
  id: "nombre",
  header: "Nombre",
  accessorKey: "nombre", // ← Muestra directamente el texto
}

Formatear valores (accessorKey + cell)

{
  id: "fecha",
  header: "Fecha",
  accessorKey: "fechaLanzamiento", // ← Extrae el valor
  cell: ({ getValue }) => {
    // getValue() retorna el valor de accessorKey
    return new Date(getValue()).toLocaleDateString("es-ES");
  },
}

Columna de acciones (solo cell)

{
  id: "acciones",
  header: "Acciones",
  // Sin accessorKey - no hay campo específico
  cell: ({ row }) => (
    <div className="flex gap-2">
      <button onClick={() => handleEdit(row.data)}>Editar</button>
      <button onClick={() => handleDelete(row.data.id)}>Eliminar</button>
    </div>
  ),
}

Combinar múltiples campos (solo cell)

{
  id: "nombreCompleto",
  header: "Nombre Completo",
  // Sin accessorKey - necesitas múltiples campos
  cell: ({ row }) => {
    const { nombre, apellido } = row.data;
    return <span>{`${nombre} ${apellido}`}</span>;
  },
}

Encabezado personalizado

{
  id: "nombre",
  header: () => (
    <div className="flex items-center gap-2">
      <Icon />
      <span>Nombre</span>
    </div>
  ),
  accessorKey: "nombre",
}

API

Parámetros

Prop	Tipo	Descripción
`data`	`Array<Object>`	Array de objetos (filas de la tabla)
`columns`	`Array<Object>`	Definición de columnas

Columnas

Prop	Tipo	Descripción
`id`	`string`	Identificador único (requerido)
`header`	`string \| ReactNode \| () => ReactNode`	Contenido del encabezado
`accessorKey`	`string`	Campo del objeto a mostrar como texto plano (opcional)
`cell`	`(params) => ReactNode`	Función para personalizar el renderizado de la celda (opcional, requiere cell)

Retorno

Prop	Tipo	Descripción
`headers`	`Array<Object>`	Encabezados con `renderHeader()`
`rows`	`Array<Object>`	Filas con `cells()` y `data`

💡 Regla rápida

Solo texto plano? → Usa accessorKey (sin cell)
Necesitas formatear o usar componentes? → accessorKey + cell con getValue()
Columna especial (acciones, checkboxes, combinar campos)? → Solo cell con row.data

use-table

Empleados de la Empresa