Skip to content

Commit 23bf9b2

Browse files
eyevanaNikki Massaro Kauffmannikkimkbennypowers
authored
feat(pf-table): pf-table (#2564)
* feat: component init * feat: copy code from cp-table * feat: add expandable row button * feat: add basic toggle functionality * style: add hidden styling * docs: just use expandable demo * fix: selector * feat: switch to grid display and create expandable elements * feat: mock the design in the demo * fix: remove empty cells and expandable toggles from light dom * fix: add number of cols via CSS var * fix: move toggle to rowset light dom * fix: pseudo element covering row * style: use CSS var * feat: added css for expand-toggle within expandable-rowset * feat: updated pf-expandable-rowset.css to make room for toggle * feat: updated pf-expand-toggle.css to absolute positioning * feat: added top to pf-expand-toggle.css so it aligns with cell * feat(table): added sorting * fix(table): fixed keydown and click creating double events * feat(table): updated demo * fix(table): fixed stay keydown listener and sortable pf-th CSS * fix(table): sort icon CSS for pf-th * feat: wrap slotted content in conatiner * refactor(table): replace expand-toggle and expandable-row instead, use `<pf-tr expandable>` * refactor(table): replace expandable-rowset with tbody[expandable] * fix(table): role attr * fix(table): encapsulate private styles Also fix role assignment for th depending on placement * fix(table): sorting sort algo and button styles * feat(table): expansion slots (#2576) * feat(table): expansion slots experimental approach to expandable rows... * fix(table): styles and layout for expandable rows * fix(table): css * fix(table): expansion slot * fix(table): border * fix(table): expandable * refactor(table): lift logic to parent * refactor(table): sort functions * docs(table): prose * docs(table): update * style: add PF4 styling thead * style: add PF4 styling to tbody * fix: media query to match PF4 * fix: sort indicator color * fix: media query in table to match PF4 * docs: start adding js docs * docs: add another batch of css props * docs: add JSDoc css props * docs: add css prop JSDoc * style: update elements/pf-table/pf-table.css * docs(table): add basic docs * docs: add overview stub * docs: beta table --------- Co-authored-by: Nikki Massaro Kauffman <[email protected]> Co-authored-by: Nikki Massaro Kauffman <[email protected]> Co-authored-by: Benny Powers <[email protected]> Co-authored-by: Benny Powers <[email protected]>
1 parent c072818 commit 23bf9b2

30 files changed

+2279
-29
lines changed

‎.changeset/pf-table.md‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
---
2+
"@patternfly/elements": minor
3+
---
4+
5+
✨ Added `<pf-table>`
6+
7+
```html
8+
<pf-table>
9+
<pf-thead>
10+
<pf-tr>
11+
<pf-th>Repositories</pf-th>
12+
<pf-th>Branches</pf-th>
13+
<pf-th>Pull requests</pf-th>
14+
<pf-th>Workspaces</pf-th>
15+
<pf-th>Last commit</pf-th>
16+
</pf-tr>
17+
</pf-thead>
18+
<pf-tr>
19+
<pf-th>one</pf-th>
20+
<pf-td>two</pf-td>
21+
<pf-td>three</pf-td>
22+
<pf-td>four</pf-td>
23+
<pf-td>five</pf-td>
24+
</pf-tr>
25+
<pf-tr>
26+
<pf-th>one - 2</pf-th>
27+
<pf-td></pf-td>
28+
<pf-td></pf-td>
29+
<pf-td>four - 2</pf-td>
30+
<pf-td>five - 2</pf-td>
31+
</pf-tr>
32+
<pf-tr>
33+
<pf-th>one - 3</pf-th>
34+
<pf-td>two - 3</pf-td>
35+
<pf-td>three - 3</pf-td>
36+
<pf-td>four - 3</pf-td>
37+
<pf-td>five - 3</pf-td>
38+
</pf-tr>
39+
</pf-table>
40+
```
41+
42+
This is an initial release, that implements a subset of the features of upstream
43+
PatternFly's table component. APIs can be expected to change.

‎docs/_plugins/html-example.cjs‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
const { readFile } = require('node:fs/promises');
2+
const { dirname, join } = require('node:path');
3+
4+
function dedent(str) {
5+
const stripped = str.replace(/^\n/, '');
6+
const match = stripped.match(/^\s+/);
7+
return match ? stripped.replace(new RegExp(`^${match[0]}`, 'gm'), '') : str;
8+
}
9+
10+
async function renderFromFile(content, { src }) {
11+
let path;
12+
if (src.startsWith('/')) {
13+
path = join(process.cwd(), src);
14+
} else {
15+
path = join(dirname(this.ctx._.docsTemplatePath), src);
16+
}
17+
if (path) {
18+
const fileContent = await readFile(path, 'utf-8');
19+
return fileContent;
20+
} else {
21+
return content;
22+
}
23+
}
24+
25+
module.exports = function(eleventyConfig) {
26+
eleventyConfig.addPairedShortcode('htmlexample', async function(content, kwargs) {
27+
if (kwargs?.src) {
28+
content = await renderFromFile.call(this, dedent(content), kwargs);
29+
}
30+
return /* html */`
31+
<div class="example-preview">
32+
${content}
33+
</div>
34+
<details class="html-example ${kwargs?.class ?? ''}"${!kwargs?.style ? '' : ` style="${kwargs.style}"`}>
35+
<summary>View HTML Source</summary>
36+
37+
~~~html
38+
${dedent(content)}
39+
~~~
40+
41+
</details>`;
42+
});
43+
};

‎elements/package.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,13 @@
4646
"./pf-spinner/pf-spinner.js": "./pf-spinner/pf-spinner.js",
4747
"./pf-switch/BaseSwitch.js": "./pf-switch/BaseSwitch.js",
4848
"./pf-switch/pf-switch.js": "./pf-switch/pf-switch.js",
49+
"./pf-table/pf-table.js": "./pf-table/pf-table.js",
50+
"./pf-table/pf-thead.js": "./pf-table/pf-thead.js",
51+
"./pf-table/pf-tbody.js": "./pf-table/pf-tbody.js",
52+
"./pf-table/pf-tr.js": "./pf-table/pf-tr.js",
53+
"./pf-table/pf-th.js": "./pf-table/pf-th.js",
54+
"./pf-table/pf-td.js": "./pf-table/pf-td.js",
55+
"./pf-table/pf-caption.js": "./pf-table/pf-caption.js",
4956
"./pf-tabs/BaseTab.js": "./pf-tabs/BaseTab.js",
5057
"./pf-tabs/BaseTabPanel.js": "./pf-tabs/BaseTabPanel.js",
5158
"./pf-tabs/BaseTabs.js": "./pf-tabs/BaseTabs.js",

‎elements/pf-table/README.md‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# Table
2+
A **table** is used to display large data sets that can be easily laid out in a simple grid with column headers.
3+
4+
## Usage
5+
Use the `<pf-table>` elements the way you would native HTML table elements.
6+
See the [docs][docs] for more info.
7+
8+
```html
9+
<pf-table>
10+
<pf-thead>
11+
<pf-tr>
12+
<pf-th>Repositories</pf-th>
13+
<pf-th>Branches</pf-th>
14+
<pf-th>Pull requests</pf-th>
15+
<pf-th>Workspaces</pf-th>
16+
<pf-th>Last commit</pf-th>
17+
</pf-tr>
18+
</pf-thead>
19+
<pf-tr>
20+
<pf-th>one</pf-th>
21+
<pf-td>two</pf-td>
22+
<pf-td>three</pf-td>
23+
<pf-td>four</pf-td>
24+
<pf-td>five</pf-td>
25+
</pf-tr>
26+
<pf-tr>
27+
<pf-th>one - 2</pf-th>
28+
<pf-td></pf-td>
29+
<pf-td></pf-td>
30+
<pf-td>four - 2</pf-td>
31+
<pf-td>five - 2</pf-td>
32+
</pf-tr>
33+
<pf-tr>
34+
<pf-th>one - 3</pf-th>
35+
<pf-td>two - 3</pf-td>
36+
<pf-td>three - 3</pf-td>
37+
<pf-td>four - 3</pf-td>
38+
<pf-td>five - 3</pf-td>
39+
</pf-tr>
40+
</pf-table>
41+
```
42+
43+
[docs]: https://patternflyelements.org/components/table/

‎elements/pf-table/demo/expandable-rows-compound.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<pf-table>
2+
<pf-thead>
3+
<pf-tr>
4+
<pf-th>Repositories</pf-th>
5+
<pf-th>Branches</pf-th>
6+
<pf-th>Pull requests</pf-th>
7+
<pf-th>Workspaces</pf-th>
8+
<pf-th>Last commit</pf-th>
9+
<pf-th></pf-th>
10+
</pf-tr>
11+
</pf-thead>
12+
13+
<pf-tr expandable="compound">
14+
<pf-td>
15+
<a href="#">siemur/test-space</a>
16+
</pf-td>
17+
<pf-td compound-expand="branches">
18+
<pf-icon set="fas" icon="code-branch"></pf-icon>
19+
10
20+
</pf-td>
21+
<p slot="branches">Branches...</p>
22+
<pf-td compound-expand="pull-requests">
23+
<pf-icon set="fas" icon="code-pull-request"></pf-icon>
24+
4
25+
</pf-td>
26+
<p slot="pull-requests">Pull requests...</p>
27+
<pf-td compound-expand="workspaces">
28+
<pf-icon set="fas" icon="cube"></pf-icon>
29+
4
30+
</pf-td>
31+
<p slot="workspaces">Workspaces</p>
32+
<pf-td>
33+
<time>20 minutes ago</time>
34+
</pf-td>
35+
<pf-td>
36+
<a href="#">Open in GitHub</a>
37+
</pf-td>
38+
</pf-tr>
39+
40+
<pf-tr expandable="compound">
41+
<pf-td>
42+
<a href="#">siemur/test-space-2</a>
43+
</pf-td>
44+
<pf-td compound-expand="branches">
45+
<pf-icon set="fas" icon="code-branch"></pf-icon>
46+
3
47+
</pf-td>
48+
<p slot="branches">Branches...</p>
49+
<pf-td compound-expand="pull-requests">
50+
<pf-icon set="fas" icon="code-pull-request"></pf-icon>
51+
4
52+
</pf-td>
53+
<p slot="pull-requests">Pull requests...</p>
54+
<pf-td compound-expand="workspaces">
55+
<pf-icon set="fas" icon="cube"></pf-icon>
56+
4
57+
</pf-td>
58+
<p slot="workspaces">Workspaces</p>
59+
<pf-td>
60+
<time>20 minutes ago</time>
61+
</pf-td>
62+
<pf-td>
63+
<a href="#">Open in GitHub</a>
64+
</pf-td>
65+
</pf-tr>
66+
67+
</pf-table>
68+
69+
<script type="module">
70+
import '@patternfly/elements/pf-table/pf-table.js';
71+
import '@patternfly/elements/pf-icon/pf-icon.js';
72+
</script>

‎elements/pf-table/demo/expandable-rows.html‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<pf-table>
2+
<pf-thead>
3+
<pf-tr>
4+
<pf-th>Dependency</pf-th>
5+
<pf-th sortable># Direct Vulnerabilities</pf-th>
6+
<pf-th># Transitive Vulnerabilities</pf-th>
7+
<pf-th>Highest CVSS Score</pf-th>
8+
<pf-th>Highest Severity</pf-th>
9+
<pf-th>Red Hat Remediation Available</pf-th>
10+
</pf-tr>
11+
</pf-thead>
12+
13+
<pf-tr id="1" expandable>
14+
<pf-td>
15+
<a href="#" target="_blank">io.quarkus:quarkus-hibernate-orm</a>
16+
</pf-td>
17+
<pf-td>1</pf-td>
18+
<pf-td>6</pf-td>
19+
<pf-td>7.4/10</pf-td>
20+
<pf-td>
21+
<a href="#" target="_blank">SNYK-JAVA-ORGGRAALVMSDK-5457933</a>
22+
</pf-td>
23+
<pf-td>
24+
<pf-icon icon="circle-check" size="md"></pf-icon>
25+
</pf-td>
26+
27+
<p slot="expansion">Details of the dependency: <strong>io.quarkus:quarkus-hibernate-orm</strong></p>
28+
<pf-table slot="expansion">
29+
<pf-tr>
30+
<pf-th>Severity</pf-th>
31+
<pf-th>Description</pf-th>
32+
<pf-th>CVSS Score</pf-th>
33+
<pf-th>ID</pf-th>
34+
<pf-th>Remediation</pf-th>
35+
</pf-tr>
36+
<pf-tr>
37+
<pf-td>
38+
<pf-label color="orange">Medium</pf-label>
39+
</pf-td>
40+
<pf-td>Information Exposure</pf-td>
41+
<pf-td>5.1/10</pf-td>
42+
<pf-td>CVE-20222-41678</pf-td>
43+
<pf-td>
44+
<div class="icon-container">
45+
<pf-icon icon="circle-check" size="md"></pf-icon>
46+
<a href="#">1.2.3-redhat-003</a>
47+
<pf-icon icon="question-circle" size="md"></pf-icon>
48+
</div>
49+
</pf-td>
50+
</pf-tr>
51+
<pf-tr>
52+
<pf-td>
53+
<pf-label color="red">Critical</pf-label>
54+
</pf-td>
55+
<pf-td>Information Exposure</pf-td>
56+
<pf-td>5.1/10</pf-td>
57+
<pf-td>CVE-20222-41678</pf-td>
58+
<pf-td>
59+
<div class="icon-container">
60+
<pf-icon icon="circle-check" size="md"></pf-icon>
61+
<a href="#">1.2.3-redhat-003</a>
62+
<pf-icon icon="question-circle" size="md"></pf-icon>
63+
</div>
64+
</pf-td>
65+
</pf-tr>
66+
<pf-tr id="child" expandable>
67+
<pf-td>
68+
Show Transitives with Vulnerabilities
69+
</pf-td>
70+
<p slot="expansion">Additional details...</p>
71+
</pf-tr>
72+
</pf-table>
73+
74+
</pf-tr>
75+
76+
<pf-tr id="2">
77+
<pf-td>
78+
<a href="#" target="_blank">io.quarkus:quarkus-orm</a>
79+
</pf-td>
80+
<pf-td>2</pf-td>
81+
<pf-td>6</pf-td>
82+
<pf-td>5.1/10</pf-td>
83+
<pf-td>
84+
<a href="#" target="_blank">ANYK-JAVA-ORGGRAALVMSDK-5457933</a>
85+
</pf-td>
86+
<pf-td>
87+
<pf-icon icon="circle-check" size="md"></pf-icon>
88+
</pf-td>
89+
</pf-tr>
90+
<pf-tr id="3">
91+
<pf-td>
92+
<a href="#" target="_blank">io.quarkus:quarkus</a>
93+
</pf-td>
94+
<pf-td>1</pf-td>
95+
<pf-td>7</pf-td>
96+
<pf-td>6.4/10</pf-td>
97+
<pf-td>
98+
<a href="#" target="_blank">ZNYK-JAVA-ORGGRAALVMSDK-5457933</a>
99+
</pf-td>
100+
<pf-td>
101+
<pf-icon icon="circle-check" size="md"></pf-icon>
102+
</pf-td>
103+
</pf-tr>
104+
</pf-table>
105+
106+
<script type="module">
107+
import '@patternfly/elements/pf-table/pf-table.js';
108+
import '@patternfly/elements/pf-label/pf-label.js';
109+
</script>

‎elements/pf-table/demo/pf-table.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<pf-table>
2+
<pf-thead>
3+
<pf-tr>
4+
<pf-th>Repositories</pf-th>
5+
<pf-th>Branches</pf-th>
6+
<pf-th>Pull requests</pf-th>
7+
<pf-th>Workspaces</pf-th>
8+
<pf-th>Last commit</pf-th>
9+
</pf-tr>
10+
</pf-thead>
11+
<pf-tr>
12+
<pf-th>one</pf-th>
13+
<pf-td>two</pf-td>
14+
<pf-td>three</pf-td>
15+
<pf-td>four</pf-td>
16+
<pf-td>five</pf-td>
17+
</pf-tr>
18+
<pf-tr>
19+
<pf-th>one - 2</pf-th>
20+
<pf-td></pf-td>
21+
<pf-td></pf-td>
22+
<pf-td>four - 2</pf-td>
23+
<pf-td>five - 2</pf-td>
24+
</pf-tr>
25+
<pf-tr>
26+
<pf-th>one - 3</pf-th>
27+
<pf-td>two - 3</pf-td>
28+
<pf-td>three - 3</pf-td>
29+
<pf-td>four - 3</pf-td>
30+
<pf-td>five - 3</pf-td>
31+
</pf-tr>
32+
</pf-table>
33+
34+
<script type="module">
35+
import '@patternfly/elements/pf-table/pf-table.js';
36+
</script>
37+

0 commit comments

Comments
 (0)