@cpelements/plcc-table

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