{"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                {rowData.country.name}\n
\n                {rowData.country.name}\n             e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} width={32} style={{ verticalAlign: 'middle' }} />\n                {representative.name}\n