A simple table Contentful UI extension: view demo

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

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

First, setup your environment.

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.

npm run contentful:create

This will register the extension in your space on Contentful.

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

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"

Install the dependencies:

npm install

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.

npm start

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

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

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

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

Licensed under the MIT license.