1_N_E=(window.webpackJsonp_N_E=window.webpackJsonp_N_E||[]).push([[40],{VlCm:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return Headline}));var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("q1tI"),react__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__),react_copy_to_clipboard__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("P5Jw"),react_copy_to_clipboard__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(react_copy_to_clipboard__WEBPACK_IMPORTED_MODULE_1__),__jsx=react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement,Headline=function Headline(props){var _props$size,HeaderTag="h".concat(null!==(_props$size=props.size)&&void 0!==_props$size?_props$size:"1"),_useState=Object(react__WEBPACK_IMPORTED_MODULE_0__.useState)(""),currentUrl=_useState[0],setCurrentUrl=_useState[1];function getUrlWithoutAnchor(){return currentUrl.replace(/#.*$/,"")}return Object(react__WEBPACK_IMPORTED_MODULE_0__.useEffect)((function(){setCurrentUrl(eval("window.location.href;"))}),[]),__jsx(HeaderTag,null,__jsx(react_copy_to_clipboard__WEBPACK_IMPORTED_MODULE_1___default.a,{text:getUrlWithoutAnchor()+props.link},__jsx("a",{className:"tooltip tooltip--left mr-1","data-tooltip":"Copy",style:{cursor:"pointer"}},"#")),props.title)}},cjCq:function(l,t,e){"use strict";e.d(t,"a",(function(){return o}));var n=e("q1tI"),a=e.n(n).a.createElement,o=function(l){return Object(n.useEffect)((function(){if(document.querySelector(".toc__nav")){!function(l){var t=new IntersectionObserver((function(l){l.forEach((function(l){var t=l.target.getAttribute("id");document.querySelector('.toc__nav li a[href="#'.concat(t,'"]'))&&(l.intersectionRatio>0?document.querySelector('.toc__nav li a[href="#'.concat(t,'"]')).parentElement.classList.add("active"):document.querySelector('.toc__nav li a[href="#'.concat(t,'"]')).parentElement.classList.remove("active"))}))}));document.querySelectorAll("section[id]").forEach((function(l){t.observe(l)}))}()}})),a("nav",{className:"toc__nav"},a("span",{className:"uppercase text-gray-600 font-bold text-xs"},"Contents"),function l(t){return a("ul",null,t.map((function(t){return a("li",{key:t.name},a("a",{href:t.anchor},t.name),t.children&&l(t.children))})))}(l.entries))}},dtTl:function(l,t,e){"use strict";e.d(t,"a",(function(){return c}));var n=e("q1tI"),a=e.n(n),o=e("P5Jw"),d=e.n(o),r=e("IP2g"),u=e("uUdh"),i=e("c2c2"),s=a.a.createElement,c=function(l){var t,e,a=Object(n.useState)(!1),o=a[0],c=a[1];return s("div",{className:"codeblock-wrapper u-relative mb-2"},s(u.a,{className:"codeblock pl-2 pr-3 py-1 u-shadow-lg h-100p ".concat(null!==(t=l.classes)&&void 0!==t?t:""," ").concat(l.breakAll?"break-all":""),language:"htmlbars"===l.language?"html":l.language,style:null!==(e=l.style)&&void 0!==e?e:i.duotoneDark},l.code),s(d.a,{text:l.code,onCopy:function(){c(!0),setTimeout((function(){return c(!1)}),3e3)}},s(r.a,{className:"fa-wrapper u-absolute text-gray-200",icon:["fas",o?"clipboard-check":"clipboard"],style:{cursor:"pointer",right:"1.5rem",top:"1.2rem"}})))}},itao:function(l,t,e){(window.__NEXT_P=window.__NEXT_P||[]).push(["/elements/table",function(){return e("xTfK")}])},qnXf:function(l,t,e){"use strict";e.d(t,"a",(function(){return i}));var n=e("q1tI"),a=e.n(n),o=e("YFqc"),d=e.n(o),r=e("ZIZD"),u=a.a.createElement,i=function(l){if(!(l.nextLink||l.prevLink)===!l.lookupProps)throw Error("Either provide prev/next link or sidebar config map");var t=l.lookupProps?r.a.get(l.lookupProps.sectionName).lowerEntry(l.lookupProps.pageName):null,e=l.lookupProps?r.a.get(l.lookupProps.sectionName).higherEntry(l.lookupProps.pageName):null;return u("section",{className:"padtop"},u("div",{className:"content"},u("div",{className:"divider"}),u("div",{className:"pagination no-bullets"},t&&u("div",{className:"pagination-item pagination-prev"},u(d.a,{href:t[1].url},u("a",{className:"u-block"},u("p",{className:"pagination-item-subtitle"},"Prev"),u("h5",{className:"font-alt font-light m-0"},t[1].text)))),e&&u("div",{className:"pagination-item pagination-next"},u(d.a,{href:e[1].url},u("a",{className:"u-block"},u("p",{className:"pagination-item-subtitle"},"Next"),u("h5",{className:"font-alt font-light m-0"},e[1].text)))),l.prevLink&&u("div",{className:"pagination-item pagination-prev"},u(d.a,{href:l.prevLink.link},u("a",{className:"u-block"},u("p",{className:"pagination-item-subtitle"},"Prev"),u("h5",{className:"font-alt font-light m-0"},l.prevLink.name)))),l.nextLink&&u("div",{className:"pagination-item pagination-next"},u(d.a,{href:l.nextLink.link},u("a",{className:"u-block"},u("p",{className:"pagination-item-subtitle"},"Next"),u("h5",{className:"font-alt font-light m-0"},l.nextLink.name)))))))}},xTfK:function(l,t,e){"use strict";e.r(t),e.d(t,"default",(function(){return w}));var n=e("q1tI"),a=e.n(n),o=e("8Kt/"),d=e.n(o),r=e("BFRS"),u=e("cjCq"),i=e("VlCm"),s=e("qnXf"),c=e("dtTl"),b=e("nLA4"),h=[{name:"Table",anchor:"#table",children:[{name:"Basic",anchor:"#basic",children:null},{name:"Styles",anchor:"#styles",children:null},{name:"Table Container",anchor:"#table-container",children:null}]}],C=e("C/iq"),_=e("ZIZD"),p=a.a.createElement,w=Object(r.b)(p(b.a,null))((function(l){return p("main",{className:"page-layout"},p(d.a,null,p("title",null,C.j," Table")),p("div",null,p("section",{className:"padtop",id:"table"},p("div",{className:"content"},p(i.a,{title:"Table",link:"#table"}),p("div",{className:"divider"}),p("p",null,"Cirrus adds a clean look to any table. Just add the ",p("code",null,"table")," class to your table element."))),p("section",{className:"padtop",id:"basic"},p("div",{className:"content"},p(i.a,{title:"Basic",link:"#basic",size:"4"}),p("div",{className:"divider"}),p("p",null,"Below is a simple table that consists of both a header and a footer. Titles that have an"," ",p("code",null,"abbr")," element are underlined with a dotted line."),p("div",{className:"row"},p("div",{className:"lg:col-6"},p("table",{className:"table"},p("thead",null,p("tr",null,p("th",null,p("abbr",{title:"Title1"},"T1")),p("th",null,p("abbr",{title:"Title2"},"T2")),p("th",null,p("abbr",{title:"Title3"},"T3")),p("th",null,"Notes"))),p("tfoot",null,p("tr",null,p("th",null,p("abbr",{title:"Title1"},"T1")),p("th",null,p("abbr",{title:"Title2"},"T2")),p("th",null,p("abbr",{title:"Title3"},"T3")),p("th",null,"Notes"))),p("tbody",null,p("tr",null,p("th",null,"1"),p("td",null,"Row:1 Cell:1"),p("td",null,"Row:1 Cell:2"),p("td",null,"Row:1 Cell:3")),p("tr",null,p("th",null,"2"),p("td",null,"Row:2 Cell:1"),p("td",null,"Row:2 Cell:2"),p("td",null,"Row:2 Cell:3")),p("tr",null,p("th",null,"3"),p("td",null,"Row:3 Cell:1"),p("td",null,"Row:3 Cell:2"),p("td",null,"Row:3 Cell:3"))))),p("div",{className:"lg:col-6"},p("h6",null,"Structure"),p("ul",null,p("li",null,p("code",null,"table"),p("ul",null,p("li",null,p("code",null,"thead")),p("li",null,p("code",null,"tfoot")),p("li",null,p("code",null,"tbody"),p("ul",null,p("li",null,p("code",null,"tr")),p("ul",null,p("li",null,p("code",null,"th")),p("li",null,p("code",null,"td")))))))))),p(c.a,{code:'
1<table class="table">\n <thead>\n <tr>\n <th><abbr title="Title1">T1</abbr></th>\n <th><abbr title="Title2">T2</abbr></th>\n <th><abbr title="Title3">T3</abbr></th>\n <th>Notes</th>\n </tr>\n </thead>\n <tfoot>\n <tr>\n <th><abbr title="Title1">T1</abbr></th>\n <th><abbr title="Title2">T2</abbr></th>\n <th><abbr title="Title3">T3</abbr></th>\n <th>Notes</th>\n </tr>\n </tfoot>\n <tbody>\n <tr>\n <th>1</th>\n <td>Row:1 Cell:1</td>\n <td>Row:1 Cell:2</td>\n <td>Row:1 Cell:3</td>\n </tr>\n <tr>\n <th>2</th>\n <td>Row:2 Cell:1</td>\n <td>Row:2 Cell:2</td>\n <td>Row:2 Cell:3</td>\n </tr>\n <tr>\n <th>3</th>\n <td>Row:3 Cell:1</td>\n <td>Row:3 Cell:2</td>\n <td>Row:3 Cell:3</td>\n </tr>\n </tbody>\n</table>',language:"htmlbars"}),p("p",null,"To mark a row as selected, add the ",p("code",null,"selected")," class to that row."),p("table",{className:"table"},p("thead",null,p("tr",null,p("th",null,p("abbr",{title:"Title1"},"T1")),p("th",null,p("abbr",{title:"Title2"},"T2")),p("th",null,p("abbr",{title:"Title3"},"T3")),p("th",null,p("abbr",{title:"Title4"},"T4")),p("th",null,p("abbr",{title:"Title5"},"T5")),p("th",null,p("abbr",{title:"Short"},"S")),p("th",null,"Notes"))),p("tfoot",null,p("tr",null,p("th",null,p("abbr",{title:"Title1"},"T1")),p("th",null,p("abbr",{title:"Title2"},"T2")),p("th",null,p("abbr",{title:"Title3"},"T3")),p("th",null,p("abbr",{title:"Title4"},"T4")),p("th",null,p("abbr",{title:"Title5"},"T5")),p("th",null,p("abbr",{title:"Short"},"S")),p("th",null,"Notes"))),p("tbody",null,p("tr",null,p("th",null,"1"),p("td",null,"Row:1 Cell:1"),p("td",null,"Row:1 Cell:2"),p("td",null,"Row:1 Cell:3"),p("td",null,"Row:1 Cell:4"),p("td",null,"S"),p("td",null,"Row:1 Cell:5")),p("tr",null,p("th",null,"2"),p("td",null,"Row:2 Cell:1"),p("td",null,"Row:2 Cell:2"),p("td",null,"Row:2 Cell:3"),p("td",null,"Row:2 Cell:4"),p("td",null,"S"),p("td",null,"Row:2 Cell:5")),p("tr",{className:"selected"},p("th",null,"3"),p("td",null,"Row:3 Cell:1"),p("td",null,"Row:3 Cell:2"),p("td",null,"Row:3 Cell:3"),p("td",null,"Row:3 Cell:4"),p("td",null,"S"),p("td",null,"Row:3 Cell:5")),p("tr",null,p("th",null,"4"),p("td",null,"Row:4 Cell:1"),p("td",null,"Row:4 Cell:2"),p("td",null,"Row:4 Cell:3"),p("td",null,"Row:4 Cell:4"),p("td",null,"S"),p("td",null,"Row:4 Cell:5")),p("tr",null,p("th",null,"5"),p("td",null,"Row:5 Cell:1"),p("td",null,"Row:5 Cell:2"),p("td",null,"Row:5 Cell:3"),p("td",null,"Row:5 Cell:4"),p("td",null,"S"),p("td",null,"Row:5 Cell:5")),p("tr",null,p("th",null,"6"),p("td",null,"Row:6 Cell:1"),p("td",null,"Row:6 Cell:2"),p("td",null,"Row:6 Cell:3"),p("td",null,"Row:6 Cell:4"),p("td",null,"S"),p("td",null,"Row:6 Cell:5")))),p("div",{className:"space"}),p(c.a,{code:'<table class="table">\n <thead>\n <tr>\n <th><abbr title="Title1">T1</abbr></th>\n <th><abbr title="Title2">T2</abbr></th>\n <th><abbr title="Title3">T3</abbr></th>\n <th><abbr title="Title4">T4</abbr></th>\n <th><abbr title="Title5">T5</abbr></th>\n <th><abbr title="Short">S</abbr></th>\n <th>Notes</th>\n </tr>\n </thead>\n <tfoot>\n <tr>\n <th><abbr title="Title1">T1</abbr></th>\n <th><abbr title="Title2">T2</abbr></th>\n <th><abbr title="Title3">T3</abbr></th>\n <th><abbr title="Title4">T4</abbr></th>\n <th><abbr title="Title5">T5</abbr></th>\n <th><abbr title="Short">S</abbr></th>\n <th>Notes</th>\n </tr>\n </tfoot>\n <tbody>\n <tr>\n <th>1</th>\n <td>Row:1 Cell:1</td>\n <td>Row:1 Cell:2</td>\n <td>Row:1 Cell:3</td>\n <td>Row:1 Cell:4</td>\n <td>S</td>\n <td>Row:1 Cell:5</td>\n </tr>\n <tr>\n <th>2</th>\n <td>Row:2 Cell:1</td>\n <td>Row:2 Cell:2</td>\n <td>Row:2 Cell:3</td>\n <td>Row:2 Cell:4</td>\n <td>S</td>\n <td>Row:2 Cell:5</td>\n </tr>\n <tr class="selected">\n <th>3</th>\n <td>Row:3 Cell:1</td>\n <td>Row:3 Cell:2</td>\n <td>Row:3 Cell:3</td>\n <td>Row:3 Cell:4</td>\n <td>S</td>\n <td>Row:3 Cell:5</td>\n </tr>\n <tr>\n <th>4</th>\n <td>
1Row:4 Cell:1</td>\n <td>Row:4 Cell:2</td>\n <td>Row:4 Cell:3</td>\n <td>Row:4 Cell:4</td>\n <td>S</td>\n <td>Row:4 Cell:5</td>\n </tr>\n <tr>\n <th>5</th>\n <td>Row:5 Cell:1</td>\n <td>Row:5 Cell:2</td>\n <td>Row:5 Cell:3</td>\n <td>Row:5 Cell:4</td>\n <td>S</td>\n <td>Row:5 Cell:5</td>\n </tr>\n <tr>\n <th>6</th>\n <td>Row:6 Cell:1</td>\n <td>Row:6 Cell:2</td>\n <td>Row:6 Cell:3</td>\n <td>Row:6 Cell:4</td>\n <td>S</td>\n <td>Row:6 Cell:5</td>\n </tr>\n </tbody>\n</table>',language:"htmlbars"}))),p("section",{className:"padtop",id:"styles"},p("div",{className:"content"},p(i.a,{title:"Styles",link:"#styles",size:"4"}),p("div",{className:"divider"}),p("p",null,"Tables also come in alternate styles."),p("div",{className:"space"}),[{name:"Bordered",class:"bordered",description:p("p",null,"Tables and table entries have borders on all sides. Add the"," ",p("code",null,"bordered")," class to the table.")},{name:"Borderless",class:"borderless",description:p("p",null,"Tables have no borders. Add the ",p("code",null,"borderless")," class to the table.")},{name:"Compact",class:"small",description:p("p",null,"A compact table can be created by adding the ",p("code",null,"small")," class to the table. The rows aremore compact than the regular design.")},{name:"Striped",class:"striped",description:p("p",null,"A table with an alternating pattern. Add the ",p("code",null,"striped")," class to the table.")},{name:"Fixed Header",class:"fixed-head",description:p(a.a.Fragment,null,p("p",null,"Implementation is slightly different for this table. Add the"," ",p("code",null,"fixed-head")," class to the table. You must also set the height of the tbody of the table:"),p(c.a,{code:".table.fixed-head tbody {\n height: your-height;\n}",language:"css"}))}].map((function(l){return p(a.a.Fragment,null,p("h6",null,l.name),l.description,p("table",{className:"table ".concat(l.class)},p("thead",null,p("tr",null,p("th",null,p("abbr",{title:"Title1"},"T1")),p("th",null,p("abbr",{title:"Title2"},"T2")),p("th",null,p("abbr",{title:"Title3"},"T3")),p("th",null,p("abbr",{title:"Title4"},"T4")),p("th",null,p("abbr",{title:"Title5"},"T5")),p("th",null,p("abbr",{title:"Short"},"S")),p("th",null,"Notes"))),p("tfoot",null,p("tr",null,p("th",null,p("abbr",{title:"Title1"},"T1")),p("th",null,p("abbr",{title:"Title2"},"T2")),p("th",null,p("abbr",{title:"Title3"},"T3")),p("th",null,p("abbr",{title:"Title4"},"T4")),p("th",null,p("abbr",{title:"Title5"},"T5")),p("th",null,p("abbr",{title:"Short"},"S")),p("th",null,"Notes"))),p("tbody",null,p("tr",null,p("th",null,"1"),p("td",null,"Row:1 Cell:1"),p("td",null,"Row:1 Cell:2"),p("td",null,"Row:1 Cell:3"),p("td",null,"Row:1 Cell:4"),p("td",null,"S"),p("td",null,"Row:1 Cell:5")),p("tr",null,p("th",null,"2"),p("td",null,"Row:2 Cell:1"),p("td",null,"Row:2 Cell:2"),p("td",null,"Row:2 Cell:3"),p("td",null,"Row:2 Cell:4"),p("td",null,"S"),p("td",null,"Row:2 Cell:5")),p("tr",null,p("th",null,"3"),p("td",null,"Row:3 Cell:1"),p("td",null,"Row:3 Cell:2"),p("td",null,"Row:3 Cell:3"),p("td",null,"Row:3 Cell:4"),p("td",null,"S"),p("td",null,"Row:3 Cell:5")),p("tr",null,p("th",null,"4"),p("td",null,"Row:4 Cell:1"),p("td",null,"Row:4 Cell:2"),p("td",null,"Row:4 Cell:3"),p("td",null,"Row:4 Cell:4"),p("td",null,"S"),p("td",null,"Row:4 Cell:5")),p("tr",null,p("th",null,"5"),p("td",null,"Row:5 Cell:1"),p("td",null,"Row:5 Cell:2"),p("td",null,"Row:5 Cell:3"),p("td",null,"Row:5 Cell:4"),p("td",null,"S"),p("td",null,"Row:5 Cell:5")),p("tr",null,p("th",null,"6"),p("td",null,"Row:6 Cell:1"),p("td",null,"Row:6 Cell:2"),p("td",null,"Row:6 Cell:3"),p("td",null,"Row:6 Cell:4"),p("td",null,"S"),p("td",null,"Row:6 Cell:5")))),p("div",{className:"space"}))})))),p("section",{className:"padtop",id:"table-container"},p("div",{className:"content"},p(i.a,{title:"Table Container",link:"#table-container",size:"4"}),p("div",{className:"divider"}),p("p",null,"Tables with lots of columns can get cluttered very quickly, especially on smaller devices. You can wrap your table using the ",p("code",null,"table-container")," class to make your table horizontally scrollable so large tables don't explode out of your current layout."),p("div",{className:"table-container"},p("table",{className:"table bordered"},p("thead",null,p("tr",null,p("th",null,"Header"),p("th",null,"Header"),p("th",null,"Header"),p("th",null,"Header"),p("th",null,"Header"),p("th",null,"Header"),p("th",null,"Header"),p("th",null,"Header"),p("th",null,"Header"),p("th",null,"Header"),p("th",null,"Header"),p("th",null,"Header"),p("th",null,"Header"),p("th",null,"Header"),p("th",null,"Header"),p("th",null,"Header"),p("th",null,"Header"),p("th",null,"Header"),p("th",null,"Header"),p("th",null,"Header"))),p("tbody",null,p("tr",null,p("td",null,"Cell"),p("td",null,"Cell"),p("td",null,"Cell"),p("td",null,"Cell"),p("td",null,"Cell"),p("td",null,"Cell"),p("td",null,"Cell"),p("td",null,"Cell"),p("td",null,"Cell"),p("td",null,"Cell"),p("td",null,"Cell"),p("td",null,"Cell"),p("td",null,"Cell"),p("td",null,"Cell"),p("td",null,"Cell"),p("td",null,"Cell"),p("td",null,"Cell"),p("td",null,"Cell"),p("td",null,"Cell"),p("td",null,"Cell")),p("tr",null,p("td",null,"Cell"),p("td",null,"Cell"),p("td",null,"Cell"),p("td",null,"Cell"),p("td",null,"Cell"),p("td",null,"Cell"),p("td",null,"Cell"),p("td",null,"Cell"),p("td",null,"Cell"),p("td",null,"Cell"),p("td",null,"Cell"),p("td",null,"Cell"),p("td",null,"Cell"),p("td",null,"Cell"),p("td",null,"Cell"),p("td",null,"Cell"),p("td",null,"Cell"),p("td",null,"Cell"),p("td",null,"Cell"),p("td",null,"Cell"))))),p("div",{className:"space"}
1),p(c.a,{code:'<div class="table-container">\n <table>\n \x3c!-- content --\x3e\n </table>\n</div>',language:"htmlbars"}))),p(s.a,{lookupProps:{sectionName:_.c,pageName:"Table"}})),p(u.a,{entries:h}))}))}},[["itao",0,2,1,3,4,5,6]]]);
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.