pure-styled-components/dist/components/Table/Table.js

Styled Component design system based on Pure CSS for React/Preact

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/**
 * Table
 *
 */
const BaseTable = ({
  className,
  children
}) => _react.default.createElement("table", {
  className: className
}, children);

const Table = (0, _styledComponents.default)(BaseTable)`
  /* Remove spacing between table cells (from Normalize.css) */
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  border: 1px solid #cbcbcb;

  & caption {
    color: #000;
    font: italic 85%/1 arial, sans-serif;
    padding: 1em 0;
    text-align: center;
  }

  & td,
  & th {
    border-left: 1px solid #cbcbcb; /*  inner column border */
    border-width: 0 0 0 1px;
    font-size: inherit;
    margin: 0;
    overflow: visible; /*to make ths where the title is really long work*/
    padding: 0.5em 1em; /* cell padding */
  }

  /* Consider removing this next declaration block, as it causes problems when
there's a rowspan on the first cell. Case added to the tests. issue#432 */
  & td:first-child,
  & th:first-child {
    border-left-width: 0;
  }

  & thead {
    background-color: #e0e0e0;
    color: #000;
    text-align: left;
    vertical-align: bottom;
  }

  /*
striping:
   even - #fff (white)
   odd  - #f2f2f2 (light gray)
*/
  & td {
    background-color: transparent;
  }
  & td.odd {
    background-color: #f2f2f2;
  }

  /* nth-child selector for modern browsers */
  ${props => props.striped ? `& tr:nth-child(2n-1) td {
    background-color: #f2f2f2;
  }` : ``};

  /* BORDERED TABLES */
  ${props => props.bordered ? `& td {
    border-bottom: 1px solid #cbcbcb;
  }
  &-bordered tbody > tr:last-child > td {
    border-bottom-width: 0;
  }` : ``};

  /* HORIZONTAL BORDERED TABLES */

  ${props => props.horizontal ? `
  & td,
  & th {
    border-width: 0 0 1px 0;
    border-bottom: 1px solid #cbcbcb;
  }
  & tbody > tr:last-child > td {
    border-bottom-width: 0;
  }` : ``};
`;
Table.propTypes = {
  /**
   * Child components (array or single element)
   */
  children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]).isRequired
};
/** @component */

var _default = Table;
exports.default = _default;
//# sourceMappingURL=Table.js.map