{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/react-data-grid/column-sizing/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"All columns can be resized by dragging the top right portion of the column."}]},{"type":"element","tagName":"h2","properties":{"id":"enable-sizing","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#enable-sizing","ariaLabel":"enable sizing permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Enable Sizing"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Turn column resizing on for the grid by setting "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"resizable=true"}]},{"type":"text","value":" for each column. To set resizing for each column, set "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"resizable=true"}]},{"type":"text","value":" on the "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/column-definitions/#default-column-definitions"},"children":[{"type":"text","value":"default column definition"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The snippet below allows all columns except Address to be resized by explicitly setting each column."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        { field: 'name', resizable: true },\n        { field: 'age', resizable: true },\n        { field: 'address' },\n    ],\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The snippet below allows all columns except Address to be resized by setting "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"resizable=true"}]},{"type":"text","value":" on the default column definition and then "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"resizable=false"}]},{"type":"text","value":" on the Address column."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    defaultColDef: {\n        resizable: true,\n    },\n    columnDefs: [\n        { field: 'name' },\n        { field: 'age' },\n        { field: 'address', resizable: false },\n    ],\n}\n"}]},{"type":"element","tagName":"h2","properties":{"id":"size-columns-to-fit","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#size-columns-to-fit","ariaLabel":"size columns to fit permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Size Columns to Fit"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Call the Grid Api "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api.sizeColumnsToFit()"}]},{"type":"text","value":" to make the currently visible columns fit the screen. The columns will scale (growing or shrinking) to fit the available width."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-api/api.json","section":"columns","names":"[\"sizeColumnsToFit\"]"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you don't want a particular column to be included in the auto resize, then set the column definition "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressSizeToFit=true"}]},{"type":"text","value":". This is helpful if, for example, you want the first column to remain fixed width, but all other columns to fill the width of the table."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The grid calculates new column widths while maintaining the ratio of the column default widths. So for example\nif Column A has a default size twice as width as Column B, then after calling "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api.sizeColumnsToFit()"}]},{"type":"text","value":" Column A\nwill still be twice the size of Column B, assuming no Column min-width or max-width constraints are violated."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Column default widths, rather than current widths, are used while calculating the new widths. This insures\nthe result is deterministic and not depend on any Column resizing the user may have manually done."}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For example assuming a grid with three Columns, the algorithm will be as follows:"},{"type":"element","tagName":"br","properties":{},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"scale = availableWidth / (w1 + w2 + w3)"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nw1 = round(w1 * scale)"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nw2 = round(w2 * scale)"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nw3 = totalGridWidth - (w1 + w2)"},{"type":"element","tagName":"br","properties":{},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Assuming the grid is 1,200 pixels wide and the Columns have default widths of 40, 120 and 300,\nthen the calculation is as follows:"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"availableWidth = 1,198 (available width is typically smaller as the grid typically has left and right boarders)"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nscale = 1198 / (50 + 120 + 300) = 2.548936170212766"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\ncol 1 = 50 * 2.54 = 127.44 -> rounded = 127"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\ncol 2 = 120 * 2.54 = 305.87 -> rounded = 306"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\ncol 3 = 1198 - (127 + 306) = 765 // last col gets the space that's left, which ensures all space is used, no rounding issues"},{"type":"element","tagName":"br","properties":{},"children":[]}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"auto-size-columns","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#auto-size-columns","ariaLabel":"auto size columns permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Auto-Size Columns"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Just like Excel, each column can be 'auto resized' by double clicking the right side of the header rather than dragging it. When you do this, the grid will work out the best width to fit the contents of the cells in the column."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note the following with regards autosizing columns:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The grid works out the best width by considering the virtually rendered rows only. For example, if your grid has 10,000 rows, but only 50 rendered due to virtualisation of rows, then only these 50 will be considered for working out the width to display. The rendered rows are all the rows you can see on the screen through the horizontal scroll plus a small buffer (default buffer size is 20)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Autosizing columns looks at the rendered cells on the screen, and works out the width based on what it sees. It cannot see the columns that are not rendered due to column virtualisation. Thus it is not possible to autosize a column that is not visible on the screen."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":" Column Virtualisation is the technique the grid uses to render large amounts of columns without degrading performance by only rendering columns that are visible due to the horizontal scroll positions. For example, the grid can have 1,000 columns with only 10 rendered if the horizontal scroll is only showing 10 columns."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"To get around this, you can turn off column virtualisation by setting grid property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressColumnVirtualisation=true"}]},{"type":"text","value":". The choice is yours, whether you want column virtualisation working OR auto-size working using off-screen columns."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By default the grid will also resize the column to fit the header. If you do not want the headers to be included in the autosize calculation, set the grid property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"skipHeaderOnAutoSize=true"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h3","properties":{"id":"autosize-column-api","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#autosize-column-api","ariaLabel":"autosize column api permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Autosize Column API"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Autosizing columns can also be done using the following column API methods. If "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"skipHeader=true"}]},{"type":"text","value":", the header won't be included when calculating the column widths."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/column-groups/"},"children":[{"type":"text","value":"Column Groups"}]},{"type":"text","value":" are never considered when calculating the column widths."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"column-api/api.json","section":"Sizing","names":"[\"autoSizeColumn\", \"autoSizeColumns\", \"autoSizeAllColumns\"]"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"resizing-example","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#resizing-example","ariaLabel":"resizing example permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Resizing Example"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows resizing in action. Things to note are as follows:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Each column can be resized by dragging (or double-clicking or auto resize) the right side of its header."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The button 'Size to Fit' calls "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api.sizeColumnsToFit()"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The button 'Auto-Size All' calls "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"columnApi.autoSizeColumns([columnIds])"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The button 'Auto-Size All (Skip Header)' calls "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"columnApi.autoSizeColumns([columnIds], true)"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The first column is fixed width (i.e. "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressSizeToFit = true"}]},{"type":"text","value":"), which means its size does not change when "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sizeColumnsToFit"}]},{"type":"text","value":" is called."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'age'"}]},{"type":"text","value":" column has both a minimum and maximum size set, so resizing the column will be restricted by these, regardless of dragging the header or using any of the API buttons."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the example below, also of note is the second column, which has both a min and max size set, which is also respected with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sizeColumnsToFit"}]},{"type":"text","value":". The remaining columns will spread to fill the remaining space after you press the button."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Column Resizing","name":"column-resizing","type":"generated"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"column-flex","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#column-flex","ariaLabel":"column flex permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Column Flex"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It's often required that one or more columns fill the entire available space in the grid. For this scenario, it is possible to use the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"flex"}]},{"type":"text","value":" config. Some columns could be set with a regular "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":" config, while other columns would have a flex config."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Flex sizing works by dividing the remaining space in the grid among all flex columns in proportion to their flex value. For example, suppose the grid has a total width of 450px and it has three columns: the first with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"width: 150"}]},{"type":"text","value":"; the second with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"flex: 1"}]},{"type":"text","value":"; and third with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"flex: 2"}]},{"type":"text","value":". The first column will be 150px wide, leaving 300px remaining. The column with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"flex: 2"}]},{"type":"text","value":" has twice the size with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"flex: 1"}]},{"type":"text","value":". So final sizes will be: 150px, 100px, 200px."}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The flex config does "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"not"}]},{"type":"text","value":" work with a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":" config\nin same column. If you need to provide a minimum width for a column,\nyou should use flex and the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"minWidth"}]},{"type":"text","value":" config. Flex will also take "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"maxWidth"}]},{"type":"text","value":"\ninto account."}]}]}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you manually resize a column with flex either via the API or by dragging the resize handle,\nflex will automatically be disabled for that column."}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows flex in action. Things to note are as follows:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Column A is fixed size. You can resize it with the drag handle and the other two columns will adjust to fill the available space"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Column B has "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"flex: 2"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"minWidth: 200"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"maxWidth: 350"}]},{"type":"text","value":", so it should be constrained to this max/min width."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Column C has "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"flex: 1"}]},{"type":"text","value":" so should be half the size of column B, unless column B is being constrained by its "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"minWidth"}]},{"type":"text","value":"/"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"maxWidth"}]},{"type":"text","value":" rules, in which case it should take up the remaining available space."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Column Flex","name":"flex-columns","type":"generated"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"sizing-columns-by-default","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#sizing-columns-by-default","ariaLabel":"sizing columns by default permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Sizing Columns By Default"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is possible to have the grid auto size the columns to fill the width by default. Do this by calling "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api.sizeColumnsToFit()"}]},{"type":"text","value":" on the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridReady"}]},{"type":"text","value":" event."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note that "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api.sizeColumnsToFit()"}]},{"type":"text","value":" needs to know the grid width in order to do its maths. If the grid is not attached to the DOM, then this will be unknown. In the example below, the grid is not attached to the DOM when it is created (and hence "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api.sizeColumnsToFit()"}]},{"type":"text","value":" should fail). The grid checks again after 100ms, and tries to resize again. This is needed for some frameworks (e.g. Angular) as DOM objects are used before getting attached."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Default Resizing","name":"default-resizing","type":"generated"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"shift-resizing","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#shift-resizing","ariaLabel":"shift resizing permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Shift Resizing"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you hold the "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Shift"}]},{"type":"text","value":" key while dragging the resize handle, the column will take space away from the column adjacent to it. This means the total width for all columns will be constant."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can also change the default behaviour for resizing. Set the grid property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colResizeDefault='shift'"}]},{"type":"text","value":" to have shift resizing as the default and normal resizing to happen when the "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Shift"}]},{"type":"text","value":" key is pressed."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the example below, note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Grid property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colResizeDefault='shift'"}]},{"type":"text","value":" so default column resizing will behave as if "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Shift"}]},{"type":"text","value":" key is pressed."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Holding down "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Shift"}]},{"type":"text","value":" will then resize the normal default way."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Shift Resizing","name":"shift-resizing","type":"generated"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"resizing-groups","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#resizing-groups","ariaLabel":"resizing groups permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Resizing Groups"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When you resize a group, it will distribute the extra room to all columns in the group equally. In the example below the groups can be resized as follows:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The group 'Everything Resizes' will resize all columns."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The group 'Only Year Resizes' will resize only year, because the other columns have "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"resizable=false"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The group 'Nothing Resizes' cannot be resized at all because all the columns in the groups have "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"resizable=false"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Resizing Groups","name":"resizing-groups","type":"generated"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"resizing-columns-when-data-is-rendered","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#resizing-columns-when-data-is-rendered","ariaLabel":"resizing columns when data is rendered permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Resizing Columns When Data Is Rendered"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When auto sizing columns, the grid uses the rendered cells to work out the appropriate widths. This means that the result\nof calling "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"columnApi.autoSizeColumns()"}]},{"type":"text","value":" is dependent on the browser's rendering and may also change depending on\nasynchronous rendering in your framework."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you intend to call "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"columnApi.autoSizeColumns()"}]},{"type":"text","value":" after creating the grid, in most cases it should be sufficient to wait\nfor the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"firstDataRendered"}]},{"type":"text","value":" event before resizing. "}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/server-side-model/#top"},"children":[{"type":"text","value":"Server Side Row Model"}]},{"type":"text","value":" inserts a dummy row with a loading spinner before the actual row\ndata is returned from the server, which means the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"firstDataRendered"}]},{"type":"text","value":" event cannot be relied on when resizing columns."}]}]}]}]},"frontmatter":{"title":"Column Sizing","version":null,"enterprise":null,"description":null},"headings":[{"id":"enable-sizing","depth":2,"value":"Enable Sizing"},{"id":"size-columns-to-fit","depth":2,"value":"Size Columns to Fit"},{"id":"auto-size-columns","depth":2,"value":"Auto-Size Columns"},{"id":"autosize-column-api","depth":3,"value":"Autosize Column API"},{"id":"resizing-example","depth":2,"value":"Resizing Example"},{"id":"column-flex","depth":2,"value":"Column Flex"},{"id":"sizing-columns-by-default","depth":2,"value":"Sizing Columns By Default"},{"id":"shift-resizing","depth":2,"value":"Shift Resizing"},{"id":"resizing-groups","depth":2,"value":"Resizing Groups"},{"id":"resizing-columns-when-data-is-rendered","depth":2,"value":"Resizing Columns When Data Is Rendered"}]}},"pageContext":{"frameworks":["javascript","angular","react","vue"],"framework":"react","srcPath":"/column-sizing","pageName":"column-sizing"}},
    "staticQueryHashes": ["1766026005","3577950178","699667431"]}