# @cpelements/rh-table

> Cp table element for PatternFly Elements

Latest version **0.0.19** (published 2023-04-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @cpelements/rh-table
pnpm add @cpelements/rh-table
yarn add @cpelements/rh-table
bun add @cpelements/rh-table
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.19 |
| Published | 2023-04-18 |
| First published | 2022-01-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 11 |
| Unpacked size | 358.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | tkitslaar, bexter89, dfaucette, fwang830, rlahoda, tylermart10, kylebuch8, kelss, wesruv, jordanpagewhite |
| Keywords | web-components, html |

## Links

- npm: https://www.npmjs.com/package/@cpelements/rh-table
- Repository: https://github.com/redhataccess/cp-elements
- Homepage: https://github.com/redhataccess/cp-elements#readme
- Issues: https://github.com/redhataccess/cp-elements/issues
- npm.io page: https://npm.io/package/@cpelements/rh-table

## Dependencies (11)

- [@patternfly/pfe-icon](https://npm.io/package/@patternfly/pfe-icon.md) ^1.11.2
- [@patternfly/pfe-sass](https://npm.io/package/@patternfly/pfe-sass.md) 1.9.0
- [@patternfly/pfelement](https://npm.io/package/@patternfly/pfelement.md) 1.10.1
- [@patternfly/pfe-avatar](https://npm.io/package/@patternfly/pfe-avatar.md) ^1.9.3
- [@patternfly/pfe-button](https://npm.io/package/@patternfly/pfe-button.md) ^1.9.3
- [@patternfly/pfe-datetime](https://npm.io/package/@patternfly/pfe-datetime.md) ^1.9.3
- [@patternfly/pfe-markdown](https://npm.io/package/@patternfly/pfe-markdown.md) ^1.9.3
- [@patternfly/pfe-clipboard](https://npm.io/package/@patternfly/pfe-clipboard.md) ^1.11.2
- [@cpelements/cp-documentation](https://npm.io/package/@cpelements/cp-documentation.md) ^0.1.60
- [@patternfly/pfe-autocomplete](https://npm.io/package/@patternfly/pfe-autocomplete.md) ^1.9.3
- [@patternfly/pfe-progress-indicator](https://npm.io/package/@patternfly/pfe-progress-indicator.md) ^1.9.3

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 0.0.19 (latest) — 2023-04-18
- 0.0.18 — 2023-04-18
- 0.0.17 — 2023-04-06
- 0.0.16 — 2023-03-28
- 0.0.15 — 2022-11-28
- 0.0.14 — 2022-11-21
- 0.0.13 — 2022-11-03
- 0.0.12 — 2022-11-02
- 0.0.11 — 2022-10-26
- 0.0.10 — 2022-10-26
- 0.0.9 — 2022-10-26
- 0.0.8 — 2022-10-26
- 0.0.7 — 2022-06-17
- 0.0.6 — 2022-06-17
- 0.0.5 — 2022-05-14
- … 4 more at https://npm.io/package/@cpelements/rh-table/versions

## README

# PatternFly Element | Rh table element

Make tables less terrible

## Usage

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

```html
<rh-table>
  <table class="tableblock frame-all grid-all spread">
    <caption class="title">
      Applications
    </caption>
    <colgroup>
      <col style="width: 25%" />
      <col style="width: 25%" />
      <col style="width: 50%" />
    </colgroup>
    <thead>
      <tr>
        <th class="tableblock halign-left valign-top"
          id="table4_th_name"
          scope="col">
          Name
        </th>
        <th class="tableblock halign-left valign-top"
          id="table4_th_category"
          scope="col">
          Category
        </th>
        <th class="tableblock halign-left valign-top"
          id="table4_th_description"
          scope="col">
          Description
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="tableblock halign-left valign-top" headers="table4_th_name">
          <p class="tableblock">Firefox</p>
        </td>
        <td class="tableblock halign-left valign-top" headers="table4_th_category">
          <p class="tableblock">Browser</p>
        </td>
        <td class="tableblock halign-left valign-top" headers="table4_th_description">
          <p class="tableblock">
            Mozilla Firefox is an open-source web browser. It’s designed
            for standards compliance, performance, portability.
          </p>
        </td>
      </tr>
      <tr>
        <td class="tableblock halign-left valign-top" headers="table4_th_name">
          <p class="tableblock">Arquillian</p>
        </td>
        <td class="tableblock halign-left valign-top" headers="table4_th_category">
          <p class="tableblock">Testing</p>
        </td>
        <td class="tableblock halign-left valign-top" headers="table4_th_description">
          <p class="tableblock">
            An innovative and highly extensible testing platform.
            Empowers developers to easily create real, automated tests.
          </p>
        </td>
      </tr>
    </tbody>
  </table>
</rh-table>
```

## Slots

This only has a default slot which 1 table should occupy.
## Attributes

- `sortable`: Defines which columns can be sorted. This is 1 indexed, not 0 indexed, so the first column will be `sortable="1"`
- `full-screen`: Boolean attribute to set if the component is able to be viewed full screen. Defaults to `true`. Usable options are `true`, `t`, `false`, `f`.

## CSS Variables

```
--rh-table--maxHeight
```
If set it will constrain the table's height and the user will have to scroll to see the rest. If the table can go full screen (see `full-screen` attribute) it will also add an "expand" button that will add a class to the table and try to replace `--rh-table--maxHeight`'s value with `max-content`. Light DOM styling may be necssary to help depending on how `--rh-table--maxHeight` is set.

```
--rh-table--button--outline--focus
```
Focus style for buttons that are in the shadowRoot of the component. Currently set to `2px dashed black`, but check rh-table.scss for the latest and greatest.

```
--rh-table--wrappers--width
```
Set the table wrapper's width, defaults to `auto`. Applies to `rh-table` and a wrapper div in the shadow DOM.

```
--rh-table--scrollbar--width
```
Avoid messing with this, it's used to layout the fullcreen and expand button and set by JS.

<!-- ## Events

Describe any events that are accessible external to the web component. There is no need to describe all the internal-only functions.

### rh-table:sorted -->

## Dependencies

- `/dist/rh-table--lightdom.css` is required for the styling

## Dev

    `npm start`

## Test

    `npm run test`

## Build

    `npm run build`

## Demo

From the PFElements root directory, run:

    `npm run demo`

## Code style

Rh table (and all PFElements) use [Prettier][prettier] to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://prettier.io/docs/en/editors.html
[web-component-tester]: https://github.com/Polymer/web-component-tester

---
_Source: https://npm.io/package/@cpelements/rh-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._