0

Edit: After testing some more, I've determined that this issue of the mysteriously white Data Table header occurs only when dropping the component into a Lightning Application with extends="force:slds"

Anyone know why the CSS is changing here?

enter image description here

Outdated and non-working css/code on SFDC documentation is the bane of anyone attempting to learn the framework.

For example, looking at https://lightningdesignsystem.com/components/data-tables/

The first example, the 'Base' styling, clearly shows a grey header row in the example.

And yet, when I copy/paste the provided sample code into an empty lightning component and run, I get a table with no color in the header, just white like every other row.

Was there a change to SLDS table design, or is there something missing from the example styling?

Also.. is it really that unreasonable to expect their own documentation to at least be internally consistent? I've run into multiple examples of stuff like this now, and I don't feel like I can rely on the documentation (which is really bad because I can't be confident that any issue is due to my own coding mistakes).

Improve this question

1 Answer 1

Reset to default
2

You can file any documentation issues you find at https://github.com/salesforce-ux/design-system/issues.

I've attempted to reproduce your table issue step-by-step but I do see the grey header. The markup structure in the example matches what the CSS is expecting and styles correctly.

enter image description here

enter image description here

It's difficult to diagnose why you don't see the grey header without more context but double check for any possible custom CSS overrides you might have.

Improve this answer
6
  • when I inspect the element on the doc page, the .slds-table thead th class has an attribute of background-color: #fafaf9;, which is the desired grey. Yet when I inspect that same element on my own copy-paste of the code, that same class has the attribute background-color: rgb(255, 255, 255);.. no idea why, since I have no custom css or changes to the example code.
    – smohyee
    Mar 3, 2020 at 18:34
  • Are you or your team working with LWC and CSS custom properties by chance? Additionally, I've created a barebones example of the data table in Codepen: codepen.io/Puppies4Life/pen/rNVzdQw to show that using the example markup from the SLDS documentation site does work with SLDS v2.11.4 Hopefully this working example will help you figure out your issue.
    – Jbrack
    Mar 3, 2020 at 19:06
  • Thanks I'm digging around now. I'm currently testing my component by dropping it into a 'previewer' lightning app, which has nothing but an extends="force:slds" extension. Another thing to note is the white background property is greyed out in Chrome's inspector, suggesting its an inherited property but not applied - which is strange consider it IS applied.
    – smohyee
    Mar 3, 2020 at 21:01
  • Yeah ok previewing in the App seems to be the issue - when using the same component in a lightning page there is no difference from your test. @Jbrack any idea why putting the component in a lightning App changes only that one CSS property? Seems like this is a bug after all (just specific to extending foce:slds?)
    – smohyee
    Mar 3, 2020 at 21:05
  • When you get a chance, can you describe or screen shot what Chrome's inspector is saying the computed style is for background-color and what's below the property when you click the little triangle to expand the property (example) And I'll look into the issue you described.
    – Jbrack
    Mar 3, 2020 at 21:07

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .