@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
224 lines (216 loc) • 11.1 kB
TypeScript
import { GridProps } from '@workday/canvas-kit-react/layout';
export interface TableProps extends GridProps {
}
export declare const tableStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>, never>;
export declare const tableBodyStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>, never>;
export declare const tableCaptionStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>, never>;
export declare const tableCellStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>, never>;
export declare const tableFooterStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>;
export declare const tableHeadStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>, never>;
export declare const tableHeaderStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>, never>;
export declare const TableBody: import("@workday/canvas-kit-react/common").ElementComponent<"tbody", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>;
export declare const TableCaption: import("@workday/canvas-kit-react/common").ElementComponent<"caption", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps>;
export declare const TableCell: import("@workday/canvas-kit-react/common").ElementComponent<"td", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>;
export declare const TableFooter: import("@workday/canvas-kit-react/common").ElementComponent<"tfoot", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>;
export declare const TableHead: import("@workday/canvas-kit-react/common").ElementComponent<"thead", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>;
export declare const TableHeader: import("@workday/canvas-kit-react/common").ElementComponent<"th", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>;
/**
* `Table` 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.
* `Table` is built off of `BaseTable` and is using [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features.
*
*
* ```tsx
import {Table} from '@workday/canvas-kit-react/table';
export default function App() {
return (
<Table>
<Table.Caption>Table Caption</Table.Caption>
<Table.Head>
<Table.Row>
<Table.Header>Table Header</Table.Header>
<Table.Header>Table Header</Table.Header>
</Table.Row>
</Table.Head>
<Table.Body>
<Table.Row>
<Table.Header>Table Header</Table.Header>
<Table.Header>Table Header</Table.Header>
</Table.Row>
<Table.Row>
<Table.Header>Table Header</Table.Header>
<Table.Cell>Table Data Cell</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Header>Table Header</Table.Header>
<Table.Cell>Table Data Cell</Table.Cell>
</Table.Row>
</Table.Body>
<Table.Footer>
<Table.Row>
<Table.Header>Table Header</Table.Header>
<Table.Cell>Table Data Cell</Table.Cell>
</Table.Row>
</Table.Footer>
</Table>
);
}
```
*/
export declare const Table: import("@workday/canvas-kit-react/common").ElementComponent<"table", TableProps> & {
/**
* `Table.Caption` renders a [caption](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption) element.
*
*
* ```tsx
import {Table} from '@workday/canvas-kit-react/table';
export default function App() {
return (
<Table>
<Table.Caption>Table Caption</Table.Caption>
<Table.Body>
<Table.Row>
<Table.Header>Table Header</Table.Header>
<Table.Cell>Table Cell</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
);
}
```
*/
Caption: import("@workday/canvas-kit-react/common").ElementComponent<"caption", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps>;
/**
* `Table.Head` renders a [thead](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead) element.
*
*
* ```tsx
import {Table} from '@workday/canvas-kit-react/table';
export default function App() {
return (
<Table>
<Table.Head>
<Table.Row>
<Table.Header>Table Header</Table.Header>
<Table.Cell>Table Cell</Table.Cell>
</Table.Row>
</Table.Head>
</Table>
);
}
```
*/
Head: import("@workday/canvas-kit-react/common").ElementComponent<"thead", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>;
/**
* `Table.Body` renders a [tbody](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody) element.
*
*
* ```tsx
import {Table} from '@workday/canvas-kit-react/table';
export default function App() {
return (
<Table>
<Table.Body>
<Table.Row>
<Table.Header>Table Header</Table.Header>
<Table.Cell>Table Cell</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
);
}
```
*/
Body: import("@workday/canvas-kit-react/common").ElementComponent<"tbody", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>;
/**
* `Table.Row` renders a [tr](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr) element.
*
* **Note**: `Table.Row` is built on [Grid](/docs/components-layout-grid--basic). It will look for
* how many children are there and if those children are valid React Elements. This will adjust the
* amount of columns automatically using the `gridTemplateColumns` style prop and the width of the
* columns is also set using a `minmax` function in the `gridTemplateColumns` style prop. If a user
* would like to adjust this, it can be overwritten on `Table.Row`. See the example below for how to
* overwrite `gridTemplateColumns`.
*
*
* ```tsx
import {Table} from '@workday/canvas-kit-react/table';
export default function App() {
return (
<Table>
<Table.Head>
<Table.Row gridTemplateColumns="repeat(4, minmax(100px, 1fr))">
<Table.Header>Table Header</Table.Header>
<Table.Cell>Table Cell</Table.Cell>
</Table.Row>
</Table.Head>
</Table>
);
}
```
*/
Row: import("@workday/canvas-kit-react/common").ElementComponent<"tr", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>;
/**
* `Table.Header` renders a [th](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th) element.
*
*
* ```tsx
import {Table} from '@workday/canvas-kit-react/table';
export default function App() {
return (
<Table>
<Table.Head>
<Table.Row>
<Table.Header>Table Header</Table.Header>
<Table.Cell>Table Cell</Table.Cell>
</Table.Row>
</Table.Head>
</Table>
);
}
```
*/
Header: import("@workday/canvas-kit-react/common").ElementComponent<"th", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>;
/**
* `Table.Cell` renders a [td](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) element.
*
*
* ```tsx
import {Table} from '@workday/canvas-kit-react/table';
export default function App() {
return (
<Table>
<Table.Body>
<Table.Row>
<Table.Header>Table Header</Table.Header>
<Table.Cell>Table Cell</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
);
}
```
*/
Cell: import("@workday/canvas-kit-react/common").ElementComponent<"td", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>;
/**
* `Table.Footer` renders a [tfoot](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot) element.
*
*
* ```tsx
import {Table} from '@workday/canvas-kit-react/table';
export default function App() {
return (
<Table>
<Table.Footer>
<Table.Row>
<Table.Header>Table Header</Table.Header>
<Table.Cell>Table Cell</Table.Cell>
</Table.Row>
</Table.Footer>
</Table>
);
}
```
*/
Footer: import("@workday/canvas-kit-react/common").ElementComponent<"tfoot", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>;
};
//# sourceMappingURL=Table.d.ts.map