1_N_E=(window.webpackJsonp_N_E=window.webpackJsonp_N_E||[]).push([[14],{JB29:function(e,t,a){"use strict";a.r(t),a.d(t,"meta",(function(){return c})),a.d(t,"default",(function(){return u}));var n=a("HALo"),l=a("dhJC"),i=a("q1tI"),r=a.n(i),b=a("7ljp"),o=a("er9C"),c=(r.a.createElement,{}),p={meta:c},s=function(e){var t=e.children,a=Object(l.a)(e,["children"]);return Object(b.b)(o.a,Object(n.a)({meta:c},a),t)};function u(e){var t=e.components,a=Object(l.a)(e,["components"]);return Object(b.b)(s,Object(n.a)({},p,a,{components:t,mdxType:"MDXLayout"}),Object(b.b)("h1",{id:"useflexlayout"},Object(b.b)("inlineCode",{parentName:"h1"},"useFlexLayout"),Object(b.b)("a",Object(n.a)({parentName:"h1"},{href:"#useflexlayout",title:"Direct link to heading",className:"anchor"}),Object(b.b)("span",Object(n.a)({parentName:"a"},{className:"icon icon-link"})))),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},"Plugin Hook"),Object(b.b)("li",{parentName:"ul"},"Optional")),Object(b.b)("p",null,Object(b.b)("inlineCode",{parentName:"p"},"useFlexLayout")," is a plugin hook that adds support for headers and cells to be rendered as ",Object(b.b)("inlineCode",{parentName:"p"},"inline-block")," ",Object(b.b)("inlineCode",{parentName:"p"},"div"),"s (or other non-table elements) with ",Object(b.b)("inlineCode",{parentName:"p"},"width")," being used as the flex-basis and flex-grow. This hook becomes useful when implementing both virtualized and resizable tables that must also be able to stretch to fill all available space."),Object(b.b)("p",null,Object(b.b)("strong",{parentName:"p"},"NOTE:")," Although no additional options are needed for this plugin to work, the core column options ",Object(b.b)("inlineCode",{parentName:"p"},"width"),", ",Object(b.b)("inlineCode",{parentName:"p"},"minWidth")," and ",Object(b.b)("inlineCode",{parentName:"p"},"maxWidth")," are used to calculate column and cell widths and must be set:"),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},Object(b.b)("inlineCode",{parentName:"li"},"minWidth")," is only used to limit column resizing. It does not define the minimum width for a column."),Object(b.b)("li",{parentName:"ul"},Object(b.b)("inlineCode",{parentName:"li"},"width")," is used as both the ",Object(b.b)("inlineCode",{parentName:"li"},"flex-basis")," and ",Object(b.b)("inlineCode",{parentName:"li"},"flex-grow"),". This means that it essentially acts as both the minimum width and flex-ratio of the column."),Object(b.b)("li",{parentName:"ul"},Object(b.b)("inlineCode",{parentName:"li"},"maxWidth")," is only used to limit column resizing. It does not define the maximum width for a column.")),Object(b.b)("p",null,Object(b.b)("a",Object(n.a)({parentName:"p"},{href:"./useTable#column-options"}),"See Column Options")," for more information on these options."),Object(b.b)("h3",{id:"row-properties"},"Row Properties",Object(b.b)("a",Object(n.a)({parentName:"h3"},{href:"#row-properties",title:"Direct link to heading",className:"anchor"}),Object(b.b)("span",Object(n.a)({parentName:"a"},{className:"icon icon-link"})))),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},Object(b.b)("inlineCode",{parentName:"li"},"getRowProps"),Object(b.b)("ul",{parentName:"li"},Object(b.b)("li",{parentName:"ul"},Object(b.b)("strong",{parentName:"li"},"Usage Required")),Object(b.b)("li",{parentName:"ul"},"This core prop getter is required to to enable absolute layout for rows")))),Object(b.b)("h3",{id:"cell-properties"},"Cell Properties",Object(b.b)("a",Object(n.a)({parentName:"h3"},{href:"#cell-properties",title:"Direct link to heading",className:"anchor"}),Object(b.b)("span",Object(n.a)({parentName:"a"},{className:"icon icon-link"})))),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},Object(b.b)("inlineCode",{parentName:"li"},"getCellProps"),Object(b.b)("ul",{parentName:"li"},Object(b.b)("li",{parentName:"ul"},Object(b.b)("strong",{parentName:"li"},"Usage Required")),Object(b.b)("li",{parentName:"ul"},"This core prop getter is required to to enable absolute layout for rows cells")))),Object(b.b)("h3",{id:"headergroup-properties"},"HeaderGroup Properties",Object(b.b)("a",Object(n.a)({parentName:"h3"},{href:"#headergroup-properties",title:"Direct link to heading",className:"anchor"}),Object(b.b)("span",Object(n.a)({parentName:"a"},{className:"icon icon-link"})))),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},Object(b.b)("inlineCode",{parentName:"li"},"getHeaderGroupProps"),Object(b.b)("ul",{parentName:"li"},Object(b.b)("li",{parentName:"ul"},Object(b.b)("strong",{parentName:"li"},"Usage Required")),Object(b.b)("li",{parentName:"ul"},"This core prop getter is required to to enable absolute layout for headers")))),Object(b.b)("h3",{id:"header-properties"},"Header Properties",Object(b.b)("a",Object(n.a)({parentName:"h3"},{href:"#header-properties",title:"Direct link to heading",className:"anchor"}),Object(b.b)("span",Object(n.a)({parentName:"a"},{className:"icon icon-link"})))),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},Object(b.b)("inlineCode",{parentName:"li"},"getHeaderProps"),Object(b.b)("ul",{parentName:"li"},Object(b.b)("li",{parentName:"ul"},Object(b.b)("strong",{parentName:"li"},"Usage Required")),Object(b.b)("li",{parentName:"ul"},"This core prop getter is required to to enable absolute layout for headers")))),Object(b.b)("h3",{id:"footergroup-properties"},"FooterGroup Properties",Object(b.b)("a",Object(n.a)({parentName:"h3"},{href:"#footergroup-properties",title:"Direct link to heading",className:"anchor"}),Object(b.b)("span",Object(n.a)({parentName:"a"},{className:"icon icon-link"})))),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},Object(b.b)("inlineCode",{parentName:"li"},"getFooterGroupProps"),Object(b.b)("ul",{parentName:"li"},Object(b.b)("li",{parentName:"ul"},Object(b.b)("strong",{parentName:"li"},"Usage Required")),Object(b.b)("li",{parentName:"ul"},"This core prop getter is required to to enable absolute layout for footers")))),Object(b.b)("h3",{id:"footer-properties"},"Footer Properties",Object(b.b)("a",Object(n.a)({parentName:"h3"},{href:"#footer-properties",title:"Direct link to heading",className:"anchor"}),Object(b.b)("span",Object(n.a)({parentName:"a"},{className:"icon icon-link"})))),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},Object(b.b)("inlineCode",{parentName:"li"},"getFooterProps"),Object(b.b)("ul",{parentName:"li"},Object(b.b)("li",{parentName:"ul"},Object(b.b)("strong",{parentName:"li"},"Usage Required")),Object(b.b)("li",{parentName:"ul"},"This core prop getter is required to to enable absolute layout for footers")))),Object(b.b)("h3",{id:"example-full-width-resizable-table"},"Example (Full Width Resizable Table)",Object(b.b)("a",Object(n.a)({parentName:"h3"},{href:"#example-full-width-resizable-table",title:"Direct link to heading",className:"anchor"}),Object(b.b)("span",Object(n.a)({parentName:"a"},{className:"icon icon-link"})))),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},Object(b.b)("a",Object(n.a)({parentName:"li"},{href:"https://github.com/tannerlinsley/react-table/tree/v7/examples/full-width-resizable-table"}
1),"Source")),Object(b.b)("li",{parentName:"ul"},Object(b.b)("a",Object(n.a)({parentName:"li"},{href:"https://codesandbox.io/s/github/tannerlinsley/react-table/tree/v7/examples/full-width-resizable-table"}),"Open in CodeSandbox"))))}u.isMDXComponent=!0},"v+q9":function(e,t,a){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/api/useFlexLayout",function(){return a("JB29")}])}},[["v+q9",0,2,1,3,4]]]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.