javascriptreactjsresponsive-designag-gridag-grid-react

How can I make my column width responsive in AG Grid for React.js?

I use React AG Grid library and I work on a 1920*1080 screen size. I need to use responsive column widths for other screen sizes.

columnDefinitionComplaintAndRequest: [
  { headerName: "Sıra", field: "", width: 30, minWidth: 10, maxWidth: 300, suppressSizeToFit: false },
  { headerName: "Subscriber No", field: "", width: 130, minWidth: 10, maxWidth: 450, suppressSizeToFit: false },
  // ...
]

I tried a percentage instead of "30", but it doesn't work. How can I set percentage value for responsive design in AG Grid?

Solution

  • I recommend calling gridApi.sizeColumnsToFit(); in your onGridReady callback. This will adjust the size of all columns to exactly fill in the available width of the grid. When you set the width property of the column definition to 30, it is in pixels, not percent.