@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 { Subtext } from '@workday/canvas-kit-react/text';
import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
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 tableRowStencil = createStencil({
    base: {
        borderBlockEnd: `${px2rem(1)} solid ${system.color.border.strong}`,
    },
});
const TableRow = createComponent('tr')({
    Component: (props, ref, Element) => {
        return _jsx(Box, { as: Element, ref: ref, ...handleCsProp(props, tableRowStencil()) });
    },
});
const tableHeaderStencil = createStencil({
    base: {
        fontWeight: system.fontWeight.medium,
        padding: `${system.padding.md} ${system.padding.xs}`,
        textAlign: 'start',
    },
});
const TableHeader = createComponent('th')({
    Component: (props, ref, Element) => {
        return (_jsx(Subtext, { as: Element, ref: ref, size: "large", ...handleCsProp(props, tableHeaderStencil()) }));
    },
});
const tableDataStencil = createStencil({
    base: {
        padding: `${system.padding.md} ${system.padding.xs}`,
        textAlign: 'start',
        code: {
            fontFamily: system.fontFamily.mono,
        },
    },
});
const TableData = createComponent('td')({
    Component: (props, ref, Element) => {
        return (_jsx(Subtext, { as: Element, ref: ref, size: "large", ...handleCsProp(props, tableDataStencil()) }));
    },
});
const tableCaptionStencil = createStencil({
    base: {
        borderCollapse: 'collapse',
        marginBlockEnd: system.gap.md,
        width: '100%',
    },
});
export const Table = createComponent('table')({
    displayName: 'Table',
    Component: (props, ref, Element) => {
        return _jsx(Box, { as: Element, ref: ref, ...handleCsProp(props, tableCaptionStencil()) });
    },
    subComponents: {
        Head: TableHead,
        Body: TableBody,
        Row: TableRow,
        Header: TableHeader,
        Data: TableData,
    },
});