This a module for the MagicMirror.
It can display your Table(s) from your Airtable and update them at a regular interval. Check the screenshots for more details.
- Navigate into your MagicMirror
modulesfolder and executegit clone https://github.com/yashatgit/MMM-Airtable.git. - Enter the
MMM-Airtabledirectory and executenpm install.cd MMM-Airtable && npm install.
Go to https://airtable.com/api and select the base to view its API documentation. Click the Javascript version of the Sample API.
(Just search for the keyword apiKey and you will find the relevant details.)
We would need following details for the module to fetch the data:
- API key
- Base id
- Table name(s)
| Option | Description |
|---|---|
airtableAPIKey |
REQUIRED API Key for Airtable. Type: string |
airtableBaseId |
REQUIRED Airtable Base ID. Type: string |
animationSpeed |
Table refresh change animation time in ms. Type: numberDefaults to 1500 |
updateInterval |
Interval for refetching the latest data. Type: numberDefaults to 60*1000 (i.e. one minute). |
tables |
A list of table configurations. See Table below for more details. Type: array |
Each object in the tables array can have the following parameters:
| Option | Description |
|---|---|
workspaceName |
REQUIRED Name of the Workspace Tab/Table. Type: string |
tableTitle |
Optional title for your table. How you would like this displayed on your MagicMirror? Type: string |
maxRows |
Optional number to limit the maximum rows to be displayed. Type: numberDefaults to 20 |
updateInterval |
Optional interval for refetching the latest data. Overrides the value from updateInterval in main config.Type: number |
rowBorder |
Optional bool check to show Borders below each row. Type: boolean |
Example of an entry in `config.js` which displays 2 tables as shown in Screenshot
{
module: 'MMM-Airtable',
position: 'top_right',
config: {
airtableAPIKey: '<YOUR_API_KEY>',
airtableBaseId: '<YOUR_BASE_ID>',
animationSpeed: 1.5 * 1000,
updateInterval: 1000 * 50, //refresh after 50 sec
tables: [
{
workspaceName: 'Meal Planner',
tableTitle: 'Meal Planner',
maxRows: 7,
rowBorder: true, //shows row borders
},
{
workspaceName: 'Todos',
tableTitle: 'To Do',
maxRows: 8,
},
],
},
},
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent