Skip to main content

Guía de Visibilidad de Columnas

Ejemplos​

¿Quieres ir directamente a la implementación? Echa un vistazo a estos ejemplos:

Otros Ejemplos​

API​

API de visibilidad de columnas

Guía de Visibilidad de Columnas​

La funcionalidad de visibilidad de columnas permite que las columnas de una tabla se oculten o muestren dinámicamente. En versiones anteriores de react-table, esta característica era una propiedad estática en una columna, pero en la v8, existe un estado columnVisibility dedicado y APIs para gestionar la visibilidad de las columnas dinámicamente.

Estado de Visibilidad de Columnas​

El estado columnVisibility es un mapa de IDs de columna a valores booleanos. Una columna estará oculta si su ID está presente en el mapa y el valor es false. Si el ID de la columna no está presente en el mapa, o el valor es true, la columna se mostrará.

const [columnVisibility, setColumnVisibility] = useState({
  columnId1: true,
  columnId2: false, //ocultar esta columna por defecto
  columnId3: true,
});

const table = useReactTable({
  //...
  state: {
    columnVisibility,
    //...
  },
  onColumnVisibilityChange: setColumnVisibility,
});

Alternativamente, si no necesitas gestionar el estado de visibilidad de las columnas fuera de la tabla, aún puedes establecer el estado inicial de visibilidad de columnas por defecto utilizando la opción initialState.

Nota: Si se proporciona columnVisibility tanto a initialState como a state, la inicialización de state tendrá prioridad e initialState será ignorado. No proporciones columnVisibility tanto a initialState como a state, solo a uno u otro.

const table = useReactTable({
  //...
  initialState: {
    columnVisibility: {
      columnId1: true,
      columnId2: false, //ocultar esta columna por defecto
      columnId3: true,
    },
    //...
  },
});

Deshabilitar Ocultar Columnas​

Por defecto, todas las columnas se pueden ocultar o mostrar. Si quieres evitar que ciertas columnas se oculten, debes establecer la opción de columna enableHiding en false para esas columnas.

const columns = [
  {
    header: "ID",
    accessorKey: "id",
    enableHiding: false, // deshabilitar ocultamiento para esta columna
  },
  {
    header: "Nombre",
    accessor: "name", // se puede ocultar
  },
];

APIs para alternar la visibilidad de las columnas​

Existen varios métodos de la API de columna que son útiles para renderizar interruptores de visibilidad de columnas en la interfaz de usuario.

  • column.getCanHide - Útil para deshabilitar el interruptor de visibilidad para una columna que tiene enableHiding establecido en false.
  • column.getIsVisible - Útil para establecer el estado inicial del interruptor de visibilidad.
  • column.toggleVisibility - Útil para alternar la visibilidad de una columna.
  • column.getToggleVisibilityHandler - Atajo para conectar el método column.toggleVisibility a un controlador de eventos de la interfaz de usuario.
{
  table.getAllColumns().map((column) => (
    <label key={column.id}>
      <input
        checked={column.getIsVisible()}
        disabled={!column.getCanHide()}
        onChange={column.getToggleVisibilityHandler()}
        type="checkbox"
      />
      {column.columnDef.header}
    </label>
  ));
}

APIs de tabla conscientes de la visibilidad de columnas​

Cuando renderizas las celdas de tu encabezado, cuerpo y pie de página, hay muchas opciones de API disponibles. Es posible que veas APIs como table.getAllLeafColumns y row.getAllCells, pero si usas estas APIs, no tendrán en cuenta la visibilidad de las columnas. En su lugar, necesitas usar las variantes "visibles" de estas APIs, como table.getVisibleLeafColumns y row.getVisibleCells.

<table>
  <thead>
    <tr>
      {table.getVisibleLeafColumns().map((column) => ( // tiene en cuenta la visibilidad de las columnas
        //
      ))}
    </tr>
  </thead>
  <tbody>
    {table.getRowModel().rows.map((row) => (
      <tr key={row.id}>
        {row.getVisibleCells().map((cell) => ( // tiene en cuenta la visibilidad de las columnas
          //
        ))}
      </tr>
    ))}
  </tbody>
</table>

Si estás utilizando las APIs de Header Group, estas ya tendrán en cuenta la visibilidad de las columnas.