/** * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file * distributed with this work for additional information * regarding copyright ownership. The ASF licenses this file * to you under the Apache License, Version 2.0 (the * "License"); you may not use this file except in compliance * with the License. You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ import * as React from "react"; import styled from "styled-components"; import { get } from "../../utils/theme"; import { mq } from "../../styles/responsive"; const Wrapper = styled.div` overflow-x: auto; padding: 2px; margin-bottom: 30px; ${mq({ marginBottom: [20, 40], maxWidth: ["calc(100vw - 40px)", "calc(100vw - 80px)", "100%"] })}; `; const TableStyled = styled.table` padding: 0; table-layout: auto; box-shadow: 0 0 0 1px ${get("colors.border")}; background-color: transparent; border-spacing: 0; border-collapse: collapse; border-style: hidden; border-radius: ${get("radii")}; font-size: 14px; color: ${get("colors.tableColor")}; ${mq({ overflowX: ["initial", "initial", "initial", "hidden"], display: ["table", "table", "table", "table"] })} & thead { color: ${get("colors.theadColor")}; background: ${get("colors.theadBg")}; } & thead th { font-weight: 400; padding: 10px; text-align: left; &:nth-of-type(1) { ${mq({ width: ["20%", "20%", "20%", "auto"] })}; } &:nth-of-type(2) { ${mq({ width: ["10%", "10%", "10%", "auto"] })}; } &:nth-of-type(3) { ${mq({ width: ["10%", "10%", "10%", "auto"] })}; } &:nth-of-type(4) { ${mq({ width: ["10%", "10%", "10%", "auto"] })}; } &:nth-of-type(5) { ${mq({ width: ["20%", "20%", "20%", "auto"] })}; } } & tbody td { padding: 10px; line-height: 2; font-weight: 200; text-align: left; } & tbody > tr { display: table-row; border-top: 1px solid ${get("colors.border")}; } ${get("styles.table")}; `; export const Table = props => ( <Wrapper> <TableStyled {...props} /> </Wrapper> );