reactjs - Grouped and non-grouped data (regular rows) in same grid - Stack Overflow

admin管理员组

文章数量:1344240

Is it possible to show Grouped and individual or regular rows in same grid with AG-Grid? In the image attached can we remove the highlighted red row with empty country and display as regular row?enter image description here

So far I could not find a way to show both grouped and non-grouped data in single ag-grid. Attached image is what I see with ag-grid. Please let me know if it'enter image description heres possible to show mixed grid?

import React from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-enterprise';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

function App() {
  const rowData = [
    { country: 'USA', city: 'New York', population: 8400000 },
    { country: 'USA', city: 'Los Angeles', population: 3900000 },
    { country: 'USA', city: 'Chicago', population: 2700000 },
    { country: 'Canada', city: 'Toronto', population: 2930000 },
    { country: 'Canada', city: 'Montreal', population: 1780000 },
    { country: 'UK', city: 'London', population: 8900000 },
    { country: 'UK', city: 'Manchester', population: 547000 },
    { country: '', city: 'Singapore', population: 5700000 },
    { country: '', city: 'Dubai', population: 3300000 },
    { country: '', city: 'Hong Kong', population: 7500000 }
  ];

  const columnDefs = [
    { 
      field: 'country',
      rowGroup: true,
      hide: true,
      valueGetter: params => {
        // Only return the country value if it's not empty
        return params.data?.country ? params.data.country : undefined;
      }
    },
    { 
      field: 'city',
      flex: 1
    },
    { 
      field: 'population',
      flex: 1,
      valueFormatter: params => params.value?.toLocaleString() || ''
    }
  ];

  const defaultColDef = {
    sortable: true,
    filter: true,
    resizable: true
  };

  const autoGroupColumnDef = {
    headerName: 'Country',
    minWidth: 200,
    flex: 1,
    cellRenderer: 'agGroupCellRenderer',
    cellRendererParams: {
      suppressCount: false
    }
  };

  return (
    <div className="grid-container">
      <h2>Population Data by Country</h2>
      <div className="ag-theme-alpine" style={{ height: 400 }}>
        <AgGridReact
          rowData={rowData}
          columnDefs={columnDefs}
          defaultColDef={defaultColDef}
          autoGroupColumnDef={autoGroupColumnDef}
          groupDefaultExpanded={1}
          suppressAggregation={true}
          animateRows={true}
        />
      </div>
    </div>
  );
}

export default App;

本文标签： reactjsGrouped and nongrouped data (regular rows) in same gridStack Overflow