Style Table Element

[Eusse]

Hi, i'm trying to style the table element with bootstrap like this. I added the classNames attribute in the component template but it adds the classes to the div, not the table tag.
{{#light-table table classNames='table table-bordered table-hover table-condensed' as |t|}}
Is this supported? am i doing something wrong?

ember-light-table: 1.0.0
ember-cli: 2.6.2
node: 6.2.2
os: linux x64

[offirgolan]

Im not able to recreate your issue. Using classNames should work... Im using it in my apps with no problems.

{{#light-table table classNames="my-custom-class" height='65vh' as |t|}}
 ...
{{/light-table}}

[Eusse]

Yeah, that's the issue. I need the classes to be applied to the table tag, not the div, because if it's applied to the div, the cells wont get the borders.

[offirgolan]

@Eusse can you target your CSS at the table tag? Instead of .table-bordered have it be .table-bordered table

[mwalper]

That's what i did to fix this, but i'm not sure that's the right way to do it.
You can place whichever css class(es) you want.
In Parent Component:

didInsertElement() {
    "use strict";
    Ember.run.next(this, function(){
        this.$('table').addClass('table m-b-0 table-bordered table-hover table-condensed');
    });
},

[Eusse]

@offirgolan Not really, i need to use default bootstrap css and it says i should use all the classes within table tag as mentioned in the docs link. @mwalper I will try this, but i would like to have some way to specify it.

[buschtoens]

@Eusse right now, this is the only way, besides overriding the template, which I would discourage.

Maybe we should implement a tableClassNames property or something similar and add it to the <table> tag (also in lt-head and lt-footer).

[buschtoens]

Side note: applying the classes on the wrapping <div> doesn't work because of Bootstrap using direct descendant selectors in their tables.less. They surely got their reasons, but I heavily dislike these kinds of overly restrictive CSS rules. But I got good news for you: They've fixed it in Bootstrap v4. 😄

[Eusse]

That sounds great @buschtoens! but looking at the alpha 4 documentation still needs the classes in the table tag. I like better your idea of implementing the TableClassNames property, besides, other frameworks like zurb foundation use this approach as well. I think we should add this feature.

[buschtoens]

Disregard the documentation. It's only exemplary. 😉
The source code I linked clearly shows that they don't use the direct descendant / sibling selector in v4.

I think this is more of an issue with Bootstrap and not ember-light-table. IMHO the CSS shouldn't be so tightly coupled to the HTML structure as this leads to exactly these kinds of problems.

Ultimately, this decision is up to @offirgolan, but personally I think this unnecessarily increases the API surface area while providing little benefit. Independent of this issue, I recommend switching to v4 for new projects - is this not an option for you?

[offirgolan]

@buschtoens adding something like tableClassNames is very simple to do and I believe will resolve this issue. Ill take some time this week to add this feature. @taras does this solution work for you?

[taras]

@offirgolan yeah, I think tableClassNames is a good solution here. Are you thinking something like this?

{{light-table table tableClassNames="table table-bordered table-hover table-condensed"}}

[offirgolan]

@taras yup exactly that. Then apply all those classes to each table being
rendered.

[Eusse]

@buschtoens You are right, i tried and it works well, i can switch to v4 for my personal projects, but i cannot change my client's bootstrap version.
Thanks for the help guys!

[fran-worley]

Sorry to bump an old issue but I believe this only partially resolves issues marrying up Bootstraps css styles with ember-light-table.

We need to be able to apply styles directly to the 'thead' too ('.thead-default' is just one style example from BS v4). Could the api be harmonized to allow you to add classes directly to table elements (table, thead, tbody etc.).