@axeptio/design-system/build/src/Core/Table/index.jsx

Design System for Axeptio

import styled, { css } from 'styled-components';

const paddingX = '20px';

const borderRadius = '6px';

const cellStyle = css`
  text-align: left;

  &:first-child {
    padding-left: ${paddingX};
  }
  &:last-child {
    padding-right: ${paddingX};
  }
`;

const TableCell = styled.td`
  ${cellStyle}
  background: ${({ theme }) => theme.colors.grey.v50};
  padding: 15px 10px;
`;

const TableHead = styled.thead``;

const TableRow = styled.tr`
  &:not(:last-child) {
    ${TableCell} {
      border-bottom: 1px solid ${({ theme }) => theme.colors.grey.v200};
    }
  }
`;

const TableHeadColumn = styled.th`
  ${cellStyle}
  color: ${({ theme }) => theme.colors.white};
  font-weight: 700;
  line-height: 115%;
  padding: 10px 10px;
  background-color: ${({ theme }) => theme.colors.secondary};
`;

const TableBody = styled.tbody``;

const Table = styled.table`
  width: 100%;
  border-spacing: 0;
  box-shadow:
    0 12px 24px 0 rgba(0, 0, 0, 0.05),
    0 2px 6px 0 rgba(0, 0, 0, 0.05),
    0 1px 1px 0 rgba(0, 0, 0, 0.05);

  ${({ noBorderBottom }) =>
    noBorderBottom
      ? `
    border-radius: ${borderRadius} ${borderRadius} 0 0;
  `
      : `
    border-radius: ${borderRadius};`}
  overflow: hidden;
`;

Table.Cell = TableCell;
Table.Head = TableHead;
Table.Row = TableRow;
Table.HeadColumn = TableHeadColumn;
Table.Body = TableBody;

export default Table;