@cpelements/plcc-table
v2.1.9
Published
Plcc table element for PatternFly Elements
Downloads
198
Readme
Plcc table Element
Product lifecycle table web component.
Usage
Describe how best to use this web component along with best practices.
<plcc-table>
</plcc-table>
Attributes
product-name
Use this attribute when fetching data from the api. Pass the product name as the value for the api's path to use.
<plcc-table product-name="Red Hat Enterprise Linux"></plcc-table>
hide-eol
When this attribute is present, the End of Life versions will be hidden
<plcc-table product-name="Red Hat Enterprise Linux" hide-eol></plcc-table>
toggle-eol
Use this attribute to add a checkbox to toggle End of Life versions (default set to show all versions)
<plcc-table product-name="Red Hat Enterprise Linux" toggle-eol></plcc-table>
toggle-eol hide-eol
When these two attributes could be used together, all End of Life versions will be hidden by default
<plcc-table product-name="Red Hat Enterprise Linux" toggle-eol hide-eol></plcc-table>
expandable
Use this attribute to make version category expandable
<plcc-table product-name="Red Hat Enterprise Linux" expandable></plcc-table>
Compact styles
To enable compact styles add a class of 'compact' to the <plcc-table>
tag
<plcc-table product-name="Red Hat Enterprise Linux" class="compact"></plcc-table>
Passing data to plcc-table
Here's a basic example on now to pass data to the component. This data must match the structure provided by the api in order for the component to render properly.
<plcc-table id="someId" type="app"></plcc-table>
<script>
const data = {someObject};
const plccExampleTable = document.querySelector("#someId");
plccExampleTable.tableData = data;
</script>
Dev
Run this command from the cp-elements root and select plcc-table. This will start the plcc-table demo. You can test your changes here.
npm start
Build
npm run build
Releasing this component
Once you have merged your changes we need to publish to NPM.
Here's steps you can use to publish the component:
- Go to the component's folder, that has the package.json file in it.
- Make sure the organization (e.g.
"name": "@cpelements/plcc-table"
) is correct - Update the version in the package.json, or use the
npm version
command, e.g. runnpm version patch
from the component folder. npm run build
(this will make sure the JS will have the proper version in the compiled code)npm publish --access=public
- When succesful be sure to commit the updated package.json file.
Since the lifecycle application is pulling in the component via NPM, the plcc-table is now ready to be used. However, Product lifecycle pages (e.g. Openshift) pull in the component via chrometwo_require, so the new component version will need to be released to CP-CHROME to be used on these pages. Please contact Tyler Martin or anyone on the DXP-FED team to release the new version in CP-CHROME.