{"ast":null,"code":"import _createForOfIteratorHelper from \"/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createForOfIteratorHelper\";\nimport _toConsumableArray from \"/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/toConsumableArray\";\nimport _slicedToArray from \"/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/slicedToArray\";\n\nvar _this = this,\n _jsxFileName = \"/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/src/components/TableDemo.js\";\n\nimport React, { useState, useEffect } from 'react';\nimport { classNames } from 'primereact/utils';\nimport { FilterMatchMode, FilterOperator } from 'primereact/api';\nimport { DataTable } from 'primereact/datatable';\nimport { Column } from 'primereact/column';\nimport { Dropdown } from 'primereact/dropdown';\nimport { InputNumber } from 'primereact/inputnumber';\nimport { Button } from 'primereact/button';\nimport { ProgressBar } from 'primereact/progressbar';\nimport { Calendar } from 'primereact/calendar';\nimport { MultiSelect } from 'primereact/multiselect';\nimport { Slider } from 'primereact/slider';\nimport { TriStateCheckbox } from 'primereact/tristatecheckbox';\nimport { ToggleButton } from 'primereact/togglebutton';\nimport { Rating } from 'primereact/rating';\nimport { CustomerService } from '../service/CustomerService';\nimport { ProductService } from '../service/ProductService';\n\nvar TableDemo = function TableDemo() {\n var _useState = useState(null),\n _useState2 = _slicedToArray(_useState, 2),\n customers1 = _useState2[0],\n setCustomers1 = _useState2[1];\n\n var _useState3 = useState([]),\n _useState4 = _slicedToArray(_useState3, 2),\n customers2 = _useState4[0],\n setCustomers2 = _useState4[1];\n\n var _useState5 = useState([]),\n _useState6 = _slicedToArray(_useState5, 2),\n customers3 = _useState6[0],\n setCustomers3 = _useState6[1];\n\n var _useState7 = useState(null),\n _useState8 = _slicedToArray(_useState7, 2),\n filters1 = _useState8[0],\n setFilters1 = _useState8[1];\n\n var _useState9 = useState(true),\n _useState10 = _slicedToArray(_useState9, 2),\n loading1 = _useState10[0],\n setLoading1 = _useState10[1];\n\n var _useState11 = useState(true),\n _useState12 = _slicedToArray(_useState11, 2),\n loading2 = _useState12[0],\n setLoading2 = _useState12[1];\n\n var _useState13 = useState(false),\n _useState14 = _slicedToArray(_useState13, 2),\n idFrozen = _useState14[0],\n setIdFrozen = _useState14[1];\n\n var _useState15 = useState([]),\n _useState16 = _slicedToArray(_useState15, 2),\n products = _useState16[0],\n setProducts = _useState16[1];\n\n var _useState17 = useState(null),\n _useState18 = _slicedToArray(_useState17, 2),\n expandedRows = _useState18[0],\n setExpandedRows = _useState18[1];\n\n var representatives = [{\n name: \"Amy Elsner\",\n image: 'amyelsner.png'\n }, {\n name: \"Anna Fali\",\n image: 'annafali.png'\n }, {\n name: \"Asiya Javayant\",\n image: 'asiyajavayant.png'\n }, {\n name: \"Bernardo Dominic\",\n image: 'bernardodominic.png'\n }, {\n name: \"Elwin Sharvill\",\n image: 'elwinsharvill.png'\n }, {\n name: \"Ioni Bowcher\",\n image: 'ionibowcher.png'\n }, {\n name: \"Ivan Magalhaes\",\n image: 'ivanmagalhaes.png'\n }, {\n name: \"Onyama Limba\",\n image: 'onyamalimba.png'\n }, {\n name: \"Stephen Shaw\",\n image: 'stephenshaw.png'\n }, {\n name: \"XuXue Feng\",\n image: 'xuxuefeng.png'\n }];\n var statuses = ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'];\n var customerService = new CustomerService();\n var productService = new ProductService();\n useEffect(function () {\n setLoading2(true);\n customerService.getCustomersLarge().then(function (data) {\n setCustomers1(getCustomers(data));\n setLoading1(false);\n });\n customerService.getCustomersLarge().then(function (data) {\n setCustomers2(getCustomers(data));\n setLoading2(false);\n });\n customerService.getCustomersMedium().then(function (data) {\n return setCustomers3(data);\n });\n productService.getProductsWithOrdersSmall().then(function (data) {\n return setProducts(data);\n });\n initFilters1();\n }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n var balanceTemplate = function balanceTemplate(rowData) {\n return /*#__PURE__*/React.createElement(\"span\", {\n className: \"text-bold\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 63,\n columnNumber: 13\n }\n }, formatCurrency(rowData.balance));\n };\n\n var getCustomers = function getCustomers(data) {\n return _toConsumableArray(data || []).map(function (d) {\n d.date = new Date(d.date);\n return d;\n });\n };\n\n var formatDate = function formatDate(value) {\n return value.toLocaleDateString('en-US', {\n day: '2-digit',\n month: '2-digit',\n year: 'numeric'\n });\n };\n\n var formatCurrency = function formatCurrency(value) {\n return value.toLocaleString('en-US', {\n style: 'currency',\n currency: 'USD'\n });\n };\n\n var initFilters1 = function initFilters1() {\n setFilters1({\n 'global': {\n value: null,\n matchMode: FilterMatchMode.CONTAINS\n },\n 'name': {\n operator: FilterOperator.AND,\n constraints: [{\n value: null,\n matchMode: FilterMatchMode.STARTS_WITH\n }]\n },\n 'country.name': {\n operator: FilterOperator.AND,\n constraints: [{\n value: null,\n matchMode: FilterMatchMode.STARTS_WITH\n }]\n },\n 'representative': {\n value: null,\n matchMode: FilterMatchMode.IN\n },\n 'date': {\n operator: FilterOperator.AND,\n constraints: [{\n value: null,\n matchMode: FilterMatchMode.DATE_IS\n }]\n },\n 'balance': {\n operator: FilterOperator.AND,\n constraints: [{\n value: null,\n matchMode: FilterMatchMode.EQUALS\n }]\n },\n 'status': {\n operator: FilterOperator.OR,\n constraints: [{\n value: null,\n matchMode: FilterMatchMode.EQUALS\n }]\n },\n 'activity': {\n value: null,\n matchMode: FilterMatchMode.BETWEEN\n },\n 'verified': {\n value: null,\n matchMode: FilterMatchMode.EQUALS\n }\n });\n };\n\n var countryBodyTemplate = function countryBodyTemplate(rowData) {\n return /*#__PURE__*/React.createElement(React.Fragment, {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 105,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n alt: \"flag\",\n src: \"assets/demo/images/flags/flag_placeholder.png\",\n className: \"flag flag-\".concat(rowData.country.code),\n width: 30,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 106,\n columnNumber: 17\n }\n }), /*#__PURE__*/React.createElement(\"span\", {\n style: {\n marginLeft: '.5em',\n verticalAlign: 'middle'\n },\n className: \"image-text\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 107,\n columnNumber: 17\n }\n }, rowData.country.name));\n };\n\n var filterClearTemplate = function filterClearTemplate(options) {\n return /*#__PURE__*/React.createElement(Button, {\n type: \"button\",\n icon: \"pi pi-times\",\n onClick: options.filterClearCallback,\n className: \"p-button-secondary\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 113,\n columnNumber: 16\n }\n });\n };\n\n var filterApplyTemplate = function filterApplyTemplate(options) {\n return /*#__PURE__*/React.createElement(Button, {\n type: \"button\",\n icon: \"pi pi-check\",\n onClick: options.filterApplyCallback,\n className: \"p-button-success\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 117,\n columnNumber: 16\n }\n });\n };\n\n var representativeBodyTemplate = function representativeBodyTemplate(rowData) {\n var representative = rowData.representative;\n return /*#__PURE__*/React.createElement(React.Fragment, {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 123,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n alt: representative.name,\n src: \"images/avatar/\".concat(representative.image),\n onError: function onError(e) {\n return e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png';\n },\n width: 32,\n style: {\n verticalAlign: 'middle'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 124,\n columnNumber: 17\n }\n }), /*#__PURE__*/React.createElement(\"span\", {\n style: {\n marginLeft: '.5em',\n verticalAlign: 'middle'\n },\n className: \"image-text\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 125,\n columnNumber: 17\n }\n }, representative.name));\n };\n\n var representativeFilterTemplate = function representativeFilterTemplate(options) {\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(\"div\", {\n className: \"mb-3 text-bold\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 132,\n columnNumber: 13\n }\n }, \"Agent Picker\"), /*#__PURE__*/React.createElement(MultiSelect, {\n value: options.value,\n options: representatives,\n itemTemplate: representativesItemTemplate,\n onChange: function onChange(e) {\n return options.filterCallback(e.value);\n },\n optionLabel: \"name\",\n placeholder: \"Any\",\n className: \"p-column-filter\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 133,\n columnNumber: 13\n }\n }));\n };\n\n var representativesItemTemplate = function representativesItemTemplate(option) {\n return /*#__PURE__*/React.createElement(\"div\", {\n className: \"p-multiselect-representative-option\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 140,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n alt: option.name,\n src: \"assets/demo/images/avatar/\".concat(option.image),\n width: 32,\n style: {\n verticalAlign: 'middle'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 141,\n columnNumber: 17\n }\n }), /*#__PURE__*/React.createElement(\"span\", {\n style: {\n marginLeft: '.5em',\n verticalAlign: 'middle'\n },\n className: \"image-text\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 142,\n columnNumber: 17\n }\n }, option.name));\n };\n\n var dateBodyTemplate = function dateBodyTemplate(rowData) {\n return formatDate(rowData.date);\n };\n\n var dateFilterTemplate = function dateFilterTemplate(options) {\n return /*#__PURE__*/React.createElement(Calendar, {\n value: options.value,\n onChange: function onChange(e) {\n return options.filterCallback(e.value, options.index);\n },\n dateFormat: \"mm/dd/yy\",\n placeholder: \"mm/dd/yyyy\",\n mask: \"99/99/9999\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 152,\n columnNumber: 16\n }\n });\n };\n\n var balanceBodyTemplate = function balanceBodyTemplate(rowData) {\n return formatCurrency(rowData.balance);\n };\n\n var balanceFilterTemplate = function balanceFilterTemplate(options) {\n return /*#__PURE__*/React.createElement(InputNumber, {\n value: options.value,\n onChange: function onChange(e) {\n return options.filterCallback(e.value, options.index);\n },\n mode: \"currency\",\n currency: \"USD\",\n locale: \"en-US\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 160,\n columnNumber: 16\n }\n });\n };\n\n var statusBodyTemplate = function statusBodyTemplate(rowData) {\n return /*#__PURE__*/React.createElement(\"span\", {\n className: \"customer-badge status-\".concat(rowData.status),\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 164,\n columnNumber: 16\n }\n }, rowData.status);\n };\n\n var statusFilterTemplate = function statusFilterTemplate(options) {\n return /*#__PURE__*/React.createElement(Dropdown, {\n value: options.value,\n options: statuses,\n onChange: function onChange(e) {\n return options.filterCallback(e.value, options.index);\n },\n itemTemplate: statusItemTemplate,\n placeholder: \"Select a Status\",\n className: \"p-column-filter\",\n showClear: true,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 168,\n columnNumber: 16\n }\n });\n };\n\n var statusItemTemplate = function statusItemTemplate(option) {\n return /*#__PURE__*/React.createElement(\"span\", {\n className: \"customer-badge status-\".concat(option),\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 172,\n columnNumber: 16\n }\n }, option);\n };\n\n var activityBodyTemplate = function activityBodyTemplate(rowData) {\n return /*#__PURE__*/React.createElement(ProgressBar, {\n value: rowData.activity,\n showValue: false,\n style: {\n height: '.5rem'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 176,\n columnNumber: 16\n }\n });\n };\n\n var activityFilterTemplate = function activityFilterTemplate(options) {\n return /*#__PURE__*/React.createElement(React.Fragment, {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 181,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(Slider, {\n value: options.value,\n onChange: function onChange(e) {\n return options.filterCallback(e.value);\n },\n range: true,\n className: \"m-3\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 182,\n columnNumber: 17\n }\n }), /*#__PURE__*/React.createElement(\"div\", {\n className: \"flex align-items-center justify-content-between px-2\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 183,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"span\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 184,\n columnNumber: 21\n }\n }, options.value ? options.value[0] : 0), /*#__PURE__*/React.createElement(\"span\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 185,\n columnNumber: 21\n }\n }, options.value ? options.value[1] : 100)));\n };\n\n var verifiedBodyTemplate = function verifiedBodyTemplate(rowData) {\n return /*#__PURE__*/React.createElement(\"i\", {\n className: classNames('pi', {\n 'text-green-500 pi-check-circle': rowData.verified,\n 'text-pink-500 pi-times-circle': !rowData.verified\n }),\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 192,\n columnNumber: 16\n }\n });\n };\n\n var verifiedFilterTemplate = function verifiedFilterTemplate(options) {\n return /*#__PURE__*/React.createElement(TriStateCheckbox, {\n value: options.value,\n onChange: function onChange(e) {\n return options.filterCallback(e.value);\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 196,\n columnNumber: 16\n }\n });\n };\n\n var expandAll = function expandAll() {\n var _expandedRows = {};\n products.forEach(function (p) {\n return _expandedRows[\"\".concat(p.id)] = true;\n });\n setExpandedRows(_expandedRows);\n };\n\n var collapseAll = function collapseAll() {\n setExpandedRows(null);\n };\n\n var amountBodyTemplate = function amountBodyTemplate(rowData) {\n return formatCurrency(rowData.amount);\n };\n\n var statusOrderBodyTemplate = function statusOrderBodyTemplate(rowData) {\n return /*#__PURE__*/React.createElement(\"span\", {\n className: \"order-badge order-\".concat(rowData.status.toLowerCase()),\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 215,\n columnNumber: 16\n }\n }, rowData.status);\n };\n\n var searchBodyTemplate = function searchBodyTemplate() {\n return /*#__PURE__*/React.createElement(Button, {\n icon: \"pi pi-search\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 219,\n columnNumber: 16\n }\n });\n };\n\n var imageBodyTemplate = function imageBodyTemplate(rowData) {\n return /*#__PURE__*/React.createElement(\"img\", {\n src: \"images/product/\".concat(rowData.image),\n onError: function onError(e) {\n return e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png';\n },\n alt: rowData.image,\n className: \"shadow-2\",\n width: 100,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 223,\n columnNumber: 16\n }\n });\n };\n\n var priceBodyTemplate = function priceBodyTemplate(rowData) {\n return formatCurrency(rowData.price);\n };\n\n var ratingBodyTemplate = function ratingBodyTemplate(rowData) {\n return /*#__PURE__*/React.createElement(Rating, {\n value: rowData.rating,\n readOnly: true,\n cancel: false,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 231,\n columnNumber: 16\n }\n });\n };\n\n var statusBodyTemplate2 = function statusBodyTemplate2(rowData) {\n return /*#__PURE__*/React.createElement(\"span\", {\n className: \"product-badge status-\".concat(rowData.inventoryStatus.toLowerCase()),\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 235,\n columnNumber: 16\n }\n }, rowData.inventoryStatus);\n };\n\n var rowExpansionTemplate = function rowExpansionTemplate(data) {\n return /*#__PURE__*/React.createElement(\"div\", {\n className: \"orders-subtable\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 240,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 241,\n columnNumber: 17\n }\n }, \"Orders for \", data.name), /*#__PURE__*/React.createElement(DataTable, {\n value: data.orders,\n responsiveLayout: \"scroll\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 242,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(Column, {\n field: \"id\",\n header: \"Id\",\n sortable: true,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 243,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Column, {\n field: \"customer\",\n header: \"Customer\",\n sortable: true,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 244,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Column, {\n field: \"date\",\n header: \"Date\",\n sortable: true,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 245,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Column, {\n field: \"amount\",\n header: \"Amount\",\n body: amountBodyTemplate,\n sortable: true,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 246,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Column, {\n field: \"status\",\n header: \"Status\",\n body: statusOrderBodyTemplate,\n sortable: true,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 247,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(Column, {\n headerStyle: {\n width: '4rem'\n },\n body: searchBodyTemplate,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 248,\n columnNumber: 21\n }\n })));\n };\n\n var header = /*#__PURE__*/React.createElement(\"div\", {\n className: \"table-header-container\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 255,\n columnNumber: 9\n }\n }, /*#__PURE__*/React.createElement(Button, {\n icon: \"pi pi-plus\",\n label: \"Expand All\",\n onClick: expandAll,\n className: \"mr-2 mb-2\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 256,\n columnNumber: 13\n }\n }), /*#__PURE__*/React.createElement(Button, {\n icon: \"pi pi-minus\",\n label: \"Collapse All\",\n onClick: collapseAll,\n className: \"mb-2\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 257,\n columnNumber: 13\n }\n }));\n\n var headerTemplate = function headerTemplate(data) {\n return /*#__PURE__*/React.createElement(React.Fragment, {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 263,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n alt: data.representative.name,\n src: \"images/avatar/\".concat(data.representative.image),\n width: \"32\",\n style: {\n verticalAlign: 'middle'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 264,\n columnNumber: 17\n }\n }), /*#__PURE__*/React.createElement(\"span\", {\n className: \"image-text font-bold\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 265,\n columnNumber: 17\n }\n }, data.representative.name));\n };\n\n var footerTemplate = function footerTemplate(data) {\n return /*#__PURE__*/React.createElement(React.Fragment, {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 272,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"td\", {\n colSpan: \"4\",\n style: {\n textAlign: 'right'\n },\n className: \"text-bold pr-6\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 273,\n columnNumber: 17\n }\n }, \"Total Customers\"), /*#__PURE__*/React.createElement(\"td\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 274,\n columnNumber: 17\n }\n }, calculateCustomerTotal(data.representative.name)));\n };\n\n var calculateCustomerTotal = function calculateCustomerTotal(name) {\n var total = 0;\n\n if (customers3) {\n var _iterator = _createForOfIteratorHelper(customers3),\n _step;\n\n try {\n for (_iterator.s(); !(_step = _iterator.n()).done;) {\n var customer = _step.value;\n\n if (customer.representative.name === name) {\n total++;\n }\n }\n } catch (err) {\n _iterator.e(err);\n } finally {\n _iterator.f();\n }\n }\n\n return total;\n };\n\n return /*#__PURE__*/React.createElement(\"div\", {\n className: \"grid table-demo\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 294,\n columnNumber: 9\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 295,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 296,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 297,\n columnNumber: 21\n }\n }, \"Filter Menu\"), /*#__PURE__*/React.createElement(DataTable, {\n value: customers1,\n paginator: true,\n className: \"p-datatable-gridlines\",\n showGridlines: true,\n rows: 10,\n dataKey: \"id\",\n filters: filters1,\n filterDisplay: \"menu\",\n loading: loading1,\n responsiveLayout: \"scroll\",\n emptyMessage: \"No customers found.\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 298,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(Column, {\n field: \"name\",\n header: \"Name\",\n filter: true,\n filterPlaceholder: \"Search by name\",\n style: {\n minWidth: '12rem'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 301,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n header: \"Country\",\n filterField: \"country.name\",\n style: {\n minWidth: '12rem'\n },\n body: countryBodyTemplate,\n filter: true,\n filterPlaceholder: \"Search by country\",\n filterClear: filterClearTemplate,\n filterApply: filterApplyTemplate,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 302,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n header: \"Agent\",\n filterField: \"representative\",\n showFilterMatchModes: false,\n filterMenuStyle: {\n width: '14rem'\n },\n style: {\n minWidth: '14rem'\n },\n body: representativeBodyTemplate,\n filter: true,\n filterElement: representativeFilterTemplate,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 304,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n header: \"Date\",\n filterField: \"date\",\n dataType: \"date\",\n style: {\n minWidth: '10rem'\n },\n body: dateBodyTemplate,\n filter: true,\n filterElement: dateFilterTemplate,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 306,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n header: \"Balance\",\n filterField: \"balance\",\n dataType: \"numeric\",\n style: {\n minWidth: '10rem'\n },\n body: balanceBodyTemplate,\n filter: true,\n filterElement: balanceFilterTemplate,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 308,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n field: \"status\",\n header: \"Status\",\n filterMenuStyle: {\n width: '14rem'\n },\n style: {\n minWidth: '12rem'\n },\n body: statusBodyTemplate,\n filter: true,\n filterElement: statusFilterTemplate,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 309,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n field: \"activity\",\n header: \"Activity\",\n showFilterMatchModes: false,\n style: {\n minWidth: '12rem'\n },\n body: activityBodyTemplate,\n filter: true,\n filterElement: activityFilterTemplate,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 310,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n field: \"verified\",\n header: \"Verified\",\n dataType: \"boolean\",\n bodyClassName: \"text-center\",\n style: {\n minWidth: '8rem'\n },\n body: verifiedBodyTemplate,\n filter: true,\n filterElement: verifiedFilterTemplate,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 311,\n columnNumber: 25\n }\n })))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 316,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 317,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 319,\n columnNumber: 21\n }\n }, \"Frozen Columns\"), /*#__PURE__*/React.createElement(ToggleButton, {\n checked: idFrozen,\n onChange: function onChange(e) {\n return setIdFrozen(e.value);\n },\n onIcon: \"pi pi-lock\",\n offIcon: \"pi pi-lock-open\",\n onLabel: \"Unfreeze Id\",\n offLabel: \"Freeze Id\",\n style: {\n width: '10rem'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 320,\n columnNumber: 21\n }\n }), /*#__PURE__*/React.createElement(DataTable, {\n value: customers2,\n scrollable: true,\n scrollHeight: \"400px\",\n loading: loading2,\n scrollDirection: \"both\",\n className: \"mt-3\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 322,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(Column, {\n field: \"name\",\n header: \"Name\",\n style: {\n flexGrow: 1,\n flexBasis: '160px'\n },\n frozen: true,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 323,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n field: \"id\",\n header: \"Id\",\n style: {\n flexGrow: 1,\n flexBasis: '100px'\n },\n frozen: idFrozen,\n alignFrozen: \"left\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 324,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n field: \"name\",\n header: \"Name\",\n style: {\n flexGrow: 1,\n flexBasis: '200px'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 325,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n field: \"country.name\",\n header: \"Country\",\n style: {\n flexGrow: 1,\n flexBasis: '200px'\n },\n body: countryBodyTemplate,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 326,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n field: \"date\",\n header: \"Date\",\n style: {\n flexGrow: 1,\n flexBasis: '200px'\n },\n body: dateBodyTemplate,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 327,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n field: \"company\",\n header: \"Company\",\n style: {\n flexGrow: 1,\n flexBasis: '200px'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 328,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n field: \"status\",\n header: \"Status\",\n style: {\n flexGrow: 1,\n flexBasis: '200px'\n },\n body: statusBodyTemplate,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 329,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n field: \"activity\",\n header: \"Activity\",\n style: {\n flexGrow: 1,\n flexBasis: '200px'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 330,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n field: \"representative.name\",\n header: \"Representative\",\n style: {\n flexGrow: 1,\n flexBasis: '200px'\n },\n body: representativeBodyTemplate,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 331,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n field: \"balance\",\n header: \"Balance\",\n body: balanceTemplate,\n frozen: true,\n style: {\n flexGrow: 1,\n flexBasis: '120px'\n },\n alignFrozen: \"right\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 332,\n columnNumber: 25\n }\n })))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 337,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 338,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 339,\n columnNumber: 21\n }\n }, \"Row Expand\"), /*#__PURE__*/React.createElement(DataTable, {\n value: products,\n expandedRows: expandedRows,\n onRowToggle: function onRowToggle(e) {\n return setExpandedRows(e.data);\n },\n responsiveLayout: \"scroll\",\n rowExpansionTemplate: rowExpansionTemplate,\n dataKey: \"id\",\n header: header,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 340,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(Column, {\n expander: true,\n style: {\n width: '3em'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 342,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n field: \"name\",\n header: \"Name\",\n sortable: true,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 343,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n header: \"Image\",\n body: imageBodyTemplate,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 344,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n field: \"price\",\n header: \"Price\",\n sortable: true,\n body: priceBodyTemplate,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 345,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n field: \"category\",\n header: \"Category\",\n sortable: true,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 346,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n field: \"rating\",\n header: \"Reviews\",\n sortable: true,\n body: ratingBodyTemplate,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 347,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n field: \"inventoryStatus\",\n header: \"Status\",\n sortable: true,\n body: statusBodyTemplate2,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 348,\n columnNumber: 25\n }\n })))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 353,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 354,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 355,\n columnNumber: 21\n }\n }, \"Subheader Grouping\"), /*#__PURE__*/React.createElement(DataTable, {\n value: customers3,\n rowGroupMode: \"subheader\",\n groupRowsBy: \"representative.name\",\n sortMode: \"single\",\n sortField: \"representative.name\",\n sortOrder: 1,\n scrollable: true,\n scrollHeight: \"400px\",\n rowGroupHeaderTemplate: headerTemplate,\n rowGroupFooterTemplate: footerTemplate,\n responsiveLayout: \"scroll\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 356,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(Column, {\n field: \"name\",\n header: \"Name\",\n style: {\n minWidth: '200px'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 359,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n field: \"country\",\n header: \"Country\",\n body: countryBodyTemplate,\n style: {\n minWidth: '200px'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 360,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n field: \"company\",\n header: \"Company\",\n style: {\n minWidth: '200px'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 361,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n field: \"status\",\n header: \"Status\",\n body: statusBodyTemplate,\n style: {\n minWidth: '200px'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 362,\n columnNumber: 25\n }\n }), /*#__PURE__*/React.createElement(Column, {\n field: \"date\",\n header: \"Date\",\n style: {\n minWidth: '200px'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 363,\n columnNumber: 25\n }\n })))));\n};\n\nvar comparisonFn = function comparisonFn(prevProps, nextProps) {\n return prevProps.location.pathname === nextProps.location.pathname;\n};\n\nexport default React.memo(TableDemo, comparisonFn);","map":{"version":3,"names":["React","useState","useEffect","classNames","FilterMatchMode","FilterOperator","DataTable","Column","Dropdown","InputNumber","Button","ProgressBar","Calendar","MultiSelect","Slider","TriStateCheckbox","ToggleButton","Rating","CustomerService","ProductService","TableDemo","customers1","setCustomers1","customers2","setCustomers2","customers3","setCustomers3","filters1","setFilters1","loading1","setLoading1","loading2","setLoading2","idFrozen","setIdFrozen","products","setProducts","expandedRows","setExpandedRows","representatives","name","image","statuses","customerService","productService","getCustomersLarge","then","data","getCustomers","getCustomersMedium","getProductsWithOrdersSmall","initFilters1","balanceTemplate","rowData","formatCurrency","balance","map","d","date","Date","formatDate","value","toLocaleDateString","day","month","year","toLocaleString","style","currency","matchMode","CONTAINS","operator","AND","constraints","STARTS_WITH","IN","DATE_IS","EQUALS","OR","BETWEEN","countryBodyTemplate","country","code","marginLeft","verticalAlign","filterClearTemplate","options","filterClearCallback","filterApplyTemplate","filterApplyCallback","representativeBodyTemplate","representative","e","target","src","representativeFilterTemplate","representativesItemTemplate","filterCallback","option","dateBodyTemplate","dateFilterTemplate","index","balanceBodyTemplate","balanceFilterTemplate","statusBodyTemplate","status","statusFilterTemplate","statusItemTemplate","activityBodyTemplate","activity","height","activityFilterTemplate","verifiedBodyTemplate","verified","verifiedFilterTemplate","expandAll","_expandedRows","forEach","p","id","collapseAll","amountBodyTemplate","amount","statusOrderBodyTemplate","toLowerCase","searchBodyTemplate","imageBodyTemplate","priceBodyTemplate","price","ratingBodyTemplate","rating","statusBodyTemplate2","inventoryStatus","rowExpansionTemplate","orders","width","header","headerTemplate","footerTemplate","textAlign","calculateCustomerTotal","total","customer","minWidth","flexGrow","flexBasis","comparisonFn","prevProps","nextProps","location","pathname","memo"],"sources":["/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/src/components/TableDemo.js"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { classNames } from 'primereact/utils';\nimport { FilterMatchMode, FilterOperator } from 'primereact/api';\nimport { DataTable } from 'primereact/datatable';\nimport { Column } from 'primereact/column';\nimport { Dropdown } from 'primereact/dropdown';\nimport { InputNumber } from 'primereact/inputnumber';\nimport { Button } from 'primereact/button';\nimport { ProgressBar } from 'primereact/progressbar';\nimport { Calendar } from 'primereact/calendar';\nimport { MultiSelect } from 'primereact/multiselect';\nimport { Slider } from 'primereact/slider';\nimport { TriStateCheckbox } from 'primereact/tristatecheckbox';\nimport { ToggleButton } from 'primereact/togglebutton';\nimport { Rating } from 'primereact/rating';\nimport { CustomerService } from '../service/CustomerService';\nimport { ProductService } from '../service/ProductService';\n\nconst TableDemo = () => {\n const [customers1, setCustomers1] = useState(null);\n const [customers2, setCustomers2] = useState([]);\n const [customers3, setCustomers3] = useState([]);\n const [filters1, setFilters1] = useState(null);\n const [loading1, setLoading1] = useState(true);\n const [loading2, setLoading2] = useState(true);\n const [idFrozen, setIdFrozen] = useState(false);\n const [products, setProducts] = useState([]);\n const [expandedRows, setExpandedRows] = useState(null);\n\n const representatives = [\n { name: \"Amy Elsner\", image: 'amyelsner.png' },\n { name: \"Anna Fali\", image: 'annafali.png' },\n { name: \"Asiya Javayant\", image: 'asiyajavayant.png' },\n { name: \"Bernardo Dominic\", image: 'bernardodominic.png' },\n { name: \"Elwin Sharvill\", image: 'elwinsharvill.png' },\n { name: \"Ioni Bowcher\", image: 'ionibowcher.png' },\n { name: \"Ivan Magalhaes\", image: 'ivanmagalhaes.png' },\n { name: \"Onyama Limba\", image: 'onyamalimba.png' },\n { name: \"Stephen Shaw\", image: 'stephenshaw.png' },\n { name: \"XuXue Feng\", image: 'xuxuefeng.png' }\n ];\n\n const statuses = [\n 'unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'\n ];\n\n const customerService = new CustomerService();\n const productService = new ProductService();\n\n useEffect(() => {\n setLoading2(true);\n\n customerService.getCustomersLarge().then(data => { setCustomers1(getCustomers(data)); setLoading1(false) });\n customerService.getCustomersLarge().then(data => { setCustomers2(getCustomers(data)); setLoading2(false); });\n customerService.getCustomersMedium().then(data => setCustomers3(data));\n productService.getProductsWithOrdersSmall().then(data => setProducts(data));\n\n initFilters1();\n }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n const balanceTemplate = (rowData) => {\n return (\n \n {formatCurrency(rowData.balance)}\n \n )\n }\n\n const getCustomers = (data) => {\n return [...data || []].map(d => {\n d.date = new Date(d.date);\n return d;\n });\n }\n\n const formatDate = (value) => {\n return value.toLocaleDateString('en-US', {\n day: '2-digit',\n month: '2-digit',\n year: 'numeric',\n });\n }\n\n const formatCurrency = (value) => {\n return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });\n }\n\n const initFilters1 = () => {\n setFilters1({\n 'global': { value: null, matchMode: FilterMatchMode.CONTAINS },\n 'name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },\n 'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },\n 'representative': { value: null, matchMode: FilterMatchMode.IN },\n 'date': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },\n 'balance': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },\n 'status': { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },\n 'activity': { value: null, matchMode: FilterMatchMode.BETWEEN },\n 'verified': { value: null, matchMode: FilterMatchMode.EQUALS }\n });\n }\n\n\n const countryBodyTemplate = (rowData) => {\n return (\n \n \"flag\"\n {rowData.country.name}\n \n );\n }\n\n const filterClearTemplate = (options) => {\n return ;\n }\n\n const filterApplyTemplate = (options) => {\n return \n }\n\n const representativeBodyTemplate = (rowData) => {\n const representative = rowData.representative;\n return (\n \n {representative.name} e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} width={32} style={{ verticalAlign: 'middle' }} />\n {representative.name}\n \n );\n }\n\n const representativeFilterTemplate = (options) => {\n return (<>\n
Agent Picker
\n options.filterCallback(e.value)} optionLabel=\"name\" placeholder=\"Any\" className=\"p-column-filter\" />\n \n )\n }\n\n const representativesItemTemplate = (option) => {\n return (\n
\n {option.name}\n {option.name}\n
\n );\n }\n\n const dateBodyTemplate = (rowData) => {\n return formatDate(rowData.date);\n }\n\n const dateFilterTemplate = (options) => {\n return options.filterCallback(e.value, options.index)} dateFormat=\"mm/dd/yy\" placeholder=\"mm/dd/yyyy\" mask=\"99/99/9999\" />\n }\n\n const balanceBodyTemplate = (rowData) => {\n return formatCurrency(rowData.balance);\n }\n\n const balanceFilterTemplate = (options) => {\n return options.filterCallback(e.value, options.index)} mode=\"currency\" currency=\"USD\" locale=\"en-US\" />\n }\n\n const statusBodyTemplate = (rowData) => {\n return {rowData.status};\n }\n\n const statusFilterTemplate = (options) => {\n return options.filterCallback(e.value, options.index)} itemTemplate={statusItemTemplate} placeholder=\"Select a Status\" className=\"p-column-filter\" showClear />;\n }\n\n const statusItemTemplate = (option) => {\n return {option};\n }\n\n const activityBodyTemplate = (rowData) => {\n return ;\n }\n\n const activityFilterTemplate = (options) => {\n return (\n \n options.filterCallback(e.value)} range className=\"m-3\">\n
\n {options.value ? options.value[0] : 0}\n {options.value ? options.value[1] : 100}\n
\n
\n )\n }\n\n const verifiedBodyTemplate = (rowData) => {\n return ;\n }\n\n const verifiedFilterTemplate = (options) => {\n return options.filterCallback(e.value)} />\n }\n\n const expandAll = () => {\n let _expandedRows = {};\n products.forEach(p => _expandedRows[`${p.id}`] = true);\n\n setExpandedRows(_expandedRows);\n }\n\n const collapseAll = () => {\n setExpandedRows(null);\n }\n\n const amountBodyTemplate = (rowData) => {\n return formatCurrency(rowData.amount);\n }\n\n const statusOrderBodyTemplate = (rowData) => {\n return {rowData.status};\n }\n\n const searchBodyTemplate = () => {\n return