{"componentChunkName":"component---src-templates-docs-js","path":"/docs/contrast/react/table/datatables","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"0130a620-73a8-5f0e-a294-9fcfa3adc71c","title":"DataTable","slug":"/contrast/react/table/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 React\",\n  \"metaDescription\": \"Building a DataTable Component using the Contrast Bootstrap React 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, \"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(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://i.imgur.com/gIkW791.gif\",\n    \"alt\": null\n  }))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBCard, CDBCardBody, CDBDataTable, CDBRow, CDBCol, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst DataTable = () => {\\n\\n  function testClickEvent(param) {\\n    alert(\\\"Row Click Event\\\");\\n  }\\n\\n  const data = () =>{  return ({\\n    columns: [\\n      {\\n        label: \\\"Name\\\",\\n        field: \\\"name\\\",\\n        width: 150,\\n        attributes: {\\n          \\\"aria-controls\\\": \\\"DataTable\\\",\\n          \\\"aria-label\\\": \\\"Name\\\",\\n        },\\n      },\\n      {\\n        label: \\\"Position\\\",\\n        field: \\\"position\\\",\\n        width: 270,\\n      },\\n      {\\n        label: \\\"Office\\\",\\n        field: \\\"office\\\",\\n        width: 200,\\n      },\\n      {\\n        label: \\\"Age\\\",\\n        field: \\\"age\\\",\\n        sort: \\\"asc\\\",\\n        width: 100,\\n      },\\n      {\\n        label: \\\"Start date\\\",\\n        field: \\\"date\\\",\\n        sort: \\\"disabled\\\",\\n        width: 150,\\n      },\\n      {\\n        label: \\\"Salary\\\",\\n        field: \\\"salary\\\",\\n        sort: \\\"disabled\\\",\\n        width: 100,\\n      },\\n    ],\\n    rows: [\\n      {\\n        name: \\\"Tiger Nixon\\\",\\n        position: \\\"System Architect\\\",\\n        office: \\\"Edinburgh\\\",\\n        age: \\\"61\\\",\\n        date: \\\"2011/04/25\\\",\\n        salary: \\\"$320\\\",\\n        clickEvent: () => testClickEvent(1),\\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  }); };\\n  return (\\n    <CDBContainer>\\n      <CDBCard>\\n        <CDBCardBody>\\n          <CDBDataTable\\n            striped\\n            bordered\\n            hover\\n            entriesOptions={[5, 20, 25]}\\n            entries={5}\\n            pagesAmount={4}\\n            data={data()}\\n            materialSearch={true}\\n          />\\n        </CDBCardBody>\\n      </CDBCard>\\n    </CDBContainer>\\n  );\\n};\\n\\nexport default DataTable;\\n\")), mdx(\"h2\", null, \"Not Striped\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://i.imgur.com/YE5dgYk.gif\",\n    \"alt\": null\n  }))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBCard, CDBCardBody, CDBDataTable, CDBRow, CDBCol, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst DataTable = () => {\\n\\n  function testClickEvent(param) {\\n    alert(\\\"Row Click Event\\\");\\n  }\\n\\n  const data = () =>{  return ({\\n    columns: [\\n      {\\n        label: \\\"Name\\\",\\n        field: \\\"name\\\",\\n        width: 150,\\n        attributes: {\\n          \\\"aria-controls\\\": \\\"DataTable\\\",\\n          \\\"aria-label\\\": \\\"Name\\\",\\n        },\\n      },\\n      {\\n        label: \\\"Position\\\",\\n        field: \\\"position\\\",\\n        width: 270,\\n      },\\n      {\\n        label: \\\"Office\\\",\\n        field: \\\"office\\\",\\n        width: 200,\\n      },\\n      {\\n        label: \\\"Age\\\",\\n        field: \\\"age\\\",\\n        sort: \\\"asc\\\",\\n        width: 100,\\n      },\\n      {\\n        label: \\\"Start date\\\",\\n        field: \\\"date\\\",\\n        sort: \\\"disabled\\\",\\n        width: 150,\\n      },\\n      {\\n        label: \\\"Salary\\\",\\n        field: \\\"salary\\\",\\n        sort: \\\"disabled\\\",\\n        width: 100,\\n      },\\n    ],\\n    rows: [\\n      {\\n        name: \\\"Tiger Nixon\\\",\\n        position: \\\"System Architect\\\",\\n        office: \\\"Edinburgh\\\",\\n        age: \\\"61\\\",\\n        date: \\\"2011/04/25\\\",\\n        salary: \\\"$320\\\",\\n        clickEvent: () => testClickEvent(1),\\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  }); };\\n  return (\\n    <CDBContainer>\\n      <CDBCard>\\n        <CDBCardBody>\\n          <CDBDataTable\\n            bordered\\n            hover\\n            entriesOptions={[5, 20, 25]}\\n            entries={5}\\n            pagesAmount={4}\\n            data={data()}\\n            materialSearch={true}\\n          />\\n        </CDBCardBody>\\n      </CDBCard>\\n    </CDBContainer>\\n  );\\n};\\n\\nexport default DataTable;\\n\")), mdx(\"h2\", null, \"Fixed Height\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://i.imgur.com/YFD0gPm.gif\",\n    \"alt\": null\n  }))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBCard, CDBCardBody, CDBDataTable, CDBRow, CDBCol, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst DataTable = () => {\\n\\n  function testClickEvent(param) {\\n    alert(\\\"Row Click Event\\\");\\n  }\\n\\n  const data = () =>{  return ({\\n    columns: [\\n      {\\n        label: \\\"Name\\\",\\n        field: \\\"name\\\",\\n        width: 150,\\n        attributes: {\\n          \\\"aria-controls\\\": \\\"DataTable\\\",\\n          \\\"aria-label\\\": \\\"Name\\\",\\n        },\\n      },\\n      {\\n        label: \\\"Position\\\",\\n        field: \\\"position\\\",\\n        width: 270,\\n      },\\n      {\\n        label: \\\"Office\\\",\\n        field: \\\"office\\\",\\n        width: 200,\\n      },\\n      {\\n        label: \\\"Age\\\",\\n        field: \\\"age\\\",\\n        sort: \\\"asc\\\",\\n        width: 100,\\n      },\\n      {\\n        label: \\\"Start date\\\",\\n        field: \\\"date\\\",\\n        sort: \\\"disabled\\\",\\n        width: 150,\\n      },\\n      {\\n        label: \\\"Salary\\\",\\n        field: \\\"salary\\\",\\n        sort: \\\"disabled\\\",\\n        width: 100,\\n      },\\n    ],\\n    rows: [\\n      {\\n        name: \\\"Tiger Nixon\\\",\\n        position: \\\"System Architect\\\",\\n        office: \\\"Edinburgh\\\",\\n        age: \\\"61\\\",\\n        date: \\\"2011/04/25\\\",\\n        salary: \\\"$320\\\",\\n        clickEvent: () => testClickEvent(1),\\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  }); };\\n  return (\\n    <CDBContainer>\\n      <CDBCard>\\n        <CDBCardBody>\\n          <CDBDataTable\\n            striped\\n            bordered\\n            hover\\n            scrollY\\n            maxHeight=\\\"50vh\\\"\\n            data={data()}\\n            materialSearch\\n          />\\n        </CDBCardBody>\\n      </CDBCard>\\n    </CDBContainer>\\n  );\\n};\\n\\nexport default DataTable;\\n\")), mdx(\"h2\", null, \"Disabled Button\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://i.imgur.com/r9A66GD.gif\",\n    \"alt\": null\n  }))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBCard, CDBCardBody, CDBDataTable, CDBRow, CDBCol, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst DataTable = () => {\\n\\n  function testClickEvent(param) {\\n    alert(\\\"Row Click Event\\\");\\n  }\\n\\n  const data = () =>{  return ({\\n    columns: [\\n      {\\n        label: \\\"Name\\\",\\n        field: \\\"name\\\",\\n        width: 150,\\n        attributes: {\\n          \\\"aria-controls\\\": \\\"DataTable\\\",\\n          \\\"aria-label\\\": \\\"Name\\\",\\n        },\\n      },\\n      {\\n        label: \\\"Position\\\",\\n        field: \\\"position\\\",\\n        width: 270,\\n      },\\n      {\\n        label: \\\"Office\\\",\\n        field: \\\"office\\\",\\n        width: 200,\\n      },\\n      {\\n        label: \\\"Age\\\",\\n        field: \\\"age\\\",\\n        sort: \\\"asc\\\",\\n        width: 100,\\n      },\\n      {\\n        label: \\\"Start date\\\",\\n        field: \\\"date\\\",\\n        sort: \\\"disabled\\\",\\n        width: 150,\\n      },\\n      {\\n        label: \\\"Salary\\\",\\n        field: \\\"salary\\\",\\n        sort: \\\"disabled\\\",\\n        width: 100,\\n      },\\n    ],\\n    rows: [\\n      {\\n        name: \\\"Tiger Nixon\\\",\\n        position: \\\"System Architect\\\",\\n        office: \\\"Edinburgh\\\",\\n        age: \\\"61\\\",\\n        date: \\\"2011/04/25\\\",\\n        salary: \\\"$320\\\",\\n        clickEvent: () => testClickEvent(1),\\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  }); };\\n  return (\\n    <CDBContainer>\\n      <CDBCard>\\n        <CDBCardBody>\\n          <CDBDataTable\\n            striped\\n            bordered\\n            hover\\n            scrollX\\n            data={data()}\\n            materialSearch\\n          />\\n        </CDBCardBody>\\n      </CDBCard>\\n    </CDBContainer>\\n  );\\n};\\n\\nexport default DataTable;\\n\")), mdx(\"h2\", null, \"Full Pagination\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://i.imgur.com/2knDIqn.gif\",\n    \"alt\": null\n  }))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBCard, CDBCardBody, CDBDataTable, CDBRow, CDBCol, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst DataTable = () => {\\n\\n  function testClickEvent(param) {\\n    alert(\\\"Row Click Event\\\");\\n  }\\n\\n  const data = () =>{  return ({\\n    columns: [\\n      {\\n        label: \\\"Name\\\",\\n        field: \\\"name\\\",\\n        width: 150,\\n        attributes: {\\n          \\\"aria-controls\\\": \\\"DataTable\\\",\\n          \\\"aria-label\\\": \\\"Name\\\",\\n        },\\n      },\\n      {\\n        label: \\\"Position\\\",\\n        field: \\\"position\\\",\\n        width: 270,\\n      },\\n      {\\n        label: \\\"Office\\\",\\n        field: \\\"office\\\",\\n        width: 200,\\n      },\\n      {\\n        label: \\\"Age\\\",\\n        field: \\\"age\\\",\\n        sort: \\\"asc\\\",\\n        width: 100,\\n      },\\n      {\\n        label: \\\"Start date\\\",\\n        field: \\\"date\\\",\\n        sort: \\\"disabled\\\",\\n        width: 150,\\n      },\\n      {\\n        label: \\\"Salary\\\",\\n        field: \\\"salary\\\",\\n        sort: \\\"disabled\\\",\\n        width: 100,\\n      },\\n    ],\\n    rows: [\\n      {\\n        name: \\\"Tiger Nixon\\\",\\n        position: \\\"System Architect\\\",\\n        office: \\\"Edinburgh\\\",\\n        age: \\\"61\\\",\\n        date: \\\"2011/04/25\\\",\\n        salary: \\\"$320\\\",\\n        clickEvent: () => testClickEvent(1),\\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  }); };\\n  return (\\n    <CDBContainer>\\n      <CDBCard>\\n        <CDBCardBody>\\n          <CDBDataTable\\n            striped\\n            bordered\\n            hover\\n            scrollX\\n            scrollY\\n            maxHeight=\\\"300xp\\\"\\n            data={data()}\\n            materialSearch\\n            fullPagination\\n          />\\n        </CDBCardBody>\\n      </CDBCard>\\n    </CDBContainer>\\n  );\\n};\\n\\nexport default DataTable;\\n\")), mdx(\"h2\", null, \"Checkbox\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://i.imgur.com/gNWiaIb.gif\",\n    \"alt\": null\n  }))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBCard, CDBCardBody, CDBDataTable, CDBRow, CDBCol, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst DataTable = () => {\\n\\n  function testClickEvent(param) {\\n    alert(\\\"Row Click Event\\\");\\n  }\\n\\n  const data = () =>{  return ({\\n    columns: [\\n      {\\n        label: \\\"Name\\\",\\n        field: \\\"name\\\",\\n        width: 150,\\n        attributes: {\\n          \\\"aria-controls\\\": \\\"DataTable\\\",\\n          \\\"aria-label\\\": \\\"Name\\\",\\n        },\\n      },\\n      {\\n        label: \\\"Position\\\",\\n        field: \\\"position\\\",\\n        width: 270,\\n      },\\n      {\\n        label: \\\"Office\\\",\\n        field: \\\"office\\\",\\n        width: 200,\\n      },\\n      {\\n        label: \\\"Age\\\",\\n        field: \\\"age\\\",\\n        sort: \\\"asc\\\",\\n        width: 100,\\n      },\\n      {\\n        label: \\\"Start date\\\",\\n        field: \\\"date\\\",\\n        sort: \\\"disabled\\\",\\n        width: 150,\\n      },\\n      {\\n        label: \\\"Salary\\\",\\n        field: \\\"salary\\\",\\n        sort: \\\"disabled\\\",\\n        width: 100,\\n      },\\n    ],\\n    rows: [\\n      {\\n        name: \\\"Tiger Nixon\\\",\\n        position: \\\"System Architect\\\",\\n        office: \\\"Edinburgh\\\",\\n        age: \\\"61\\\",\\n        date: \\\"2011/04/25\\\",\\n        salary: \\\"$320\\\",\\n        clickEvent: () => testClickEvent(1),\\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  }); };\\n  return (\\n    <CDBContainer>\\n      <CDBCard>\\n        <CDBCardBody>\\n          <CDBDataTable\\n            striped\\n            bordered\\n            hover\\n            checkbox\\n            data={data()}\\n            materialSearch\\n          />\\n        </CDBCardBody>\\n      </CDBCard>\\n    </CDBContainer>\\n  );\\n};\\n\\nexport default DataTable;\\n\")), mdx(\"h2\", null, \"No Search\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://i.imgur.com/x91p60t.gif\",\n    \"alt\": null\n  }))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBCard, CDBCardBody, CDBDataTable, CDBRow, CDBCol, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst DataTable = () => {\\n\\n  function testClickEvent(param) {\\n    alert(\\\"Row Click Event\\\");\\n  }\\n\\n  const data = () =>{  return ({\\n    columns: [\\n      {\\n        label: \\\"Name\\\",\\n        field: \\\"name\\\",\\n        width: 150,\\n        attributes: {\\n          \\\"aria-controls\\\": \\\"DataTable\\\",\\n          \\\"aria-label\\\": \\\"Name\\\",\\n        },\\n      },\\n      {\\n        label: \\\"Position\\\",\\n        field: \\\"position\\\",\\n        width: 270,\\n      },\\n      {\\n        label: \\\"Office\\\",\\n        field: \\\"office\\\",\\n        width: 200,\\n      },\\n      {\\n        label: \\\"Age\\\",\\n        field: \\\"age\\\",\\n        sort: \\\"asc\\\",\\n        width: 100,\\n      },\\n      {\\n        label: \\\"Start date\\\",\\n        field: \\\"date\\\",\\n        sort: \\\"disabled\\\",\\n        width: 150,\\n      },\\n      {\\n        label: \\\"Salary\\\",\\n        field: \\\"salary\\\",\\n        sort: \\\"disabled\\\",\\n        width: 100,\\n      },\\n    ],\\n    rows: [\\n      {\\n        name: \\\"Tiger Nixon\\\",\\n        position: \\\"System Architect\\\",\\n        office: \\\"Edinburgh\\\",\\n        age: \\\"61\\\",\\n        date: \\\"2011/04/25\\\",\\n        salary: \\\"$320\\\",\\n        clickEvent: () => testClickEvent(1),\\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  }); };\\n  return (\\n    <CDBContainer>\\n      <CDBCard>\\n        <CDBCardBody>\\n          <CDBDataTable\\n            striped\\n            bordered\\n            hover\\n            data={data()}\\n            searching={false}\\n          />\\n        </CDBCardBody>\\n      </CDBCard>\\n    </CDBContainer>\\n  );\\n};\\n\\nexport default DataTable;\\n\")), mdx(\"h2\", null, \"No Sort\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://i.imgur.com/og0Z2Ck.gif\",\n    \"alt\": null\n  }))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBCard, CDBCardBody, CDBDataTable, CDBRow, CDBCol, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst DataTable = () => {\\n\\n  function testClickEvent(param) {\\n    alert(\\\"Row Click Event\\\");\\n  }\\n\\n  const data = () =>{  return ({\\n    columns: [\\n      {\\n        label: \\\"Name\\\",\\n        field: \\\"name\\\",\\n        width: 150,\\n        attributes: {\\n          \\\"aria-controls\\\": \\\"DataTable\\\",\\n          \\\"aria-label\\\": \\\"Name\\\",\\n        },\\n      },\\n      {\\n        label: \\\"Position\\\",\\n        field: \\\"position\\\",\\n        width: 270,\\n      },\\n      {\\n        label: \\\"Office\\\",\\n        field: \\\"office\\\",\\n        width: 200,\\n      },\\n      {\\n        label: \\\"Age\\\",\\n        field: \\\"age\\\",\\n        sort: \\\"asc\\\",\\n        width: 100,\\n      },\\n      {\\n        label: \\\"Start date\\\",\\n        field: \\\"date\\\",\\n        sort: \\\"disabled\\\",\\n        width: 150,\\n      },\\n      {\\n        label: \\\"Salary\\\",\\n        field: \\\"salary\\\",\\n        sort: \\\"disabled\\\",\\n        width: 100,\\n      },\\n    ],\\n    rows: [\\n      {\\n        name: \\\"Tiger Nixon\\\",\\n        position: \\\"System Architect\\\",\\n        office: \\\"Edinburgh\\\",\\n        age: \\\"61\\\",\\n        date: \\\"2011/04/25\\\",\\n        salary: \\\"$320\\\",\\n        clickEvent: () => testClickEvent(1),\\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  }); };\\n  return (\\n    <CDBContainer>\\n      <CDBCard>\\n        <CDBCardBody>\\n          <CDBDataTable\\n            striped\\n            bordered\\n            hover\\n            data={data()}\\n            sortable={false}\\n            materialSearch\\n          />\\n        </CDBCardBody>\\n      </CDBCard>\\n    </CDBContainer>\\n  );\\n};\\n\\nexport default DataTable;\\n\")), mdx(\"h2\", null, \"No Info\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://i.imgur.com/Aqqein8.gif\",\n    \"alt\": null\n  }))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBCard, CDBCardBody, CDBDataTable, CDBRow, CDBCol, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst DataTable = () => {\\n\\n  function testClickEvent(param) {\\n    alert(\\\"Row Click Event\\\");\\n  }\\n\\n  const data = () =>{  return ({\\n    columns: [\\n      {\\n        label: \\\"Name\\\",\\n        field: \\\"name\\\",\\n        width: 150,\\n        attributes: {\\n          \\\"aria-controls\\\": \\\"DataTable\\\",\\n          \\\"aria-label\\\": \\\"Name\\\",\\n        },\\n      },\\n      {\\n        label: \\\"Position\\\",\\n        field: \\\"position\\\",\\n        width: 270,\\n      },\\n      {\\n        label: \\\"Office\\\",\\n        field: \\\"office\\\",\\n        width: 200,\\n      },\\n      {\\n        label: \\\"Age\\\",\\n        field: \\\"age\\\",\\n        sort: \\\"asc\\\",\\n        width: 100,\\n      },\\n      {\\n        label: \\\"Start date\\\",\\n        field: \\\"date\\\",\\n        sort: \\\"disabled\\\",\\n        width: 150,\\n      },\\n      {\\n        label: \\\"Salary\\\",\\n        field: \\\"salary\\\",\\n        sort: \\\"disabled\\\",\\n        width: 100,\\n      },\\n    ],\\n    rows: [\\n      {\\n        name: \\\"Tiger Nixon\\\",\\n        position: \\\"System Architect\\\",\\n        office: \\\"Edinburgh\\\",\\n        age: \\\"61\\\",\\n        date: \\\"2011/04/25\\\",\\n        salary: \\\"$320\\\",\\n        clickEvent: () => testClickEvent(1),\\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  }); };\\n  return (\\n    <CDBContainer>\\n      <CDBCard>\\n        <CDBCardBody>\\n          <CDBDataTable\\n            striped\\n            bordered\\n            hover\\n            data={data()}\\n            info={false}\\n            materialSearch\\n          />\\n        </CDBCardBody>\\n      </CDBCard>\\n    </CDBContainer>\\n  );\\n};\\n\\nexport default DataTable;\\n\")), mdx(\"h2\", null, \"No Pagination\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://i.imgur.com/WxNQdjY.gif\",\n    \"alt\": null\n  }))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBCard, CDBCardBody, CDBDataTable, CDBRow, CDBCol, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst DataTable = () => {\\n\\n  function testClickEvent(param) {\\n    alert(\\\"Row Click Event\\\");\\n  }\\n\\n  const data = () =>{  return ({\\n    columns: [\\n      {\\n        label: \\\"Name\\\",\\n        field: \\\"name\\\",\\n        width: 150,\\n        attributes: {\\n          \\\"aria-controls\\\": \\\"DataTable\\\",\\n          \\\"aria-label\\\": \\\"Name\\\",\\n        },\\n      },\\n      {\\n        label: \\\"Position\\\",\\n        field: \\\"position\\\",\\n        width: 270,\\n      },\\n      {\\n        label: \\\"Office\\\",\\n        field: \\\"office\\\",\\n        width: 200,\\n      },\\n      {\\n        label: \\\"Age\\\",\\n        field: \\\"age\\\",\\n        sort: \\\"asc\\\",\\n        width: 100,\\n      },\\n      {\\n        label: \\\"Start date\\\",\\n        field: \\\"date\\\",\\n        sort: \\\"disabled\\\",\\n        width: 150,\\n      },\\n      {\\n        label: \\\"Salary\\\",\\n        field: \\\"salary\\\",\\n        sort: \\\"disabled\\\",\\n        width: 100,\\n      },\\n    ],\\n    rows: [\\n      {\\n        name: \\\"Tiger Nixon\\\",\\n        position: \\\"System Architect\\\",\\n        office: \\\"Edinburgh\\\",\\n        age: \\\"61\\\",\\n        date: \\\"2011/04/25\\\",\\n        salary: \\\"$320\\\",\\n        clickEvent: () => testClickEvent(1),\\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  }); };\\n  return (\\n    <CDBContainer>\\n      <CDBRow className=\\\"py-3\\\">\\n        <CDBCol md=\\\"12\\\">\\n          <CDBCard>\\n            <CDBCardBody>\\n              <CDBDataTable\\n                striped\\n                bordered\\n                hover\\n                paging={false}\\n                data={data()}\\n                materialSearch\\n              />\\n            </CDBCardBody>\\n          </CDBCard>\\n        </CDBCol>\\n      </CDBRow>\\n    </CDBContainer>\\n  );\\n};\\n\\nexport default DataTable;\\n\")), mdx(\"h1\", null, \"API\"), mdx(\"p\", null, \"In this section you will find advanced information about the DataTable component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.\"), mdx(\"h2\", null, \"Contrast DataTable Import Statement\"), mdx(\"p\", null, \"You need to import the Contrast DataTable component first before using it.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import { CDBDataTable } from \\\"cdbreact\\\";\\n\")), mdx(\"p\", null, \"API Reference: Contrast DataTable Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBDataTable component.\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"Name\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Type\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Default\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Description\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Example\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"className\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds classes to data table component\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable className=\\\"myClass\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"div\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes default input tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable tag=\\\"input\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"autoWidth\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Automatically adjust columns width to the content.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable autoWidth .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"barReverse\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Swaps position of 'search' and 'show entries' elements\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable barReverse .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"bordered\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds border on all table's and cell's sides.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable bordered .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"borderless\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Disables border on all table's and cell's sides.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable borderless .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"btn\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adjust table styles to work with content like buttons\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable btn .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"dark\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets dark color palette of the table.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable dark .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"data\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Object or String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Attach your data or link to the JSON with your data.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable data={data} .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"disableRetreatAfterSorting\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Disable retreat after sorting to the first page.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable disableRetreatAfterSorting .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"displayEntries\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"true\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Determines whether entries is enabled/disabled.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable displayEntries={false} .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"entries\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Number\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Initial entries amount value.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable entries .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"entriesLabel\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Show Entries\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Change entries label; you can attach jsx code to render f.e. links.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable entriesLabel=\\\"Show labels\\\" .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"entriesOptions\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Array\", \"[Number]\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"[10, 20, 50, 100]\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets entries amount options available to select in dropdown.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable entriesOptions={\", \"[5, 10, 15 ]\", \"} .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"exportToCSV\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"If you add this property the button will appear. By clicking it the .csv file with your table will be downloaded.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable exportToCSV .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"office\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds a new select to filter table data by column field.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable filter=\\\"office\\\" .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"fixed\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets fixed columns width.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable fixed .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"hover\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds hover state on table rows (rows are marked on light-grey color).\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable hover .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"info\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"true\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Determines whether pagination info is enabled/disabled.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable info={false} .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"infoLabel\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Array\", \"[String]\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"[\\\"Showing\\\", \\\"to\\\", \\\"of\\\", \\\"entries\\\"]\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Change text of paging information.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable infoLabel={\", \"[\\\"Showing\\\", \\\"to\\\", \\\"of\\\", \\\"entries\\\"]\", \"} .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"maxHeight\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"200px\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets table's maxHeight. You can use px, vh or whatever fits to your needs.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable maxHeight=\\\"400px\\\" .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"noBottomColumn\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"No renders table footer\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable noBottomColumn .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"noRecordsLabelFound\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"No matching records found\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets custom text if no have data to render\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable noRecordsFoundLabel=\\\"Zero records to render\\\" .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"order\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Array\", \"[String]\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets initial order. Accepts array of strings, index 0: table field by which you want to sort, index 1: sorting direction ('desc'/'asc').\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable order={\", \"['age', 'desc']\", \"} .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"pagesAmount\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Number\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"8\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Initial number of pages simultaneously visible in pagination.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable pagesAmount={10} .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"paging\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"true\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Determines whether pagination is enabled/disabled.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable paging={false} .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"paginationLabel\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Array\", \"[String]\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"[\\\"Previous\\\", \\\"Next\\\"]\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Change pagination buttons labels.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable paginationLabel={\", \"[\\\"Previous\\\", \\\"Next\\\"]\", \"} .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"responsive\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Makes table scrollable horizontally when screen width is smaller than table content (under 768px). It make use of \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"overflow-y: hidden\"), \" which clips off content that goes beyond the bottom or top edge of the table.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable responsive .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"responsiveSm\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Makes table scrollable horizontally on under 576px wide screens.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable responsiveSm .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"responsiveMd\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Makes table scrollable horizontally on under 768px wide screens.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable responsiveMd .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"responsiveLg\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Makes table scrollable horizontally on under 992px wide screens.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable responsiveLg .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"responsiveXl\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Makes table scrollable horizontally on under 1200px wide screens.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable responsiveXl .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"searching\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"true\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Determines whether searching is enabled/disabled.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable searching={false} .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"searchLabel\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Search\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Change text of search label.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable searchLabel=\\\"Search\\\" .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"scrollX\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Allows table to be scrolled horizontally. Combine this prop with column's 'width' for the best effects.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable scrollX .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"scrollY\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Allows table to be scrolled vertically if it's content is higher than 200px. Combine it with maxHeight to manipulate table's height.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable scrollY .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"sortRows\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Array\", \"[String]\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Determines row fields which defined as components but should be sortable and searchable. \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"Row's field component should receive property 'searchValue'!\")), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable autoWidth sortRows=\", \"[\\\"search\\\"]\", \" .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"sortable\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Determines whether sorting is enabled/disabled.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable sortable .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"striped\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds zebra-striping to any table row.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable striped .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"theadColor\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets background color of table head.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable theadColor=\\\"indigo\\\" .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"theadTextWhite\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets white color of table head's font.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable theadTextWhite .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"tbodyColor\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets background color of table body.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable tbodyColor=\\\"indigo\\\" .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"tbodyTextWhite\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets white color of table body's font.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDataTable tbodyTextWhite .../>\")))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#datatables","title":"DataTables","items":[{"url":"#basic-datatable","title":"Basic DataTable"},{"url":"#not-striped","title":"Not Striped"},{"url":"#fixed-height","title":"Fixed Height"},{"url":"#disabled-button","title":"Disabled Button"},{"url":"#full-pagination","title":"Full Pagination"},{"url":"#checkbox","title":"Checkbox"},{"url":"#no-search","title":"No Search"},{"url":"#no-sort","title":"No Sort"},{"url":"#no-info","title":"No Info"},{"url":"#no-pagination","title":"No Pagination"}]},{"url":"#api","title":"API","items":[{"url":"#contrast-datatable-import-statement","title":"Contrast DataTable Import Statement"}]}]},"parent":{"__typename":"File","relativePath":"contrast/react/table/datatables.mdx"},"frontmatter":{"metaTitle":"DataTable Component for Contrast Bootstrap React","metaDescription":"Building a DataTable Component using the Contrast Bootstrap React 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":"0130a620-73a8-5f0e-a294-9fcfa3adc71c"}},"staticQueryHashes":["2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}