feat: add further implementations

Author: Stefano Casasola

.eslintrc.js

@@ -8,6 +8,7 @@ module.exports = {
     'airbnb',
     'plugin:@typescript-eslint/recommended',
     'prettier',
+    'prettier/react',
     'prettier/@typescript-eslint',
     'plugin:prettier/recommended',
   ],

.vscode/settings.json

@@ -1,7 +1,13 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
+  "eslint.enable": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },
-  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"]
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ],
 }

package.json

@@ -76,6 +76,7 @@
     "@types/chart.js": "~2.9.7",
     "@types/enzyme": "~3.10.3",
     "@types/jest": "~25.1.0",
+    "@types/lodash": "^4.14.149",
     "@types/node": "~13.7.0",
     "@types/react": "~16.9.17",
     "@types/react-dom": "~16.9.1",
@@ -140,6 +141,7 @@
     "chart.js": "~2.9.3",
     "date-fns": "^2.9.0",
     "formik": "~2.1.0",
+    "lodash": "^4.17.15",
     "moment": "~2.24.0",
     "react-bootstrap-typeahead": "^3.4.7",
     "react-datepicker": "~2.12.0",

src/components/Table/Table.tsx

@@ -1,20 +1,25 @@
 import React from 'react'
 // import styled from 'styled-components'
-import { useTable, Column, Row } from 'react-table'
+import { useTable, Row } from 'react-table'
+import { generateColumns } from './helper'
+// import { TableProperties } from './interfaces'
 
 interface MyProps {
-  columns: Column[]
+  tableProperties: any
   data: any
+  // columns: any
 }
 
-function ReactTable({ columns, data }: MyProps) {
-  // Use the state and functions returned from useTable to build your UI
+function Table({ data, tableProperties }: MyProps) {
+  console.log(tableProperties)
+  // convertire con generateColumns
+  const columns = generateColumns(tableProperties.columns)
+  console.log('COLUMNS', columns)
   const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({
     columns,
     data,
   })
 
-  // Render the UI for your table
   return (
     <table {...getTableProps()}>
       <thead>
@@ -28,6 +33,7 @@ function ReactTable({ columns, data }: MyProps) {
       </thead>
       <tbody {...getTableBodyProps()}>
         {rows.map((row: Row) => {
+          console.log(row)
           prepareRow(row)
           return (
             <tr {...row.getRowProps()}>
@@ -42,40 +48,4 @@ function ReactTable({ columns, data }: MyProps) {
   )
 }
 
-function Table({ data }: any) {
-  const columns = React.useMemo(
-    () => [
-      {
-        Header: 'Name',
-        columns: [
-          {
-            Header: 'First Name',
-            accessor: 'firstName',
-          },
-          {
-            Header: 'Last Name',
-            accessor: 'lastName',
-          },
-        ],
-      },
-      {
-        Header: 'Info',
-        columns: [
-          {
-            Header: 'Age',
-            accessor: 'age',
-          },
-          {
-            Header: 'Status',
-            accessor: 'status',
-          },
-        ],
-      },
-    ],
-    [],
-  )
-
-  return <ReactTable columns={columns} data={data} />
-}
-
 export { Table }