jattac.libs.web.responsive-table 0.0.18 → 0.0.19

package/.eslintrc.json

@@ -1,8 +1,8 @@
-{
-  "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint"],
-  "extends": ["plugin:@typescript-eslint/recommended"],
-  "rules": {
-    "@typescript-eslint/no-var-requires": "warn"
-  }
-}
+{
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "extends": ["plugin:@typescript-eslint/recommended"],
+  "rules": {
+    "@typescript-eslint/no-var-requires": "warn"
+  }
+}

package/.prettierrc

@@ -1,5 +1,5 @@
-{
-  "semi": true,
-  "singleQuote": true,
-  "printWidth": 120
-}
+{
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 120
+}

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2023 Nyingi Maina
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2023 Nyingi Maina
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,79 +1,79 @@
-# ResponsiveTable
-
-ResponsiveTable is a reusable React component that displays tabular data in a responsive layout.
-
-## Features
-
-- Handles mobile and desktop layouts
-- Customizable columns
-- Dynamic column definitions
-- Card-style mobile view
-- Generic types for flexible data
-
-## Usage
-
-```jsx
-<ResponsiveTable columnDefinitions={columns} data={data} />
-```
-
-- 'columnDefinitions' defines an array of columns, which can be a simple configuration object or dynamic function
-- 'data' is an array of data objects to display in rows
-
-The component handles switching layout based on screen width to optimize for desktop and mobile.
-
-## Custom Columns
-
-Columns can be configured using the 'IResponsiveTableColumnDefinition' interface.
-
-Some key configuration options:
-
-- 'displayLabel': Header label
-- 'dataKey': Maps column to data property
-- 'cellRenderer': Renders cell value
-
-See docs for more details on customization.
-
-## Dynamic Columns
-
-Column definitions can also be a function allowing dynamic configurations per row.
-
-## Props
-
-Prop definitions provide detailed specification of component contract.
-
-### IProps
-
-```ts
-interface IProps<TData> {
-  /** Column definitions */
-  columnDefinitions: ColumnDefinition<TData>[];
-
-  /** Table data rows */
-  data: TData[];
-
-  /** Optional styling */
-  className?: string;
-
-  /** row click handler */
-  onRowClicked?: (row: TData) => void;
-
-  /** not data component */
-  noDataComponent?: ReactNode;
-}
-```
-
-```ts
-type ColumnDefinition<TData> =
-  | IResponsiveTableColumnDefinition<TData>
-  | ((rowData: TData, rowIndex?: number) => IResponsiveTableColumnDefinition<TData>);
-```
-
-```ts
-interface IResponsiveTableColumnDefinition<TData> {
-  displayLabel: string | ReactNode;
-
-  dataKey?: keyof TData;
-
-  cellRenderer: (rowData: TData) => ReactNode;
-}
-```
+# ResponsiveTable
+
+ResponsiveTable is a reusable React component that displays tabular data in a responsive layout.
+
+## Features
+
+- Handles mobile and desktop layouts
+- Customizable columns
+- Dynamic column definitions
+- Card-style mobile view
+- Generic types for flexible data
+
+## Usage
+
+```jsx
+<ResponsiveTable columnDefinitions={columns} data={data} />
+```
+
+- 'columnDefinitions' defines an array of columns, which can be a simple configuration object or dynamic function
+- 'data' is an array of data objects to display in rows
+
+The component handles switching layout based on screen width to optimize for desktop and mobile.
+
+## Custom Columns
+
+Columns can be configured using the 'IResponsiveTableColumnDefinition' interface.
+
+Some key configuration options:
+
+- 'displayLabel': Header label
+- 'dataKey': Maps column to data property
+- 'cellRenderer': Renders cell value
+
+See docs for more details on customization.
+
+## Dynamic Columns
+
+Column definitions can also be a function allowing dynamic configurations per row.
+
+## Props
+
+Prop definitions provide detailed specification of component contract.
+
+### IProps
+
+```ts
+interface IProps<TData> {
+  /** Column definitions */
+  columnDefinitions: ColumnDefinition<TData>[];
+
+  /** Table data rows */
+  data: TData[];
+
+  /** Optional styling */
+  className?: string;
+
+  /** row click handler */
+  onRowClicked?: (row: TData) => void;
+
+  /** not data component */
+  noDataComponent?: ReactNode;
+}
+```
+
+```ts
+type ColumnDefinition<TData> =
+  | IResponsiveTableColumnDefinition<TData>
+  | ((rowData: TData, rowIndex?: number) => IResponsiveTableColumnDefinition<TData>);
+```
+
+```ts
+interface IResponsiveTableColumnDefinition<TData> {
+  displayLabel: string | ReactNode;
+
+  dataKey?: keyof TData;
+
+  cellRenderer: (rowData: TData) => ReactNode;
+}
+```

package/dist/UI/ResponsiveTable.d.ts

@@ -6,6 +6,7 @@ interface IProps<TData> {
     data: TData[];
     noDataComponent?: ReactNode;
     maxHeight?: string;
+    onRowClick?: (item: TData) => void;
 }
 interface IState {
     isMobile: boolean;
@@ -23,6 +24,8 @@ declare class ResponsiveTable<TData> extends Component<IProps<TData>, IState> {
     private getRawColumnDefinition;
     private onHeaderClickCallback;
     private getClickableHeaderClassName;
+    private get rowClickFunction();
+    private get rowClickStyle();
     private get mobileView();
     private get largeScreenView();
     render(): React.ReactNode;

package/dist/index.js

@@ -29,7 +29,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".ResponsiveTable-module_card__b-U2v {\n  border: 1px solid #ccc;\n  margin-bottom: 10px;\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n}\n\n.ResponsiveTable-module_card-header__Ttk51 {\n  background-color: #f0f0f0;\n  padding: 10px;\n  font-weight: bold;\n}\n\n.ResponsiveTable-module_card-body__XIy0h {\n  padding: 10px;\n}\n\n.ResponsiveTable-module_responsiveTable__4y-Od {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.ResponsiveTable-module_responsiveTable__4y-Od thead th {\n  background-color: #f2f2f2;\n  position: sticky;\n  top: 0;\n  z-index: 2;\n}\n\n.ResponsiveTable-module_responsiveTable__4y-Od th,\n.ResponsiveTable-module_responsiveTable__4y-Od td {\n  padding: 12px;\n  border-bottom: 1px solid #dddddd;\n  text-align: left;\n}\n\n/* Alternate row colors */\n.ResponsiveTable-module_responsiveTable__4y-Od tr:nth-child(even) {\n  background-color: #f9f9f9;\n}\n\n/* Change background color on hover */\n.ResponsiveTable-module_responsiveTable__4y-Od tr:hover {\n  background-color: #d9edf7;\n}\n\n.ResponsiveTable-module_clickableHeader__xHQhF {\n  cursor: pointer;\n  color: #007bff;\n}\n\n.ResponsiveTable-module_clickableHeader__xHQhF:hover {\n  text-decoration: underline;\n}\n\n.ResponsiveTable-module_noDataWrapper__Rj-k3 {\n  color: #ca3333;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  gap: 10px;\n}\n\n.ResponsiveTable-module_noData__IpwNq {\n  text-align: center;\n  font-weight: bold;\n  padding: 30px;\n}\n";
+var css_248z = ".ResponsiveTable-module_card__b-U2v {\r\n  border: 1px solid #ccc;\r\n  margin-bottom: 10px;\r\n  border-radius: 8px;\r\n  overflow: hidden;\r\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.ResponsiveTable-module_card-header__Ttk51 {\r\n  background-color: #f0f0f0;\r\n  padding: 10px;\r\n  font-weight: bold;\r\n}\r\n\r\n.ResponsiveTable-module_card-body__XIy0h {\r\n  padding: 10px;\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od {\r\n  width: 100%;\r\n  border-collapse: collapse;\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od thead th {\r\n  background-color: #f2f2f2;\r\n  position: sticky;\r\n  top: 0;\r\n  z-index: 2;\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od th,\r\n.ResponsiveTable-module_responsiveTable__4y-Od td {\r\n  padding: 12px;\r\n  border-bottom: 1px solid #dddddd;\r\n  text-align: left;\r\n}\r\n\r\n/* Alternate row colors */\r\n.ResponsiveTable-module_responsiveTable__4y-Od tr:nth-child(even) {\r\n  background-color: #f9f9f9;\r\n}\r\n\r\n/* Change background color on hover */\r\n.ResponsiveTable-module_responsiveTable__4y-Od tr:hover {\r\n  background-color: #d9edf7;\r\n}\r\n\r\n.ResponsiveTable-module_clickableHeader__xHQhF {\r\n  cursor: pointer;\r\n  color: #007bff;\r\n}\r\n\r\n.ResponsiveTable-module_clickableHeader__xHQhF:hover {\r\n  text-decoration: underline;\r\n}\r\n\r\n.ResponsiveTable-module_noDataWrapper__Rj-k3 {\r\n  color: #ca3333;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  height: 100%;\r\n  gap: 10px;\r\n}\r\n\r\n.ResponsiveTable-module_noData__IpwNq {\r\n  text-align: center;\r\n  font-weight: bold;\r\n  padding: 30px;\r\n}\r\n";
 var styles = {"card":"ResponsiveTable-module_card__b-U2v","card-header":"ResponsiveTable-module_card-header__Ttk51","card-body":"ResponsiveTable-module_card-body__XIy0h","responsiveTable":"ResponsiveTable-module_responsiveTable__4y-Od","clickableHeader":"ResponsiveTable-module_clickableHeader__xHQhF","noDataWrapper":"ResponsiveTable-module_noDataWrapper__Rj-k3","noData":"ResponsiveTable-module_noData__IpwNq"};
 styleInject(css_248z);
 
@@ -107,8 +107,24 @@ class ResponsiveTable extends React.Component {
             : '';
         return clickableHeaderClassName;
     }
+    get rowClickFunction() {
+        if (this.props.onRowClick) {
+            return this.props.onRowClick;
+        }
+        else {
+            return () => { };
+        }
+    }
+    get rowClickStyle() {
+        if (this.props.onRowClick) {
+            return { cursor: 'pointers' };
+        }
+        else {
+            return {};
+        }
+    }
     get mobileView() {
-        return (React.createElement("div", null, this.data.map((row, rowIndex) => (React.createElement("div", { key: rowIndex, className: styles['card'] },
+        return (React.createElement("div", null, this.data.map((row, rowIndex) => (React.createElement("div", { key: rowIndex, className: styles['card'], onClick: () => this.rowClickFunction(row) },
             React.createElement("div", { className: styles['card-header'] }, " "),
             React.createElement("div", { className: styles['card-body'] }, this.props.columnDefinitions.map((columnDefinition, colIndex) => {
                 const colDef = this.getColumnDefinition(columnDefinition, rowIndex);
@@ -138,7 +154,7 @@ class ResponsiveTable extends React.Component {
                                 ? () => onHeaderClickCallback(this.getColumnDefinition(columnDefinition, 0).interactivity.id)
                                 : undefined }, this.getColumnDefinition(columnDefinition, 0).displayLabel));
                     }))),
-                React.createElement("tbody", null, this.data.map((row, rowIndex) => (React.createElement("tr", { key: rowIndex }, this.props.columnDefinitions.map((columnDefinition, colIndex) => (React.createElement("td", { key: colIndex }, this.getColumnDefinition(columnDefinition, rowIndex).cellRenderer(row)))))))))));
+                React.createElement("tbody", null, this.data.map((row, rowIndex) => (React.createElement("tr", { key: rowIndex }, this.props.columnDefinitions.map((columnDefinition, colIndex) => (React.createElement("td", { style: Object.assign({}, this.rowClickStyle), onClick: () => this.rowClickFunction(row), key: colIndex }, this.getColumnDefinition(columnDefinition, rowIndex).cellRenderer(row)))))))))));
     }
     render() {
         if (!this.hasData) {

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/UI/ResponsiveTable.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n",null],"names":["Component"],"mappings":"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","x_google_ignoreList":[0]}
+{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/UI/ResponsiveTable.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n",null],"names":["Component"],"mappings":";;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;ACNA;AACA,MAAM,eAAuB,SAAQA,eAAgC,CAAA;AACnE,IAAA,WAAA,CAAY,KAAoB,EAAA;QAC9B,KAAK,CAAC,KAAK,CAAC,CAAC;QAiDf,IAAY,CAAA,YAAA,GAAG,MAAW;AACxB,YAAA,IAAI,CAAC,QAAQ,CAAC,MAAK;gBACjB,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC,UAAU,IAAI,GAAG,EAAE,CAAC;AAChD,aAAC,CAAC,CAAC;AACL,SAAC,CAAC;QApDA,IAAI,CAAC,KAAK,GAAG;AACX,YAAA,QAAQ,EAAE,KAAK;SAChB,CAAC;KACH;AAED,IAAA,IAAY,IAAI,GAAA;QACd,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;AAChE,YAAA,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;SACxB;aAAM;AACL,YAAA,OAAO,EAAE,CAAC;SACX;KACF;AAED,IAAA,IAAY,SAAS,GAAA;QACnB,QACE,6BAAK,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAA;AAC5F,YAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,wJAAwJ,EAAG,CAAA,CAC/J,EACN;KACH;AAED,IAAA,IAAY,OAAO,GAAA;AACjB,QAAA,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;KAC7B;AAED,IAAA,IAAY,eAAe,GAAA;AACzB,QAAA,QACE,IAAI,CAAC,KAAK,CAAC,eAAe,KACxB,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,aAAa,EAAA;AACjC,YAAA,IAAI,CAAC,SAAS;YACf,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,MAAM,EAAe,EAAA,SAAA,CAAA,CACxC,CACP,EACD;KACH;IAED,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,QAAQ,CAAC,MAAK;YACjB,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC,UAAU,IAAI,GAAG,EAAE,CAAC;AAChD,SAAC,CAAC,CAAC;QAEH,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;KACtD;IAED,oBAAoB,GAAA;QAClB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;KACzD;IAQO,mBAAmB,CACzB,gBAAyC,EACzC,QAAgB,EAAA;AAEhB,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;AACjB,YAAA,OAAO,EAAE,YAAY,EAAE,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,EAAE,CAAC;SACrD;QACD,OAAO,gBAAgB,YAAY,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,GAAG,gBAAgB,CAAC;KAC3G;AAEO,IAAA,sBAAsB,CAAC,gBAAyC,EAAA;QACtE,IAAI,mBAAmB,GAA4C,EAA6C,CAAC;AACjH,QAAA,IAAI,gBAAgB,YAAY,QAAQ,EAAE;AACxC,YAAA,mBAAmB,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;SACzD;aAAM;YACL,mBAAmB,GAAG,gBAA2D,CAAC;SACnF;AACD,QAAA,OAAO,mBAAmB,CAAC;KAC5B;AAEO,IAAA,qBAAqB,CAAC,gBAAyC,EAAA;QACrE,MAAM,mBAAmB,GAAG,IAAI,CAAC,sBAAsB,CAAC,gBAAgB,CAAC,CAAC;QAC1E,IAAI,mBAAmB,CAAC,aAAa,IAAI,mBAAmB,CAAC,aAAa,CAAC,aAAa,EAAE;AACxF,YAAA,OAAO,mBAAmB,CAAC,aAAa,CAAC,aAAa,CAAC;SACxD;aAAM;AACL,YAAA,OAAO,SAAS,CAAC;SAClB;KACF;IAEO,2BAA2B,CACjC,qBAAyD,EACzD,MAA+B,EAAA;QAE/B,MAAM,mBAAmB,GAAG,IAAI,CAAC,sBAAsB,CAAC,MAAM,CAAC,CAAC;QAChE,MAAM,wBAAwB,GAAG,qBAAqB;cAClD,mBAAmB,CAAC,aAAc,CAAC,SAAS,IAAI,MAAM,CAAC,eAAe;cACtE,EAAE,CAAC;AACP,QAAA,OAAO,wBAAwB,CAAC;KACjC;AAED,IAAA,IAAY,gBAAgB,GAAA;AAC1B,QAAA,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE;AACzB,YAAA,OAAO,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC;SAC9B;aAAM;AACL,YAAA,OAAO,MAAO,GAAC,CAAC;SACjB;KACF;AAED,IAAA,IAAY,aAAa,GAAA;AACvB,QAAA,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE;AACzB,YAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAmB,CAAC;SAChD;aAAM;AACL,YAAA,OAAO,EAAE,CAAC;SACX;KACF;AAED,IAAA,IAAY,UAAU,GAAA;AACpB,QAAA,QACE,KACG,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,MAC3B,6BAAK,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,EAAA;AACtF,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,EAAS,EAAA,GAAA,CAAA;YAC9C,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,EAAA,EAChC,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,gBAAgB,EAAE,QAAQ,KAAI;gBAC/D,MAAM,MAAM,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;gBACpE,MAAM,qBAAqB,GAAG,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;gBACjE,MAAM,wBAAwB,GAAG,IAAI,CAAC,2BAA2B,CAAC,qBAAqB,EAAE,MAAM,CAAC,CAAC;AACjG,gBAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,QAAQ,EAAA;AAChB,oBAAA,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA;wBACE,KACE,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,CAAA,UAAA,EAAa,wBAAwB,CAAA,CAAE,EAClD,OAAO,EACL,qBAAqB,GAAG,MAAM,qBAAqB,CAAC,MAAM,CAAC,aAAc,CAAC,EAAE,CAAC,GAAG,SAAS,EAAA;AAG1F,4BAAA,MAAM,CAAC,YAAY;AACf,4BAAA,GAAA,CAAA;wBAAC,GAAG;wBACV,MAAM,CAAC,YAAY,CAAC,GAAG,CAAC,CACvB,CACA,EACN;AACJ,aAAC,CAAC,CACE,CACF,CACP,CAAC,CACE,EACN;KACH;AAED,IAAA,IAAY,eAAe,GAAA;AACzB,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,IAAI,GAAG,KAAK,CAAC;QAE5D,MAAM,iBAAiB,GAAG,eAAe;AACvC,cAAG,EAAE,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAE,MAAM,EAAoB;cACzE,EAAE,CAAC;AAEP,QAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,iBAAiB,EAAA;AAC3B,YAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC,EAAA;AACzC,gBAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA;AACE,oBAAA,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EACG,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,gBAAgB,EAAE,QAAQ,KAAI;wBAC/D,MAAM,qBAAqB,GAAG,IAAI,CAAC,qBAAqB,CAAC,gBAAgB,CAAC,CAAC;wBAC3E,MAAM,wBAAwB,GAAG,IAAI,CAAC,2BAA2B,CAC/D,qBAAqB,EACrB,gBAAgB,CACjB,CAAC;AACF,wBAAA,QACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,CAAA,EAAG,wBAAwB,CAAA,CAAE,EACxC,OAAO,EACL,qBAAqB;AACnB,kCAAE,MAAM,qBAAqB,CAAC,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,aAAc,CAAC,EAAE,CAAC;AAC9F,kCAAE,SAAS,EAGd,EAAA,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,YAAY,CACxD,EACL;qBACH,CAAC,CACC,CACC;AACR,gBAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EACG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,MAC3B,KAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,GAAG,EAAE,QAAQ,EAAA,EACd,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,gBAAgB,EAAE,QAAQ,MAC3D,KAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,KAAK,oBAAO,IAAI,CAAC,aAAa,CAAA,EAAI,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAA,EAC3F,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,CACpE,CACN,CAAC,CACC,CACN,CAAC,CACI,CACF,CACJ,EACN;KACH;IAED,MAAM,GAAA;AACJ,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACjB,OAAO,IAAI,CAAC,eAAe,CAAC;SAC7B;AACD,QAAA,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;YACvB,OAAO,IAAI,CAAC,UAAU,CAAC;SACxB;QAED,OAAO,IAAI,CAAC,eAAe,CAAC;KAC7B;AACF;;;;","x_google_ignoreList":[0]}

package/package.json

@@ -1,58 +1,58 @@
-{
-  "name": "jattac.libs.web.responsive-table",
-  "version": "0.0.18",
-  "description": "",
-  "main": "dist/index.js",
-  "module": "dist/index.es.js",
-  "types": "dist/index.d.ts",
-  "scripts": {
-    "build": "rollup -c",
-    "lint": "eslint './{src,app}/**/*.{ts,tsx}'",
-    "size": "size-limit",
-    "prepare": "npm run build"
-  },
-  "keywords": [
-    "react",
-    "typescript"
-  ],
-  "author": "Nyingi Maina",
-  "license": "MIT",
-  "peerDependencies": {
-    "react": ">=18.2.0",
-    "react-dom": ">=18.2.0",
-    "typescript": ">=3.7.0"
-  },
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.5",
-    "@size-limit/preset-small-lib": "^10.0.1",
-    "@testing-library/react": "^14.0.0",
-    "@types/react": "^18.2.33",
-    "@types/react-dom": "^18.2.14",
-    "@typescript-eslint/eslint-plugin": "^6.9.1",
-    "@typescript-eslint/parser": "^6.9.1",
-    "eslint": "^8.52.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-prettier": "^5.0.1",
-    "eslint-plugin-react": "^7.33.2",
-    "identity-obj-proxy": "^3.0.0",
-    "npm": "^10.2.2",
-    "postcss": "^8.4.31",
-    "prettier": "^3.0.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "rollup": "^4.2.0",
-    "rollup-plugin-copy": "^3.5.0",
-    "rollup-plugin-delete": "^2.0.0",
-    "rollup-plugin-generate-package-json": "^3.2.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "size-limit": "^10.0.1",
-    "typescript": "^5.2.2"
-  },
-  "dependencies": {
-    "@rollup/plugin-terser": "^0.4.4",
-    "tslib": "^2.6.2"
-  }
-}
+{
+  "name": "jattac.libs.web.responsive-table",
+  "version": "0.0.19",
+  "description": "",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "rollup -c",
+    "lint": "eslint './{src,app}/**/*.{ts,tsx}'",
+    "size": "size-limit",
+    "prepare": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "typescript"
+  ],
+  "author": "Nyingi Maina",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0",
+    "typescript": ">=3.7.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.5",
+    "@size-limit/preset-small-lib": "^10.0.1",
+    "@testing-library/react": "^14.0.0",
+    "@types/react": "^18.2.33",
+    "@types/react-dom": "^18.2.14",
+    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "@typescript-eslint/parser": "^6.9.1",
+    "eslint": "^8.52.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.33.2",
+    "identity-obj-proxy": "^3.0.0",
+    "npm": "^10.2.2",
+    "postcss": "^8.4.31",
+    "prettier": "^3.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^4.2.0",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-generate-package-json": "^3.2.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "size-limit": "^10.0.1",
+    "typescript": "^5.2.2"
+  },
+  "dependencies": {
+    "@rollup/plugin-terser": "^0.4.4",
+    "tslib": "^2.6.2"
+  }
+}

package/rollup.config.js

@@ -1,23 +1,23 @@
-const postcss = require('rollup-plugin-postcss');
-const typescript = require('@rollup/plugin-typescript');
-const peerDepsExternal = require('rollup-plugin-peer-deps-external');
-const resolve = require('@rollup/plugin-node-resolve').default;
-const commonjs = require('@rollup/plugin-commonjs');
-
-module.exports = {
-  input: 'src/index.tsx',
-  output: {
-    dir: 'dist',
-    format: 'cjs',
-    sourcemap: true,
-  },
-  plugins: [
-    peerDepsExternal(),
-    resolve(),
-    typescript(),
-    commonjs(),
-    postcss({
-      modules: true,
-    }),
-  ],
-};
+const postcss = require('rollup-plugin-postcss');
+const typescript = require('@rollup/plugin-typescript');
+const peerDepsExternal = require('rollup-plugin-peer-deps-external');
+const resolve = require('@rollup/plugin-node-resolve').default;
+const commonjs = require('@rollup/plugin-commonjs');
+
+module.exports = {
+  input: 'src/index.tsx',
+  output: {
+    dir: 'dist',
+    format: 'cjs',
+    sourcemap: true,
+  },
+  plugins: [
+    peerDepsExternal(),
+    resolve(),
+    typescript(),
+    commonjs(),
+    postcss({
+      modules: true,
+    }),
+  ],
+};

package/src/Data/IResponsiveTableColumnDefinition.tsx

@@ -1,11 +1,11 @@
-import { ReactNode } from 'react';
-
-export default interface IResponsiveTableColumnDefinition<TData> {
-  displayLabel: ReactNode;
-  cellRenderer: (data: TData) => ReactNode;
-  interactivity?: {
-    id: string;
-    onHeaderClick?: (id: string) => void;
-    className?: string;
-  };
-}
+import { ReactNode } from 'react';
+
+export default interface IResponsiveTableColumnDefinition<TData> {
+  displayLabel: ReactNode;
+  cellRenderer: (data: TData) => ReactNode;
+  interactivity?: {
+    id: string;
+    onHeaderClick?: (id: string) => void;
+    className?: string;
+  };
+}

package/src/Styles/ResponsiveTable.module.css

@@ -1,70 +1,70 @@
-.card {
-  border: 1px solid #ccc;
-  margin-bottom: 10px;
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-}
-
-.card-header {
-  background-color: #f0f0f0;
-  padding: 10px;
-  font-weight: bold;
-}
-
-.card-body {
-  padding: 10px;
-}
-
-.responsiveTable {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.responsiveTable thead th {
-  background-color: #f2f2f2;
-  position: sticky;
-  top: 0;
-  z-index: 2;
-}
-
-.responsiveTable th,
-.responsiveTable td {
-  padding: 12px;
-  border-bottom: 1px solid #dddddd;
-  text-align: left;
-}
-
-/* Alternate row colors */
-.responsiveTable tr:nth-child(even) {
-  background-color: #f9f9f9;
-}
-
-/* Change background color on hover */
-.responsiveTable tr:hover {
-  background-color: #d9edf7;
-}
-
-.clickableHeader {
-  cursor: pointer;
-  color: #007bff;
-}
-
-.clickableHeader:hover {
-  text-decoration: underline;
-}
-
-.noDataWrapper {
-  color: #ca3333;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  gap: 10px;
-}
-
-.noData {
-  text-align: center;
-  font-weight: bold;
-  padding: 30px;
-}
+.card {
+  border: 1px solid #ccc;
+  margin-bottom: 10px;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+  background-color: #f0f0f0;
+  padding: 10px;
+  font-weight: bold;
+}
+
+.card-body {
+  padding: 10px;
+}
+
+.responsiveTable {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.responsiveTable thead th {
+  background-color: #f2f2f2;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+.responsiveTable th,
+.responsiveTable td {
+  padding: 12px;
+  border-bottom: 1px solid #dddddd;
+  text-align: left;
+}
+
+/* Alternate row colors */
+.responsiveTable tr:nth-child(even) {
+  background-color: #f9f9f9;
+}
+
+/* Change background color on hover */
+.responsiveTable tr:hover {
+  background-color: #d9edf7;
+}
+
+.clickableHeader {
+  cursor: pointer;
+  color: #007bff;
+}
+
+.clickableHeader:hover {
+  text-decoration: underline;
+}
+
+.noDataWrapper {
+  color: #ca3333;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  gap: 10px;
+}
+
+.noData {
+  text-align: center;
+  font-weight: bold;
+  padding: 30px;
+}

package/src/UI/ResponsiveTable.tsx

@@ -1,211 +1,230 @@
-import React, { CSSProperties, Component, ReactNode } from 'react';
-import styles from '../Styles/ResponsiveTable.module.css';
-import IResponsiveTableColumnDefinition from '../Data/IResponsiveTableColumnDefinition';
-
-type ColumnDefinition<TData> =
-  | IResponsiveTableColumnDefinition<TData>
-  | ((data: TData, rowIndex?: number) => IResponsiveTableColumnDefinition<TData>);
-interface IProps<TData> {
-  columnDefinitions: ColumnDefinition<TData>[];
-  data: TData[];
-  noDataComponent?: ReactNode;
-  maxHeight?: string;
-}
-
-interface IState {
-  isMobile: boolean;
-}
-
-// Class component
-class ResponsiveTable<TData> extends Component<IProps<TData>, IState> {
-  constructor(props: IProps<TData>) {
-    super(props);
-    this.state = {
-      isMobile: false,
-    };
-  }
-
-  private get data(): TData[] {
-    if (Array.isArray(this.props.data) && this.props.data.length > 0) {
-      return this.props.data;
-    } else {
-      return [];
-    }
-  }
-
-  private get noDataSvg(): ReactNode {
-    return (
-      <svg xmlns="http://www.w3.org/2000/svg" fill="#ccc" height="40" width="40" viewBox="0 0 24 24">
-        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-14h2v6h-2zm0 8h2v2h-2z" />
-      </svg>
-    );
-  }
-
-  private get hasData(): boolean {
-    return this.data.length > 0;
-  }
-
-  private get noDataComponent(): ReactNode {
-    return (
-      this.props.noDataComponent || (
-        <div className={styles.noDataWrapper}>
-          {this.noDataSvg}
-          <div className={styles.noData}>No data</div>
-        </div>
-      )
-    );
-  }
-
-  componentDidMount(): void {
-    this.setState(() => {
-      return { isMobile: window.innerWidth <= 600 };
-    });
-
-    window.addEventListener('resize', this.handleResize);
-  }
-
-  componentWillUnmount(): void {
-    window.removeEventListener('resize', this.handleResize);
-  }
-
-  handleResize = (): void => {
-    this.setState(() => {
-      return { isMobile: window.innerWidth <= 600 };
-    });
-  };
-
-  private getColumnDefinition(
-    columnDefinition: ColumnDefinition<TData>,
-    rowIndex: number,
-  ): IResponsiveTableColumnDefinition<TData> {
-    if (!this.hasData) {
-      return { displayLabel: '', cellRenderer: () => '' };
-    }
-    return columnDefinition instanceof Function ? columnDefinition(this.data[0], rowIndex) : columnDefinition;
-  }
-
-  private getRawColumnDefinition(columnDefinition: ColumnDefinition<TData>): IResponsiveTableColumnDefinition<TData> {
-    let rawColumnDefinition: IResponsiveTableColumnDefinition<TData> = {} as IResponsiveTableColumnDefinition<TData>;
-    if (columnDefinition instanceof Function) {
-      rawColumnDefinition = columnDefinition(this.data[0], 0);
-    } else {
-      rawColumnDefinition = columnDefinition as IResponsiveTableColumnDefinition<TData>;
-    }
-    return rawColumnDefinition;
-  }
-
-  private onHeaderClickCallback(columnDefinition: ColumnDefinition<TData>): ((id: string) => void) | undefined {
-    const rawColumnDefinition = this.getRawColumnDefinition(columnDefinition);
-    if (rawColumnDefinition.interactivity && rawColumnDefinition.interactivity.onHeaderClick) {
-      return rawColumnDefinition.interactivity.onHeaderClick;
-    } else {
-      return undefined;
-    }
-  }
-
-  private getClickableHeaderClassName(
-    onHeaderClickCallback: ((id: string) => void) | undefined,
-    colDef: ColumnDefinition<TData>,
-  ): string {
-    const rawColumnDefinition = this.getRawColumnDefinition(colDef);
-    const clickableHeaderClassName = onHeaderClickCallback
-      ? rawColumnDefinition.interactivity!.className || styles.clickableHeader
-      : '';
-    return clickableHeaderClassName;
-  }
-
-  private get mobileView(): ReactNode {
-    return (
-      <div>
-        {this.data.map((row, rowIndex) => (
-          <div key={rowIndex} className={styles['card']}>
-            <div className={styles['card-header']}> </div>
-            <div className={styles['card-body']}>
-              {this.props.columnDefinitions.map((columnDefinition, colIndex) => {
-                const colDef = this.getColumnDefinition(columnDefinition, rowIndex);
-                const onHeaderClickCallback = this.onHeaderClickCallback(colDef);
-                const clickableHeaderClassName = this.getClickableHeaderClassName(onHeaderClickCallback, colDef);
-                return (
-                  <div key={colIndex}>
-                    <p>
-                      <span
-                        className={`font-bold ${clickableHeaderClassName}`}
-                        onClick={
-                          onHeaderClickCallback ? () => onHeaderClickCallback(colDef.interactivity!.id) : undefined
-                        }
-                      >
-                        {colDef.displayLabel}:
-                      </span>{' '}
-                      {colDef.cellRenderer(row)}
-                    </p>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-        ))}
-      </div>
-    );
-  }
-
-  private get largeScreenView(): ReactNode {
-    const useFixedHeaders = this.props.maxHeight ? true : false;
-
-    const fixedHeadersStyle = useFixedHeaders
-      ? ({ maxHeight: this.props.maxHeight, overflowY: 'auto' } as CSSProperties)
-      : {};
-
-    return (
-      <div style={fixedHeadersStyle}>
-        <table className={styles['responsiveTable']}>
-          <thead>
-            <tr>
-              {this.props.columnDefinitions.map((columnDefinition, colIndex) => {
-                const onHeaderClickCallback = this.onHeaderClickCallback(columnDefinition);
-                const clickableHeaderClassName = this.getClickableHeaderClassName(
-                  onHeaderClickCallback,
-                  columnDefinition,
-                );
-                return (
-                  <th
-                    key={colIndex}
-                    className={`${clickableHeaderClassName}`}
-                    onClick={
-                      onHeaderClickCallback
-                        ? () => onHeaderClickCallback(this.getColumnDefinition(columnDefinition, 0).interactivity!.id)
-                        : undefined
-                    }
-                  >
-                    {this.getColumnDefinition(columnDefinition, 0).displayLabel}
-                  </th>
-                );
-              })}
-            </tr>
-          </thead>
-          <tbody>
-            {this.data.map((row, rowIndex) => (
-              <tr key={rowIndex}>
-                {this.props.columnDefinitions.map((columnDefinition, colIndex) => (
-                  <td key={colIndex}>{this.getColumnDefinition(columnDefinition, rowIndex).cellRenderer(row)}</td>
-                ))}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    );
-  }
-
-  render() {
-    if (!this.hasData) {
-      return this.noDataComponent;
-    }
-    if (this.state.isMobile) {
-      return this.mobileView;
-    }
-
-    return this.largeScreenView;
-  }
-}
-
-export default ResponsiveTable;
+import React, { CSSProperties, Component, ReactNode } from 'react';
+import styles from '../Styles/ResponsiveTable.module.css';
+import IResponsiveTableColumnDefinition from '../Data/IResponsiveTableColumnDefinition';
+
+type ColumnDefinition<TData> =
+  | IResponsiveTableColumnDefinition<TData>
+  | ((data: TData, rowIndex?: number) => IResponsiveTableColumnDefinition<TData>);
+interface IProps<TData> {
+  columnDefinitions: ColumnDefinition<TData>[];
+  data: TData[];
+  noDataComponent?: ReactNode;
+  maxHeight?: string;
+  onRowClick?: (item: TData) => void;
+}
+
+interface IState {
+  isMobile: boolean;
+}
+
+// Class component
+class ResponsiveTable<TData> extends Component<IProps<TData>, IState> {
+  constructor(props: IProps<TData>) {
+    super(props);
+    this.state = {
+      isMobile: false,
+    };
+  }
+
+  private get data(): TData[] {
+    if (Array.isArray(this.props.data) && this.props.data.length > 0) {
+      return this.props.data;
+    } else {
+      return [];
+    }
+  }
+
+  private get noDataSvg(): ReactNode {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" fill="#ccc" height="40" width="40" viewBox="0 0 24 24">
+        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-14h2v6h-2zm0 8h2v2h-2z" />
+      </svg>
+    );
+  }
+
+  private get hasData(): boolean {
+    return this.data.length > 0;
+  }
+
+  private get noDataComponent(): ReactNode {
+    return (
+      this.props.noDataComponent || (
+        <div className={styles.noDataWrapper}>
+          {this.noDataSvg}
+          <div className={styles.noData}>No data</div>
+        </div>
+      )
+    );
+  }
+
+  componentDidMount(): void {
+    this.setState(() => {
+      return { isMobile: window.innerWidth <= 600 };
+    });
+
+    window.addEventListener('resize', this.handleResize);
+  }
+
+  componentWillUnmount(): void {
+    window.removeEventListener('resize', this.handleResize);
+  }
+
+  handleResize = (): void => {
+    this.setState(() => {
+      return { isMobile: window.innerWidth <= 600 };
+    });
+  };
+
+  private getColumnDefinition(
+    columnDefinition: ColumnDefinition<TData>,
+    rowIndex: number,
+  ): IResponsiveTableColumnDefinition<TData> {
+    if (!this.hasData) {
+      return { displayLabel: '', cellRenderer: () => '' };
+    }
+    return columnDefinition instanceof Function ? columnDefinition(this.data[0], rowIndex) : columnDefinition;
+  }
+
+  private getRawColumnDefinition(columnDefinition: ColumnDefinition<TData>): IResponsiveTableColumnDefinition<TData> {
+    let rawColumnDefinition: IResponsiveTableColumnDefinition<TData> = {} as IResponsiveTableColumnDefinition<TData>;
+    if (columnDefinition instanceof Function) {
+      rawColumnDefinition = columnDefinition(this.data[0], 0);
+    } else {
+      rawColumnDefinition = columnDefinition as IResponsiveTableColumnDefinition<TData>;
+    }
+    return rawColumnDefinition;
+  }
+
+  private onHeaderClickCallback(columnDefinition: ColumnDefinition<TData>): ((id: string) => void) | undefined {
+    const rawColumnDefinition = this.getRawColumnDefinition(columnDefinition);
+    if (rawColumnDefinition.interactivity && rawColumnDefinition.interactivity.onHeaderClick) {
+      return rawColumnDefinition.interactivity.onHeaderClick;
+    } else {
+      return undefined;
+    }
+  }
+
+  private getClickableHeaderClassName(
+    onHeaderClickCallback: ((id: string) => void) | undefined,
+    colDef: ColumnDefinition<TData>,
+  ): string {
+    const rawColumnDefinition = this.getRawColumnDefinition(colDef);
+    const clickableHeaderClassName = onHeaderClickCallback
+      ? rawColumnDefinition.interactivity!.className || styles.clickableHeader
+      : '';
+    return clickableHeaderClassName;
+  }
+
+  private get rowClickFunction(): (item: TData) => void {
+    if (this.props.onRowClick) {
+      return this.props.onRowClick;
+    } else {
+      return () => {};
+    }
+  }
+
+  private get rowClickStyle(): CSSProperties {
+    if (this.props.onRowClick) {
+      return { cursor: 'pointers' } as CSSProperties;
+    } else {
+      return {};
+    }
+  }
+
+  private get mobileView(): ReactNode {
+    return (
+      <div>
+        {this.data.map((row, rowIndex) => (
+          <div key={rowIndex} className={styles['card']} onClick={() => this.rowClickFunction(row)}>
+            <div className={styles['card-header']}> </div>
+            <div className={styles['card-body']}>
+              {this.props.columnDefinitions.map((columnDefinition, colIndex) => {
+                const colDef = this.getColumnDefinition(columnDefinition, rowIndex);
+                const onHeaderClickCallback = this.onHeaderClickCallback(colDef);
+                const clickableHeaderClassName = this.getClickableHeaderClassName(onHeaderClickCallback, colDef);
+                return (
+                  <div key={colIndex}>
+                    <p>
+                      <span
+                        className={`font-bold ${clickableHeaderClassName}`}
+                        onClick={
+                          onHeaderClickCallback ? () => onHeaderClickCallback(colDef.interactivity!.id) : undefined
+                        }
+                      >
+                        {colDef.displayLabel}:
+                      </span>{' '}
+                      {colDef.cellRenderer(row)}
+                    </p>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  private get largeScreenView(): ReactNode {
+    const useFixedHeaders = this.props.maxHeight ? true : false;
+
+    const fixedHeadersStyle = useFixedHeaders
+      ? ({ maxHeight: this.props.maxHeight, overflowY: 'auto' } as CSSProperties)
+      : {};
+
+    return (
+      <div style={fixedHeadersStyle}>
+        <table className={styles['responsiveTable']}>
+          <thead>
+            <tr>
+              {this.props.columnDefinitions.map((columnDefinition, colIndex) => {
+                const onHeaderClickCallback = this.onHeaderClickCallback(columnDefinition);
+                const clickableHeaderClassName = this.getClickableHeaderClassName(
+                  onHeaderClickCallback,
+                  columnDefinition,
+                );
+                return (
+                  <th
+                    key={colIndex}
+                    className={`${clickableHeaderClassName}`}
+                    onClick={
+                      onHeaderClickCallback
+                        ? () => onHeaderClickCallback(this.getColumnDefinition(columnDefinition, 0).interactivity!.id)
+                        : undefined
+                    }
+                  >
+                    {this.getColumnDefinition(columnDefinition, 0).displayLabel}
+                  </th>
+                );
+              })}
+            </tr>
+          </thead>
+          <tbody>
+            {this.data.map((row, rowIndex) => (
+              <tr key={rowIndex}>
+                {this.props.columnDefinitions.map((columnDefinition, colIndex) => (
+                  <td style={{ ...this.rowClickStyle }} onClick={() => this.rowClickFunction(row)} key={colIndex}>
+                    {this.getColumnDefinition(columnDefinition, rowIndex).cellRenderer(row)}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+
+  render() {
+    if (!this.hasData) {
+      return this.noDataComponent;
+    }
+    if (this.state.isMobile) {
+      return this.mobileView;
+    }
+
+    return this.largeScreenView;
+  }
+}
+
+export default ResponsiveTable;

package/src/index.tsx

@@ -1,5 +1,5 @@
-import IResponsiveTableColumnDefinition from "./Data/IResponsiveTableColumnDefinition";
-import ResponsiveTable from "./UI/ResponsiveTable";
-
-export {IResponsiveTableColumnDefinition}
-export default ResponsiveTable
+import IResponsiveTableColumnDefinition from "./Data/IResponsiveTableColumnDefinition";
+import ResponsiveTable from "./UI/ResponsiveTable";
+
+export {IResponsiveTableColumnDefinition}
+export default ResponsiveTable

package/src/typings.d.ts

@@ -1,14 +1,14 @@
-declare module '*.css' {
-  const content: { [className: string]: string };
-  export default content;
-}
-
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface SvgrComponent extends React.StatelessComponent<React.SVGAttributes<SVGElement>> {}
-
-declare module '*.svg' {
-  const svgUrl: string;
-  const svgComponent: SvgrComponent;
-  export default svgUrl;
-  export { svgComponent as ReactComponent };
-}
+declare module '*.css' {
+  const content: { [className: string]: string };
+  export default content;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface SvgrComponent extends React.StatelessComponent<React.SVGAttributes<SVGElement>> {}
+
+declare module '*.svg' {
+  const svgUrl: string;
+  const svgComponent: SvgrComponent;
+  export default svgUrl;
+  export { svgComponent as ReactComponent };
+}

package/tsconfig.json

@@ -1,22 +1,22 @@
-{
-  "compilerOptions": {
-    "outDir": "dist",
-    "module": "esnext",
-    "target": "es2015",
-    "lib": ["dom", "esnext"],
-    "moduleResolution": "node",
-    "jsx": "react",
-    "sourceMap": true,
-    "declaration": true,
-    "esModuleInterop": true,
-    "noImplicitReturns": true,
-    "noImplicitThis": true,
-    "noImplicitAny": true,
-    "strictNullChecks": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist"]
-}
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "module": "esnext",
+    "target": "es2015",
+    "lib": ["dom", "esnext"],
+    "moduleResolution": "node",
+    "jsx": "react",
+    "sourceMap": true,
+    "declaration": true,
+    "esModuleInterop": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

package/update-dependancies.sh

@@ -1,4 +1,4 @@
-#!/bin/bash
-
-# Update all dependencies
-npm update
+#!/bin/bash
+
+# Update all dependencies
+npm update

package/dist/UI/FormField.d.ts

@@ -1,22 +0,0 @@
-import { PureComponent, ReactNode } from 'react';
-import { IValidationError } from 'jattac.libs.web.validationhelper';
-import React from 'react';
-interface IFormFieldProps {
-    children: ReactNode;
-    label: ReactNode;
-    hint?: ReactNode;
-    id: string;
-    validationErrors?: IValidationError[];
-    optional?: boolean;
-}
-export default class FormField extends PureComponent<IFormFieldProps> {
-    private contentRef;
-    private get firstInputOfContentRef();
-    private get validationError();
-    private setKeyOfFirstInput;
-    componentDidMount(): void;
-    private get isRequired();
-    private get errorDisplay();
-    render(): React.JSX.Element;
-}
-export { type IFormFieldProps };