React component to embed Tableau reports in a web application using Tableau JS API.
npm install react-tableau-report --save
import TableauReport from 'tableau-react';
...
render() {
return {
<TableauReport url="http://public.tableau.com/views/RegionalSampleWorkbook/Storms" />
}
}
You can add a token, options, filters, and parameters to your TableauReport components to utilizate the features available in the Tablea Api.
Click Here to view the full list of options that can be passed to the report.
Example:
const token = "<TABLEAU_TOKEN>";
const options = {
height: 100,
width: 100,
hideTabs: false,
hideToolbar: true
};
const filters = {
Colors: ['Blue', 'Red'],
Sizes: ['Small', 'Medium']
};
const parameters = {
Param1: 'Value',
Param2: 'Other Value'
};
const MyReport = props => (
<TableauReport
url="http://public.tableau.com/views/RegionalSampleWorkbook/Storms"
token={token}
filters={filters}
parameters={parameters}
options={options}
/>
)
- react
- react-dom
- tableau-api
- url
- Remove dependencies on tableau-api and url packages.
- Enhance filters functionality.
- Write documentation for filters and parameters.
- etc...