Table

A simple table Contentful UI extension: view demo

Contentful

Console

Create an extension and add this link to the src field:

https://pdq.github.io/contentful-table/

CLI

First, setup your environment.

Configure

Create a configuration file with your credentials for Contentful.

cp .env.example .env

Add SPACE_ID, CONTENTFUL_MANAGEMENT_ACCESS_TOKEN and other values in .env in order to upload this extension to your Contentful space.

Then, source the variables into your environment. For a cross-platform experience, we're waiting on a new release of env-cmd for variable expansion in NPM scripts.

Create

npm run contentful:create

This will register the extension in your space on Contentful.

Update

Since the extension is self-hosted, the project does not need to be updated in Contentful after changes are made. However, if fields like EXTENSION_NAME or EXTENSION_SRC are altered, then the extension should be updated.

npm run contentful:update

Content Model

To use this UI extension in a Content Model:

1. Add a new field JSON Object
2. Configure the field under the "Appearance" tab to use the UI Extension "Table"

Setup

Install the dependencies:

npm install

Publish

To publish your own hosted URL, you may deploy changes to the extension hosted from gh-pages. Merge your changes into master to initiate the Github Actions hook or run:

npm run publish

If you elect to use Github Actions to automate deployment, make sure to add a deployment key to deploy to your repo's Github Actions as documented here.

Develop

npm start

Documentation

• contentful-cli extension API
• contentful-ui-extensions-sdk API

Issues

• Uncaught ReferenceError: regeneratorRuntime - workaround: using "browserslist": ["last 1 Chrome versions"]. To be fixed in Parcel 2.0
• env-cmd variable expansion in NPM scripts

Code of Conduct

This project has adopted the Contributor Covenant. For more information see this project's Code of Conduct.

License

Copyright (c) PDQ.com. All rights reserved.

Licensed under the MIT license.