bootstrap table using reactdatagrid

frontend/search/components/ngo/HostOfferLookupTable.tsx

@@ -1,13 +1,152 @@
 import React from 'react'
+import '@inovua/reactdatagrid-community/index.css'
+
+import DataGrid from '@inovua/reactdatagrid-community'
+import DateFilter from '@inovua/reactdatagrid-community/DateFilter'
+import StringFilter from '@inovua/reactdatagrid-community/StringFilter'
+import BoolFilter from '@inovua/reactdatagrid-community/BoolFilter'
 import {GetOffersQuery} from "../../codegen/generates";
+import {TypeColumn, TypeFilterValue, TypeSingleFilterValue} from "@inovua/reactdatagrid-community/types";
+import NumberFilter from "@inovua/reactdatagrid-community/NumberFilter";
 
 type HostOfferLookupTableProps = {
   data: GetOffersQuery
 }
 
+const columnsRaw: { name: string; header: string; type: string }[] = [
+  {
+    "name": "beds",
+    "header": "beds",
+    "type": "number"
+  },
+  {
+    "name": "place_street",
+    "header": "place street",
+    "type": "string"
+  },
+  {
+    "name": "contact_email",
+    "header": "contact email",
+    "type": "object"
+  },
+  {
+    "name": "contact_name_full",
+    "header": "contact name full",
+    "type": "string"
+  },
+  {
+    "name": "time_duration_str",
+    "header": "time duration str",
+    "type": "string"
+  },
+  {
+    "name": "note",
+    "header": "note",
+    "type": "string"
+  },
+  {
+    "name": "place_street_number",
+    "header": "place street number",
+    "type": "string"
+  },
+  {
+    "name": "place_city",
+    "header": "place city",
+    "type": "string"
+  },
+  {
+    "name": "contact_phone",
+    "header": "contact phone",
+    "type": "object"
+  },
+  {
+    "name": "place_zip",
+    "header": "place zip",
+    "type": "string"
+  },
+  {
+    "name": "time_from_str",
+    "header": "time from str",
+    "type": "date"
+  },
+  {
+    "name": "place_country",
+    "header": "place country",
+    "type": "string"
+  },
+  {
+    "name": "animals_present",
+    "header": "animals present",
+    "type": "boolean"
+  },
+  {
+    "name": "languages",
+    "header": "languages",
+    "type": "object"
+  },
+  {
+    "name": "accessible",
+    "header": "accessible",
+    "type": "boolean"
+  },
+  {
+    "name": "animals_allowed",
+    "header": "animals allowed",
+    "type": "boolean"
+  }
+]
+
+const filterMappings = {
+  string: StringFilter,
+  boolean: BoolFilter,
+  number: NumberFilter,
+  date: DateFilter
+}
+const operatorsForType = {
+  number: 'gte',
+  string: 'contains',
+  date: 'inrange'}
+
+
+const columns: TypeColumn[] = columnsRaw
+  .map(c => ({
+    ...c,
+    filterEditor: filterMappings[c.type as 'string' | 'number' | 'boolean']
+  }))
+
+const defaultFilterValue: TypeFilterValue = columns
+  .filter(( {type} ) => type && ['string', 'number', 'date'].includes( type ))
+  .map(( {name, type} ) => {
+    return {
+      name,
+      type,
+      value: '',
+      operator: operatorsForType[type as 'string' | 'number' | 'date']
+    } as unknown as TypeSingleFilterValue
+  } )
+
+const makeColumnDefinition = (data: any ) => Object.keys(data)
+  .map(k => ({
+    name: k,
+    header: k.replace(/_/g, ' '),
+    type: typeof data[k]}))
+
 const HostOfferLookupTable = ({ data }: HostOfferLookupTableProps) => {
+  console.log({columns})
+  const dataSource = data.get_offers?.map((d, index) => ({...d, id: index})) || []
   return <>
-    { data.get_offers?.map(offer => (<div>{offer.contact_name_full}</div>)) }
+    <DataGrid
+      idProperty="id"
+      filterable
+      showColumnMenuFilterOptions={true}
+      showFilteringMenuItems={true}
+      defaultFilterValue={defaultFilterValue}
+      rowIndexColumn
+      enableSelection
+      columns={columns}
+      dataSource={dataSource}
+      style={{minHeight: '1000px'}}
+    />
   </>
 }
 

frontend/search/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@emotion/react": "^11.8.1",
     "@emotion/styled": "^11.8.1",
+    "@inovua/reactdatagrid-community": "^4.16.2",
     "@jsonforms/core": "3.0.0-alpha.3",
     "@jsonforms/material-renderers": "3.0.0-alpha.3",
     "@jsonforms/react": "3.0.0-alpha.3",

frontend/search/yarn.lock

@@ -1008,6 +1008,21 @@
   resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.5.tgz#b32366c89b43c6f8cefbdefac778b9c828e3ba8c"
   integrity sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==
 
+"@inovua/reactdatagrid-community@^4.16.2":
+  version "4.16.2"
+  resolved "https://registry.yarnpkg.com/@inovua/reactdatagrid-community/-/reactdatagrid-community-4.16.2.tgz#af957645c92140c6fbeeddc00d9d6136239d7321"
+  integrity sha512-ipQJOtA9rz9Y0WdxkQg8GDxIdNIudTwSwM73O5tW812f5Se31V6wArxsCg5pGH4nP/MnTJcbkNWN84XztPul/A==
+  dependencies:
+    "@types/lodash.debounce" "^4.0.6"
+    "@types/lodash.throttle" "^4.1.6"
+    eventemitter3 "^4.0.7"
+    fast-deep-equal "^3.1.1"
+    lodash.debounce "^4.0.8"
+    lodash.throttle "^4.1.1"
+    object-assign "^4.1.1"
+    resize-observer-polyfill "^1.5.1"
+    shallowequal "0.2.2"
+
 "@jridgewell/resolve-uri@^3.0.3":
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz#68eb521368db76d040a6315cdb24bf2483037b9c"
@@ -1333,7 +1348,21 @@
   dependencies:
     "@types/node" "*"
 
-"@types/lodash@^4.14.179":
+"@types/lodash.debounce@^4.0.6":
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/@types/lodash.debounce/-/lodash.debounce-4.0.6.tgz#c5a2326cd3efc46566c47e4c0aa248dc0ee57d60"
+  integrity sha512-4WTmnnhCfDvvuLMaF3KV4Qfki93KebocUF45msxhYyjMttZDQYzHkO639ohhk8+oco2cluAFL3t5+Jn4mleylQ==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash.throttle@^4.1.6":
+  version "4.1.6"
+  resolved "https://registry.yarnpkg.com/@types/lodash.throttle/-/lodash.throttle-4.1.6.tgz#f5ba2c22244ee42ff6c2c49e614401a870c1009c"
+  integrity sha512-/UIH96i/sIRYGC60NoY72jGkCJtFN5KVPhEMMMTjol65effe1gPn0tycJqV5tlSwMTzX8FqzB5yAj0rfGHTPNg==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*", "@types/lodash@^4.14.179":
   version "4.14.179"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.179.tgz#490ec3288088c91295780237d2497a3aa9dfb5c5"
   integrity sha512-uwc1x90yCKqGcIOAT6DwOSuxnrAbpkdPsUOZtwrXb4D/6wZs+6qG7QnIawDuZWg0sWpxl+ltIKCaLoMlna678w==
@@ -2601,6 +2630,11 @@ eventemitter3@^3.1.0:
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.2.tgz#2d3d48f9c346698fce83a85d7d664e98535df6e7"
   integrity sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==
 
+eventemitter3@^4.0.7:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
+  integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
+
 external-editor@^3.0.3:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.1.0.tgz#cb03f740befae03ea4d283caed2741a83f335495"
@@ -3682,6 +3716,16 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash._getnative@^3.0.0:
+  version "3.9.1"
+  resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
+  integrity sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=
+
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
+
 lodash.get@^4:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
@@ -3692,6 +3736,16 @@ lodash.includes@^4.3.0:
   resolved "https://registry.yarnpkg.com/lodash.includes/-/lodash.includes-4.3.0.tgz#60bb98a87cb923c68ca1e51325483314849f553f"
   integrity sha1-YLuYqHy5I8aMoeUTJUgzFISfVT8=
 
+lodash.isarguments@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
+  integrity sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo=
+
+lodash.isarray@^3.0.0:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
+  integrity sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=
+
 lodash.isboolean@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz#6c2e171db2a257cd96802fd43b01b20d5f5870f6"
@@ -3717,6 +3771,15 @@ lodash.isstring@^4.0.1:
   resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451"
   integrity sha1-1SfftUVuynzJu5XV2ur4i6VKVFE=
 
+lodash.keys@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
+  integrity sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=
+  dependencies:
+    lodash._getnative "^3.0.0"
+    lodash.isarguments "^3.0.0"
+    lodash.isarray "^3.0.0"
+
 lodash.merge@^4.6.2:
   version "4.6.2"
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
@@ -3727,6 +3790,11 @@ lodash.once@^4.0.0:
   resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
   integrity sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=
 
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
+
 lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@~4.17.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
@@ -4533,6 +4601,11 @@ require-main-filename@^2.0.0:
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
   integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
 
+resize-observer-polyfill@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-from@5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
@@ -4690,6 +4763,13 @@ setimmediate@^1.0.5:
   resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
   integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
 
+shallowequal@0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-0.2.2.tgz#1e32fd5bcab6ad688a4812cb0cc04efc75c7014e"
+  integrity sha1-HjL9W8q2rWiKSBLLDMBO/HXHAU4=
+  dependencies:
+    lodash.keys "^3.1.2"
+
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"