{"componentChunkName":"component---src-templates-angulardocs-js","path":"/docs/contrast/angular/table/fixed_datatables","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"76ad9189-fefc-5966-901f-0255471bb869","title":"Fixed DataTable","slug":"/contrast/angular/table/fixed_datatables"},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n \"title\": \"Fixed DataTable\",\n \"metaTitle\": \"DataTable Component for Contrast Bootstrap Angular\",\n \"metaDescription\": \"Angular Bootstrap DataTables are components that mix tables with advanced options like searching, sorting and pagination\"\n};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, [\"components\"]);\n\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h1\", null, \"Fixed DataTables\"), mdx(\"p\", null, \"Angular Bootstrap DataTables are components that mix tables with advanced options like searching, sorting and pagination.\"), mdx(\"h2\", null, \"Fixed DataTable\"), mdx(\"p\", null, \"Default Fixed DataTable example.\"), mdx(\"p\", null, mdx(\"span\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"1035px\"\n }\n }), \"\\n \", mdx(\"a\", _extends({\n parentName: \"span\"\n }, {\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/cc321d7c0b99ba370f11d3c359838e95/c211c/datatable.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"\\n \", mdx(\"span\", _extends({\n parentName: \"a\"\n }, {\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"38.22393822393822%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAABJ0AAASdAHeZh94AAABRklEQVQoz1VSW47CMAzs/e/ADdg/JCQQX5yBT8oiFQpt2PSVtvQ163FTtGvJajxjj+0mQVVV6IcBi43jiHGa8Ne6rsP73c28cJrjnanDsJwnBNZatG0rBW/0fY8fiW2WabxgeZ6jKEspHNA0jZ6LokTpsUzyiang+RwivFxQVU6FSSZJCmsz1HWjGAXN6yVxDSfOrYqiwDNJtAF5YhQPLt/fuN9jIdqPYJpS0GryLFgInmtcq6DTCdPUfBr+EzTG6Hok2dmYl06kgoJzNTagmE7pnGIU5CC51HwEo+jmJ5n/2fOZIH48tIg4sVQacj0ai5yb16YQjV/W82ICkpyCncZx0gIStMnf9uBfQRzHCMMQURR5v+Ehza/XK06n0yzIZHV/7YvpWXzyz4R2PB7xtV5jv99jt9thu93icDhgs9lgtVrp8/oFyKdk0z/TAGoAAAAASUVORK5CYII=')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n })), \"\\n \", mdx(\"img\", _extends({\n parentName: \"a\"\n }, {\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"image info\",\n \"title\": \"image info\",\n \"src\": \"/static/cc321d7c0b99ba370f11d3c359838e95/e3189/datatable.png\",\n \"srcSet\": [\"/static/cc321d7c0b99ba370f11d3c359838e95/a2ead/datatable.png 259w\", \"/static/cc321d7c0b99ba370f11d3c359838e95/6b9fd/datatable.png 518w\", \"/static/cc321d7c0b99ba370f11d3c359838e95/e3189/datatable.png 1035w\", \"/static/cc321d7c0b99ba370f11d3c359838e95/c211c/datatable.png 1502w\"],\n \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n })), \"\\n \"), \"\\n \")), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-html\"\n }), \"\\n \\n
\\n
\\n
\\n \\n
\\n
\\n
\\n \\n
\\n
\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n
{{head.label | titlecase}} \\n
{{el.name}}{{el.position}}{{el.office}}{{el.age}}{{el.date}}{{el.salary}}
No Matching Records Found
{{head.label | titlecase}} \\n
\\n
\\n Showing {{activePage > 0 ? (activePage * pages[0].length) + 1 : activePage + 1}} to {{pages.length - 1 > activePage\\n ? pages[activePage].length * (activePage + 1)\\n : elements.length}} of {{elements.length}} records\\n
\\n \\n
\\n
\\n \\n\\n\\n\")), mdx(\"h6\", null, \"typescript\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-typescript\"\n }), \"import { Component, OnInit, ViewChild } from '@angular/core';\\nimport { CdbTableDirective } from './/directives/cdb-table.directive';\\n\\n@Component({\\n selector: 'app-fixed-datatable',\\n templateUrl: './fixed-datatable.component.html',\\n styleUrls: ['./fixed-datatable.component.scss']\\n})\\nexport class FixedDatatableComponent implements OnInit {\\n\\n @ViewChild(CdbTableDirective, { static: true }) CdbTable: CdbTableDirective;\\n elements: any = [\\n {\\n name: \\\"Tiger Nixon\\\",\\n position: \\\"System Architect\\\",\\n office: \\\"Edinburgh\\\",\\n age: \\\"61\\\",\\n date: \\\"2011/04/25\\\",\\n salary: \\\"$320\\\",\\n },\\n {\\n name: \\\"Garrett Winters\\\",\\n position: \\\"Accountant\\\",\\n office: \\\"Tokyo\\\",\\n age: \\\"63\\\",\\n date: \\\"2011/07/25\\\",\\n salary: \\\"$170\\\",\\n },\\n {\\n name: \\\"Ashton Cox\\\",\\n position: \\\"Junior Technical Author\\\",\\n office: \\\"San Francisco\\\",\\n age: \\\"66\\\",\\n date: \\\"2009/01/12\\\",\\n salary: \\\"$86\\\",\\n },\\n {\\n name: \\\"Cedric Kelly\\\",\\n position: \\\"Senior Javascript Developer\\\",\\n office: \\\"Edinburgh\\\",\\n age: \\\"22\\\",\\n date: \\\"2012/03/29\\\",\\n salary: \\\"$433\\\",\\n },\\n {\\n name: \\\"Airi Satou\\\",\\n position: \\\"Accountant\\\",\\n office: \\\"Tokyo\\\",\\n age: \\\"33\\\",\\n date: \\\"2008/11/28\\\",\\n salary: \\\"$162\\\",\\n },\\n {\\n name: \\\"Brielle Williamson\\\",\\n position: \\\"Integration Specialist\\\",\\n office: \\\"New York\\\",\\n age: \\\"61\\\",\\n date: \\\"2012/12/02\\\",\\n salary: \\\"$372\\\",\\n },\\n {\\n name: \\\"Herrod Chandler\\\",\\n position: \\\"Sales Assistant\\\",\\n office: \\\"San Francisco\\\",\\n age: \\\"59\\\",\\n date: \\\"2012/08/06\\\",\\n salary: \\\"$137\\\",\\n },\\n {\\n name: \\\"Rhona Davidson\\\",\\n position: \\\"Integration Specialist\\\",\\n office: \\\"Tokyo\\\",\\n age: \\\"55\\\",\\n date: \\\"2010/10/14\\\",\\n salary: \\\"$327\\\",\\n },\\n {\\n name: \\\"Colleen Hurst\\\",\\n position: \\\"Javascript Developer\\\",\\n office: \\\"San Francisco\\\",\\n age: \\\"39\\\",\\n date: \\\"2009/09/15\\\",\\n salary: \\\"$205\\\",\\n },\\n {\\n name: \\\"Sonya Frost\\\",\\n position: \\\"Software Engineer\\\",\\n office: \\\"Edinburgh\\\",\\n age: \\\"23\\\",\\n date: \\\"2008/12/13\\\",\\n salary: \\\"$103\\\",\\n },\\n {\\n name: \\\"Jena Gaines\\\",\\n position: \\\"Office Manager\\\",\\n office: \\\"London\\\",\\n age: \\\"30\\\",\\n date: \\\"2008/12/19\\\",\\n salary: \\\"$90\\\",\\n },\\n {\\n name: \\\"Quinn Flynn\\\",\\n position: \\\"Support Lead\\\",\\n office: \\\"Edinburgh\\\",\\n age: \\\"22\\\",\\n date: \\\"2013/03/03\\\",\\n salary: \\\"$342\\\",\\n },\\n {\\n name: \\\"Charde Marshall\\\",\\n position: \\\"Regional Director\\\",\\n office: \\\"San Francisco\\\",\\n age: \\\"36\\\",\\n date: \\\"2008/10/16\\\",\\n salary: \\\"$470\\\",\\n },\\n {\\n name: \\\"Haley Kennedy\\\",\\n position: \\\"Senior Marketing Designer\\\",\\n office: \\\"London\\\",\\n age: \\\"43\\\",\\n date: \\\"2012/12/18\\\",\\n salary: \\\"$313\\\",\\n },\\n {\\n name: \\\"Tatyana Fitzpatrick\\\",\\n position: \\\"Regional Director\\\",\\n office: \\\"London\\\",\\n age: \\\"19\\\",\\n date: \\\"2010/03/17\\\",\\n salary: \\\"$385\\\",\\n },\\n {\\n name: \\\"Michael Silva\\\",\\n position: \\\"Marketing Designer\\\",\\n office: \\\"London\\\",\\n age: \\\"66\\\",\\n date: \\\"2012/11/27\\\",\\n salary: \\\"$198\\\",\\n },\\n {\\n name: \\\"Paul Byrd\\\",\\n position: \\\"Chief Financial Officer (CFO)\\\",\\n office: \\\"New York\\\",\\n age: \\\"64\\\",\\n date: \\\"2010/06/09\\\",\\n salary: \\\"$725\\\",\\n },\\n {\\n name: \\\"Gloria Little\\\",\\n position: \\\"Systems Administrator\\\",\\n office: \\\"New York\\\",\\n age: \\\"59\\\",\\n date: \\\"2009/04/10\\\",\\n salary: \\\"$237\\\",\\n },\\n {\\n name: \\\"Bradley Greer\\\",\\n position: \\\"Software Engineer\\\",\\n office: \\\"London\\\",\\n age: \\\"41\\\",\\n date: \\\"2012/10/13\\\",\\n salary: \\\"$132\\\",\\n },\\n {\\n name: \\\"Dai Rios\\\",\\n position: \\\"Personnel Lead\\\",\\n office: \\\"Edinburgh\\\",\\n age: \\\"35\\\",\\n date: \\\"2012/09/26\\\",\\n salary: \\\"$217\\\",\\n },\\n {\\n name: \\\"Jenette Caldwell\\\",\\n position: \\\"Development Lead\\\",\\n office: \\\"New York\\\",\\n age: \\\"30\\\",\\n date: \\\"2011/09/03\\\",\\n salary: \\\"$345\\\",\\n },\\n {\\n name: \\\"Yuri Berry\\\",\\n position: \\\"Chief Marketing Officer (CMO)\\\",\\n office: \\\"New York\\\",\\n age: \\\"40\\\",\\n date: \\\"2009/06/25\\\",\\n salary: \\\"$675\\\",\\n },\\n {\\n name: \\\"Caesar Vance\\\",\\n position: \\\"Pre-Sales Support\\\",\\n office: \\\"New York\\\",\\n age: \\\"21\\\",\\n date: \\\"2011/12/12\\\",\\n salary: \\\"$106\\\",\\n },\\n {\\n name: \\\"Doris Wilder\\\",\\n position: \\\"Sales Assistant\\\",\\n office: \\\"Sidney\\\",\\n age: \\\"23\\\",\\n date: \\\"2010/09/20\\\",\\n salary: \\\"$85\\\",\\n },\\n {\\n name: \\\"Angelica Ramos\\\",\\n position: \\\"Chief Executive Officer (CEO)\\\",\\n office: \\\"London\\\",\\n age: \\\"47\\\",\\n date: \\\"2009/10/09\\\",\\n salary: \\\"$1\\\",\\n },\\n {\\n name: \\\"Gavin Joyce\\\",\\n position: \\\"Developer\\\",\\n office: \\\"Edinburgh\\\",\\n age: \\\"42\\\",\\n date: \\\"2010/12/22\\\",\\n salary: \\\"$92\\\",\\n },\\n {\\n name: \\\"Jennifer Chang\\\",\\n position: \\\"Regional Director\\\",\\n office: \\\"Singapore\\\",\\n age: \\\"28\\\",\\n date: \\\"2010/11/14\\\",\\n salary: \\\"$357\\\",\\n },\\n {\\n name: \\\"Brenden Wagner\\\",\\n position: \\\"Software Engineer\\\",\\n office: \\\"San Francisco\\\",\\n age: \\\"28\\\",\\n date: \\\"2011/06/07\\\",\\n salary: \\\"$206\\\",\\n },\\n {\\n name: \\\"Fiona Green\\\",\\n position: \\\"Chief Operating Officer (COO)\\\",\\n office: \\\"San Francisco\\\",\\n age: \\\"48\\\",\\n date: \\\"2010/03/11\\\",\\n salary: \\\"$850\\\",\\n },\\n {\\n name: \\\"Shou Itou\\\",\\n position: \\\"Regional Marketing\\\",\\n office: \\\"Tokyo\\\",\\n age: \\\"20\\\",\\n date: \\\"2011/08/14\\\",\\n salary: \\\"$163\\\",\\n },\\n {\\n name: \\\"Michelle House\\\",\\n position: \\\"Integration Specialist\\\",\\n office: \\\"Sidney\\\",\\n age: \\\"37\\\",\\n date: \\\"2011/06/02\\\",\\n salary: \\\"$95\\\",\\n },\\n {\\n name: \\\"Suki Burks\\\",\\n position: \\\"Developer\\\",\\n office: \\\"London\\\",\\n age: \\\"53\\\",\\n date: \\\"2009/10/22\\\",\\n salary: \\\"$114\\\",\\n },\\n {\\n name: \\\"Prescott Bartlett\\\",\\n position: \\\"Technical Author\\\",\\n office: \\\"London\\\",\\n age: \\\"27\\\",\\n date: \\\"2011/05/07\\\",\\n salary: \\\"$145\\\",\\n },\\n\\n {\\n name: \\\"Donna Snider\\\",\\n position: \\\"Customer Support\\\",\\n office: \\\"New York\\\",\\n age: \\\"27\\\",\\n date: \\\"2011/01/25\\\",\\n salary: \\\"$112\\\",\\n },\\n ];\\n pages = []\\n activePage = 0;\\n previousData;\\n\\n //Declare entries options\\n entries = [5, 10, 15]\\n //table head elements\\n headElements = [\\n {\\n label: \\\"Name\\\",\\n field: \\\"name\\\",\\n enableSort: \\\"enabled\\\",\\n },\\n {\\n label: \\\"Position\\\",\\n field: \\\"position\\\",\\n enableSort: \\\"enabled\\\",\\n },\\n {\\n label: \\\"Office\\\",\\n field: \\\"office\\\",\\n enableSort: \\\"enabled\\\",\\n },\\n {\\n label: \\\"Age\\\",\\n field: \\\"age\\\",\\n enableSort: \\\"enabled\\\",\\n },\\n {\\n label: \\\"Date\\\",\\n field: \\\"date\\\",\\n enableSort: \\\"disabled\\\",\\n },\\n {\\n label: \\\"Salary\\\",\\n field: \\\"salary\\\",\\n enableSort: \\\"disabled\\\",\\n },\\n ];\\n\\n searchText: string = '';\\n\\n constructor() { }\\n\\n ngOnInit(): void {\\n //subscribe to the current active page\\n this.CdbTable._activePage.subscribe(data => {\\n this.activePage = data\\n })\\n\\n this.CdbTable.setEntries(this.entries[0])\\n this.CdbTable.setDataSource(this.elements)\\n this.CdbTable.setPages()\\n this.previousData = this.CdbTable.getDataSource();\\n this.pages = this.CdbTable.pages\\n }\\n\\n searchItems() {\\n const prev = this.CdbTable.getDataSource();\\n\\n if (!this.searchText) {\\n this.elements = this.CdbTable.getDataSource();\\n this.CdbTable.setDataSource(this.previousData);\\n this.CdbTable.setPages()\\n this.pages = this.CdbTable.pages\\n }\\n\\n if (this.searchText) {\\n this.CdbTable.setDataSource(this.previousData);\\n this.elements = this.CdbTable.filterData(this.searchText);\\n this.CdbTable.setDataSource(this.elements)\\n this.CdbTable.setPages()\\n this.pages = this.CdbTable.pages\\n }\\n }\\n\\n changeEntries(e) {\\n this.CdbTable.setEntries(e.target.value)\\n this.CdbTable.setPages()\\n this.pages = this.CdbTable.pages\\n this.CdbTable._activePage.next(0)\\n }\\n sort() {\\n this.pages = this.CdbTable.pages\\n }\\n}\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#fixed-datatables","title":"Fixed DataTables","items":[{"url":"#fixed-datatable","title":"Fixed DataTable","items":[{"items":[{"items":[{"items":[{"url":"#html","title":"html"},{"url":"#typescript","title":"typescript"}]}]}]}]}]}]},"parent":{"__typename":"File","relativePath":"contrast/angular/table/fixed_datatables.md"},"frontmatter":{"metaTitle":"DataTable Component for Contrast Bootstrap Angular","metaDescription":"Angular Bootstrap DataTables are components that mix tables with advanced options like searching, sorting and pagination"}},"allMdx":{"edges":[{"node":{"fields":{"slug":"/contrast/angular/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/angular/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/javascript/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/javascript/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/react/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/react/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/react/chart","title":"Charts"}}},{"node":{"fields":{"slug":"/contrast/react/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/react/custom_pages","title":"Custom Pages"}}},{"node":{"fields":{"slug":"/contrast/angular/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/angular/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/angular/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/angular/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/angular/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/angular/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/angular/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/angular/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/angular/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/angular/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/angular/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/angular/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/angular/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/angular/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/angular/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/angular/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/angular/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/angular/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/angular/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/angular/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/angular/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/angular/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar2","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/angular/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/angular/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/angular/table/fixed_datatables","title":"Fixed DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/popover","title":"PopOver"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/components/alert","title":"React Alert"}}},{"node":{"fields":{"slug":"/contrast/react/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/react/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/react/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/react/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/react/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/react/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/react/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/react/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/react/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/react/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/react/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/react/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/react/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/react/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/react/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/react/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/react/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/react/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/react/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/react/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/react/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/react/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/react/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/react/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/react/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/react/components/smoothscroll","title":"SmoothScroll"}}},{"node":{"fields":{"slug":"/contrast/react/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/react/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/react/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/sidebar","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/react/sections/fileuploader","title":"FileUploader"}}},{"node":{"fields":{"slug":"/contrast/react/sections/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/react/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/react/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/react/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/bootstrap-5-major-changes","title":"Major changes to bootstrap 5"}}},{"node":{"fields":{"slug":"/bootstrap-5-navbar-using-contrast","title":"How To Create A Beautiful Navbar Using Bootstrap And Contrast"}}},{"node":{"fields":{"slug":"/using-bootstrap-in-react","title":"How to use Bootstrap in React Using a React Library"}}}]}},"pageContext":{"id":"76ad9189-fefc-5966-901f-0255471bb869"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}