600 West

Table 

<table id="" class="Table " style="">
    <thead id="" class="" style="">
        <tr id="" class="tl ba" style="">
            <th id="" class="pa300 br" style="">
                Im a header
            </th>

            <th id="" class="pa300 br" style="">
                Im a different header
            </th>

            <th id="" class="pa300" style="">
                Im a cool header
            </th>

        </tr>

    </thead>

    <tbody id="" class="" style="">
        <tr id="" class="bb tl" style="">
            <td id="" class="pa300 br" style="">
                Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
            </td>

            <td id="" class="pa300 br" style="">
                Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur.
            </td>

            <td id="" class="pa300" style="">
                Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur.
            </td>

        </tr>

    </tbody>

</table>
 
<table id="{{id}}" class="Table {{modifier}}" style="{{style}}">
    {{> @children}}
</table>
 
{
  "id": null,
  "modifier": null,
  "style": null,
  "children": [
    {
      "component": "thead",
      "context": {
        "children": [
          {
            "component": "tr",
            "context": {
              "modifier": "tl ba",
              "children": [
                {
                  "component": "th",
                  "context": {
                    "modifier": "pa300 br",
                    "text": "Im a header"
                  }
                },
                {
                  "component": "th",
                  "context": {
                    "modifier": "pa300 br",
                    "text": "Im a different header"
                  }
                },
                {
                  "component": "th",
                  "context": {
                    "modifier": "pa300",
                    "text": "Im a cool header"
                  }
                }
              ]
            }
          }
        ]
      }
    },
    {
      "component": "tbody",
      "context": {
        "children": [
          {
            "component": "tr",
            "context": {
              "modifier": "bb tl",
              "children": [
                {
                  "component": "td",
                  "context": {
                    "modifier": "pa300 br",
                    "text": "Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros."
                  }
                },
                {
                  "component": "td",
                  "context": {
                    "modifier": "pa300 br",
                    "text": "Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur."
                  }
                },
                {
                  "component": "td",
                  "context": {
                    "modifier": "pa300",
                    "text": "Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur."
                  }
                }
              ]
            }
          }
        ]
      }
    }
  ]
}
  • Content: 
    import React from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';

const Table = (props) => {
    return(
        <table
            id={props.id}
            className={cx([props.modifier])}
        >
            {props.children}
        </table>
    );
};

Table.propTypes = {
    id: PropTypes.string,
    modifier: PropTypes.string
};

export default Table;
  • URL: /components/raw/table/Table.jsx
  • Filesystem Path: components/organisms/Table/Table.jsx
  • Size: 388 Bytes

Table

This is our table component. It creates an HTML Table and can be used with various children components.

Best Practices

  • Only use the table for tabular data.
  • The only immediate children should be the <thead> and <tbody> elements. Then you can go nuts throwing rows and cells inside of it.