React ag-grid row auto height doesn't work

Question

I was trying to implement the row auto height feature described in the docs here:

https://www.ag-grid.com/javascript-grid-row-height/#auto-row-height

However it seems to not be working in my case. What happens for me is that the text doesn't wrap at all and it just creates a single long line for each row.

I've tried adapting the code as best as I could to my own app, but maybe I missed something? I'll be thankful if you could take a look at my code and tell me if something is missing:

const defaultColDefProperties = {
    flex: 1,
    editable: true,
    resizable: true,
    floatingFilter: true,
    filter: true,
    wrapText: true,
    autoHeight: true,
  };

const columnDefinition = [{headerName: "Key", field: "Key"},
                          {headerName: "Value", field: "Value"}];

const ConfigurationDataGrid = (props) =>
{                                                                           
    const [gridRowData, setGridRowData] = useState([]);  
    const gridApi = useRef(null);
    
    useEffect(async () =>
    {
      const getRowData = async () =>
      {
        let rowData = await WebApi.getRowData();     
        setGridRowData(rowData);   
      }
      await getRowData();
    },[]);

    const onGridReady = params => 
    {
      gridApi.current = params.api;
    }

    const onColumnResized = (params) => 
    {
      params.api.resetRowHeights();
    }
  
    const onColumnVisible = (params) => 
    {
      params.api.resetRowHeights();
    }

    return (
          <div style={{ width: '100%', height: '100%' }}>
              <UxDataGrid 
                id='datagrid' 
                className='custom-datagrid' 
                onGridReady={onGridReady}
                columnDefs={columnDefinition} 
                rowData={gridRowData} 
                defaultColDef={defaultColDefProperties}
                onColumnResized={onColumnResized}
                onColumnVisible={onColumnVisible}/>
          </div>
  );
}

The css class:

    .custom-datagrid {
    height: 100%;
    border: 0px;
    margin-top: 0px !important;
    margin-right: 0px !important;
    margin-left: 0px !important;
  }

What am I missing?

i don't see AgGridReact component used from where you have imported UxDataGrid component & can you share minimal working example. — Chandan
I tried to reproduce stackblitz.com/edit/… , but unable to reproduce it. is UxDataGrid is a component wrapper on top of AgGrid, if yes, please share the code and please share the CSS class 'custom-datagrid' also. — Sam
@Chandan this UxDataGrid is a wrapper for ag-grid. I did not make it and I don't have its code. Just think of it as a regular ag-grid — Yonatan Nir
@Sam I have added the css class. I don't have access to the UxDataGrid class which is like you said a wrapper for the ag-grid — Yonatan Nir
@YonatanNir Thank you for the quick response. As per my experience, it looks defaultColDef is being passed to the underlying AG grid. you need to check the UXGrid documentation, how you need to pass this information. May be through gridOption property.(ag-grid.com/javascript-grid-column-definitions) — Sam

shutsman shutsman · Accepted Answer · 2021-01-04T12:08:48

In my case I have ra-ui-grid it is the same as your component - UxDataGrid

Inside ra-ui-grid I have next definitions:

.html:

<ag-grid-angular
    class="ag-theme-balham grid"
    ...
></ag-grid-angular>

.ts:

        defaultColDef: {
            flex: 1,
            ...
        },

.scss:

    ra-ui-grid {
        height: 100%;
        display: flex;
        flex-flow: column nowrap;


        .grid {
            height: 100%;
         }
}

Then in some component, I am using ra-ui-grid with 2 wrappers

.html

    <div class="io">
        <div class="io__table">
            <ra-ui-grid
                [data]="data"
                [config]="gridConfig"
                [columns]="columnDefs"
                (onPaginationChanged)="paginationChanged.next($event)"
            ></ra-ui-grid>
        </div>
</div>

.scss:

        .io {
            height: calc(100% - 36px);
            display: flex;
            flex-direction: column;

            &__table {
                flex: 1;
                min-height: 254px;
            }
        }

React ag-grid row auto height doesn't work

1 Answers