UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

227 lines (218 loc) • 8.39 kB
"use strict"; var __importDefault = (this && this.__importDefault) || function (mod) { return (mod && mod.__esModule) ? mod : { "default": mod }; }; Object.defineProperty(exports, "__esModule", { value: true }); exports.BaseTable = exports.baseTableStencil = void 0; const react_1 = __importDefault(require("react")); const layout_1 = require("@workday/canvas-kit-react/layout"); const common_1 = require("@workday/canvas-kit-react/common"); const BaseTableHead_1 = require("./parts/BaseTableHead"); const BaseTableBody_1 = require("./parts/BaseTableBody"); const BaseTableRow_1 = require("./parts/BaseTableRow"); const BaseTableHeader_1 = require("./parts/BaseTableHeader"); const BaseTableCell_1 = require("./parts/BaseTableCell"); const BaseTableFooter_1 = require("./parts/BaseTableFooter"); const BaseTableCaption_1 = require("./parts/BaseTableCaption"); const canvas_kit_styling_1 = require("@workday/canvas-kit-styling"); const canvas_tokens_web_1 = require("@workday/canvas-tokens-web"); exports.baseTableStencil = (0, canvas_kit_styling_1.createStencil)({ base: { name: "ojxa5s", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);border:0.0625rem solid var(--cnvs-sys-color-border-container);border-radius:var(--cnvs-sys-shape-x2);overflow:auto;color:var(--cnvs-sys-color-text-default);" } }, "base-table-3d1e0c"); /** * `BaseTable` is a simple styled compound component that renders a [table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) element. * It is used to present information in a two-dimensional table comprised of rows and columns of cells containing data. * * * ```tsx import {BaseTable} from '@workday/canvas-kit-react/table'; export default function App() { return ( <BaseTable> <BaseTable.Caption>Table Caption</BaseTable.Caption> <BaseTable.Head> <BaseTable.Row> <BaseTable.Header>Table Header</BaseTable.Header> <BaseTable.Header>Table Header</BaseTable.Header> </BaseTable.Row> </BaseTable.Head> <BaseTable.Body> <BaseTable.Row> <BaseTable.Header>Table Header</BaseTable.Header> <BaseTable.Header>Table Header</BaseTable.Header> </BaseTable.Row> <BaseTable.Row> <BaseTable.Header>Table Header</BaseTable.Header> <BaseTable.Cell>Table Data Cell</BaseTable.Cell> </BaseTable.Row> <BaseTable.Row> <BaseTable.Header>Table Header</BaseTable.Header> <BaseTable.Cell>Table Data Cell</BaseTable.Cell> </BaseTable.Row> </BaseTable.Body> <BaseTable.Footer> <BaseTable.Row> <BaseTable.Header>Table Header</BaseTable.Header> <BaseTable.Cell>Table Data Cell</BaseTable.Cell> </BaseTable.Row> </BaseTable.Footer> </BaseTable> ); } ``` */ exports.BaseTable = (0, common_1.createComponent)('table')({ displayName: 'BaseTable', Component: ({ children, ...elemProps }, ref, Element) => { return (react_1.default.createElement(Element, { ref: ref, ...(0, layout_1.mergeStyles)(elemProps, (0, exports.baseTableStencil)()) }, children)); }, subComponents: { /** * `BaseTable.Caption` renders a [caption](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption) element. * * * ```tsx import {BaseTable} from '@workday/canvas-kit-react/table'; export default function App() { return ( <BaseTable> <BaseTable.Caption>Table Caption</BaseTable.Caption> <BaseTable.Body> <BaseTable.Row> <BaseTable.Header>Table Header</BaseTable.Header> <BaseTable.Cell>Table Cell</BaseTable.Cell> </BaseTable.Row> </BaseTable.Body> </BaseTable> ); } ``` */ Caption: BaseTableCaption_1.BaseTableCaption, /** * `BaseTable.Head` renders a [thead](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead) element. * * * ```tsx import {BaseTable} from '@workday/canvas-kit-react/table'; export default function App() { return ( <BaseTable> <BaseTable.Head> <BaseTable.Row> <BaseTable.Header>Table Header</BaseTable.Header> <BaseTable.Cell>Table Cell</BaseTable.Cell> </BaseTable.Row> </BaseTable.Head> </BaseTable> ); } ``` */ Head: BaseTableHead_1.BaseTableHead, /** * `BaseTable.Body` renders a [tbody](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody) element. * * * ```tsx import {BaseTable} from '@workday/canvas-kit-react/table'; export default function App() { return ( <BaseTable> <BaseTable.Body> <BaseTable.Row> <BaseTable.Header>Table Header</BaseTable.Header> <BaseTable.Cell>Table Cell</BaseTable.Cell> </BaseTable.Row> </BaseTable.Body> </BaseTable> ); } ``` */ Body: BaseTableBody_1.BaseTableBody, /** * `BaseTable.Row` renders a [tr](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr) element. * * ```tsx import {BaseTable} from '@workday/canvas-kit-react/table'; export default function App() { return ( <BaseTable> <BaseTable.Head> <BaseTable.Row> <BaseTable.Header>Table Header</BaseTable.Header> <BaseTable.Cell>Table Cell</BaseTable.Cell> </BaseTable.Row> </BaseTable.Head> </BaseTable> ); } ``` */ Row: BaseTableRow_1.BaseTableRow, /** * `BaseTable.Header` renders a [th](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th) element. * * * ```tsx import {BaseTable} from '@workday/canvas-kit-react/table'; export default function App() { return ( <BaseTable> <BaseTable.Head> <BaseTable.Row> <BaseTable.Header>Table Header</BaseTable.Header> <BaseTable.Cell>Table Cell</BaseTable.Cell> </BaseTable.Row> </BaseTable.Head> </BaseTable> ); } ``` */ Header: BaseTableHeader_1.BaseTableHeader, /** * `BaseTable.Cell` renders a [td](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) element. * * * ```tsx import {BaseTable} from '@workday/canvas-kit-react/table'; export default function App() { return ( <BaseTable> <BaseTable.Body> <BaseTable.Row> <BaseTable.Header>Table Header</BaseTable.Header> <BaseTable.Cell>Table Cell</BaseTable.Cell> </BaseTable.Row> </BaseTable.Body> </BaseTable> ); } ``` */ Cell: BaseTableCell_1.BaseTableCell, /** * `BaseTable.Footer` renders a [tfoot](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot) element. * * * ```tsx import {BaseTable} from '@workday/canvas-kit-react/table'; export default function App() { return ( <BaseTable> <BaseTable.Footer> <BaseTable.Row> <BaseTable.Header>Table Header</BaseTable.Header> <BaseTable.Cell>Table Cell</BaseTable.Cell> </BaseTable.Row> </BaseTable.Footer> </BaseTable> ); } ``` */ Footer: BaseTableFooter_1.BaseTableFooter, }, });