API tools faq
paste
Advertisement
Guest User

verbling1

a guest
Aug 3rd, 2015
287
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.72 KB | None | 0 0
raw download clone embed print report
  1. import React from 'react';
  2. import FixedDataTable from 'fixed-data-table';
  3.  
  4. var Table = FixedDataTable.Table;
  5. var Column = FixedDataTable.Column;
  6.  
  7. var data = [
  8. {
  9. "_id": "55be9f654fc6e869d1279dbe",
  10. "index": 0,
  11. "guid": "2cde01f2-277f-4730-8c99-4b07c0b729ff",
  12. "isActive": false,
  13. "balance": "$215.21",
  14. "picture": "http://lorempixel.com/64/64/people/0/",
  15. "age": 20,
  16. "name": {
  17. "first": "York",
  18. "last": "Gibson"
  19. },
  20. "company": "BARKARAMA",
  21. "email": "york.gibson@barkarama.org",
  22. "phone": "+1 (852) 428-3413",
  23. "address": "511 Butler Street, Kersey, Mississippi, 1986",
  24. "registered": "Friday, October 3, 2014 8:04 PM"
  25. },
  26. {
  27. "_id": "55be9f65d8fe86664a5e015e",
  28. "index": 1,
  29. "guid": "914c2951-7df2-4cfe-be6d-c4a3421e8b1f",
  30. "isActive": false,
  31. "balance": "$212.05",
  32. "picture": "http://lorempixel.com/64/64/people/1/",
  33. "age": 37,
  34. "name": {
  35. "first": "Helena",
  36. "last": "Robertson"
  37. },
  38. "company": "ZYTREK",
  39. "email": "helena.robertson@zytrek.us",
  40. "phone": "+1 (812) 508-3800",
  41. "address": "786 Seba Avenue, Fivepointville, Arkansas, 6488",
  42. "registered": "Sunday, September 7, 2014 11:02 AM"
  43. },
  44. {
  45. "_id": "55be9f65665e9dcde1eceecc",
  46. "index": 2,
  47. "guid": "620083fd-da65-4309-8666-92a8ec96a9f7",
  48. "isActive": false,
  49. "balance": "$689.41",
  50. "picture": "http://lorempixel.com/64/64/people/2/",
  51. "age": 33,
  52. "name": {
  53. "first": "Roth",
  54. "last": "Levine"
  55. },
  56. "company": "JUMPSTACK",
  57. "email": "roth.levine@jumpstack.ca",
  58. "phone": "+1 (945) 574-3812",
  59. "address": "716 Danforth Street, Garfield, Wyoming, 3868",
  60. "registered": "Wednesday, September 10, 2014 1:39 AM"
  61. },
  62. {
  63. "_id": "55be9f65e269c46ab1940733",
  64. "index": 3,
  65. "guid": "f230aebf-5ab0-4136-83fc-c4ec520374ac",
  66. "isActive": false,
  67. "balance": "$640.70",
  68. "picture": "http://lorempixel.com/64/64/people/3/",
  69. "age": 28,
  70. "name": {
  71. "first": "Edwards",
  72. "last": "Mccullough"
  73. },
  74. "company": "REALYSIS",
  75. "email": "edwards.mccullough@realysis.biz",
  76. "phone": "+1 (831) 519-2595",
  77. "address": "856 Middleton Street, Williamson, Massachusetts, 463",
  78. "registered": "Tuesday, March 17, 2015 3:57 AM"
  79. },
  80. {
  81. "_id": "55be9f6510d70b848d01f776",
  82. "index": 4,
  83. "guid": "643fdf5f-e101-43a3-b40e-d25a4aabb71e",
  84. "isActive": true,
  85. "balance": "$282.25",
  86. "picture": "http://lorempixel.com/64/64/people/4/",
  87. "age": 31,
  88. "name": {
  89. "first": "Erickson",
  90. "last": "Riggs"
  91. },
  92. "company": "EXTRO",
  93. "email": "erickson.riggs@extro.name",
  94. "phone": "+1 (921) 462-3783",
  95. "address": "284 Stuyvesant Avenue, Jugtown, Puerto Rico, 4455",
  96. "registered": "Tuesday, May 13, 2014 2:29 PM"
  97. },
  98. {
  99. "_id": "55be9f65a8096f7e13bc369c",
  100. "index": 5,
  101. "guid": "977ed1ec-88b1-45e4-96cb-6b740c823cc1",
  102. "isActive": true,
  103. "balance": "$434.79",
  104. "picture": "http://lorempixel.com/64/64/people/5/",
  105. "age": 21,
  106. "name": {
  107. "first": "Patty",
  108. "last": "Rivers"
  109. },
  110. "company": "BOLAX",
  111. "email": "patty.rivers@bolax.io",
  112. "phone": "+1 (810) 482-3302",
  113. "address": "692 Sackett Street, Calpine, Vermont, 634",
  114. "registered": "Friday, April 11, 2014 10:04 PM"
  115. },
  116. {
  117. "_id": "55be9f6531b0ab1d66a5b1b1",
  118. "index": 6,
  119. "guid": "f1fb8d0a-3470-48ec-a58a-bf468825ea82",
  120. "isActive": false,
  121. "balance": "$275.39",
  122. "picture": "http://lorempixel.com/64/64/people/6/",
  123. "age": 22,
  124. "name": {
  125. "first": "Ines",
  126. "last": "Mendoza"
  127. },
  128. "company": "BIFLEX",
  129. "email": "ines.mendoza@biflex.biz",
  130. "phone": "+1 (941) 461-3076",
  131. "address": "194 Williams Court, Garberville, North Carolina, 7582",
  132. "registered": "Wednesday, April 9, 2014 11:07 AM"
  133. },
  134. {
  135. "_id": "55be9f6599aa361dc4dc0869",
  136. "index": 7,
  137. "guid": "d6d3ce39-2dba-4ed5-8306-c549001bf1b6",
  138. "isActive": true,
  139. "balance": "$549.77",
  140. "picture": "http://lorempixel.com/64/64/people/7/",
  141. "age": 34,
  142. "name": {
  143. "first": "Rosie",
  144. "last": "Vang"
  145. },
  146. "company": "FUELWORKS",
  147. "email": "rosie.vang@fuelworks.me",
  148. "phone": "+1 (899) 576-3457",
  149. "address": "230 Adams Street, Loomis, Texas, 2782",
  150. "registered": "Saturday, December 20, 2014 2:27 PM"
  151. },
  152. {
  153. "_id": "55be9f6513cd875ae0fc7459",
  154. "index": 8,
  155. "guid": "80043e1b-6d13-4875-bb50-9dcb7e58ecd5",
  156. "isActive": false,
  157. "balance": "$745.37",
  158. "picture": "http://lorempixel.com/64/64/people/8/",
  159. "age": 39,
  160. "name": {
  161. "first": "Parker",
  162. "last": "Mckenzie"
  163. },
  164. "company": "RETROTEX",
  165. "email": "parker.mckenzie@retrotex.co.uk",
  166. "phone": "+1 (990) 464-3159",
  167. "address": "764 Coles Street, Sehili, Idaho, 2608",
  168. "registered": "Friday, April 11, 2014 11:53 PM"
  169. },
  170. {
  171. "_id": "55be9f653d4e3726137b686e",
  172. "index": 9,
  173. "guid": "4e6d7591-dd85-4352-b65e-af9f823bbf2b",
  174. "isActive": false,
  175. "balance": "$656.66",
  176. "picture": "http://lorempixel.com/64/64/people/9/",
  177. "age": 35,
  178. "name": {
  179. "first": "Adela",
  180. "last": "Mclaughlin"
  181. },
  182. "company": "SILODYNE",
  183. "email": "adela.mclaughlin@silodyne.info",
  184. "phone": "+1 (983) 593-3713",
  185. "address": "932 Dahl Court, Bethany, Pennsylvania, 1665",
  186. "registered": "Thursday, May 21, 2015 12:04 PM"
  187. },
  188. {
  189. "_id": "55be9f658c71fe66e4c2bf5f",
  190. "index": 10,
  191. "guid": "0ca7a1b5-ada1-441f-bd7c-f6de2a3ca77e",
  192. "isActive": false,
  193. "balance": "$994.66",
  194. "picture": "http://lorempixel.com/64/64/people/0/",
  195. "age": 20,
  196. "name": {
  197. "first": "Hudson",
  198. "last": "Bonner"
  199. },
  200. "company": "DEVILTOE",
  201. "email": "hudson.bonner@deviltoe.com",
  202. "phone": "+1 (970) 515-2982",
  203. "address": "768 Dekoven Court, Belmont, Alaska, 8958",
  204. "registered": "Monday, September 22, 2014 6:13 PM"
  205. },
  206. {
  207. "_id": "55be9f65e13e87aebbd96704",
  208. "index": 11,
  209. "guid": "8271f962-0558-45ab-ab43-ac6fa5379002",
  210. "isActive": true,
  211. "balance": "$903.49",
  212. "picture": "http://lorempixel.com/64/64/people/1/",
  213. "age": 22,
  214. "name": {
  215. "first": "Shannon",
  216. "last": "Patel"
  217. },
  218. "company": "LUNCHPOD",
  219. "email": "shannon.patel@lunchpod.net",
  220. "phone": "+1 (873) 421-2516",
  221. "address": "365 Columbia Place, Sunriver, South Carolina, 7761",
  222. "registered": "Saturday, March 21, 2015 10:57 PM"
  223. },
  224. {
  225. "_id": "55be9f65fc8a125ab60273d1",
  226. "index": 12,
  227. "guid": "e578fc3f-0a5b-48e1-a54c-e5bc5abcfda8",
  228. "isActive": false,
  229. "balance": "$198.76",
  230. "picture": "http://lorempixel.com/64/64/people/2/",
  231. "age": 39,
  232. "name": {
  233. "first": "Erna",
  234. "last": "Walters"
  235. },
  236. "company": "GEEKOL",
  237. "email": "erna.walters@geekol.org",
  238. "phone": "+1 (854) 455-3527",
  239. "address": "562 Furman Avenue, Windsor, Palau, 2265",
  240. "registered": "Tuesday, August 12, 2014 2:48 PM"
  241. },
  242. {
  243. "_id": "55be9f65dae5cb63d3a740af",
  244. "index": 13,
  245. "guid": "b4137f73-1a1f-4f3f-9e0b-c665adf60f43",
  246. "isActive": false,
  247. "balance": "$753.38",
  248. "picture": "http://lorempixel.com/64/64/people/3/",
  249. "age": 26,
  250. "name": {
  251. "first": "Deidre",
  252. "last": "Hill"
  253. },
  254. "company": "MEDICROIX",
  255. "email": "deidre.hill@medicroix.us",
  256. "phone": "+1 (904) 441-2303",
  257. "address": "421 Polar Street, Hamilton, Virginia, 2326",
  258. "registered": "Monday, January 5, 2015 7:20 PM"
  259. },
  260. {
  261. "_id": "55be9f65b38fd9cdc5403385",
  262. "index": 14,
  263. "guid": "1fdf4081-862f-4c26-87da-8a237ff74eeb",
  264. "isActive": true,
  265. "balance": "$430.71",
  266. "picture": "http://lorempixel.com/64/64/people/4/",
  267. "age": 35,
  268. "name": {
  269. "first": "Isabel",
  270. "last": "Bruce"
  271. },
  272. "company": "RETRACK",
  273. "email": "isabel.bruce@retrack.ca",
  274. "phone": "+1 (922) 427-2409",
  275. "address": "183 Hart Street, Nanafalia, American Samoa, 2917",
  276. "registered": "Sunday, May 4, 2014 12:43 PM"
  277. },
  278. {
  279. "_id": "55be9f65398329b33a24ff36",
  280. "index": 15,
  281. "guid": "805b5054-45c5-4d0c-a26d-f1b1ac269f18",
  282. "isActive": true,
  283. "balance": "$849.73",
  284. "picture": "http://lorempixel.com/64/64/people/5/",
  285. "age": 30,
  286. "name": {
  287. "first": "Melanie",
  288. "last": "Molina"
  289. },
  290. "company": "PHEAST",
  291. "email": "melanie.molina@pheast.biz",
  292. "phone": "+1 (860) 507-2650",
  293. "address": "362 Calder Place, Kenwood, Kansas, 8178",
  294. "registered": "Wednesday, October 8, 2014 8:20 PM"
  295. },
  296. {
  297. "_id": "55be9f6508a049a8b5ab03dd",
  298. "index": 16,
  299. "guid": "8076d8fe-f9d8-4689-8b73-fb709198083a",
  300. "isActive": true,
  301. "balance": "$895.34",
  302. "picture": "http://lorempixel.com/64/64/people/6/",
  303. "age": 35,
  304. "name": {
  305. "first": "Brown",
  306. "last": "Cortez"
  307. },
  308. "company": "XEREX",
  309. "email": "brown.cortez@xerex.name",
  310. "phone": "+1 (897) 597-2194",
  311. "address": "817 Fleet Place, Itmann, Missouri, 8544",
  312. "registered": "Tuesday, October 14, 2014 1:25 PM"
  313. },
  314. {
  315. "_id": "55be9f652e9cb46d32e353bb",
  316. "index": 17,
  317. "guid": "67b4dd41-3c15-4401-ba05-6e0f437add66",
  318. "isActive": false,
  319. "balance": "$160.49",
  320. "picture": "http://lorempixel.com/64/64/people/7/",
  321. "age": 22,
  322. "name": {
  323. "first": "Austin",
  324. "last": "Lloyd"
  325. },
  326. "company": "EARTHWAX",
  327. "email": "austin.lloyd@earthwax.io",
  328. "phone": "+1 (854) 486-2262",
  329. "address": "254 Aurelia Court, Gordon, Illinois, 7457",
  330. "registered": "Monday, March 17, 2014 5:32 AM"
  331. },
  332. {
  333. "_id": "55be9f654bba09df5bad6a83",
  334. "index": 18,
  335. "guid": "6c5c261a-541a-42a2-805c-2b2f7c650c7e",
  336. "isActive": false,
  337. "balance": "$424.84",
  338. "picture": "http://lorempixel.com/64/64/people/8/",
  339. "age": 21,
  340. "name": {
  341. "first": "Church",
  342. "last": "Stewart"
  343. },
  344. "company": "SUREPLEX",
  345. "email": "church.stewart@sureplex.biz",
  346. "phone": "+1 (865) 587-2528",
  347. "address": "754 Norman Avenue, Gilgo, Washington, 7022",
  348. "registered": "Friday, July 3, 2015 5:10 PM"
  349. },
  350. {
  351. "_id": "55be9f65f6c9e901e272df2f",
  352. "index": 19,
  353. "guid": "3b3cf174-e8fc-49a4-96c1-d2cca56b57e6",
  354. "isActive": false,
  355. "balance": "$980.33",
  356. "picture": "http://lorempixel.com/64/64/people/9/",
  357. "age": 28,
  358. "name": {
  359. "first": "Mejia",
  360. "last": "Hays"
  361. },
  362. "company": "WARETEL",
  363. "email": "mejia.hays@waretel.me",
  364. "phone": "+1 (990) 439-2885",
  365. "address": "348 President Street, Alafaya, Marshall Islands, 5442",
  366. "registered": "Monday, June 22, 2015 4:26 AM"
  367. }
  368. ];
  369. var Rows = [];
  370. for (var i = data.length - 1; i >= 0; i--) {
  371. Rows[i]= [data[i].picture,data[i].name.first,data[i].name.last,data[i].email,data[i].balance,data[i].isActive];
  372. };
  373.  
  374. class TeachersTable extends React.Component {
  375.  
  376.  
  377.  
  378. constructor() {
  379. console.log(this.props);
  380. // this.state = {Rowss: this.props.teacherlist};
  381. }
  382.  
  383. loadteachersFromServer() {
  384. // console.log(this);
  385. $.ajax({
  386. url: "http://localhost:1337/teachers",
  387. dataType: 'json',
  388. success: (data) => {
  389.  
  390. var Rows = [];
  391. for (var i = data.length - 1; i >= 0; i--) {
  392. Rows[i]= [data[i].picture,data[i].name.first,data[i].name.last,data[i].email,data[i].balance,data[i].isActive];
  393. };
  394. this.setState({Rowss: Rows}, function(){
  395. // console.log(this.state.Rowss);
  396. }.bind(this));
  397.  
  398. // this.setState({Rowss: [Rows]});
  399. },
  400. error: (xhr, status, err) => {
  401. console.error('http://localhost:1337/teachers', status, err.toString());
  402. }
  403. });
  404. }
  405.  
  406. componentDidMount() {
  407. this.loadteachersFromServer();
  408.  
  409.  
  410. }
  411.  
  412.  
  413. imagefunc(imgurl){
  414. var style = { backgroundImage : 'url(' + imgurl + ')', backgroundRepeat : 'no-repeat',height: '60px'};
  415.  
  416. return <div className="exampleImage" style={style} />;
  417. }
  418.  
  419. statusfunc(status){
  420. var activity;
  421. var style;
  422.  
  423. if (status) {
  424. var style = { color: 'green'};
  425. activity = <div style={style}> Active</div>;
  426. } else {
  427. var style = { color: 'red'};
  428. activity = <div style={style}> Inactive</div>;
  429. }
  430.  
  431. return activity;
  432. }
  433.  
  434.  
  435.  
  436. _rowGetter(rowIndex) {
  437. // console.log('couc');
  438. return Rows[rowIndex];
  439. }
  440.  
  441. _rowscount() {
  442. // console.log('couc');
  443. return Rows.length;
  444. }
  445.  
  446. // rowGetter(rowIndex) {
  447. // return this.state.rows[rowIndex];
  448. // }
  449.  
  450.  
  451. render() {
  452.  
  453. return(
  454. <div>
  455. <Table
  456. rowHeight={50}
  457. rowGetter={this._rowGetter}
  458. rowsCount={Rows.length}
  459. width={1000}
  460. maxHeight={500}
  461. headerHeight={50}>
  462. <Column
  463. label=""
  464. cellRenderer= {this.imagefunc}
  465. width={64}
  466. height={64}
  467. dataKey={0}
  468. />
  469. <Column
  470. label="First name"
  471. width={130}
  472. dataKey={1}
  473. />
  474. <Column
  475. label="Last name"
  476. width={130}
  477. dataKey={2}
  478. />
  479. <Column
  480. label="Email"
  481. width={300}
  482. dataKey={3}
  483. />
  484. <Column
  485. label="Balance"
  486. width={100}
  487. dataKey={4}
  488. />
  489. <Column
  490. label="Status"
  491. cellRenderer={this.statusfunc}
  492. width={100}
  493. dataKey={5}
  494. />
  495. </Table>
  496. </div>
  497. )
  498. }
  499.  
  500. }
  501.  
  502. export default TeachersTable;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!