smart-react-components/table/Table.js

React UI library, wide variety of editable ready to use Styled and React components.

'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var styled = require('styled-components');
var styled__default = _interopDefault(styled);
require('../index-56ba89df.js');
var Table$1 = require('../element/Table.js');

const customKeys = {
    size: (v, t) => `
        font-size: ${t.table.fontSize[v]};

        > * > tr > {
            th, td {
                padding: ${t.table.padding[v]};
            }
        }
    `
};
var Table = styled__default(Table$1).attrs(({ type = "light", size = "default", borderY = true, sticky = true }) => ({
    customKeys,
    type,
    size,
    borderY,
    sticky
}))(({ theme, type, borderX, borderY, striped, hover, sticky }) => `
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    empty-cells: hide;

    > * > tr > * {
        border: solid 0 ${theme.src.type[type].table.border};
        background: ${theme.src.type[type].table.background};
        color: ${theme.src.type[type].table.font};

        ${sticky ? `position: sticky;` : ""}
    }

    ${borderX
    ? `
        > * > tr > {
            *:first-child {
                border-left-width: 1px;
            }

           * {
                border-right-width: 1px;
            }
        }
    ` : ""}

    ${borderY
    ? `
        > * > tr > * {
            border-bottom-width: 1px;
        }

        > thead > tr:nth-last-of-type(1) > * {
            border-bottom-width: 2px;
        }

        > thead > tr > *,
        > tbody:first-child > tr:first-child > * {
            border-top-width: 1px;
        }
    ` : ""}

    ${striped ? `
        ${theme.src.table.stripedOrientation == "even"
    ? `
            > thead > tr > * {
                background: ${theme.src.type[type].table.stripedBackground};
                color: ${theme.src.type[type].table.stripedFont};
            }
        ` : ""}

        > tbody > tr:nth-child(${theme.src.table.stripedOrientation}) > * {
            background: ${theme.src.type[type].table.stripedBackground};
            color: ${theme.src.type[type].table.stripedFont};
        }
    ` : ""}

    ${(hover && !theme.isMobile) ? `
        > tbody > tr {
            > * {
                transition: ${theme.src.table.hoverTransition};
                transition-property: background, color;
            }

            &:hover > * {
                background: ${theme.src.type[type].table.hoverBackground};
                color: ${theme.src.type[type].table.hoverFont};
            }
        }
    ` : ""}
`);

module.exports = Table;