React JS : Tables in the browser

A good exersize while learning React JS was building a re-usable component that produces HTML tables given an arbitrary JSON array of objects in the form:

[{'col1_name':'col1_value','col2_name':'col2_value'} ,

So a practical example of the above would be:


With the resulting table being:


Here’s the reusable code (feel free to improve/include in your projects):

A couple of lessons from the above:

  • Concatenating React JSX objects: JSX objects are usually used in the “render” function, in the case of the table it was necessary to concatenate JSX object in lines 31-36.  This is relatively easy by storing the object in an array with the javascript push array function. It’s noteworthy that only complete objects will be parsed correctly. In other words, this is not valid:

    But this is valid:


    Which is why we need to nest JSX objects as per lines 41-44.

  • “Exporting” react components when working in the browser: in the last line you see the code:
    window.__ReactTable__ = ReactTable

    Which allows you simply copy the javascript file in your project folder, and reference it normally using a <script> tag. To use the react component you simply need a single line as follows:

    var ReactTable = window.__ReactTable__

    which then allows you to use the component along these lines, using react props to pass the data to the table component:





Lessons Learned: CrossWalk and Enhanced Webviews

I recently had a problem (seems to be a very common one [1][2][3]) when building a hybrid HTML5 mobile app. As can be seen in this online demo (, one can use the input html tag with

type=”file” accept=”image/*”

to quickly and easily bring up the user’s camera if they visit the site from a mobile web browser like Chrome. But, embed the above in an Android webview and… nothing. We could fiddle around with intents and Java – Javascript bridges, but there has to be an easier way. Reading through some solutions someone suggested simply replacing the webview with one that actually works consistently.

The original suggestion pointed towards an “Android Advanced Webview” by a company named “Delight”. It is an excellent piece of code:

And now clicking on the input tag brings up the native android chooser, allowing a user to upload an image they had already taken. Good, but not perfect. Ideally we allow the user to choose if they would like to upload a saved image they already took, or allow them to choose the “camera” option and take a picture on the spot. Out of the box, Android Advanced Webview doesn’t support this [4]. Bummer.

But this solution reminded me of something similar I played with years ago: the Intel-funded Crosswalk Project. It has definitely matured and gotten a lot better since I last checked it out. It proved relatively simple to embed it in my native android framework by following their documentation:

Embedding the Crosswalk Project

Note: if you’re using Android Studio and maven/gradle, a much – very much – easier way of embedding Crosswalk can be found here:

Embedding Crosswalk in Android Studio [5]

That did the trick! Now clicking on the input tag gives the user a choice:


Almost there. In my case, clicking on the camera option didn’t do anything :(. After some debugging and logging the intents being passed around, I noticed the android subsystem complaining of “revoked permission” even though I had the appropriate CAMERA permission in my manifest file:

<uses-permission android:name=”android.permission.CAMERA” />

UPDATE: If you see only the “camcoder” option as in the screenshot above, adding the “android.permission.WRITE_EXTERNAL_STORAGE” resolved the issue

Since I’m using Android 6.x, the permission scheme has changed and now requires you to ask for user permission at runtime . Following that realization, the below did the trick:






[5] Reproduced here: