sdnr/wt-odlux/odlux/framework/src/views/test.tsx

   1 /**
   2  * ============LICENSE_START========================================================================
   3  * ONAP : ccsdk feature sdnr wt odlux
   4  * =================================================================================================
   5  * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
   6  * =================================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
   8  * in compliance with the License. You may obtain a copy of the License at
   9  *
  10  * http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  * Unless required by applicable law or agreed to in writing, software distributed under the License
  13  * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  14  * or implied. See the License for the specific language governing permissions and limitations under
  15  * the License.
  16  * ============LICENSE_END==========================================================================
  17  */
  18 import * as React from 'react';
  19
  20 import { withComponents, WithComponents } from '../utilities/withComponents';
  21 import { Theme } from '@mui/material/styles';
  22
  23 import { WithStyles } from '@mui/styles';
  24 import withStyles from '@mui/styles/withStyles';
  25 import createStyles from '@mui/styles/createStyles';
  26
  27 import Accordion from '@mui/material/Accordion';
  28 import AccordionSummary from '@mui/material/AccordionSummary';
  29 import AccordionDetails from '@mui/material/AccordionDetails';
  30 import Typography from '@mui/material/Typography';
  31 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
  32
  33 import { MaterialTable, MaterialTableCtorType, ColumnType } from '../components/material-table';
  34 import { TreeView, TreeItem, TreeViewCtorType } from '../components/material-ui/treeView';
  35 import { SvgIconProps } from '@mui/material/SvgIcon';
  36
  37 const styles = (theme: Theme) => createStyles({
  38   root: {
  39     width: '100%',
  40   },
  41   heading: {
  42     fontSize: theme.typography.pxToRem(15),
  43     fontWeight: theme.typography.fontWeightRegular,
  44   },
  45 });
  46
  47 class SampleData {
  48   _id: string;
  49   index: number;
  50   guid: string;
  51   isActive: boolean;
  52   balance: string;
  53   age: number;
  54   firstName: string;
  55   lastName: string;
  56   company: string;
  57   email: string;
  58   registered: string;
  59   latitude: string;
  60   longitude: string;
  61 }
  62
  63 // https://next.json-generator.com/NJ5Bv-v1I
  64 const tableData: SampleData[] = [
  65   {
  66     "_id": "5c0e18399919a5c43636fdf2",
  67     "index": 0,
  68     "guid": "48728d8e-8300-4d0f-b967-e2166d023066",
  69     "isActive": false,
  70     "balance": "$3,480.16",
  71     "age": 33,
  72     "firstName": "Brooke",
  73     "lastName": "Morris",
  74     "company": "ZORROMOP",
  75     "email": "brooke.morris@zorromop.de",
  76     "registered": "Sunday, February 11, 2018 2:55 PM",
  77     "latitude": "-69.109379",
  78     "longitude": "113.735639"
  79   },
  80   {
  81     "_id": "5c0e1839b61e3eeaf164259d",
  82     "index": 1,
  83     "guid": "28723570-1507-422e-b78c-924402371fb1",
  84     "isActive": false,
  85     "balance": "$1,305.01",
  86     "age": 28,
  87     "firstName": "Jolene",
  88     "lastName": "Everett",
  89     "company": "ZENCO",
  90     "email": "jolene.everett@zenco.de",
  91     "registered": "Saturday, December 8, 2018 5:17 PM",
  92     "latitude": "13.683025",
  93     "longitude": "85.101421"
  94   },
  95   {
  96     "_id": "5c0e1839e81f57913c5d2147",
  97     "index": 2,
  98     "guid": "e914dc5d-91a3-405d-ac48-aee6f0cd391a",
  99     "isActive": true,
 100     "balance": "$1,418.37",
 101     "age": 28,
 102     "firstName": "Elva",
 103     "lastName": "Travis",
 104     "company": "ZYTREK",
 105     "email": "elva.travis@zytrek.de",
 106     "registered": "Thursday, March 10, 2016 5:13 PM",
 107     "latitude": "53.75862",
 108     "longitude": "-67.784532"
 109   },
 110   {
 111     "_id": "5c0e1839bc9224a2b54c0f69",
 112     "index": 3,
 113     "guid": "88cbdce0-0bcc-4d16-83c3-3017690503c4",
 114     "isActive": true,
 115     "balance": "$1,709.60",
 116     "age": 21,
 117     "firstName": "Ellis",
 118     "lastName": "Mcpherson",
 119     "company": "DIGIPRINT",
 120     "email": "ellis.mcpherson@digiprint.de",
 121     "registered": "Sunday, December 21, 2014 5:25 AM",
 122     "latitude": "46.486149",
 123     "longitude": "-66.657067"
 124   },
 125   {
 126     "_id": "5c0e183951b51475db0f35d1",
 127     "index": 4,
 128     "guid": "c887ac86-7ba1-4eb6-9b47-e88a1bcb3713",
 129     "isActive": true,
 130     "balance": "$3,578.54",
 131     "age": 25,
 132     "firstName": "Marcia",
 133     "lastName": "Rocha",
 134     "company": "ZAPPIX",
 135     "email": "marcia.rocha@zappix.de",
 136     "registered": "Tuesday, June 16, 2015 11:21 AM",
 137     "latitude": "-39.905461",
 138     "longitude": "150.873895"
 139   },
 140   {
 141     "_id": "5c0e18398c5be8d362a578eb",
 142     "index": 5,
 143     "guid": "0d160697-9b5b-4941-9b5f-4ba3a7f97b49",
 144     "isActive": true,
 145     "balance": "$414.98",
 146     "age": 32,
 147     "firstName": "Lavonne",
 148     "lastName": "Wilkins",
 149     "company": "FARMAGE",
 150     "email": "lavonne.wilkins@farmage.de",
 151     "registered": "Monday, February 1, 2016 5:27 PM",
 152     "latitude": "-16.839256",
 153     "longitude": "-105.824746"
 154   },
 155   {
 156     "_id": "5c0e18399804086c836d7d56",
 157     "index": 6,
 158     "guid": "715a5f63-35b6-4903-a46e-ba584b005e64",
 159     "isActive": false,
 160     "balance": "$1,755.78",
 161     "age": 32,
 162     "firstName": "Wise",
 163     "lastName": "Berg",
 164     "company": "ZIZZLE",
 165     "email": "wise.berg@zizzle.de",
 166     "registered": "Saturday, March 28, 2015 1:40 AM",
 167     "latitude": "51.15269",
 168     "longitude": "65.795093"
 169   },
 170   {
 171     "_id": "5c0e18399c4d13538bcaf8c9",
 172     "index": 7,
 173     "guid": "7ee50269-23e8-499e-9a16-09f393d7600c",
 174     "isActive": false,
 175     "balance": "$342.52",
 176     "age": 27,
 177     "firstName": "Isabel",
 178     "lastName": "Battle",
 179     "company": "EZENTIA",
 180     "email": "isabel.battle@ezentia.de",
 181     "registered": "Thursday, June 7, 2018 12:16 AM",
 182     "latitude": "-53.318152",
 183     "longitude": "-153.516824"
 184   },
 185   {
 186     "_id": "5c0e18398d7fb9a4eceeffa2",
 187     "index": 8,
 188     "guid": "1e30c9ac-2297-4f16-83e6-9559b1ebe92c",
 189     "isActive": true,
 190     "balance": "$3,184.71",
 191     "age": 36,
 192     "firstName": "Lenora",
 193     "lastName": "Crawford",
 194     "company": "KIDGREASE",
 195     "email": "lenora.crawford@kidgrease.de",
 196     "registered": "Saturday, January 7, 2017 6:17 PM",
 197     "latitude": "-72.431496",
 198     "longitude": "9.413359"
 199   },
 200   {
 201     "_id": "5c0e18395837069ab6b79d00",
 202     "index": 9,
 203     "guid": "d04a02ed-5899-4729-a7e5-2d85b5d03973",
 204     "isActive": true,
 205     "balance": "$1,553.28",
 206     "age": 35,
 207     "firstName": "Sasha",
 208     "lastName": "Bridges",
 209     "company": "IDEALIS",
 210     "email": "sasha.bridges@idealis.de",
 211     "registered": "Sunday, February 4, 2018 7:02 PM",
 212     "latitude": "8.095691",
 213     "longitude": "-105.758195"
 214   },
 215   {
 216     "_id": "5c0e18390be19bf65acad180",
 217     "index": 10,
 218     "guid": "3a1a77e6-ef15-4598-8274-c68ac3bb922a",
 219     "isActive": false,
 220     "balance": "$3,587.96",
 221     "age": 20,
 222     "firstName": "Wilkins",
 223     "lastName": "Beasley",
 224     "company": "DIGIFAD",
 225     "email": "wilkins.beasley@digifad.de",
 226     "registered": "Monday, March 5, 2018 1:27 PM",
 227     "latitude": "-88.062704",
 228     "longitude": "149.95661"
 229   },
 230   {
 231     "_id": "5c0e1839ffbbad5c9954e49f",
 232     "index": 11,
 233     "guid": "97a56950-a08c-4e00-8002-ba2d5de4da5d",
 234     "isActive": false,
 235     "balance": "$1,997.80",
 236     "age": 31,
 237     "firstName": "Sullivan",
 238     "lastName": "Mcclain",
 239     "company": "EARTHMARK",
 240     "email": "sullivan.mcclain@earthmark.de",
 241     "registered": "Saturday, October 27, 2018 2:51 PM",
 242     "latitude": "-81.86349",
 243     "longitude": "-79.596991"
 244   },
 245   {
 246     "_id": "5c0e183914bd464d55e7325f",
 247     "index": 12,
 248     "guid": "294f6485-d0f9-4b25-b998-325ae90fa769",
 249     "isActive": true,
 250     "balance": "$1,405.46",
 251     "age": 24,
 252     "firstName": "Herminia",
 253     "lastName": "Fischer",
 254     "company": "ECOLIGHT",
 255     "email": "herminia.fischer@ecolight.de",
 256     "registered": "Thursday, January 16, 2014 4:48 PM",
 257     "latitude": "48.224363",
 258     "longitude": "11.08339"
 259   },
 260   {
 261     "_id": "5c0e183968ec2556d8f6566c",
 262     "index": 13,
 263     "guid": "16edfea4-7b37-4e54-868c-c369b413dd78",
 264     "isActive": false,
 265     "balance": "$3,440.67",
 266     "age": 39,
 267     "firstName": "Blanchard",
 268     "lastName": "Blackwell",
 269     "company": "GEOFORMA",
 270     "email": "blanchard.blackwell@geoforma.de",
 271     "registered": "Wednesday, July 30, 2014 4:07 AM",
 272     "latitude": "-52.169297",
 273     "longitude": "10.415879"
 274   },
 275   {
 276     "_id": "5c0e183939a0fc955f2d94da",
 277     "index": 14,
 278     "guid": "4ed454e2-dde1-4ab5-a434-4a82205ced2d",
 279     "isActive": true,
 280     "balance": "$1,883.27",
 281     "age": 35,
 282     "firstName": "Gayle",
 283     "lastName": "Little",
 284     "company": "AQUAZURE",
 285     "email": "gayle.little@aquazure.de",
 286     "registered": "Tuesday, December 12, 2017 5:08 PM",
 287     "latitude": "-58.473236",
 288     "longitude": "38.022269"
 289   },
 290   {
 291     "_id": "5c0e1839099f9221ccd968ac",
 292     "index": 15,
 293     "guid": "1d052fd4-7c54-45fb-b0db-7de1acc4262a",
 294     "isActive": false,
 295     "balance": "$2,601.94",
 296     "age": 31,
 297     "firstName": "Jocelyn",
 298     "lastName": "Richards",
 299     "company": "GINK",
 300     "email": "jocelyn.richards@gink.de",
 301     "registered": "Sunday, October 30, 2016 9:12 PM",
 302     "latitude": "-43.489676",
 303     "longitude": "2.557869"
 304   },
 305   {
 306     "_id": "5c0e183970f320f377321c3f",
 307     "index": 16,
 308     "guid": "45bca125-8831-48c3-b22b-29ae318e7096",
 309     "isActive": false,
 310     "balance": "$3,441.74",
 311     "age": 34,
 312     "firstName": "Berta",
 313     "lastName": "Valentine",
 314     "company": "ISOSPHERE",
 315     "email": "berta.valentine@isosphere.de",
 316     "registered": "Sunday, March 19, 2017 8:22 PM",
 317     "latitude": "-40.188039",
 318     "longitude": "-170.085092"
 319   },
 320   {
 321     "_id": "5c0e1839ab960bb0a9f4f392",
 322     "index": 17,
 323     "guid": "d7b5122a-94c9-423c-b799-1a8f8314b152",
 324     "isActive": false,
 325     "balance": "$56.39",
 326     "age": 21,
 327     "firstName": "Russell",
 328     "lastName": "Powers",
 329     "company": "TETAK",
 330     "email": "russell.powers@tetak.de",
 331     "registered": "Thursday, November 3, 2016 9:23 PM",
 332     "latitude": "-51.610519",
 333     "longitude": "-133.280363"
 334   },
 335   {
 336     "_id": "5c0e183998f0195404b9aaa4",
 337     "index": 18,
 338     "guid": "a043ba97-ea7e-48ce-bb15-18ee09fb393d",
 339     "isActive": true,
 340     "balance": "$1,503.57",
 341     "age": 37,
 342     "firstName": "Rosario",
 343     "lastName": "Brennan",
 344     "company": "VIAGRAND",
 345     "email": "rosario.brennan@viagrand.de",
 346     "registered": "Saturday, March 17, 2018 10:32 PM",
 347     "latitude": "-43.773365",
 348     "longitude": "47.58682"
 349   },
 350   {
 351     "_id": "5c0e1839bcb2a5cc567129ac",
 352     "index": 19,
 353     "guid": "de6d5d36-201e-4f87-9976-ed31f3160e42",
 354     "isActive": false,
 355     "balance": "$1,160.18",
 356     "age": 29,
 357     "firstName": "Anita",
 358     "lastName": "Hodges",
 359     "company": "TUBALUM",
 360     "email": "anita.hodges@tubalum.de",
 361     "registered": "Sunday, November 26, 2017 11:54 AM",
 362     "latitude": "7.080244",
 363     "longitude": "-9.970715"
 364   },
 365   {
 366     "_id": "5c0e18394b37e854a1ef371c",
 367     "index": 20,
 368     "guid": "9407113b-896a-4699-ac1b-363bc3c6f8ad",
 369     "isActive": false,
 370     "balance": "$34.81",
 371     "age": 31,
 372     "firstName": "Barrett",
 373     "lastName": "Weaver",
 374     "company": "DUOFLEX",
 375     "email": "barrett.weaver@duoflex.de",
 376     "registered": "Tuesday, November 3, 2015 9:31 AM",
 377     "latitude": "40.30558",
 378     "longitude": "-69.986664"
 379   },
 380   {
 381     "_id": "5c0e1839b5658f90e16a86e0",
 382     "index": 21,
 383     "guid": "81f894c4-c931-422d-a30e-593824d95bf9",
 384     "isActive": true,
 385     "balance": "$2,808.63",
 386     "age": 26,
 387     "firstName": "Baxter",
 388     "lastName": "Chase",
 389     "company": "BUNGA",
 390     "email": "baxter.chase@bunga.de",
 391     "registered": "Friday, October 28, 2016 7:10 AM",
 392     "latitude": "-49.05652",
 393     "longitude": "63.123535"
 394   },
 395   {
 396     "_id": "5c0e1839cb9462c9ecbb59af",
 397     "index": 22,
 398     "guid": "92e67862-4fdf-43af-a3ef-ef3edb8d6706",
 399     "isActive": true,
 400     "balance": "$3,552.71",
 401     "age": 29,
 402     "firstName": "Olga",
 403     "lastName": "Kemp",
 404     "company": "OHMNET",
 405     "email": "olga.kemp@ohmnet.de",
 406     "registered": "Saturday, March 26, 2016 11:51 AM",
 407     "latitude": "-17.450481",
 408     "longitude": "-13.945794"
 409   },
 410   {
 411     "_id": "5c0e18396f999c2b8ac731a9",
 412     "index": 23,
 413     "guid": "a682eaae-34f0-4973-b8a0-30972de0732b",
 414     "isActive": false,
 415     "balance": "$1,999.20",
 416     "age": 21,
 417     "firstName": "Ebony",
 418     "lastName": "Le",
 419     "company": "MULTRON",
 420     "email": "ebony.le@multron.de",
 421     "registered": "Friday, March 27, 2015 9:23 AM",
 422     "latitude": "-70.380014",
 423     "longitude": "173.20685"
 424   },
 425   {
 426     "_id": "5c0e18391cfb28263eb42db7",
 427     "index": 24,
 428     "guid": "f1cddb5f-0b89-453e-b0c9-8193a56cc610",
 429     "isActive": true,
 430     "balance": "$2,950.91",
 431     "age": 30,
 432     "firstName": "Norman",
 433     "lastName": "Price",
 434     "company": "COMVEX",
 435     "email": "norman.price@comvex.de",
 436     "registered": "Tuesday, August 21, 2018 11:17 PM",
 437     "latitude": "86.501469",
 438     "longitude": "159.545352"
 439   },
 440   {
 441     "_id": "5c0e18394a6be11128c7e5ca",
 442     "index": 25,
 443     "guid": "dadb738a-40fd-45b6-abac-023a803d95c2",
 444     "isActive": true,
 445     "balance": "$2,767.09",
 446     "age": 25,
 447     "firstName": "Sara",
 448     "lastName": "Ruiz",
 449     "company": "AUSTECH",
 450     "email": "sara.ruiz@austech.de",
 451     "registered": "Wednesday, June 20, 2018 6:34 AM",
 452     "latitude": "86.784904",
 453     "longitude": "-120.331325"
 454   },
 455   {
 456     "_id": "5c0e183974631549eda97cea",
 457     "index": 26,
 458     "guid": "b5c43ee5-14ed-4ab5-b3db-b31a8bb65ceb",
 459     "isActive": true,
 460     "balance": "$3,235.42",
 461     "age": 32,
 462     "firstName": "Holly",
 463     "lastName": "Santos",
 464     "company": "LOVEPAD",
 465     "email": "holly.santos@lovepad.de",
 466     "registered": "Thursday, November 22, 2018 9:26 PM",
 467     "latitude": "-19.640066",
 468     "longitude": "50.410992"
 469   },
 470   {
 471     "_id": "5c0e1839ab9b933881429d78",
 472     "index": 27,
 473     "guid": "94961092-65ca-41b9-bc69-3e40ce2cafc9",
 474     "isActive": true,
 475     "balance": "$2,106.34",
 476     "age": 39,
 477     "firstName": "Rachel",
 478     "lastName": "Douglas",
 479     "company": "DEMINIMUM",
 480     "email": "rachel.douglas@deminimum.de",
 481     "registered": "Sunday, April 9, 2017 3:55 AM",
 482     "latitude": "31.395281",
 483     "longitude": "-1.899514"
 484   },
 485   {
 486     "_id": "5c0e183937f743155859c5a9",
 487     "index": 28,
 488     "guid": "07d7ef18-bcef-483d-999e-0b3da4a7098b",
 489     "isActive": true,
 490     "balance": "$2,260.65",
 491     "age": 40,
 492     "firstName": "Reed",
 493     "lastName": "Workman",
 494     "company": "BUZZMAKER",
 495     "email": "reed.workman@buzzmaker.de",
 496     "registered": "Wednesday, May 28, 2014 3:44 PM",
 497     "latitude": "23.789646",
 498     "longitude": "106.938375"
 499   },
 500   {
 501     "_id": "5c0e1839f8f4b60beb28b7ed",
 502     "index": 29,
 503     "guid": "9b4952e5-aa0e-4919-9e17-7c357a297394",
 504     "isActive": false,
 505     "balance": "$702.99",
 506     "age": 27,
 507     "firstName": "Cochran",
 508     "lastName": "Ware",
 509     "company": "HIVEDOM",
 510     "email": "cochran.ware@hivedom.de",
 511     "registered": "Monday, October 16, 2017 5:51 AM",
 512     "latitude": "85.953108",
 513     "longitude": "124.590037"
 514   },
 515   {
 516     "_id": "5c0e1839342fbd54a88269df",
 517     "index": 30,
 518     "guid": "30937d5b-9514-4ebd-b628-2cfb5017fe41",
 519     "isActive": false,
 520     "balance": "$385.88",
 521     "age": 35,
 522     "firstName": "Cote",
 523     "lastName": "Hess",
 524     "company": "TERAPRENE",
 525     "email": "cote.hess@teraprene.de",
 526     "registered": "Thursday, March 15, 2018 4:42 PM",
 527     "latitude": "81.38211",
 528     "longitude": "64.516797"
 529   },
 530   {
 531     "_id": "5c0e18395b6dc85d73ce1fb3",
 532     "index": 31,
 533     "guid": "f34847da-7f96-4cd8-8d8a-b06c0eb0a8f2",
 534     "isActive": true,
 535     "balance": "$3,494.56",
 536     "age": 27,
 537     "firstName": "Daniels",
 538     "lastName": "Ayala",
 539     "company": "BESTO",
 540     "email": "daniels.ayala@besto.de",
 541     "registered": "Sunday, December 18, 2016 10:52 AM",
 542     "latitude": "47.704227",
 543     "longitude": "41.674767"
 544   },
 545   {
 546     "_id": "5c0e183974587cdccf30b13f",
 547     "index": 32,
 548     "guid": "fdbb6d83-0e47-4453-b8a7-b47f44e4164b",
 549     "isActive": false,
 550     "balance": "$2,087.38",
 551     "age": 26,
 552     "firstName": "Powers",
 553     "lastName": "Drake",
 554     "company": "GENESYNK",
 555     "email": "powers.drake@genesynk.de",
 556     "registered": "Saturday, September 29, 2018 12:24 AM",
 557     "latitude": "40.580432",
 558     "longitude": "110.940759"
 559   },
 560   {
 561     "_id": "5c0e18397b51245e971c58b8",
 562     "index": 33,
 563     "guid": "6adfe544-238b-4001-b2a6-f50ea3094da3",
 564     "isActive": true,
 565     "balance": "$3,566.22",
 566     "age": 34,
 567     "firstName": "Pacheco",
 568     "lastName": "Ramsey",
 569     "company": "ENVIRE",
 570     "email": "pacheco.ramsey@envire.de",
 571     "registered": "Friday, September 11, 2015 12:14 AM",
 572     "latitude": "-30.691235",
 573     "longitude": "69.343692"
 574   },
 575   {
 576     "_id": "5c0e18391ede9c0996fd09e7",
 577     "index": 34,
 578     "guid": "d190b32f-d33b-4c17-a18a-bb2f57e79ba7",
 579     "isActive": false,
 580     "balance": "$1,671.63",
 581     "age": 32,
 582     "firstName": "Mcintyre",
 583     "lastName": "Chan",
 584     "company": "ORBAXTER",
 585     "email": "mcintyre.chan@orbaxter.de",
 586     "registered": "Wednesday, May 7, 2014 7:11 PM",
 587     "latitude": "7.380435",
 588     "longitude": "70.955103"
 589   },
 590   {
 591     "_id": "5c0e1839fe48069c9c260fa9",
 592     "index": 35,
 593     "guid": "a41c064b-6bf4-4ba5-b229-9b657d286936",
 594     "isActive": false,
 595     "balance": "$24.02",
 596     "age": 27,
 597     "firstName": "Genevieve",
 598     "lastName": "Sparks",
 599     "company": "ZBOO",
 600     "email": "genevieve.sparks@zboo.de",
 601     "registered": "Saturday, December 16, 2017 2:51 PM",
 602     "latitude": "-63.406337",
 603     "longitude": "118.662621"
 604   },
 605   {
 606     "_id": "5c0e1839a7e8e76accf0803e",
 607     "index": 36,
 608     "guid": "3e71864d-4be5-418e-ace8-346c3d7a9c5f",
 609     "isActive": true,
 610     "balance": "$3,261.01",
 611     "age": 30,
 612     "firstName": "Powell",
 613     "lastName": "Patterson",
 614     "company": "GAZAK",
 615     "email": "powell.patterson@gazak.de",
 616     "registered": "Thursday, May 18, 2017 10:10 AM",
 617     "latitude": "-10.428548",
 618     "longitude": "64.979192"
 619   },
 620   {
 621     "_id": "5c0e183984b0320f1118a8b0",
 622     "index": 37,
 623     "guid": "ec5b292c-6efb-471b-9bf5-a47286e03515",
 624     "isActive": false,
 625     "balance": "$918.71",
 626     "age": 37,
 627     "firstName": "Tara",
 628     "lastName": "Mcmillan",
 629     "company": "GRAINSPOT",
 630     "email": "tara.mcmillan@grainspot.de",
 631     "registered": "Sunday, May 17, 2015 1:01 PM",
 632     "latitude": "-13.519031",
 633     "longitude": "67.931062"
 634   },
 635   {
 636     "_id": "5c0e183965875876835ccd79",
 637     "index": 38,
 638     "guid": "b7e97ffb-439a-4454-90af-7f5ebd565ebc",
 639     "isActive": true,
 640     "balance": "$574.99",
 641     "age": 28,
 642     "firstName": "Pennington",
 643     "lastName": "Gallegos",
 644     "company": "CEDWARD",
 645     "email": "pennington.gallegos@cedward.de",
 646     "registered": "Wednesday, September 26, 2018 6:01 AM",
 647     "latitude": "-63.693261",
 648     "longitude": "-38.352153"
 649   },
 650   {
 651     "_id": "5c0e183922505dd21be49009",
 652     "index": 39,
 653     "guid": "5187aa39-4357-462b-9508-3c537d26d70d",
 654     "isActive": false,
 655     "balance": "$2,447.08",
 656     "age": 26,
 657     "firstName": "Meagan",
 658     "lastName": "Irwin",
 659     "company": "SENTIA",
 660     "email": "meagan.irwin@sentia.de",
 661     "registered": "Saturday, April 2, 2016 4:39 PM",
 662     "latitude": "1.051313",
 663     "longitude": "-86.168315"
 664   },
 665   {
 666     "_id": "5c0e183900a9f7f896e5b3b1",
 667     "index": 40,
 668     "guid": "31889843-79e7-4636-9ca1-4eb5cbcb0ae3",
 669     "isActive": true,
 670     "balance": "$1,992.25",
 671     "age": 22,
 672     "firstName": "Kelly",
 673     "lastName": "Cobb",
 674     "company": "BOVIS",
 675     "email": "kelly.cobb@bovis.de",
 676     "registered": "Tuesday, August 9, 2016 5:36 PM",
 677     "latitude": "-85.547579",
 678     "longitude": "-89.794104"
 679   },
 680   {
 681     "_id": "5c0e18393b25b8552ff950e2",
 682     "index": 41,
 683     "guid": "0bf02edc-ca1b-4cfe-8356-b65881bdca11",
 684     "isActive": true,
 685     "balance": "$465.96",
 686     "age": 27,
 687     "firstName": "Angela",
 688     "lastName": "Booker",
 689     "company": "EQUICOM",
 690     "email": "angela.booker@equicom.de",
 691     "registered": "Thursday, July 30, 2015 1:39 AM",
 692     "latitude": "-9.345395",
 693     "longitude": "107.070665"
 694   },
 695   {
 696     "_id": "5c0e183955d747ebbe25437b",
 697     "index": 42,
 698     "guid": "6405e559-5849-4d12-ae4e-520f13b4dffe",
 699     "isActive": true,
 700     "balance": "$15.63",
 701     "age": 28,
 702     "firstName": "Carrie",
 703     "lastName": "Mclean",
 704     "company": "BOINK",
 705     "email": "carrie.mclean@boink.de",
 706     "registered": "Wednesday, February 1, 2017 1:50 PM",
 707     "latitude": "72.287519",
 708     "longitude": "-135.436286"
 709   },
 710   {
 711     "_id": "5c0e1839e9cfe1b28e31e7e6",
 712     "index": 43,
 713     "guid": "e49e7ca7-a6cc-4cdb-bebe-5a3b6ba931eb",
 714     "isActive": true,
 715     "balance": "$3,127.94",
 716     "age": 33,
 717     "firstName": "Callie",
 718     "lastName": "Cooley",
 719     "company": "MUSIX",
 720     "email": "callie.cooley@musix.de",
 721     "registered": "Wednesday, August 30, 2017 4:58 PM",
 722     "latitude": "-38.954739",
 723     "longitude": "-152.706424"
 724   },
 725   {
 726     "_id": "5c0e18391bafa0750ff4f280",
 727     "index": 44,
 728     "guid": "c245ffd3-4924-4dce-ae4a-f4cabf057b54",
 729     "isActive": false,
 730     "balance": "$1,320.36",
 731     "age": 35,
 732     "firstName": "Terry",
 733     "lastName": "Bennett",
 734     "company": "EXOTECHNO",
 735     "email": "terry.bennett@exotechno.de",
 736     "registered": "Friday, June 17, 2016 11:54 PM",
 737     "latitude": "-48.946183",
 738     "longitude": "32.53167"
 739   },
 740   {
 741     "_id": "5c0e1839e91b27fcce34b70f",
 742     "index": 45,
 743     "guid": "0860cb66-de4c-410e-8233-aeef5ee9d64e",
 744     "isActive": false,
 745     "balance": "$1,187.75",
 746     "age": 30,
 747     "firstName": "Phoebe",
 748     "lastName": "Bartlett",
 749     "company": "VORATAK",
 750     "email": "phoebe.bartlett@voratak.de",
 751     "registered": "Tuesday, July 25, 2017 2:57 AM",
 752     "latitude": "-63.208957",
 753     "longitude": "-91.209743"
 754   },
 755   {
 756     "_id": "5c0e183987e8a4e98415c8dd",
 757     "index": 46,
 758     "guid": "49219833-172c-4659-9192-d1116a5ca833",
 759     "isActive": false,
 760     "balance": "$3,225.24",
 761     "age": 38,
 762     "firstName": "Jordan",
 763     "lastName": "Evans",
 764     "company": "PHARMACON",
 765     "email": "jordan.evans@pharmacon.de",
 766     "registered": "Sunday, April 23, 2017 6:27 PM",
 767     "latitude": "-59.454678",
 768     "longitude": "67.251185"
 769   },
 770   {
 771     "_id": "5c0e183944979692cc1a3e48",
 772     "index": 47,
 773     "guid": "680c4d15-d539-4db9-8793-a2f6d3f354aa",
 774     "isActive": false,
 775     "balance": "$2,913.14",
 776     "age": 28,
 777     "firstName": "Goodman",
 778     "lastName": "Cain",
 779     "company": "CAXT",
 780     "email": "goodman.cain@caxt.de",
 781     "registered": "Tuesday, November 1, 2016 6:11 PM",
 782     "latitude": "-30.187547",
 783     "longitude": "-164.313273"
 784   },
 785   {
 786     "_id": "5c0e1839ef5312ac08e3cbc3",
 787     "index": 48,
 788     "guid": "85f5fa5d-b6b3-47c6-ad1b-faee10a4e1bd",
 789     "isActive": true,
 790     "balance": "$544.97",
 791     "age": 27,
 792     "firstName": "Aisha",
 793     "lastName": "Oliver",
 794     "company": "MINGA",
 795     "email": "aisha.oliver@minga.de",
 796     "registered": "Sunday, July 3, 2016 8:18 AM",
 797     "latitude": "-21.527536",
 798     "longitude": "141.029691"
 799   },
 800   {
 801     "_id": "5c0e1839c2e58f5da04f29fd",
 802     "index": 49,
 803     "guid": "e2ee9b25-5887-49a9-a1c6-17432154d266",
 804     "isActive": true,
 805     "balance": "$3,621.65",
 806     "age": 31,
 807     "firstName": "Erin",
 808     "lastName": "Lester",
 809     "company": "SLOFAST",
 810     "email": "erin.lester@slofast.de",
 811     "registered": "Saturday, February 20, 2016 5:13 AM",
 812     "latitude": "-30.080798",
 813     "longitude": "-1.291093"
 814   }
 815 ];
 816
 817 const components = {
 818   'counter': 'demoApp.counter'
 819 };
 820
 821 type TreeDemoItem = TreeItem<string>;
 822
 823 const treeData: TreeDemoItem[] = [
 824   {
 825     content: "Erste Ebene", children: [
 826       {
 827         content: "Zweite Ebene", children: [
 828           { content: "Dritte Ebene" },
 829         ]
 830       },
 831       { content: "Zweite Ebene 2" },
 832     ]
 833   },
 834   { content: "Erste Ebene 3" },
 835 ];
 836
 837 const SampleDataMaterialTable = MaterialTable as MaterialTableCtorType<SampleData>;
 838
 839 const SampleTree = TreeView as any as TreeViewCtorType<string>;
 840
 841 const TestComponent = (props: WithComponents<typeof components> & WithStyles<typeof styles>) => {
 842
 843   return (
 844     <div>
 845       <h2>About</h2>
 846       <Accordion>
 847         <AccordionSummary expandIcon={<ExpandMoreIcon />}>
 848           <Typography className={props.classes.heading}>Client Side Table Demo</Typography>
 849         </AccordionSummary>
 850         <AccordionDetails>
 851           <SampleDataMaterialTable rows={tableData} tableId={null} columns={
 852             [
 853               { property: "index", type: ColumnType.text, title: "Index", width: "80px", disableFilter: true, disableSorting: true },
 854               { property: "firstName", type: ColumnType.text, title: "First Name" },
 855               { property: "lastName", type: ColumnType.text, title: "Last Name" },
 856               { property: "age", type: ColumnType.numeric, title: "Age", width: "60px" },
 857               { property: "email", type: ColumnType.text, title: "eMail" },
 858               { property: "actions", type: ColumnType.custom, title: "Actions", customControl: ({ rowData }) => (<div>Button</div>) },
 859             ]
 860           } idProperty={"_id"} title={"Customers 2018"} >
 861           </SampleDataMaterialTable>
 862         </AccordionDetails>
 863       </Accordion>
 864       <Accordion>
 865         <AccordionSummary expandIcon={<ExpandMoreIcon />}>
 866           <Typography className={props.classes.heading}>Tree Demo</Typography>
 867         </AccordionSummary>
 868         <AccordionDetails>
 869           <SampleTree items={treeData} useFolderIcons enableSearchBar />
 870         </AccordionDetails>
 871       </Accordion>
 872     </div>
 873   );
 874 };
 875
 876 export const Test = withComponents(components)(withStyles(styles)(TestComponent));
 877 export default Test;