es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Ocultar encabezados de columna en ag-grid.

27 Jul, 2023 Programación

Aquí hay un ejemplo muy básico con ag-grid: https://stackblitz.com/edit/ag-grid-react-hello-world-qqjk5k

import React from 'react';
import { render } from 'react-dom';
import { AgGridColumn, AgGridReact } from 'ag-grid-react';

import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

const App = () => {
  const rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxter', price: 72000 },
  ];

  return (
    <div classname="ag-theme-alpine" style="{{" height:="" 400,="" width:="" 600="" }}="">
      <aggridreact rowdata="{rowData}">
        <aggridcolumn field="make" headerheight="0"></aggridcolumn>
        <aggridcolumn field="model" headerheight="0"></aggridcolumn>
        <aggridcolumn field="price" headerheight="0"></aggridcolumn>
      </aggridreact>
    </div>
  );
};

render(<app></app>, document.getElementById('root'));

Me gustaría no mostrar los encabezados de las columnas, por lo que puse headerHeight="0". Pero no funcionó.

¿Alguien sabe cómo ocultar los encabezados de las columnas?

Además, me gustaría pasar una matriz bidimensional [['Toyota', 'Celica', 35000],['Ford', 'Mondeo', 32000], ['Porsche', 'Boxter', 72000]] (en lugar de un objeto) a los datos. ¿Alguien sabe cómo hacer que ag-grid acepte eso? ¿Tenemos que convertir los datos nosotros mismos?

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para ocultar los encabezados de columna en ag-grid-react, puedes configurar la propiedad headerHeight en 0 para cada componente AgGridColumn. Sin embargo, en el código de ejemplo proporcionado, este enfoque parece no funcionar correctamente.

    Para resolver el problema, puedes usar en su lugar la propiedad headerRendererFramework y pasar un componente renderizador de encabezado personalizado que simplemente devuelva una cadena vacía. Aquí tienes cómo puedes modificar el código para lograr esto:

    import React from 'react';
import { render } from 'react-dom';
import { AgGridColumn, AgGridReact } from 'ag-grid-react';

import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

const EmptyHeaderRenderer = () => null; // un componente vacío que devuelve null

const App = () => {
  const rowData = [
    ['Toyota', 'Celica', 35000],
    ['Ford', 'Mondeo', 32000],
    ['Porsche', 'Boxter', 72000],
  ];

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact rowData={rowData}>
        <AgGridColumn field={0} headerRendererFramework={EmptyHeaderRenderer} />
        <AgGridColumn field={1} headerRendererFramework={EmptyHeaderRenderer} />
        <AgGridColumn field={2} headerRendererFramework={EmptyHeaderRenderer} />
      </AgGridReact>
    </div>
  );
};

render(<App />, document.getElementById('root'));

    En cuanto a pasar una matriz bidimensional como datos, simplemente puedes pasarla como la propiedad rowData a AgGridReact. Ag-grid no tiene requisitos específicos para el formato de datos y puede aceptar matrices de objetos o matrices de matrices. En este caso, solo necesitarás modificar la propiedad field para cada AgGridColumn para que coincida con el índice de la columna en lugar de la clave del objeto.

    Ten en cuenta que si quieres usar diferentes formatos de datos para diferentes columnas o realizar transformaciones de datos adicionales, puedes usar la propiedad valueGetter en lugar de field y pasar una función personalizada que extraiga los datos que necesitas.

Comments are closed.