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

[danielamorse]

@colbytcook, I reviewed the docs and noticed:

• Docs > Table Examples: The full-width tables aren't full width.
• Tests > Table Default html: The tables are full-width until the JS loads. I think @MarcinMr works around this on the 6.x branch by scoping the width: 100% rule to .c-bolt-table > table, or in your case e-bolt-table-wrapper > .e-bolt-table.

These are the only issues I found. Here are a couple other thoughts, not blockers:

Full-width tables in wysiwyg
If I'm a content author and I make a plain HTML table and I want it to be width 100% (and I'm not going to edit the raw markup), how do I do this? Since the "full-width" style comes from the wrapper and the wrapper is added by JS I don't think there's anything in place to support full-width tables for a non-power-user. To solve that we'd have to check for some additional class on the <table> itself. Is this a use case we are solving for? Any thoughts?

Wrapper full-width classname
To make the container full-width I'd actually go with u-bolt-block, like @MarcinMr did on the 6.x branch. I didn't realize that literally the only thing this wrapper had to do was set display: block. Alternatively, if you prefer a component class, maybe e-bolt-table-wrapper--full-width would tell the user more about what it does?

[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.

[danielamorse]

@colbytcook awesome, love the full_width prop. Tested locally and it looks good to me.

[cjwhitedev]

• i think the PR description needs to be updated again, at least since adding the full_width prop, if not more than that.
• see inline comment as well

[cjwhitedev]

this demo could probably be shortened, maybe like layout's. The other demos on the page show the full context.

[colbytcook]

@cjwhitedev I don't mind this initial demo page being longer than Layouts because layout examples are larger scoped than a table.

[colbytcook]

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

[remydenton]

Is filters a real prop? I don't see it used in the twig template or any of the examples.