plcc-table/README.md

Plcc table element for PatternFly Elements

# Plcc table Element

Product lifecycle table web component.

## Usage

Describe how best to use this web component along with best practices.

```html
<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.

```html
<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

```html
<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

```html
<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.

```html
<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