plcc-table
v0.0.15
Published
Plcc table element for PatternFly Elements
Downloads
115
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>
Accessibility
Explain how this component meets accessibility standards.
Slots
This component does not make use of a slot
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 table will be hidden
<plcc-table product-name="Red Hat Enterprise Linux" hide-eol></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>
Please see the demo file in this repo for additional detail
Dependencies
Make sure you have [Web Component Tester][web-component-tester] installed when writing tests.
npm install -g web-component-tester
Dev
npm start
Test
npm run test
Build
npm run build