React component

The CloudTables component for React lets you embed tables directly into your React application using a JSX tag: <CloudTables/> and attributes to configure it.

Installing

The CloudTables component for React is available as the @cloudtables/react package on npm and can be installed in your React application using:

# npm
npm install --save @cloudtables/react

# yarn
yarn add @cloudtables/react

Use

After npm has finished installing, import the component in the file you wish to use the JSX tag (e.g. App.js)

import CloudTables from '@cloudtables/react';

Once imported you can then use the custom <CloudTables/> tag to embed a CloudTable into your application. The attributes available for this tag are:

• src The custom url for your CloudTable which can be seen in the Embed page for your data set.
• apiKey would be replaced by your API Key (see the Security / API Keys section in your CloudTables application), or
• token server side generated secure access token that can be used instead of an apiKey
• userId is optional, but will be used to uniquely identify users in the CloudTables interface..
• userName is also optional, but can be used to help identify who made what changes when reviewing logs in CloudTables. It is recommended you include userId and userName.

Security

When embedding CloudTables into your React application, you can use a secure access token which is generated by a server-side program, or by embedding your access key directly into the tags.

• API token: We strongly recommend using a server generated secure access token as it will be tied to a single user's session and cannot be reused by anyone else who might intercept the key, or provide any access beyond that specified by the server.
• API key: The API access is embedded directly into the application, but it means the full access of that key is available to the client.

API token

To generate a secure access token use one of our server-side clients (HTTP REST / cURL, Java, .NET, NodeJS, PHP). Then embed your CloudTable into your React application using:

<CloudTables
	src="https://sub-domain.cloudtables.io/loader/{datasetId}/table/d"
	token="---"
	userId="---"
	userName="---"
/>

Where:

• {datasetId} - the ID of the data set you'd like to show (see the data set Embed tab for this information).

Note specifically the use of the token attribute which would be given the value of the token generated by the server.

API key (serverless)

Serverless access is faster to setup since you embed the API key directly into your CloudTables tag (but also less secure, since you expose your API key):

<CloudTables
	src="https://sub-domain.cloudtables.io/loader/{datasetId}/table/d"
	apiKey="---"
/>

Here the apiKey attribute is used to give the API key to use.