@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
225 lines (216 loc) • 8.43 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.BaseTable = exports.baseTableStencil = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const common_1 = require("@workday/canvas-kit-react/common");
const layout_1 = require("@workday/canvas-kit-react/layout");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
const BaseTableBody_1 = require("./parts/BaseTableBody");
const BaseTableCaption_1 = require("./parts/BaseTableCaption");
const BaseTableCell_1 = require("./parts/BaseTableCell");
const BaseTableFooter_1 = require("./parts/BaseTableFooter");
const BaseTableHead_1 = require("./parts/BaseTableHead");
const BaseTableHeader_1 = require("./parts/BaseTableHeader");
const BaseTableRow_1 = require("./parts/BaseTableRow");
exports.baseTableStencil = (0, canvas_kit_styling_1.createStencil)({
extends: common_1.cornerShapeStencil,
base: { name: "3eg1fs", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-normal, 400);line-height:var(--cnvs-sys-line-height-subtext-lg, 1.25rem);font-size:var(--cnvs-sys-font-size-subtext-lg, 0.875rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, 0.015rem);--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);border:0.0625rem solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));overflow:auto;color:var(--cnvs-sys-color-fg-default);" }
}, "base-table-1805af");
/**
* `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 ((0, jsx_runtime_1.jsx)(Element, { ref: ref, ...(0, layout_1.mergeStyles)(elemProps, (0, exports.baseTableStencil)()), children: 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,
},
});