jattac.libs.web.responsive-table 0.0.1

package/.eslintrc.json

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

package/.prettierrc

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

package/LICENSE

@@ -0,0 +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.

package/README.md

@@ -0,0 +1,47 @@
+# FormField React Component
+
+FormField is a powerful React component designed to streamline the creation of form fields with built-in support for validation, labels, hints, and optional indicators.
+
+## Installation
+
+```js
+npm install jattac.libs.web.form-field
+```
+
+## Example
+
+```js
+import React from 'react';
+import FormField from 'jattac.libs.web.form-field';
+
+const MyForm = () => {
+  const validationErrors = [
+    // Your validation errors here
+  ];
+
+  return (
+    <form>
+      <FormField
+        label="Email"
+        id="email"
+        validationErrors={[{ key: 'email', errors: ['Invalid email address'] }]}
+        optional={true}
+        hint="We'll never share your email with anyone else."
+      >
+        <input type="email" />
+      </FormField>
+
+      {/* Add more FormField components for other form elements */}
+    </form>
+  );
+};
+```
+
+## Props
+
+- **label** (required): The label for the form field.
+- **id** (required): A unique identifier for the form field.
+- **children** (required): The content of the form field, typically an input element.
+- **validationErrors**: An array of validation errors for the form field.
+- **optional**: A boolean indicating whether the field is optional. Defaults to false.
+- **hint**: Additional information or guidance for the form field.

package/dist/Data/IResponsiveTableColumnDefinition.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export default interface IResponsiveTableColumnDefinition<TData> {
+    displayLabel: ReactNode;
+    dataKey?: keyof TData;
+    cellRenderer: (data: TData) => ReactNode;
+}

package/dist/UI/FormField.d.ts

@@ -0,0 +1,22 @@
+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 };

package/dist/UI/ResponsiveTable.d.ts

@@ -0,0 +1,19 @@
+import React, { Component } from "react";
+import IResponsiveTableColumnDefinition from "../Data/IResponsiveTableColumnDefinition";
+type ColumnDefinition<TData> = IResponsiveTableColumnDefinition<TData> | ((data: TData, rowIndex?: number) => IResponsiveTableColumnDefinition<TData>);
+interface IProps<TData> {
+    columnDefinitions: ColumnDefinition<TData>[];
+    data: TData[];
+}
+interface IState {
+    isMobile: boolean;
+}
+declare class ResponsiveTable<TData> extends Component<IProps<TData>, IState> {
+    constructor(props: IProps<TData>);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    handleResize: () => void;
+    private getColumnDefinition;
+    render(): React.JSX.Element;
+}
+export default ResponsiveTable;

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,87 @@
+'use strict';
+
+var React = require('react');
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+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/* Apply styles to the table with the specific class 'custom-table' */\n.ResponsiveTable-module_responsiveTable__4y-Od {\n  width: 100%;\n  border-collapse: collapse;\n  margin-bottom: 20px;\n}\n\n.ResponsiveTable-module_responsiveTable__4y-Od thead {\n  position: sticky;\n}\n\n/* Style the table header */\n.ResponsiveTable-module_responsiveTable__4y-Od th,\n.ResponsiveTable-module_responsiveTable__4y-Od td {\n  padding: 12px;\n  text-align: left;\n}\n\n.ResponsiveTable-module_responsiveTable__4y-Od th {\n  background-color: #f2f2f2;\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_tableContainer__VjWjH {\n  overflow-x: auto;\n  margin-bottom: 20px;\n}\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","tableContainer":"ResponsiveTable-module_tableContainer__VjWjH"};
+styleInject(css_248z);
+
+// Class component
+class ResponsiveTable extends React.Component {
+    constructor(props) {
+        super(props);
+        this.handleResize = () => {
+            this.setState(() => {
+                return { isMobile: window.innerWidth <= 600 };
+            });
+        };
+        this.state = {
+            isMobile: false,
+        };
+    }
+    componentDidMount() {
+        this.setState(() => {
+            return { isMobile: window.innerWidth <= 600 };
+        });
+        window.addEventListener("resize", this.handleResize);
+    }
+    componentWillUnmount() {
+        window.removeEventListener("resize", this.handleResize);
+    }
+    getColumnDefinition(columnDefinition, rowIndex) {
+        return columnDefinition instanceof Function
+            ? columnDefinition(this.props.data[0], rowIndex)
+            : columnDefinition;
+    }
+    render() {
+        if (this.state.isMobile) {
+            return (React.createElement("div", null, this.props.data.map((row, rowIndex) => (React.createElement("div", { key: rowIndex, className: styles["card"] },
+                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);
+                    return (React.createElement("div", { key: colIndex },
+                        React.createElement("p", null,
+                            React.createElement("span", { className: "font-bold" },
+                                colDef.displayLabel,
+                                ":"),
+                            " ",
+                            colDef.cellRenderer(row))));
+                })))))));
+        }
+        return (React.createElement("div", { className: styles.tableContainer },
+            React.createElement("table", { className: styles["responsiveTable"] },
+                React.createElement("thead", null,
+                    React.createElement("tr", null, this.props.columnDefinitions.map((columnDefinition, colIndex) => (React.createElement("th", { key: colIndex }, this.getColumnDefinition(columnDefinition, 0).displayLabel))))),
+                React.createElement("tbody", null, this.props.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)))))))))));
+    }
+}
+
+module.exports = ResponsiveTable;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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":";;;;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;QAkBf,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;QArBA,IAAI,CAAC,KAAK,GAAG;AACX,YAAA,QAAQ,EAAE,KAAK;SAChB,CAAC;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;QAEhB,OAAO,gBAAgB,YAAY,QAAQ;AACzC,cAAE,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC;cAC9C,gBAAgB,CAAC;KACtB;IAED,MAAM,GAAA;AACJ,QAAA,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;AACvB,YAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EACG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,MACjC,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC,MAAM,CAAC,EAAA;AAC3C,gBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,EAAS,EAAA,GAAA,CAAA;gBAC9C,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,EAAA,EAChC,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,GAAG,CAC/B,CAAC,gBAAgB,EAAE,QAAQ,KAAI;oBAC7B,MAAM,MAAM,GAAG,IAAI,CAAC,mBAAmB,CACrC,gBAAgB,EAChB,QAAQ,CACT,CAAC;AACF,oBAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,QAAQ,EAAA;AAChB,wBAAA,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA;4BACE,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,WAAW,EAAA;AACxB,gCAAA,MAAM,CAAC,YAAY;AACf,gCAAA,GAAA,CAAA;4BAAC,GAAG;4BACV,MAAM,CAAC,YAAY,CAAC,GAAG,CAAC,CACvB,CACA,EACN;AACJ,iBAAC,CACF,CACG,CACF,CACP,CAAC,CACE,EACN;SACH;AAED,QAAA,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,cAAc,EAAA;AACnC,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,CAC/B,CAAC,gBAAgB,EAAE,QAAQ,MACzB,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,GAAG,EAAE,QAAQ,EACd,EAAA,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,YAAY,CACxD,CACN,CACF,CACE,CACC;AACR,gBAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EACG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,MACjC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,GAAG,EAAE,QAAQ,EAAA,EACd,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,GAAG,CAC/B,CAAC,gBAAgB,EAAE,QAAQ,MACzB,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,GAAG,EAAE,QAAQ,EAAA,EACd,IAAI,CAAC,mBAAmB,CACvB,gBAAgB,EAChB,QAAQ,CACT,CAAC,YAAY,CAAC,GAAG,CAAC,CAChB,CACN,CACF,CACE,CACN,CAAC,CACI,CACF,CACJ,EACN;KACH;AACF;;;;","x_google_ignoreList":[0]}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "jattac.libs.web.responsive-table",
+  "version": "0.0.1",
+  "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

@@ -0,0 +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,
+    }),
+  ],
+};

package/src/Data/IResponsiveTableColumnDefinition.tsx

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+
+export default interface IResponsiveTableColumnDefinition<TData> {
+  displayLabel: ReactNode;
+  dataKey?: keyof TData;
+  cellRenderer: (data: TData) => ReactNode;
+}

package/src/Styles/ResponsiveTable.module.css

@@ -0,0 +1,54 @@
+.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;
+}
+
+/* Apply styles to the table with the specific class 'custom-table' */
+.responsiveTable {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 20px;
+}
+
+.responsiveTable thead {
+  position: sticky;
+}
+
+/* Style the table header */
+.responsiveTable th,
+.responsiveTable td {
+  padding: 12px;
+  text-align: left;
+}
+
+.responsiveTable th {
+  background-color: #f2f2f2;
+}
+
+/* Alternate row colors */
+.responsiveTable tr:nth-child(even) {
+  background-color: #f9f9f9;
+}
+
+/* Change background color on hover */
+.responsiveTable tr:hover {
+  background-color: #d9edf7;
+}
+
+.tableContainer {
+  overflow-x: auto;
+  margin-bottom: 20px;
+}

package/src/UI/ResponsiveTable.tsx

@@ -0,0 +1,125 @@
+import React, { Component } 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[];
+}
+
+interface IState {
+  isMobile: boolean;
+}
+
+// Class component
+class ResponsiveTable<TData> extends Component<IProps<TData>, IState> {
+  constructor(props: IProps<TData>) {
+    super(props);
+    this.state = {
+      isMobile: false,
+    };
+  }
+
+  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> {
+    return columnDefinition instanceof Function
+      ? columnDefinition(this.props.data[0], rowIndex)
+      : columnDefinition;
+  }
+
+  render() {
+    if (this.state.isMobile) {
+      return (
+        <div>
+          {this.props.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
+                    );
+                    return (
+                      <div key={colIndex}>
+                        <p>
+                          <span className="font-bold">
+                            {colDef.displayLabel}:
+                          </span>{" "}
+                          {colDef.cellRenderer(row)}
+                        </p>
+                      </div>
+                    );
+                  }
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      );
+    }
+
+    return (
+      <div className={styles.tableContainer}>
+        <table className={styles["responsiveTable"]}>
+          <thead>
+            <tr>
+              {this.props.columnDefinitions.map(
+                (columnDefinition, colIndex) => (
+                  <th key={colIndex}>
+                    {this.getColumnDefinition(columnDefinition, 0).displayLabel}
+                  </th>
+                )
+              )}
+            </tr>
+          </thead>
+          <tbody>
+            {this.props.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>
+    );
+  }
+}
+
+export default ResponsiveTable;

package/src/index.tsx

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

package/src/typings.d.ts

@@ -0,0 +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 };
+}

package/tsconfig.json

@@ -0,0 +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"]
+}

package/update-dependancies.sh

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