Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/montogeek/remark-responsive-tables
https://github.com/montogeek/remark-responsive-tables
Last synced: 10 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/montogeek/remark-responsive-tables
- Owner: montogeek
- Created: 2018-07-24T11:34:28.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-10-31T11:16:55.000Z (about 4 years ago)
- Last Synced: 2024-08-11T09:48:40.781Z (3 months ago)
- Language: JavaScript
- Size: 3.91 KB
- Stars: 2
- Watchers: 3
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# remark-responsible-tables
Creates a responsibe table by extracting `thead` titles and injecting them into each `tbody` row,
those are hidded by default on desktop with CSS and displayed on mobile.
## Options
`classnames` (required) Object
Classnames for each element:
- `title`: `thead` titles
- `description`: Second column description
- `content`: Element that encapsulates description shown on mobile
- `mobile`: Media query class for mobile
- `description`: Media query class for desktop
```js
{
'title': 'title',
'description': 'description',
'content': 'content',
'mobile': 'mobile',
'desktop': 'desktop'
}
```
## Example
### Mobile
### Desktop
### Code
**Options**
```js
{
'classnames': {
'title': 'title',
'description': 'description',
'content': 'content',
'mobile': 'mobile',
'desktop': 'desktop'
}
}
```
```css
thead {
display: none;
/* Mobile */
{
display: table-header-group;
}
}
td {
display: flex;
flex-basis: 100%;
align-self: stretch;
/* Mobile */
{
display: table-cell;
}
}
.titles {
display: flex;
flex-direction: column;
justify-content: baseline;
/* Mobile */
{
display: none;
}
}
.content {
display: flex;
flex-direction: column;
justify-content: baseline;
}
.description.desktop {
display: none;
/* Mobile */
{
display: block;
}
}
.description.mobile {
/* Mobile */
{
display: none;
}
}
```