@workday/canvas-kit-docs/dist/es6/lib/Table.js

Documentation components of Canvas Kit components

import { jsx as _jsx } from "react/jsx-runtime";
import { createComponent } from '@workday/canvas-kit-react/common';
import { Box } from '@workday/canvas-kit-react/layout';
import { Text } from '@workday/canvas-kit-react/text';
import styled from '@emotion/styled';
import { type } from '@workday/canvas-kit-react/tokens';
const TableHead = createComponent('thead')({
    Component: (props, ref, Element) => {
        return _jsx(Box, { as: Element, ref: ref, ...props });
    },
});
const TableBody = createComponent('tbody')({
    Component: (props, ref, Element) => {
        return _jsx(Box, { as: Element, ref: ref, ...props });
    },
});
const TableRow = createComponent('tr')({
    Component: (props, ref, Element) => {
        return (_jsx(Box, { as: Element, ref: ref, borderBottom: "solid 1px", borderBottomColor: "soap400", ...props }));
    },
});
const TableHeader = createComponent('th')({
    Component: (props, ref, Element) => {
        return (_jsx(Text, { as: Element, ref: ref, fontWeight: "medium", paddingX: "xxs", paddingY: "s", textAlign: "start", typeLevel: "subtext.large", ...props }));
    },
});
const StyledText = styled(Text)({
    code: {
        fontFamily: type.properties.fontFamilies.monospace,
    },
});
const TableData = createComponent('td')({
    Component: (props, ref, Element) => {
        return (_jsx(StyledText, { as: Element, ref: ref, paddingX: "xxs", paddingY: "s", textAlign: "start", typeLevel: "subtext.large", ...props }));
    },
});
export const Table = createComponent('table')({
    displayName: 'Table',
    Component: (props, ref, Element) => {
        return (_jsx(Box, { as: Element, ref: ref, borderCollapse: "collapse", width: "100%", ...props, marginBottom: "s" }));
    },
    subComponents: {
        Head: TableHead,
        Body: TableBody,
        Row: TableRow,
        Header: TableHeader,
        Data: TableData,
    },
});