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