@kiwicom/orbit-components/es/Table/index.js

<div align="center"> <a href="https://orbit.kiwi" target="_blank"> <img alt="orbit-components" src="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components.png" srcset="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components@2x.png 2x"

import * as React from "react";
import styled from "styled-components";

import { StyledTableRow } from "./TableRow";
import { StyledTableCell } from "./TableCell";
import { StyledTableBody } from "./TableBody";
import defaultTokens from "../defaultTokens";

const StyledTableOuter = styled.div.withConfig({
  displayName: "Table__StyledTableOuter"
})(["max-width:100%;position:relative;overflow:hidden;border-radius:", ";&::after,&::before{content:\" \";display:", ";position:absolute;width:16px;height:100%;top:0;transition:opacity ", " ease-in-out;}&::after{opacity:", ";background-image:linear-gradient(to right,transparent,rgba(186,199,213,0.23));right:0;}&::before{opacity:", ";left:0;background-image:linear-gradient(to left,transparent,rgba(186,199,213,0.23));}"], ({ theme }) => theme.orbit.borderRadiusNormal, ({ showShadows }) => showShadows ? "block" : "none", ({ theme }) => theme.orbit.durationNormal, ({ showRight }) => showRight ? "1" : "0", ({ showLeft }) => showLeft ? "1" : "0");

StyledTableOuter.defaultProps = {
  theme: defaultTokens
};

const StyledTableInner = styled.div.withConfig({
  displayName: "Table__StyledTableInner"
})(["width:100%;overflow-x:", ";"], ({ showShadows }) => showShadows ? "scroll" : "hidden");

const StyledTable = styled.table.withConfig({
  displayName: "Table__StyledTable"
})(["display:table;border-collapse:collapse;border-spacing:0;width:100%;max-width:100%;white-space:nowrap;& ", " > ", "{border-bottom:1px solid ", ";&:nth-of-type(even){background-color:", ";transition:background-color ", " ease-in-out;}&:last-child{border:0;}&:hover{background-color:", ";}}& ", "{min-height:", ";padding:", ";}"], StyledTableBody, StyledTableRow, ({ theme }) => theme.orbit.paletteCloudNormal, ({ theme }) => theme.orbit.paletteCloudLight, ({ theme }) => theme.orbit.durationFast, ({ theme }) => theme.orbit.paletteCloudNormal, StyledTableCell, ({ compact }) => compact ? "24px" : "48px", ({ theme, compact }) => compact ? `${theme.orbit.spaceXSmall} ${theme.orbit.spaceSmall}` : `${theme.orbit.spaceSmall} ${theme.orbit.spaceMedium}`);

StyledTable.defaultProps = {
  theme: defaultTokens
};

class Table extends React.PureComponent {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.state = {
      showShadows: false,
      showRight: false,
      showLeft: false
    }, this.handleResize = () => {
      const { table, outer } = this;
      if (table && outer) {
        const showShadows = table.clientWidth > outer.clientWidth;
        this.setState({ showShadows, showRight: showShadows });
      }
    }, this.handleScroll = () => {
      const { inner, table, outer } = this;
      const { showShadows } = this.state;
      if (showShadows && inner && table && outer) {
        this.setState({
          showLeft: inner.scrollLeft >= 5,
          showRight: inner.scrollLeft + outer.clientWidth <= table.clientWidth
        });
      }
    }, _temp;
  }

  componentDidMount() {
    window.addEventListener("resize", this.handleResize);
    this.handleResize();
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.handleResize);
  }

  render() {
    const { children, compact = false, dataTest } = this.props;
    const { showShadows, showLeft, showRight } = this.state;
    return React.createElement(
      StyledTableOuter,
      {
        innerRef: outer => {
          this.outer = outer;
        },
        showShadows: showShadows,
        showLeft: showLeft,
        showRight: showRight,
        "data-test": dataTest
      },
      React.createElement(
        StyledTableInner,
        {
          innerRef: inner => {
            this.inner = inner;
          },
          onScroll: this.handleScroll,
          showShadows: showShadows
        },
        React.createElement(
          StyledTable,
          {
            compact: compact,
            innerRef: table => {
              this.table = table;
            }
          },
          children
        )
      )
    );
  }
}

export default Table;