Skip to content

LLazyEmail/react-email-table

Repository files navigation

yarn add react-email-components-table

Greenkeeper badge Example Rollup React Component NPM Package codecov npm npm

Example React component "library" using rollup that is published to npm.

My requirements for this package were

  1. Use babel
  2. Use semantic-release
  3. Use sass
  4. Support umd and es modules
  5. Use storybook
  6. Make the exported components really simple

├── xxx
│   ├── xxx
│   │   ├── **/*.xxx
│   ├── xxx
│   ├── images
│   ├── xxx
│   ├── js
│   │   ├── **/*.js
│   └── xxx
├── dist (or build)
├── 
├── 
├── 
├── 
├── README.md
├── package.json
├── 
└── .gitignore

Components inside

  • Table
  • BasicTable
  • Row
  • Rows
  • Section
  • TableLeft

Table

Main Table component, aka Raw table

BasicTable

this is a simple wrapper around table, with just a set of basic attributes

<table 
    border="0" 
    cellpadding="0" 
    cellspacing="0" 
    role="presentation" 
    width="100%">
    <tbody>
      ...
    </tbody>
  </table>

Row

Row should help a little bit to remove a number of lines. Can be with or without <tbody>

 <table
    className={className}
    dir={reverse && 'rtl'}
>
    <tbody className={bodyClassName}>
    <tr>
        {children}
    </tr>
    </tbody>
</table>

Rows

Rows is my interpretation of a previous component. I just want to have a support for a few TR`s if it will be necessary

like:

<tbody>
    <tr>
        <td align="center" valign="top" class="big-title" style="-webkit-text-size-adjust: 100%; ...">...</td>
    </tr>
    <tr>
        <td align="center" valign="top" style="padding-bottom: 30px; ...">
            ...
        </td>
    </tr>
    <tr>
        <td align="center" valign="top" class="board-pic" style="padding-bottom: 40px; ...">...</td>
    </tr>

Section

TableLeft

Arthur Tkachenko articles

React Design System