@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
227 lines (218 loc) • 8.39 kB
JavaScript
"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,
},
});