Comments (3)
Discussed at Planning:
- @nsolerieu to take on some additional design investigation
- re-review at next planning session (next Monday)
from brand.
Scope
This is not the data table component, we do not have the same control since the user is the one shaping the table DOM structure - thsu we can't create a "shell" only style the native HTML markup
Current version of table styling int he github ecosystem: the blog
Design notes:
- Looks generic and unpolished
- Color looks branded/opinioated
- Spacing is very large and formated for few column use (3-4 max)
- Borders add a lot of noise
- This looks optimized for web 2.0 standards
- Mobile behavior is standard - shrink evenly
Desktop | Mobile |
---|---|
Test with real content
Without overriding the native behavior of the table
markup, things will squich on mobile which is not working on mobile and could use a collapse specific styling with sticky header.
Text content
Desktop | Mobile |
---|---|
Data
Desktop | Mobile |
---|---|
Suggestion
The only mobile solution to fix this mobile issue is to collapse and keep the table header for context like the example here. This is achieve by adding a data-label
to each <td>
Desktop | Mobile |
---|---|
from brand.
Related Issues (20)
- 🐛 [BUG] - `AnchorNav` focus is trapped on mobile HOT 1
- [Feature Request] Add support for passing additional data attributes to pagination links HOT 1
- [Feature Request] Add ability to attach analytics attributes to FAQ tab buttons HOT 1
- [Feature request] Extend the max-width of the Hero Component's H1 HOT 4
- [Feature request] Story scroll river HOT 3
- Links to Storybook from docs site don't work locally
- Inconsistent page layout in docs HOT 5
- 🐛 [BUG] - Image aspectRatio prop is not applied to the Image component HOT 1
- 🐛 [BUG] - Advice: Animation impacting Contentful Paint performance for SEO Article page HOT 2
- Anchor links for `FAQ` Questions HOT 1
- [Suggestion] Expand link area of `SubdomainNavBar`
- 🐛 [BUG] - Misalignment of icons in FormControl.Validation HOT 1
- 🐛 [BUG] - Focus outline on fullWidth Select component doesn't fill entire width
- Improve Storybook quality - remove inconsistencies and add missing content HOT 4
- [Suggestion] Improve anchor link support on mobile in `SubdomainNavBar` HOT 3
- 🐛 [BUG] - Select component does not forward the name prop/attribute value
- Errors in CTABanner documentation
- [Feature request] Specs pricing table HOT 1
- Update River interface guidelines to disallow button usage
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from brand.