@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
222 lines (213 loc) • 8.09 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { cornerShapeStencil, createComponent } from '@workday/canvas-kit-react/common';
import { mergeStyles } from '@workday/canvas-kit-react/layout';
import { createStencil, px2rem } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
import { BaseTableBody } from './parts/BaseTableBody';
import { BaseTableCaption } from './parts/BaseTableCaption';
import { BaseTableCell } from './parts/BaseTableCell';
import { BaseTableFooter } from './parts/BaseTableFooter';
import { BaseTableHead } from './parts/BaseTableHead';
import { BaseTableHeader } from './parts/BaseTableHeader';
import { BaseTableRow } from './parts/BaseTableRow';
export const baseTableStencil = createStencil({
extends: 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>
);
}
```
*/
export const BaseTable = createComponent('table')({
displayName: 'BaseTable',
Component: ({ children, ...elemProps }, ref, Element) => {
return (_jsx(Element, { ref: ref, ...mergeStyles(elemProps, 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,
/**
* `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,
/**
* `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,
/**
* `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,
/**
* `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,
/**
* `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,
/**
* `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,
},
});