DS 835: Table Element

[MarcinMr]

Jira

https://pegadigitalit.atlassian.net/browse/DS-835

Summary

The new element table is created that can replace the basic functionalities of the current Table Component

Details

1. Much of the props and functionality are taken from the old table component, for example:

• only rows table
• table with top headers only
• table with side headers only
• table with both top and side headers
• caption of the table
• borderless table
• format table (regular, numeric)

2. The following methods of display

• Twig (appearance and behavior can be achieved via choosing props from the schema)
• HTML only (appearance and behavior can be achieved by adding appropriate classes to the <table>)
• HTML only (without the tbody) (appearance and behavior can be achieved by adding appropriate classes to the <table>)

3. JavaScript creates a wrapper and wraps the <table> if needed
4. There are props that set the first, second, or first two columns as fixed width
5. There is now a full width prop that will changed the default behavior (inline-block) to be full width
6. There are sticky header functionality now included

How to test

(Focus on testing in all browsers)

• Pull the branch.
• Check the code, especially the CSS and JS.
• Check the table-element docs.
• Go to test folder and find table test examples.
• Play with them and confirm they work properly.

Release notes

There is a new Table Element that replaces the basic functionalities of the current Table Component

[colbytcook]

@cjwhitedev

1. The caption styling came from this previous work regarding the table component, https://feature-ds-516-table-component-rework.boltdesignsystem.com/pattern-lab/?p=components-table-headers. Since Mike was apart of this work we decided to use the design found on this branch.
2. I have not been able to reproduce this, it seems to be functioning correctly. One thing to note, the side sticky header behavior will only start working if the responsive behavior kicks in. Otherwise it will render and behave like normal.
3. Good Idea, I will update that

[colbytcook]

@cjwhitedev Updated the "Fixed Width" page with the note.

[colbytcook]

@danielamorse I addressed the feedback you had

• Docs > Table Examples: the full width tables now render full width
• Tests > Table Default html: Updated the CSS to stop the flashes

Full Width Prop I added a full_width prop into the schema that will do three things.

1. It will add a e-bolt-table--full-width class to the <table>. This class will apply a width: 100%; to the table to help prevent flash.
2. The table.twig will now apply a e-bolt-table-wrapper--full-width class to the e-bolt-table-wrapper that will make the wrapper display block (and forcing it to be full width).
3. The table JS will now poll the <table> for the e-bolt-table--full-width class and add the e-bolt-table-wrapper--full-width class to the wrapper when it is being rendered.

For WYSIWYG support, we can simply add a class (e-bolt-table--full-width) to the table element to achieve the desired effect.

I updated the existing docs pages with these changes (where applicable) and created a new documentation page for the full width prop. Let me know if you have any other questions regarding this.

[colbytcook]

@cjwhitedev Updated the PR description and responded to your inline comment