[NEW] pfe-table component

[markcaron]

Using a web component would be a good way to add in all the table goodies we'd need for apps as well as content writers, like:

• DataTables or something similar for sorting and paging tables
• TablesawJS for responsive tables
• Auto-correcting poorly constructed tables, and providing the necessary IDs and headers attributes for accessibility

Could be as simple as

<rh-table responsive sorting paging ...>
  <table>
    ...
  </table>
</rh-table>

Keeping the <table> element inside the lightDOM / slot, we'd ensure that this is enhanced progressively.

[coreyvickery]

@starryeyez024 Do we still need this issue? Tables are now in the design kit using these specs from PatternFly.

https://www.patternfly.org/v4/documentation/react/components/table/

[starryeyez024]

cc @kylebuch8 @markcaron please see Corey's question

[coreyvickery]

@kylebuch8 @markcaron Checking back, do we still need this?

[castastrophe]

https://www.patternfly.org/v4/components/table

[coreyvickery]

@heyMP The kit is using PatternFly's Table component 1:1, but regardless, let me know if you had any questions.

[heyMP]

Thanks @coreyvickery!

[castastrophe]

Just to confirm, we do need a web component for tables - this will allow us to enhance the table with sortability and filters.

[castastrophe]

We can look here for functionality options: https://www.webcomponents.org/element/HTMLElements/smart-table

[castastrophe]

PF4 tables include designs for:

general

• empty state

headers

• tooltips
• sortable

rows

• selectable with checkbox
• selectable with radio button
• actions
• expandable
• editable
• favoritable

[castastrophe]

@coreyvickery cc @ajacobs21e I think we might need designs for:

general

• pagination (we can use existing pagination designs just want to confirm their relationship and positioning to the table)
• draggable columns/rows
• export symbol
• loading state

headers

• filters (dropdown)

[ajacobs21e]

• Pagination footer https://www.patternfly.org/v4/components/table/design-guidelines#table-elements
• Draggable row https://www.patternfly.org/v4/components/data-list#draggable
• Draggable columns https://www.patternfly.org/v4/components/table/react-demos/#column-management-with-draggable
• Export symbol https://www.patternfly.org/v4/guidelines/icons#all-icons pf-icon-export
• Loading state https://www.patternfly.org/v4/components/toolbar/design-guidelines#filter-group
• Filters https://www.patternfly.org/v4/components/table/react-demos/#filterable or https://www.patternfly.org/v4/components/toolbar/design-guidelines#filter-group

[coreyvickery]

@castastrophe Let me know if you need to see any designs beyond what Allie has shared.

[castastrophe]

Thanks @ajacobs21e!

Can you help me with where on this page the details of how to manage a loading state for a table is?

Loading state https://www.patternfly.org/v4/components/toolbar/design-guidelines#filter-group

[ajacobs21e]

@castastrophe sorry I pasted the wrong link. Are you searching PatternFly.org for these designs? That's how I found all of these. https://www.patternfly.org/v4/components/table/react-demos/#loading

[castastrophe]

@ajacobs21e Yup, that's where my list PF4 tables include designs for: above came from.

[castastrophe]

@ajacobs21e I see however that some of them only exist in the React documentation which is likely why they were difficult to find. I assume because no similar functionality exists for the HTML versions.

[andre-lockhart-lab49]

Hi,

Is a web components table still on the roadmap for Patternfly? If so, is it being developed and when will it land? Thanks!

[coreyvickery]

@kylebuch8 @markcaron Should we discuss this in a future meeting? PatternFly has done a lot of work on this component already that we could adopt and turn into a web component for PFE.

[markcaron]

@coreyvickery, yeah. We should prioritize this component, though we need to determine how we're going to tackle the styling, since there will likely be a majority of it done in the lightDOM. That's a separate discussion from the design, of course.

[markcaron]

@coreyvickery we should bump this in our priority. Perhaps we can check the status cp-table with @rlahoda and/or @wesruv so we can migrate to PFE and then to RHDS.

We'll need rh-table for ux.redhat.com

CC: @bennypowers @heyMP @zeroedin

[bennypowers]

We received a request to implement expandable table rows

[bennypowers]

Closed by #2564. please open new issues for adding more features to pf-table