bitys-react-components 0.1.6 → 0.1.8

package/README.md

@@ -1,2 +1,54 @@
-# react-components
-Componentes e dependências para ReactJS
+# Bitys React Components
+
+Biblioteca de componentes reutilizáveis para React, com suporte a Bootstrap 5 e styled-components.
+
+---
+
+## Instalação
+
+```bash
+npm install bitys-react-components
+```
+
+**Peer dependencies:** `react`, `react-dom`, `bootstrap`, `reactstrap`, `react-icons`, `styled-components`
+
+---
+
+## Componentes
+
+### CardFilter
+
+Card colapsável para agrupar filtros de busca. Inclui botão "Buscar" e toggle para expandir/recolher o conteúdo. Ideal para telas de listagem com critérios de filtro.
+
+### InputCheck
+
+Checkbox estilizado com label opcional. Aceita `value`, `onChange` e demais props nativas de input, com suporte a customização via estilos no container e no label.
+
+### DataGridView
+
+Tabela de dados completa com ordenação por coluna, paginação (básica ou avançada), busca em tempo real e exportação (Excel, CSV, PDF). Configurável por `config` (idioma, botões, tamanho de página, etc.) e colunas definidas via `columns` + `data`.
+
+---
+
+## Uso básico
+
+```js
+import { CardFilter, InputCheck, DataGridView } from 'bitys-react-components';
+
+// CardFilter: envolva seus campos de filtro
+<CardFilter onChange={handleSearch}>
+  <input type="text" placeholder="Nome" />
+</CardFilter>
+
+// InputCheck: checkbox com label
+<InputCheck label="Aceito os termos" value={checked} onChange={handleChange} />
+
+// DataGridView: tabela com columns e data
+<DataGridView columns={columns} data={rows} config={config} onChange={handleChange} />
+```
+
+---
+
+## Licença
+
+MIT

package/dist/DataGridView/components/ADPagination.js

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = ADPagination;
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function ADPagination(props) {
+  var size = props.pages;
+  var page = props.page_number;
+  var step = 2;
+  var tags = [];
+  var pagination = props.language.pagination;
+  var Item = function Item(props) {
+    var className = props.className || "";
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+      className: "page-item " + className,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+        href: "#",
+        className: "page-link",
+        tabIndex: "-1",
+        onClick: function onClick(e) {
+          e.preventDefault();
+          props.onClick(e);
+        },
+        children: props.children
+      })
+    });
+  };
+  var Add = function Add(s, f) {
+    var _loop = function _loop(i) {
+      tags.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, {
+        className: page == i ? "active" : "",
+        onClick: function onClick(e) {
+          return props.goToPage(e, i);
+        },
+        children: i
+      }, i));
+    };
+    for (var i = s; i < f; i++) {
+      _loop(i);
+    }
+  };
+  var Last = function Last() {
+    tags.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, {
+      children: "..."
+    }, "l..."));
+    tags.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, {
+      className: page == size ? "active" : "",
+      onClick: function onClick(e) {
+        return props.goToPage(e, size);
+      },
+      children: size
+    }, size));
+  };
+  var First = function First() {
+    tags.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, {
+      className: page == 1 ? "active" : "",
+      onClick: function onClick(e) {
+        return props.goToPage(e, 1);
+      },
+      children: "1"
+    }, "1"));
+    tags.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, {
+      children: "..."
+    }, "f..."));
+  };
+  tags.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, {
+    className: props.isFirst ? "disabled " : "",
+    onClick: props.previousPage,
+    children: pagination.previous ? pagination.previous : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: "\u25C4"
+    })
+  }, "p0"));
+  if (size < step * 2 + 6) {
+    Add(1, size + 1);
+  } else if (page < step * 2 + 1) {
+    Add(1, step * 2 + 4);
+    Last();
+  } else if (page > size - step * 2) {
+    First();
+    Add(size - step * 2 - 2, size + 1);
+  } else {
+    First();
+    Add(page - step, page + step + 1);
+    Last();
+  }
+  tags.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, {
+    className: props.isLast ? "disabled " : "",
+    onClick: props.nextPage,
+    children: pagination.next ? pagination.next : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: "\u25BA"
+    })
+  }, "n0"));
+  return tags;
+}

package/dist/DataGridView/components/Pagination.js

@@ -0,0 +1,72 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = InitialPagination;
+var _react = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function InitialPagination(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+    children: [props.config.show_first ? /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+      className: (props.isFirst ? "disabled " : "") + "page-item",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+        href: "#",
+        className: "page-link",
+        tabIndex: "-1",
+        onClick: props.firstPage,
+        children: props.config.language.pagination.first
+      })
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+      className: (props.isFirst ? "disabled " : "") + "page-item",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+        href: "#",
+        className: "page-link",
+        tabIndex: "-1",
+        onClick: props.previousPage,
+        children: props.config.language.pagination.previous
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+      className: "page-item",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+        className: "page-link",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          style: {
+            border: 'none',
+            padding: '0',
+            maxWidth: '30px',
+            textAlign: 'center',
+            display: 'inline-block'
+          },
+          type: "text",
+          value: props.is_temp_page ? props.temp_page_number : props.page_number,
+          onChange: function onChange(e) {
+            return props.onPageChange(e, true);
+          },
+          onBlur: props.onPageBlur,
+          onKeyDown: props.onPageChange
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+      className: (props.isLast ? "disabled " : "") + "page-item",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+        href: "#",
+        className: "page-link",
+        onClick: props.nextPage,
+        children: props.config.language.pagination.next
+      })
+    }), props.config.show_last ? /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+      className: (props.isLast ? "disabled " : "") + "page-item",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+        href: "#",
+        className: "page-link",
+        tabIndex: "-1",
+        onClick: props.lastPage,
+        children: props.config.language.pagination.last
+      })
+    }) : null]
+  });
+}

package/dist/DataGridView/components/TableFooter.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = TableFooter;
+var _react = _interopRequireDefault(require("react"));
+var _Pagination = _interopRequireDefault(require("./Pagination"));
+var _ADPagination = _interopRequireDefault(require("./ADPagination"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function TableFooter(props) {
+  if (props.config.show_info == true || props.config.show_pagination == true) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "row table-foot asrt-table-foot",
+      id: props.id ? props.id + "-table-foot" : "",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "col-md-6",
+        children: props.config.show_info ? props.paginationInfo : null
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "col-md-6 pull-right text-right",
+        children: props.config.show_pagination ? /*#__PURE__*/(0, _jsxRuntime.jsx)("nav", {
+          "aria-label": "Page navigation",
+          className: "pull-right",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+            className: "pagination justify-content-end asrt-pagination",
+            children: props.config.pagination == "basic" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pagination["default"], {
+              config: props.config,
+              isFirst: props.isFirst,
+              isLast: props.isLast,
+              pages: props.pages,
+              page_number: props.page_number,
+              is_temp_page: props.is_temp_page,
+              temp_page_number: props.temp_page_number,
+              previousPage: props.previousPage,
+              firstPage: props.firstPage,
+              nextPage: props.nextPage,
+              lastPage: props.lastPage,
+              goToPage: props.goToPage,
+              onPageChange: props.onPageChange,
+              onPageBlur: props.onPageBlur
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ADPagination["default"], {
+              language: props.config.language,
+              isFirst: props.isFirst,
+              isLast: props.isLast,
+              pages: props.pages,
+              page_number: props.page_number,
+              previousPage: props.previousPage,
+              nextPage: props.nextPage,
+              goToPage: props.goToPage
+            })
+          })
+        }) : null
+      })]
+    });
+  } else {
+    return null;
+  }
+}

package/dist/DataGridView/components/TableHeader.js

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = TableHeader;
+var _react = _interopRequireDefault(require("react"));
+var _includes = _interopRequireDefault(require("lodash/includes"));
+var _style = _interopRequireDefault(require("../style"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function TableHeader(props) {
+  if (props.config.show_length_menu == true || props.config.show_filter == true || props.config.button.excel == true || props.config.button.csv == true || props.config.button.print == true) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "row table-head asrt-table-head",
+      id: props.id ? props.id + "-table-head" : "",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "col-md-6",
+        children: props.config.show_length_menu ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "input-group asrt-page-length",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "input-group-addon input-group-prepend",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "input-group-text",
+              style: _style["default"].table_size,
+              children: props.lengthMenuText[0] ? props.lengthMenuText[0] : ''
+            })
+          }), (0, _includes["default"])(props.config.language.length_menu, '_MENU_') ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
+            type: "text",
+            className: "form-control",
+            style: _style["default"].table_size_dropdown,
+            onChange: props.changePageSize,
+            children: [props.config.length_menu.map(function (value, key) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+                children: value
+              }, value);
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+              value: props.recordLength,
+              children: "All"
+            })]
+          }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "input-group-addon input-group-prepend",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "input-group-text",
+              style: _style["default"].table_size,
+              children: props.lengthMenuText[1] ? props.lengthMenuText[1] : ''
+            })
+          })]
+        }) : null
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "col-md-6 float-right text-right",
+        children: [props.config.show_filter ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "table_filter",
+          style: _style["default"].table_filter,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+            type: "search",
+            className: "form-control",
+            placeholder: props.config.language.filter,
+            onChange: props.filterRecords
+          })
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "table_tools",
+          style: _style["default"].table_tool,
+          children: [props.config.button.excel ? /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            className: "btn btn-primary buttons-excel",
+            tabIndex: "0",
+            "aria-controls": "configuration_tbl",
+            title: "Export to Excel",
+            style: _style["default"].table_tool_btn,
+            onClick: props.exportToExcel,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+                className: "fa fa-file-excel-o",
+                "aria-hidden": "true"
+              })
+            })
+          }) : null, props.config.button.csv ? /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            className: "btn btn-primary buttons-csv",
+            tabIndex: "0",
+            "aria-controls": "configuration_tbl",
+            title: "Export to CSV",
+            style: _style["default"].table_tool_btn,
+            onClick: props.exportToCSV,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+                className: "fa fa-file-text-o",
+                "aria-hidden": "true"
+              })
+            })
+          }) : null, props.config.button.print ? /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            className: "btn btn-primary buttons-pdf",
+            tabIndex: "0",
+            "aria-controls": "configuration_tbl",
+            title: "Export to PDF",
+            style: _style["default"].table_tool_btn,
+            onClick: props.exportToPDF,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+                className: "glyphicon glyphicon-print fa fa-print",
+                "aria-hidden": "true"
+              })
+            })
+          }) : null, props.config.button.extra == true ? props.extraButtons.map(function (elem, index) {
+            elem.clickCount = 0;
+            elem.singleClickTimer = '';
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+              className: elem.className ? elem.className : "btn btn-primary buttons-pdf",
+              tabIndex: "0",
+              "aria-controls": "configuration_tbl",
+              title: elem.title ? elem.title : "Export to PDF",
+              style: _style["default"].table_tool_btn,
+              onClick: function onClick(event) {
+                elem.onClick(event);
+              },
+              children: elem.children
+            }, index);
+          }) : null]
+        })]
+      })]
+    });
+  } else {
+    return null;
+  }
+}

package/dist/DataGridView/index.js

@@ -0,0 +1,701 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _server = _interopRequireDefault(require("react-dom/server"));
+var _lodash = _interopRequireDefault(require("lodash"));
+require("./assets/css/style.css");
+var _TableHeader = _interopRequireDefault(require("./components/TableHeader"));
+var _TableFooter = _interopRequireDefault(require("./components/TableFooter"));
+var _style2 = _interopRequireDefault(require("./style"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+var ReactDatatable = /*#__PURE__*/function (_Component) {
+  function ReactDatatable(props) {
+    var _this;
+    _classCallCheck(this, ReactDatatable);
+    _this = _callSuper(this, ReactDatatable, [props]);
+    _this.exportExcelRef = /*#__PURE__*/_react["default"].createRef();
+    _this.sortColumn = _this.sortColumn.bind(_this);
+    _this.numPages = _this.numPages.bind(_this);
+    _this.exportToExcel = _this.exportToExcel.bind(_this);
+    _this.exportToPDF = _this.exportToPDF.bind(_this);
+    _this.exportToCSV = _this.exportToCSV.bind(_this);
+    _this.onChange = _this.onChange.bind(_this);
+    _this.filterRecords = _this.filterRecords.bind(_this);
+    _this.filterData = _this.filterData.bind(_this);
+    _this.sortRecords = _this.sortRecords.bind(_this);
+    _this.config = {
+      button: {
+        excel: props.config && props.config.button && props.config.button.excel ? props.config.button.excel : false,
+        print: props.config && props.config.button && props.config.button.print ? props.config.button.print : false,
+        csv: props.config && props.config.button && props.config.button.csv ? props.config.button.csv : false,
+        extra: props.config && props.config.button && props.config.button.extra ? props.config.button.extra : false
+      },
+      filename: props.config && props.config.filename ? props.config.filename : 'table',
+      key_column: props.config && props.config.key_column ? props.config.key_column : 'id',
+      language: {
+        length_menu: props.config && props.config.language && props.config.language.length_menu ? props.config.language.length_menu : 'Show _MENU_ records per page',
+        filter: props.config && props.config.language && props.config.language.filter ? props.config.language.filter : 'Search in records...',
+        info: props.config && props.config.language && props.config.language.info ? props.config.language.info : 'Showing _START_ to _END_ of _TOTAL_ entries',
+        pagination: {
+          first: props.config && props.config.language && props.config.language.pagination && props.config.language.pagination.first ? props.config.language.pagination.first : 'First',
+          previous: props.config && props.config.language && props.config.language.pagination && props.config.language.pagination.previous ? props.config.language.pagination.previous : 'Previous',
+          next: props.config && props.config.language && props.config.language.pagination && props.config.language.pagination.next ? props.config.language.pagination.next : 'Next',
+          last: props.config && props.config.language && props.config.language.pagination && props.config.language.pagination.last ? props.config.language.pagination.last : 'Last'
+        },
+        no_data_text: props.config && props.config.language && props.config.language.no_data_text ? props.config.language.no_data_text : 'No rows found',
+        loading_text: props.config && props.config.language && props.config.language.loading_text ? props.config.language.loading_text : 'Loading...'
+      },
+      length_menu: props.config && props.config.length_menu ? props.config.length_menu : [10, 25, 50, 75, 100],
+      show_length_menu: props.config.show_length_menu != undefined ? props.config.show_length_menu : true,
+      show_filter: props.config.show_filter != undefined ? props.config.show_filter : true,
+      show_pagination: props.config.show_pagination != undefined ? props.config.show_pagination : true,
+      show_info: props.config.show_info != undefined ? props.config.show_info : true,
+      show_first: props.config.show_first != undefined ? props.config.show_first : true,
+      show_last: props.config.show_last != undefined ? props.config.show_last : true,
+      pagination: props.config.pagination ? props.config.pagination : 'basic'
+    };
+    _this.state = {
+      is_temp_page: false,
+      filter_value: '',
+      page_size: props.config.page_size ? props.config.page_size : 10,
+      page_number: 1,
+      sort: props.config && props.config.sort ? props.config.sort : false
+    };
+    return _this;
+  }
+  _inherits(ReactDatatable, _Component);
+  return _createClass(ReactDatatable, [{
+    key: "filterRecords",
+    value: function filterRecords(e) {
+      var _this2 = this;
+      var value = e.target.value;
+      this.setState({
+        page_number: 1,
+        filter_value: value
+      }, function () {
+        _this2.onChange();
+      });
+    }
+  }, {
+    key: "changePageSize",
+    value: function changePageSize(e) {
+      var _this3 = this;
+      var value = e.target.value;
+      this.setState({
+        page_size: value
+      }, function () {
+        _this3.onChange();
+      });
+    }
+  }, {
+    key: "sortColumn",
+    value: function sortColumn(event, column, sortOrder) {
+      var _this4 = this;
+      if (!column.sortable) return false;
+      var newSortOrder = sortOrder == 'asc' ? 'desc' : 'asc';
+      this.setState({
+        sort: {
+          column: column.key,
+          order: newSortOrder
+        }
+      }, function () {
+        _this4.onChange();
+      });
+    }
+  }, {
+    key: "paginate",
+    value: function paginate(records) {
+      var page_size = this.state.page_size;
+      var page_number = this.state.page_number;
+      --page_number; // because pages logically start with 1, but technically with 0
+      return records.slice(page_number * page_size, (page_number + 1) * page_size);
+    }
+  }, {
+    key: "numPages",
+    value: function numPages(totalRecord) {
+      return Math.ceil(totalRecord / this.state.page_size);
+    }
+  }, {
+    key: "isLast",
+    value: function isLast() {
+      // because for empty records page_number will still be 1
+      if (this.pages == 0) {
+        return true;
+      }
+      if (this.state.page_number == this.pages) {
+        return true;
+      } else {
+        return false;
+      }
+    }
+  }, {
+    key: "isFirst",
+    value: function isFirst() {
+      if (this.state.page_number == 1) {
+        return true;
+      } else {
+        return false;
+      }
+    }
+  }, {
+    key: "goToPage",
+    value: function goToPage(e, pageNumber) {
+      var _this5 = this;
+      e.preventDefault();
+      if (this.state.page_number == pageNumber) {
+        return;
+      }
+      var pageState = {
+        previous_page: this.state.page_number,
+        current_page: pageNumber
+      };
+      this.setState({
+        is_temp_page: false,
+        page_number: pageNumber
+      }, function () {
+        _this5.props.onPageChange(pageState);
+        _this5.onChange();
+      });
+    }
+  }, {
+    key: "firstPage",
+    value: function firstPage(e) {
+      e.preventDefault();
+      if (this.isFirst()) return;
+      this.goToPage(e, 1);
+    }
+  }, {
+    key: "lastPage",
+    value: function lastPage(e) {
+      e.preventDefault();
+      if (this.isLast()) return;
+      this.goToPage(e, this.pages);
+    }
+  }, {
+    key: "previousPage",
+    value: function previousPage(e) {
+      e.preventDefault();
+      if (this.isFirst()) return false;
+      this.goToPage(e, this.state.page_number - 1);
+    }
+  }, {
+    key: "nextPage",
+    value: function nextPage(e) {
+      e.preventDefault();
+      if (this.isLast()) return;
+      this.goToPage(e, parseInt(this.state.page_number) + 1);
+    }
+  }, {
+    key: "onPageChange",
+    value: function onPageChange(e) {
+      var isInputChange = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      if (isInputChange) {
+        this.setState({
+          is_temp_page: true,
+          temp_page_number: e.target.value
+        });
+      } else {
+        if (e.key === 'Enter') {
+          var pageNumber = e.target.value;
+          this.goToPage(e, pageNumber);
+        }
+      }
+    }
+  }, {
+    key: "onPageBlur",
+    value: function onPageBlur(e) {
+      var pageNumber = e.target.value;
+      this.goToPage(e, pageNumber);
+    }
+  }, {
+    key: "strip",
+    value: function strip(html) {
+      var doc = new DOMParser().parseFromString(html, 'text/html');
+      return doc.body.textContent || '';
+    }
+  }, {
+    key: "getExportHtml",
+    value: function getExportHtml() {
+      var tableHtml = '<table>';
+      tableHtml += '<thead>';
+      tableHtml += '<tr>';
+      var _iterator = _createForOfIteratorHelper(this.props.columns),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var _column = _step.value;
+          tableHtml += '<th>' + _column.text + '</th>';
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      tableHtml += '</tr>';
+      tableHtml += '</thead>';
+      tableHtml += '<tbody>';
+
+      // Filter records before export
+      var filterRecords = this.props.records;
+      if (this.props.dynamic === false) {
+        var records = this.sortRecords(),
+          filterValue = this.state.filter_value;
+        filterRecords = records;
+        if (filterValue) {
+          filterRecords = this.filterData(records);
+        }
+      }
+      for (var i in filterRecords) {
+        var record = filterRecords[i];
+        tableHtml += '<tr>';
+        var _iterator2 = _createForOfIteratorHelper(this.props.columns),
+          _step2;
+        try {
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            var column = _step2.value;
+            if (column.cell && typeof column.cell === 'function') {
+              var cellData = _server["default"].renderToStaticMarkup(column.cell(record, i));
+              cellData = this.strip(cellData);
+              tableHtml += '<td>' + cellData + '</td>';
+            } else if (record[column.key]) {
+              tableHtml += '<td>' + record[column.key] + '</td>';
+            } else {
+              tableHtml += '<td></td>';
+            }
+          }
+        } catch (err) {
+          _iterator2.e(err);
+        } finally {
+          _iterator2.f();
+        }
+        tableHtml += '</tr>';
+      }
+      tableHtml += '</tbody>';
+      tableHtml += '</table>';
+      return tableHtml;
+    }
+  }, {
+    key: "exportToExcel",
+    value: function exportToExcel() {
+      var downloadLink,
+        dataType = 'application/vnd.ms-excel';
+      var tableHtml = this.getExportHtml();
+
+      // Specify file name
+      var filename = this.config.filename ? this.config.filename + '.xls' : 'table.xls';
+      // Create download link element
+      downloadLink = document.createElement('a');
+      if (navigator.msSaveOrOpenBlob) {
+        var blob = new Blob(["\uFEFF", tableHtml], {
+          type: dataType
+        });
+        navigator.msSaveOrOpenBlob(blob, filename);
+      } else {
+        // Create a link to the file
+        downloadLink.href = 'data:' + dataType + ', ' + tableHtml;
+        // Setting the file name
+        downloadLink.download = filename;
+        //triggering the function
+        downloadLink.click();
+      }
+    }
+  }, {
+    key: "exportToPDF",
+    value: function exportToPDF() {
+      var tableHtml = this.getExportHtml();
+      var style = '<style>';
+      style = style + 'table {width: 100%;font: 17px Calibri;}';
+      style = style + 'table, th, td {border: solid 1px #DDD; border-collapse: collapse;';
+      style = style + 'padding: 2px 3px;text-align:left;}';
+      style = style + '</style>';
+      var win = window.open('', '_blank');
+      win.document.write('<html><head>');
+      win.document.write('<title>' + this.config.filename + '</title>');
+      win.document.write(style);
+      win.document.write('</head>');
+      win.document.write('<body>');
+      win.document.write('<h1>' + this.config.filename + '</h1>');
+      win.document.write(tableHtml);
+      win.document.write('</body></html>');
+      win.print();
+      win.close();
+    }
+  }, {
+    key: "convertToCSV",
+    value: function convertToCSV(objArray) {
+      var array = _typeof(objArray) != 'object' ? JSON.parse(objArray) : objArray;
+      var str = '';
+      for (var i = 0; i < array.length; i++) {
+        var line = '';
+        for (var index in array[i]) {
+          if (line != '') line += ',';
+          line += array[i][index];
+        }
+        str += line + '\r\n';
+      }
+      return str;
+    }
+  }, {
+    key: "exportToCSV",
+    value: function exportToCSV() {
+      var headers = {};
+      // add columns in sheet array
+      var _iterator3 = _createForOfIteratorHelper(this.props.columns),
+        _step3;
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var _column2 = _step3.value;
+          headers[_column2.key] = '"' + _column2.text + '"';
+        }
+
+        // Filter records before export
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+      var filterRecords = this.props.records;
+      if (this.props.dynamic === false) {
+        var _records = this.sortRecords(),
+          filterValue = this.state.filter_value;
+        filterRecords = _records;
+        if (filterValue) {
+          filterRecords = this.filterData(_records);
+        }
+      }
+      var records = [];
+      // add data rows in sheet array
+      for (var i in filterRecords) {
+        var record = filterRecords[i],
+          newRecord = {};
+        var _iterator4 = _createForOfIteratorHelper(this.props.columns),
+          _step4;
+        try {
+          for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+            var column = _step4.value;
+            if (column.cell && typeof column.cell === 'function') {
+              var cellData = _server["default"].renderToStaticMarkup(column.cell(record, i));
+              cellData = this.strip(cellData);
+              newRecord[column.key] = cellData;
+            } else if (record[column.key]) {
+              var colValue = record[column.key];
+              colValue = typeof colValue === 'string' ? colValue.replace(/"/g, '""') : colValue;
+              newRecord[column.key] = '"' + colValue + '"';
+            } else {
+              newRecord[column.key] = '';
+            }
+          }
+        } catch (err) {
+          _iterator4.e(err);
+        } finally {
+          _iterator4.f();
+        }
+        records.push(newRecord);
+      }
+      if (headers) {
+        records.unshift(headers);
+      }
+      // Convert Object to JSON
+      var jsonObject = JSON.stringify(records);
+      var csv = this.convertToCSV(jsonObject);
+      var exportedFilename = this.config.filename + '.csv' || 'export.csv';
+      var blob = new Blob([csv], {
+        type: 'text/csv;charset=utf-8;'
+      });
+      if (navigator.msSaveBlob) {
+        // IE 10+
+        navigator.msSaveBlob(blob, exportedFilename);
+      } else {
+        var link = document.createElement('a');
+        if (link.download !== undefined) {
+          // feature detection
+          // Browsers that support HTML5 download attribute
+          var url = URL.createObjectURL(blob);
+          link.setAttribute('href', url);
+          link.setAttribute('download', exportedFilename);
+          link.style.visibility = 'hidden';
+          document.body.appendChild(link);
+          link.click();
+          link.remove();
+        }
+      }
+    }
+  }, {
+    key: "onChange",
+    value: function onChange() {
+      var tableData = {
+        filter_value: this.state.filter_value,
+        page_number: this.state.page_number,
+        page_size: this.state.page_size,
+        sort_order: this.state.sort
+      };
+      this.props.onChange(tableData);
+    }
+  }, {
+    key: "filterData",
+    value: function filterData(records) {
+      var _this6 = this;
+      var filterValue = this.state.filter_value;
+      return records.filter(function (record) {
+        var allow = false;
+        _lodash["default"].each(_this6.props.columns, function (column, key) {
+          if (record[column.key]) {
+            allow = _lodash["default"].includes(record[column.key].toString().toLowerCase(), filterValue.toString().toLowerCase()) ? true : allow;
+          }
+        });
+        return allow;
+      });
+    }
+  }, {
+    key: "sortRecords",
+    value: function sortRecords() {
+      var _this7 = this;
+      if (this.state.sort) {
+        return _lodash["default"].orderBy(this.props.records, function (o) {
+          var colVal = o[_this7.state.sort.column];
+          var typeofColVal = _typeof(colVal);
+          if (typeofColVal == 'string') {
+            if (isNaN(colVal)) {
+              return new String(colVal.toLowerCase());
+            } else {
+              return new Number(colVal);
+            }
+          } else if (typeofColVal == 'number') {
+            return new Number(colVal);
+          }
+        }, [this.state.sort.order]);
+      } else {
+        return this.props.records;
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this8 = this;
+      var filterRecords, totalRecords, pages, isFirst, isLast;
+      if (this.props.dynamic === false) {
+        var records = this.props.onSort ? this.props.onSort(this.state.sort.column, this.props.records, this.state.sort.order) : this.sortRecords(),
+          filterValue = this.state.filter_value;
+        filterRecords = records;
+        if (filterValue) {
+          filterRecords = this.filterData(records);
+        }
+        totalRecords = Array.isArray(filterRecords) ? filterRecords.length : 0;
+        pages = this.pages = this.numPages(totalRecords);
+        isFirst = this.isFirst();
+        isLast = this.isLast();
+        filterRecords = Array.isArray(filterRecords) ? this.paginate(filterRecords) : [];
+      } else {
+        filterRecords = this.props.records;
+        totalRecords = this.props.total_record;
+        pages = this.pages = this.numPages(totalRecords);
+        isFirst = this.isFirst();
+        isLast = this.isLast();
+      }
+      var startRecords = this.state.page_number * this.state.page_size - (this.state.page_size - 1);
+      var endRecords = this.state.page_size * this.state.page_number;
+      endRecords = endRecords > totalRecords ? totalRecords : endRecords;
+      var lengthMenuText = this.config.language.length_menu;
+      lengthMenuText = lengthMenuText.split('_MENU_');
+      var paginationInfo = this.config.language.info;
+      paginationInfo = paginationInfo.replace('_START_', this.state.page_number == 1 ? 1 : startRecords);
+      paginationInfo = paginationInfo.replace('_END_', endRecords);
+      paginationInfo = paginationInfo.replace('_TOTAL_', totalRecords);
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "as-react-table",
+        id: this.props.id ? this.props.id + '-container' : '',
+        children: [this.config.show_filter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableHeader["default"], {
+          config: this.config,
+          id: this.props.id,
+          lengthMenuText: lengthMenuText,
+          recordLength: this.props.dynamic ? this.props.total_record : this.props.records.length,
+          filterRecords: this.filterRecords.bind(this),
+          changePageSize: this.changePageSize.bind(this),
+          exportToExcel: this.exportToExcel.bind(this),
+          exportToCSV: this.exportToCSV.bind(this),
+          exportToPDF: this.exportToPDF.bind(this),
+          extraButtons: this.props.extraButtons
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "row table-body asrt-table-body",
+          style: _style2["default"].table_body,
+          id: this.props.id ? this.props.id + '-table-body' : '',
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "col-md-12",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("table", {
+              className: this.props.className,
+              id: this.props.id,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
+                className: this.props.tHeadClassName ? this.props.tHeadClassName : '',
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
+                  children: this.props.columns.map(function (column, index) {
+                    var classText = column.sortable ? 'sortable ' : '',
+                      width = column.width ? column.width : '',
+                      align = column.align ? column.align : '',
+                      sortOrder = '',
+                      columnStyle = {};
+                    if (column.sortable && _this8.state.sort.column == column.key) {
+                      sortOrder = _this8.state.sort.order;
+                      classText += sortOrder ? ' ' + sortOrder : '';
+                      columnStyle = sortOrder == 'asc' ? _style2["default"].sort_asc : _style2["default"].sort_desc;
+                    }
+                    classText += ' text-' + align;
+                    if (column.TrOnlyClassName) classText += ' ' + column.TrOnlyClassName;
+                    return /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
+                      className: classText,
+                      width: width,
+                      style: columnStyle,
+                      onClick: function onClick(event) {
+                        return _this8.sortColumn(event, column, sortOrder);
+                      },
+                      children: column.text
+                    }, column.key ? column.key : column.text);
+                  })
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
+                children: this.props.loading === true ? /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+                    colSpan: this.props.columns.length,
+                    className: "asrt-td-loading",
+                    align: "center",
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                      className: "asrt-loading-textwrap",
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                        className: "asrt-loading-text",
+                        children: this.config.language.loading_text
+                      })
+                    })
+                  })
+                }) : filterRecords.length ? filterRecords.map(function (record, rowIndex) {
+                  var _record$_this8$config;
+                  rowIndex = _lodash["default"].indexOf(_this8.props.records, record);
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
+                    onClick: function onClick(e) {
+                      return _this8.props.onRowClicked(e, record, rowIndex);
+                    },
+                    children: _this8.props.columns.map(function (column, colIndex) {
+                      if (column.cell && typeof column.cell === 'function') {
+                        return /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+                          className: column.className,
+                          children: column.cell(record, rowIndex)
+                        }, column.key ? column.key : column.text);
+                      } else if (record[column.key]) {
+                        return /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+                          className: column.className,
+                          children: record[column.key]
+                        }, column.key ? column.key : column.text);
+                      } else {
+                        return /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+                          className: column.className
+                        }, column.key ? column.key : column.text);
+                      }
+                    })
+                  }, (_record$_this8$config = record[_this8.config.key_column]) !== null && _record$_this8$config !== void 0 ? _record$_this8$config : rowIndex);
+                }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+                    colSpan: this.props.columns.length,
+                    align: "center",
+                    children: this.config.language.no_data_text
+                  })
+                })
+              })]
+            })
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableFooter["default"], {
+          config: this.config,
+          id: this.props.id,
+          isFirst: isFirst,
+          isLast: isLast,
+          paginationInfo: paginationInfo,
+          pages: pages,
+          page_number: this.state.page_number,
+          is_temp_page: this.state.is_temp_page,
+          temp_page_number: this.state.temp_page_number,
+          firstPage: this.firstPage.bind(this),
+          lastPage: this.lastPage.bind(this),
+          previousPage: this.previousPage.bind(this),
+          nextPage: this.nextPage.bind(this),
+          goToPage: this.goToPage.bind(this),
+          changePageSize: this.changePageSize.bind(this),
+          onPageChange: this.onPageChange.bind(this),
+          onPageBlur: this.onPageBlur.bind(this)
+        })]
+      });
+    }
+  }]);
+}(_react.Component);
+/**
+ * Define component display name
+ */
+ReactDatatable.displayName = 'ReactDatatable';
+
+/**
+ * Define defaultProps for this component
+ */
+ReactDatatable.defaultProps = {
+  id: 'as-react-datatable',
+  className: 'table table-bordered table-striped',
+  columns: [],
+  config: {
+    button: {
+      excel: false,
+      print: false,
+      csv: false
+    },
+    filename: 'table',
+    key_column: 'id',
+    language: {
+      length_menu: 'Show _MENU_ records per page',
+      filter: 'Search in records...',
+      info: 'Showing _START_ to _END_ of _TOTAL_ entries',
+      pagination: {
+        first: 'First',
+        previous: 'Previous',
+        next: 'Next',
+        last: 'Last'
+      }
+    },
+    length_menu: [10, 25, 50, 75, 100],
+    no_data_text: 'No rows found',
+    page_size: 10,
+    sort: {
+      column: 'test',
+      order: 'asc'
+    },
+    show_length_menu: true,
+    show_filter: true,
+    show_pagination: true,
+    show_info: true,
+    show_first: true,
+    show_last: true
+  },
+  dynamic: false,
+  records: [],
+  total_record: 0,
+  onChange: function onChange() {},
+  onPageChange: function onPageChange() {},
+  onRowClicked: function onRowClicked() {}
+};
+var _default = exports["default"] = ReactDatatable;

package/dist/DataGridView/style/index.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _upArrow = _interopRequireDefault(require("../assets/img/up-arrow.png"));
+var _downArrow = _interopRequireDefault(require("../assets/img/down-arrow.png"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = {
+  table_body: {
+    marginTop: '12px'
+  },
+  table_size: {
+    background: 'none',
+    border: 'none',
+    padding: 0
+  },
+  table_size_dropdown: {
+    width: '70px',
+    flex: 'none',
+    margin: '0px 10px',
+    display: 'inline-block',
+    "float": 'none'
+  },
+  table_filter: {
+    display: 'inline-block',
+    verticalAlign: 'top',
+    marginRight: '5px',
+    width: '250px'
+  },
+  table_tool: {
+    display: 'inline-block',
+    verticalAlign: 'top'
+  },
+  table_tool_btn: {
+    marginRight: '5px'
+  },
+  sort_asc: {
+    backgroundImage: "url(".concat(_upArrow["default"], ")")
+  },
+  sort_desc: {
+    backgroundImage: "url(".concat(_downArrow["default"], ")")
+  }
+};

package/dist/InputCheck/index.js

@@ -0,0 +1,68 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = InputComponent;
+var _react = _interopRequireWildcard(require("react"));
+var _syles = require("./syles");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["value", "label", "onChange", "styleContainer", "styleLabel"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+function InputComponent(_ref) {
+  var value = _ref.value,
+    label = _ref.label,
+    onChange = _ref.onChange,
+    _ref$styleContainer = _ref.styleContainer,
+    styleContainer = _ref$styleContainer === void 0 ? {} : _ref$styleContainer,
+    _ref$styleLabel = _ref.styleLabel,
+    styleLabel = _ref$styleLabel === void 0 ? {} : _ref$styleLabel,
+    inputProps = _objectWithoutProperties(_ref, _excluded);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setstate = _useState2[1];
+  (0, _react.useEffect)(function () {
+    if (value !== undefined) setstate(value);
+  }, [value]);
+  var onSelect = function onSelect(ev) {
+    var checked = ev.target.checked;
+    setstate(checked);
+    if (onChange) onChange({
+      target: _objectSpread({
+        value: checked
+      }, inputProps)
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_syles.Container, {
+    style: styleContainer,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+      className: "checkbox",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_syles.SelectBox, _objectSpread({
+        checked: state,
+        type: "checkbox",
+        onChange: onSelect
+      }, inputProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "checkmark"
+      })]
+    }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_syles.Label, {
+      style: styleLabel,
+      children: label
+    })]
+  });
+}

package/dist/InputCheck/syles.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectBox = exports.Label = exports.Container = void 0;
+var _reactstrap = require("reactstrap");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+var Container = exports.Container = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  margin: auto 0;\n\n  .checkbox {\n    display: block;\n    position: relative;\n    padding-left: 20px;\n    margin-bottom: 20px;\n    cursor: pointer;\n    font-size: 22px;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n\n  .checkmark {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 20px;\n    width: 20px;\n    background-color: #eee;\n    border-radius: 3px;\n  }\n  .checkbox:hover input ~ .checkmark {\n    background-color: #ccc;\n  }\n  .checkbox input:checked ~ .checkmark {\n    background-color: var(--blue);\n  }\n  .checkmark:after {\n    content: '';\n    position: absolute;\n    display: none;\n  }\n  .checkbox input:checked ~ .checkmark:after {\n    display: block;\n  }\n  .checkbox .checkmark:after {\n    left: 9px;\n    top: 5px;\n    width: 5px;\n    height: 10px;\n    border: solid white;\n    border-width: 0 3px 3px 0;\n    -webkit-transform: rotate(45deg);\n    -ms-transform: rotate(45deg);\n    transform: rotate(45deg);\n  }\n"])));
+var SelectBox = exports.SelectBox = (0, _styledComponents["default"])(_reactstrap.Input)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n  height: 0;\n  width: 0;\n"])));
+var Label = exports.Label = _styledComponents["default"].label(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  padding-top: 7px;\n"])), function (props) {
+  return props.isHighlight && 'var(--primary)';
+}, function (props) {
+  return props.isHighlight && '1.5rem';
+}, function (props) {
+  return props.isHighlight && '600';
+});

package/dist/index.js

@@ -9,5 +9,19 @@ Object.defineProperty(exports, "CardFilter", {
     return _CardFilter["default"];
   }
 });
+Object.defineProperty(exports, "DataGridView", {
+  enumerable: true,
+  get: function get() {
+    return _DataGridView["default"];
+  }
+});
+Object.defineProperty(exports, "InputCheck", {
+  enumerable: true,
+  get: function get() {
+    return _InputCheck["default"];
+  }
+});
 var _CardFilter = _interopRequireDefault(require("./CardFilter"));
+var _InputCheck = _interopRequireDefault(require("./InputCheck"));
+var _DataGridView = _interopRequireDefault(require("./DataGridView"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }

package/package.json

@@ -1,26 +1,25 @@
 {
   "name": "bitys-react-components",
   "description": "",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "private": false,
   "main": "dist/index.js",
   "license": "MIT",
-  "files": [
-    "dist",
-    "README.md"
-  ],
+  "files": ["dist", "README.md"],
   "scripts": {
     "start": "webpack serve --progress --hot --port 8080",
-    "build": "cross-env NODE_ENV=production babel src --out-dir dist"
+    "build": "npx cross-env NODE_ENV=production babel src --out-dir dist"
   },
   "dependencies": {
-    "bootstrap": "^5.3.3",
-    "prop-types": "^15.8.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-icons": "^5.2.1",
-    "reactstrap": "^9.2.2",
-    "styled-components": "^6.1.11"
+    "prop-types": "^15.8.1"
+  },
+  "peerDependencies": {
+    "bootstrap": "^5.0.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
+    "react-icons": "^5.0.0",
+    "reactstrap": "^9.0.0",
+    "styled-components": "^5.0.0 || ^6.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.8",
@@ -28,8 +27,14 @@
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-react": "^7.24.7",
     "babel-loader": "^9.1.3",
+    "bootstrap": "^5.3.3",
     "cross-env": "^7.0.3",
     "html-webpack-plugin": "^5.6.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
+    "reactstrap": "^9.2.2",
+    "styled-components": "^6.1.11",
     "webpack": "^5.93.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4"