{"componentChunkName":"component---src-templates-javascriptdocs-js","path":"/docs/contrast/javascript/components/datatables","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"1c590d2c-305f-5375-ae69-8c89bf86fcd0","title":"DataTable","slug":"/contrast/javascript/components/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\": \"DataTable\",\n \"metaTitle\": \"DataTable Component for Contrast Bootstrap \",\n \"metaDescription\": \"Building a DataTable Component using the Contrast Bootstrap Package\"\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, \"DataTables\"), mdx(\"p\", null, \"Contrast Bootstrap DataTables are components that mix tables with advanced options like searching, sorting and pagination.\"), mdx(\"h2\", null, \"Basic DataTable\"), mdx(\"p\", null, \"Default DataTable example.\"), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-html\"\n }), \"
\\n \\n \\n \\n Name\\n Ext.\\n City\\n Start Date\\n Completion\\n \\n \\n \\n \\n Unity Pugh\\n 9958\\n Curic\\xF3\\n 2005/02/11\\n 37%\\n \\n \\n Theodore Duran\\n 8971\\n Dhanbad\\n 1999/04/07\\n 97%\\n \\n \\n Kylie Bishop\\n 3147\\n Norman\\n 2005/09/08\\n 63%\\n \\n \\n Willow Gilliam\\n 3497\\n Amqui\\n 2009/29/11\\n 30%\\n \\n \\n Blossom Dickerson\\n 5018\\n Kempten\\n 2006/11/09\\n 17%\\n \\n \\n Elliott Snyder\\n 3925\\n Enines\\n 2006/03/08\\n 57%\\n \\n \\n Castor Pugh\\n 9488\\n Neath\\n 2014/23/12\\n 93%\\n \\n \\n Pearl Carlson\\n 6231\\n Cobourg\\n 2014/31/08\\n 100%\\n \\n \\n Deirdre Bridges\\n 1579\\n Eberswalde-Finow\\n 2014/26/08\\n 44%\\n \\n \\n Daniel Baldwin\\n 6095\\n Moircy\\n 2000/11/01\\n 33%\\n \\n \\n Phelan Kane\\n 9519\\n Germersheim\\n 1999/16/04\\n 77%\\n \\n \\n Quentin Salas\\n 1339\\n Los Andes\\n 2011/26/01\\n 49%\\n \\n \\n Armand Suarez\\n 6583\\n Funtua\\n 1999/06/11\\n 9%\\n \\n \\n Gretchen Rogers\\n 5393\\n Moxhe\\n 1998/26/10\\n 24%\\n \\n \\n Harding Thompson\\n 2824\\n Abeokuta\\n 2008/06/08\\n 10%\\n \\n \\n Mira Rocha\\n 4393\\n Port Harcourt\\n 2002/04/10\\n 14%\\n \\n \\n Drew Phillips\\n 2931\\n Goes\\n 2011/18/10\\n 58%\\n \\n \\n Emerald Warner\\n 6205\\n Chiavari\\n 2002/08/04\\n 58%\\n \\n \\n Colin Burch\\n 7457\\n Anamur\\n 2004/02/01\\n 34%\\n \\n \\n Russell Haynes\\n 8916\\n Frascati\\n 2015/28/04\\n 18%\\n \\n \\n Brennan Brooks\\n 9011\\n Olmu\\xE9\\n 2000/18/04\\n 2%\\n \\n \\n Kane Anthony\\n 8075\\n LaSalle\\n 2006/21/05\\n 93%\\n \\n \\n Scarlett Hurst\\n 1019\\n Brampton\\n 2015/07/01\\n 94%\\n \\n \\n James Scott\\n 3008\\n Meux\\n 2007/30/05\\n 55%\\n \\n \\n Desiree Ferguson\\n 9054\\n Gojra\\n 2009/15/02\\n 81%\\n \\n \\n Elaine Bishop\\n 9160\\n Petr\\xF3polis\\n 2008/23/12\\n 48%\\n \\n \\n Hilda Nelson\\n 6307\\n Posina\\n 2004/23/05\\n 76%\\n \\n \\n Evangeline Beasley\\n 3820\\n Caplan\\n 2009/12/03\\n 62%\\n \\n \\n Wyatt Riley\\n 5694\\n Cavaion Veronese\\n 2012/19/02\\n 67%\\n \\n \\n Wyatt Mccarthy\\n 3547\\n Patan\\n 2014/23/06\\n 9%\\n \\n \\n Cairo Rice\\n 6273\\n Ostra Vetere\\n 2016/27/02\\n 13%\\n \\n \\n Sylvia Peters\\n 6829\\n Arrah\\n 2015/03/02\\n 13%\\n \\n \\n Kasper Craig\\n 5515\\n Firenze\\n 2015/26/04\\n 56%\\n \\n \\n Leigh Ruiz\\n 5112\\n Lac Ste. Anne\\n 2001/09/02\\n 28%\\n \\n\\n \\n Derek Kerr\\n 1724\\n Gualdo Cattaneo\\n 2014/21/01\\n 89%\\n \\n \\n Shad Hudson\\n 5944\\n Salamanca\\n 2014/10/12\\n 98%\\n \\n \\n Daryl Ayers\\n 8276\\n Barchi\\n 2012/12/11\\n 88%\\n \\n \\n Caleb Livingston\\n 3094\\n Fatehpur\\n 2014/13/02\\n 8%\\n \\n \\n Sydney Meyer\\n 4576\\n Neubrandenburg\\n 2015/06/02\\n 22%\\n \\n \\n Lani Lawrence\\n 8501\\n Turnhout\\n 2008/07/05\\n 16%\\n \\n \\n Allegra Shepherd\\n 2576\\n Meeuwen-Gruitrode\\n 2004/19/04\\n 41%\\n \\n \\n Fallon Reyes\\n 3178\\n Monceau-sur-Sambre\\n 2005/15/02\\n 16%\\n \\n \\n Karen Whitley\\n 4357\\n Sluis\\n 2003/02/05\\n 23%\\n \\n \\n Stewart Stephenson\\n 5350\\n Villa Faraldi\\n 2003/05/07\\n 65%\\n \\n \\n Ursula Reynolds\\n 7544\\n Southampton\\n 1999/16/12\\n 61%\\n \\n \\n Adrienne Winters\\n 4425\\n Laguna Blanca\\n 2014/15/09\\n 24%\\n \\n \\n Francesca Brock\\n 1337\\n Oban\\n 2000/12/06\\n 90%\\n \\n \\n Ursa Davenport\\n 7629\\n New Plymouth\\n 2013/27/06\\n 37%\\n \\n \\n Mark Brock\\n 3310\\n Veenendaal\\n 2006/08/09\\n 41%\\n \\n \\n Dale Rush\\n 5050\\n Chicoutimi\\n 2000/27/03\\n 2%\\n \\n \\n Shellie Murphy\\n 3845\\n Marlborough\\n 2013/13/11\\n 72%\\n \\n \\n Porter Nicholson\\n 4539\\n Bismil\\n 2012/22/10\\n 23%\\n \\n \\n Oliver Huber\\n 1265\\n Hann\\x90che\\n 2002/11/01\\n 94%\\n \\n \\n Calista Maynard\\n 3315\\n Pozzuolo del Friuli\\n 2006/23/03\\n 5%\\n \\n \\n Lois Vargas\\n 6825\\n Cumberland\\n 1999/25/04\\n 50%\\n \\n \\n Hermione Dickson\\n 2785\\n Woodstock\\n 2001/22/03\\n 2%\\n \\n \\n Dalton Jennings\\n 5416\\n Dudzele\\n 2015/09/02\\n 74%\\n \\n\\n \\n Kelly Cameron\\n 4836\\n Fontaine-Valmont\\n 1999/02/07\\n 24%\\n \\n \\n Kyra Moses\\n 3796\\n Quenast\\n 1998/07/07\\n 68%\\n \\n \\n Grace Bishop\\n 8340\\n Rodez\\n 2012/02/10\\n 4%\\n \\n \\n Haviva Hernandez\\n 8136\\n Suwa\\u0142ki\\n 2000/30/01\\n 16%\\n \\n \\n Alisa Horn\\n 9853\\n Ucluelet\\n 2007/01/11\\n 39%\\n \\n \\n Zelenia Roman\\n 7516\\n Redwater\\n 2012/03/03\\n 31%\\n \\n \\n \\n
\\n\")), mdx(\"h2\", null, \"Not Striped DataTable\"), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-html\"\n }), \"
\\n \\n \\n \\n Name\\n Ext.\\n City\\n Start Date\\n Completion\\n \\n \\n \\n \\n Unity Pugh\\n 9958\\n Curic\\xF3\\n 2005/02/11\\n 37%\\n \\n \\n Theodore Duran\\n 8971\\n Dhanbad\\n 1999/04/07\\n 97%\\n \\n \\n Kylie Bishop\\n 3147\\n Norman\\n 2005/09/08\\n 63%\\n \\n \\n Willow Gilliam\\n 3497\\n Amqui\\n 2009/29/11\\n 30%\\n \\n \\n Blossom Dickerson\\n 5018\\n Kempten\\n 2006/11/09\\n 17%\\n \\n \\n Elliott Snyder\\n 3925\\n Enines\\n 2006/03/08\\n 57%\\n \\n \\n Castor Pugh\\n 9488\\n Neath\\n 2014/23/12\\n 93%\\n \\n \\n Pearl Carlson\\n 6231\\n Cobourg\\n 2014/31/08\\n 100%\\n \\n \\n Deirdre Bridges\\n 1579\\n Eberswalde-Finow\\n 2014/26/08\\n 44%\\n \\n \\n Daniel Baldwin\\n 6095\\n Moircy\\n 2000/11/01\\n 33%\\n \\n \\n Phelan Kane\\n 9519\\n Germersheim\\n 1999/16/04\\n 77%\\n \\n \\n Quentin Salas\\n 1339\\n Los Andes\\n 2011/26/01\\n 49%\\n \\n \\n Armand Suarez\\n 6583\\n Funtua\\n 1999/06/11\\n 9%\\n \\n \\n Gretchen Rogers\\n 5393\\n Moxhe\\n 1998/26/10\\n 24%\\n \\n \\n Harding Thompson\\n 2824\\n Abeokuta\\n 2008/06/08\\n 10%\\n \\n \\n Mira Rocha\\n 4393\\n Port Harcourt\\n 2002/04/10\\n 14%\\n \\n \\n Drew Phillips\\n 2931\\n Goes\\n 2011/18/10\\n 58%\\n \\n \\n Emerald Warner\\n 6205\\n Chiavari\\n 2002/08/04\\n 58%\\n \\n \\n Colin Burch\\n 7457\\n Anamur\\n 2004/02/01\\n 34%\\n \\n \\n Russell Haynes\\n 8916\\n Frascati\\n 2015/28/04\\n 18%\\n \\n \\n Brennan Brooks\\n 9011\\n Olmu\\xE9\\n 2000/18/04\\n 2%\\n \\n \\n Kane Anthony\\n 8075\\n LaSalle\\n 2006/21/05\\n 93%\\n \\n \\n Scarlett Hurst\\n 1019\\n Brampton\\n 2015/07/01\\n 94%\\n \\n \\n James Scott\\n 3008\\n Meux\\n 2007/30/05\\n 55%\\n \\n \\n Desiree Ferguson\\n 9054\\n Gojra\\n 2009/15/02\\n 81%\\n \\n \\n Elaine Bishop\\n 9160\\n Petr\\xF3polis\\n 2008/23/12\\n 48%\\n \\n \\n Hilda Nelson\\n 6307\\n Posina\\n 2004/23/05\\n 76%\\n \\n \\n Evangeline Beasley\\n 3820\\n Caplan\\n 2009/12/03\\n 62%\\n \\n \\n Wyatt Riley\\n 5694\\n Cavaion Veronese\\n 2012/19/02\\n 67%\\n \\n \\n Wyatt Mccarthy\\n 3547\\n Patan\\n 2014/23/06\\n 9%\\n \\n \\n Cairo Rice\\n 6273\\n Ostra Vetere\\n 2016/27/02\\n 13%\\n \\n \\n Sylvia Peters\\n 6829\\n Arrah\\n 2015/03/02\\n 13%\\n \\n \\n Kasper Craig\\n 5515\\n Firenze\\n 2015/26/04\\n 56%\\n \\n \\n Leigh Ruiz\\n 5112\\n Lac Ste. Anne\\n 2001/09/02\\n 28%\\n \\n\\n \\n Derek Kerr\\n 1724\\n Gualdo Cattaneo\\n 2014/21/01\\n 89%\\n \\n \\n Shad Hudson\\n 5944\\n Salamanca\\n 2014/10/12\\n 98%\\n \\n \\n Daryl Ayers\\n 8276\\n Barchi\\n 2012/12/11\\n 88%\\n \\n \\n Caleb Livingston\\n 3094\\n Fatehpur\\n 2014/13/02\\n 8%\\n \\n \\n Sydney Meyer\\n 4576\\n Neubrandenburg\\n 2015/06/02\\n 22%\\n \\n \\n Lani Lawrence\\n 8501\\n Turnhout\\n 2008/07/05\\n 16%\\n \\n \\n Allegra Shepherd\\n 2576\\n Meeuwen-Gruitrode\\n 2004/19/04\\n 41%\\n \\n \\n Fallon Reyes\\n 3178\\n Monceau-sur-Sambre\\n 2005/15/02\\n 16%\\n \\n \\n Karen Whitley\\n 4357\\n Sluis\\n 2003/02/05\\n 23%\\n \\n \\n Stewart Stephenson\\n 5350\\n Villa Faraldi\\n 2003/05/07\\n 65%\\n \\n \\n Ursula Reynolds\\n 7544\\n Southampton\\n 1999/16/12\\n 61%\\n \\n \\n Adrienne Winters\\n 4425\\n Laguna Blanca\\n 2014/15/09\\n 24%\\n \\n \\n Francesca Brock\\n 1337\\n Oban\\n 2000/12/06\\n 90%\\n \\n \\n Ursa Davenport\\n 7629\\n New Plymouth\\n 2013/27/06\\n 37%\\n \\n \\n Mark Brock\\n 3310\\n Veenendaal\\n 2006/08/09\\n 41%\\n \\n \\n Dale Rush\\n 5050\\n Chicoutimi\\n 2000/27/03\\n 2%\\n \\n \\n Shellie Murphy\\n 3845\\n Marlborough\\n 2013/13/11\\n 72%\\n \\n \\n Porter Nicholson\\n 4539\\n Bismil\\n 2012/22/10\\n 23%\\n \\n \\n Oliver Huber\\n 1265\\n Hann\\x90che\\n 2002/11/01\\n 94%\\n \\n \\n Calista Maynard\\n 3315\\n Pozzuolo del Friuli\\n 2006/23/03\\n 5%\\n \\n \\n Lois Vargas\\n 6825\\n Cumberland\\n 1999/25/04\\n 50%\\n \\n \\n Hermione Dickson\\n 2785\\n Woodstock\\n 2001/22/03\\n 2%\\n \\n \\n Dalton Jennings\\n 5416\\n Dudzele\\n 2015/09/02\\n 74%\\n \\n\\n \\n Kelly Cameron\\n 4836\\n Fontaine-Valmont\\n 1999/02/07\\n 24%\\n \\n \\n Kyra Moses\\n 3796\\n Quenast\\n 1998/07/07\\n 68%\\n \\n \\n Grace Bishop\\n 8340\\n Rodez\\n 2012/02/10\\n 4%\\n \\n \\n Haviva Hernandez\\n 8136\\n Suwa\\u0142ki\\n 2000/30/01\\n 16%\\n \\n \\n Alisa Horn\\n 9853\\n Ucluelet\\n 2007/01/11\\n 39%\\n \\n \\n Zelenia Roman\\n 7516\\n Redwater\\n 2012/03/03\\n 31%\\n \\n \\n \\n
\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#datatables","title":"DataTables","items":[{"url":"#basic-datatable","title":"Basic DataTable","items":[{"items":[{"items":[{"items":[{"url":"#html","title":"html"}]}]}]}]},{"url":"#not-striped-datatable","title":"Not Striped DataTable","items":[{"items":[{"items":[{"items":[{"url":"#html-1","title":"html"}]}]}]}]}]}]},"parent":{"__typename":"File","relativePath":"contrast/javascript/components/datatables.md"},"frontmatter":{"metaTitle":"DataTable Component for Contrast Bootstrap ","metaDescription":"Building a DataTable Component using the Contrast Bootstrap Package"}},"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":"1c590d2c-305f-5375-ae69-8c89bf86fcd0"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}