Nimble Prime Musketeers

    remark-responsive-tables

    1.0.0 • Public • Published

    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
    {
      'title': 'title',
      'description': 'description',
      'content': 'content',
      'mobile': 'mobile',
      'desktop': 'desktop'
    }

    Example

    Mobile

    image

    Desktop

    image

    Code

    Options

    {
      'classnames': {
        'title': 'title',
        'description': 'description',
        'content': 'content',
        'mobile': 'mobile',
        'desktop': 'desktop'
      }
    }
    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;
      }
    }

    Keywords

    none

    Install

    npm i remark-responsive-tables

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    4.42 kB

    Total Files

    4

    Last publish

    Collaborators

    • montogeek